CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Kingfox
Kingfox

Reputation: 129

React-Native navigation in Child screens?

How do I use navigation in Child screens?

I create the navigation in the App.js. and then create stack navigators for every screen (In this case FindGroupScreen). When In FindGroupScreen.js I create a child screen (TravelListDetail) where I want to use the navigation. When in FindGroupScreen I normally just use 

this.props.navigation.navigate('Chat');

to navigate to another screen. But this does not work in the child screen (TravelListDetail). What should I do to make navigation work in sub screens?

App.js:

imports ...

const FindGroupStack = createStackNavigator({
    FindGroup: FindGroupScreen,
},
{ headerMode: 'none', }
);

// ...stacks

const MainBottomTab = createBottomTabNavigator(
{
    Home: HomeStack,
    FindGroup: FindGroupStack,
    Trip: TripStack,
    Chat: ChatStack,
    Menu: MenuStack,
},
{
navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') {
      //iconName = `facebook${focused ? '' : '-outline'}`;
      iconName = `home`;
    } else if (routeName === 'FindGroup') {
      iconName = `map-marked-alt`;
    } else if (routeName === 'Trip') {
      iconName = `map-marker-alt`;
    } else if (routeName === 'Chat') {
      iconName = `comments`;
    } else if (routeName === 'Menu') {
      iconName = `bars`;
    }
    //return <Ionicons name={iconName} size={25} color={tintColor} />;
    return <Icon name={iconName} size={20} color={tintColor} />;
  },
}),
tabBarOptions: {
  activeTintColor: '#f0ca6d',
  inactiveTintColor: '#ffffff',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: '#303030',
  },
},
}
);

export default createSwitchNavigator(
{
    AuthLoading: AuthLoadingScreen,
    App: MainBottomTab,
    Auth: AuthStack,
},
{
    initialRouteName: 'AuthLoading',
}
);

FindGroupScreen:

imports ...
import TravelListDetail from '../Detail/TravelListDetail';

class FindGroupScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedItem: null,
      phase: 'phase-0',
    };
  }

  renderPage() {
    const { selectedItem, position, detailItem, phase } = this.state;

    return (
      <View style={{ flex: 1, backgroundColor: '#606060' }}>
        <List
          selectedItem={selectedItem}
          onItemPress={this.onItemPressed}
          phase={phase}
        />
        <TravelListDetail
          phase={phase}
          selectedItem={selectedItem}
          onBackPress={this.onBackPressed}
          onSharedElementMovedToDestination={
            this.onSharedElementMovedToDestination
          }
          onSharedElementMovedToSource={this.onSharedElementMovedToSource}
        />
      </View>
    );
  }
  render() {
    const {
      phase,
    } = this.state;

    return (
      <SharedElementRenderer>
        <View style={styles.container}>
          <ToolbarBackground
            isHidden={phase !== 'phase-1' && phase !== 'phase-2'}
          />
          {this.renderPage()}
        </View>
      </SharedElementRenderer>
    );
  }
}

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

export default FindGroupScreen;

TravelListDetail:

      <View style={styles2.viewCenter}>
        <TouchableOpacity
            style={styles2.buttonStyle}
            activeOpacity = { .5 }
            onPress={ this.gotoChatScreen }
        >
          <Text style={styles2.buttonTextStyle}> Share Travel </Text>
        </TouchableOpacity>
      </View>

Upvotes: 0

Views: 1147

Answers (1)

Yossi
Yossi

Reputation: 6027

Pass it as a prop to the child screen.

<TravelListDetail
          navigation={this.props.navigation}
          phase={phase}
          selectedItem={selectedItem}
          onBackPress={this.onBackPressed}
          onSharedElementMovedToDestination={
            this.onSharedElementMovedToDestination
          }
          onSharedElementMovedToSource={this.onSharedElementMovedToSource}
        />

Then, in the child, you write:

props.navigation.navigate('Welcome')

(with a this. prefix if it is a class component).

Upvotes: 2

Related Questions