CODEWITHSUNDEEP
javascriptreactjsreact-native
Seb
Seb

Reputation: 432

How to pass parameters for a sub screen with react native?

I have a screen tab contains 2 components

I want to pass my param id

    this.props.navigation.navigate("TabsScreen2", {id: idFilm})

TabsScreen2 is my screen bottomtab

My bottomTab

const MainStack = createStackNavigator();
const MainStackScreen = () => (
  <MainStack.Navigator>
    <MainStack.Screen
      name="TabsScreen2"
      component={TabsScreenFilmDetail}
      options={{ title: "FilmDetail Screen title" }}>
        
    </MainStack.Screen>
  </MainStack.Navigator>
);

        const TabsFilmDetail = createBottomTabNavigator();
    const TabsScreenFilmDetail = (e) =>  {
      console.log('e ', e.route.params )
      return (
        <TabsFilmDetail.Navigator>
          <TabsFilmDetail.Screen name="FilmDetail" params={e} component={FilmDetailStackScreenNav} />
          <TabsFilmDetail.Screen name="FavoriteList" component={FavoriteListStackScreenNav} />
        </TabsFilmDetail.Navigator>
      );
    }

in my log , i have my id is ok but how to pass my param to my <TabsFilmDetail.Screen name="FilmDetail"> I try params parameter or other property and it's didn't work. It exist a solution to pass a simple param ? thanks for help

Upvotes: 0

Views: 154

Answers (2)

usman faisal
usman faisal

Reputation: 54

I think the right keyword you are looking for is initialParams

Like this in one of my codes

enter image description here

So I think in case of your code, you need to change from this

<TabsFilmDetail.Screen name="FilmDetail" params={e} component={FilmDetailStackScreenNav} />

to this

<TabsFilmDetail.Screen name="FilmDetail" initialParams={e} component={FilmDetailStackScreenNav} />

Upvotes: 1

Wen W
Wen W

Reputation: 2647

try this:

            <TabsFilmDetail.Screen name="FilmDetail">
                {(props) => <FilmDetailStackScreenNav {...props} e={e.route.params} />}
            </Tab.Screen>

Upvotes: 1

Related Questions