React Native How to make a Carousel redirect to another page with the respective id selected

Question

I am new with react native, and I am trying to make the once a carousel component card is pressed, it should navegate to other page and send the respective id from the card array.

this is my '.App.js' page and it works properly:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Receita' component={selectType} />
        <Stack.Screen name='Informe os ingredientes' component={findRecipe} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

this is the carousel array:

const carouselItems = [
  {
    id: 1,
    title: "Doce",
    text: "[TEXTO DESCRITIVO]",
    illustration: require('../../assets/sobremesa.jpg'),
  },
  {
    id: 2,
    title: "Salgado",
    text: "[DESCRIÇÃO]",
    illustration: require('../../assets/refeicao.jpg'),
  },
]

and this one is the Carousel component that I would like to update and once it is pressed, it should send the user to the 'findRecipe' page

return (
    <View style={styles.container} >
      <TouchableOpacity onPress={goForward}>
        <Text style={styles.titleText}>Selecione o tipo de receita</Text>
      </TouchableOpacity>
      <Carousel
        layout={"default"}
        ref={ref => carousel = ref}
        data={carouselItems}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        renderItem={renderItem}
        onSnapToItem={index => setState({ activeIndex: index })}
        hasParallaxImages={true}
      />
      <Button title='INGREDIENTES' onPress={() => navigation.navigate('Informe os ingredientes')}></Button>
    </View >
  );

I got a way to do it in a Button component, but I really need to do it on the Carousel card and send the id of the respective register that was pressed. Can anyone help on it?

Answer 1

The example send is working, thanks a lot Tuan! snack.expo.io/KJl_IKU3D – tuan.tran 29 mins ago