so I am new to react native and know the basics about using onPress with buttons but since I have changed my button to this LinearGradient code below, I am kind of lost using onPress. Right now I only have onPress outputting to my terminal just to test and make sure its working.
In the end I want to navigate to another page which I am assuming I will use some navigation API for that. Anywho, I apologize for the ignorance and I really appreciate your time! Thank you!!
The place I put my onPress code now was teh only place I could think to put it.
Well now realizing LinearGradient does not work with onPress…How should I go about navigating that linearGradient to another page?
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, Animated } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient'; export default class GetStartedButton extends Component { constructor(props) { super(props) this.fadeAnimation = new Animated.Value(0) } componentDidMount() { Animated.timing(this.fadeAnimation, { toValue: 1, duration: 5000, useNativeDriver: true, }).start() } render(){ return( <Animated.View style={[styles.container, { opacity: this.fadeAnimation}]}> <TouchableOpacity> <LinearGradient onPress={() => console.log("clicked")} colors={['#DB004C','#FC008E']} style={styles.linearGradient} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} > <Text style={styles.text}> Get Started </Text> </LinearGradient> </TouchableOpacity> </Animated.View> ) } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, linearGradient: { alignItems: 'center', justifyContent: 'center', borderRadius: 10, width: 340, padding: 20, }, text: { color: 'white', fontSize: 20, justifyContent: 'center', alignItems: 'center', } });
Advertisement
Answer
About that ?
<LinearGradient colors={['#DB004C', '#FC008E']} style={styles.linearGradient} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} > <TouchableOpacity onPress={() => console.log('clicked')} style={{ alignItems: 'center', justifyContent: 'center' }} > <Text style={styles.text}>Get Started</Text> </TouchableOpacity> </LinearGradient>