Question 34955 in React native Question posted in
The official React Native documentation can be found here.

Passing data via {route} between two screens with component in between – React native

Please bear with a newbie at ReactNative. Here is my main screen.

export default function App() {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="CategoryScreen" component={CategoriesScreen} />
        <Stack.Screen name="MealsOverviewScreen" component={MealsOverView} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

and then in the CategoriesScreen i have

import React from 'react';
import {View, StyleSheet} from 'react-native';
import FlatlistDormeel from '../components/FlatlistDormeel';
import {CATEGORIES} from '../data/dummy-data';

function CategoriesScreen({navigation}) {
  function onPressHandler() {
    navigation.navigate('MealsOverviewScreen', {
      catdata: CATEGORIES,
    });
  }
  return (
    <View>
      <FlatlistDormeel
        style={styles.catcontainer}
        data={CATEGORIES}
        onPress={onPressHandler}
      />
    </View>
  );
}
export default CategoriesScreen;

const styles = StyleSheet.create({
  catcontainer: {
    flex: 1,
  },
});

followed by FlastList

function FlatlistDormeel({data, onPress}) {
  function renderCategoryItem({item}) {
    return <DormeeelGridCard item={item} onPress={onPress} />;
  }
  return (
    <View style={styles.catgridcontainer}>
      <FlatList
        data={data}
        renderItem={renderCategoryItem}
        keyExtractor={item => item.id}
        numColumns={2}
      />
    </View>
  );
}

Then the card

function DormeeelGridCard({item, onPress}) {
  return (
    <View style={[styles.gridcard, {backgroundColor: item.color}]}>
      <Pressable
        style={({pressed}) => [
          styles.button,
          pressed ? styles.buttonpressed : null,
        ]}>
        <View style={styles.innercontainer}>
          <Text style={styles.gridtext}>{item.title}</Text>
        </View>
      </Pressable>
    </View>
  );
}

and this is finally where i am navigating to from the CategoriesScreen

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {useRoute} from '@react-navigation/native';

function MealsOverView() {
  const route = useRoute();
  console.log(route);
  return (
    <View styles={styles.container}>
      <Text> this is the thing{route.params.catdata}</Text>
    </View>
  );
}
export default MealsOverView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignContent: 'center',
  },
});

Currently though i am able to navigate from the CategoriesScreen to MealsOverview using the onPress pointer in a nested way, is there a way to pass the unique category id which (FlatlistDormeel makes use of for rendering grids), into the MealsOverview.js as part of navigation. I guess the other way is to create the flatlist inside the CategoriesScreen.js.

Here is the Categories data

[{"color": "#f5428d", "id": "c1", "title": "Italian"}, {"color": "#f54242", "id": "c2", "title": "Quick & Easy"}, {"color": "#f5a442", "id": "c3", "title": "Hamburgers"}, {"color": "#f5d142", "id": "c4", "title": "German"}, {"color": "#368dff", "id": "c5", "title": "Light & Lovely"}, {"color": "#41d95d", "id": "c6", "title": "Exotic"}, {"color": "#9eecff", "id": "c7", "title": "Breakfast"}, {"color": "#b9ffb0", "id": "c8", "title": "Asian"}, {"color": "#ffc7ff", "id": "c9", "title": "French"}, {"color": "#47fced", "id": "c10", "title": "Summer"}]
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks everyone, i figured out one can pass the navigation prop from an actual screen to any of the child components so ended up using this

    function CategoriesScreen({navigation}) {
  return (
    <View>
      <FlatlistDormeel
        style={styles.catcontainer}
        data={CATEGORIES}
        navigation={navigation}
      />
    </View>

    and then using it in the FlatlistDormeel.js

    function FlatlistDormeel({data, navigation}) {
  function renderCategoryItem({item}) {
    function onPressHandler() {
      navigation.navigate('MealsOverviewScreen', {category: item.id});
    }


  2. 0

    You can pass parameters to the screen using initial params

    https://reactnavigation.org/docs/params/#initial-params

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search