LinearGradient and onPress for navigation

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',
    }
});

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>

Advertisement

Answer