React native navigation example

Question

I want to implement navigation betwen these screens;

I want to have 5 screens; 1 is Login screen(first screen when user open app) 2 is Main screen with 2 bottom tabs in it...Each of these two tabs will have specific header. 3&4 is some other screens

I don't find any solution on google with these...also I was trying to implement this but I don't manage to do it.

Can anyone please give me just example how to implement stacknavigator and createbottomnavigation.

please check this answer out at this [link](https://stackoverflow.com/a/51442386/5501242) — nahoang, Jul 20 '18 at 12:55

Ali SabziNezhad · Answer 1 · 2018-07-20T15:51:12.567

in index.js you can define your navigation structure with react navigation like this:

import Profile from './../views/Profile';
import Home from './../views/Home';
import Login from './../views/Login'
import Splash from './../views/SplashScreen'

    const Routes = createStackNavigator({
        Splash: { screen: Splash },
        Login: { screen: Login },
        Main: {
            screen: createBottomTabNavigator({
                Home: { screen: Home},
                Profile: { screen: Profile },
            }, {initialRouteName:Home})
        }
    },{ initialRouteName: Splash});

export default class App extends Component{
    constructor(props, context) {
        super(props, context);
        this.state = {
        }
    }

    render() {
        return (
            <Routes />
        )
    }
}

each view can be an stack navigator like this:

const homeStack = createStackNavigator({
    screen1: { screen: screen1},
    screen2: { screen: screen2},
},{ initialRouteName: screen1});

const Routes = createStackNavigator({
       Splash: { screen: Splash },
       Login: { screen: Login },
       Main: {
           screen: createBottomTabNavigator({
                Home: { screen: homeStack},
                Profile: { screen: Profile },
           }, {initialRouteName:Home})
      }
},{ initialRouteName: Splash});

also you can read react navigation docs. I hope this may help you.

EDIT

for make custom header, you can make somthing like this:

export default class Header extends React.PureComponent {

  constructor(props, context) {
    super(props)
    this.state = {
      height: 80,
      renderItemLeft: props.renderItemLeft,
    }
  }

  componentWillReceiveProps(nextProps: any) {
    if (nextProps.renderItemLeft != this.state.renderItemLeft) {
      this.setState({ renderItemLeft: nextProps.renderItemLeft })
    }
  }

  renderTitle = () => {
    if (this.props.title) {
      return (
        <View style={{ flexDirection: 'column', flex: 3, justifyContent: 'center' }}>
          <View style={{ alignSelf: 'flex-start' }}>
            <Text style={{ fontSize:17, color: 'white' }]}>{this.props.title}</Text>
          </View>
        </View>
      )
    }
  }

  renderBack = () => {
    if (this.props.back) {
      return (
        <View style={{ marginTop: 3 }}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.goBack()
            }}
            style={{ alignSelf: 'flex-start' }}>
            <Icon name="md-arrow-forward" size={23} color="black" />
          </TouchableOpacity>
        </View>
      )
    }
  }

  render() {
    return (
      <View style={[{
        height: this.state.height, backgroundColor: this.props.backgroundColor, width: '100%'}]}>
        <View style={{ flex: 1, flexDirection: 'row', marginTop: Platform.OS == 'ios' ? 17 : 3 }}>
          {/* right side */}
          <View style={{ flexDirection: 'column', flex: 1, justifyContent: 'center', marginLeft: 12 }}>
            {this.renderBack()}
            {this.renderTitle()}
          </View>

          {/* left side */}
          <View style={{ flex: 1, justifyContent: 'flex-start' }}>
            {this.state.renderItemLeft ? this.state.renderItemLeft : null}
          </View>

        </View>
      </View>
    )
  }
}

and for use it, add this code to the start of render function in each page:

<Header
    back={false}
    showBorder={true}
    backgroundColor={'green'}
    title={'profile'}
    renderItemLeft ={<View> <Text>left button!</Text> </View>}
/>

note that this is just an example code and may need some changes to work correctly.

Thank you! How can I implement dofferent header for each of the screen of the bottom navigation? — mkEagles, Jul 20 '18 at 15:19
actually i prefer to make my custom Header component instead of using react-navigation header! :-D — Ali SabziNezhad, Jul 20 '18 at 15:23
How did you do that?? I want to get data from asyncstorige to header... — mkEagles, Jul 20 '18 at 15:26
you can make somthing like https://stackoverflow.com/questions/45861674/custom-header-layout-for-react-native and call it in any pages. you can pass parameter as props to your header to customize it based on your data. — Ali SabziNezhad, Jul 20 '18 at 15:38
Thank you :) Dou you have any example of passing props to header? — mkEagles, Jul 20 '18 at 15:40
TZhank you. I'm getting two headers...I dont know why...https://pastebin.com/dSqtXZj2 — mkEagles, Jul 20 '18 at 16:38

React native navigation example

1 Answers1