Basic ussage of https://reactnavigation.org module

Navigator.js

import React, { Component } from 'react';
import { View, Text, Button, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class LogoTitle extends Component {
  render() {
    return (
      <Image
        source={require('./google.png')}
        style={{width: 30, height: 30}}/>
    )
  }
}

class HomeScreen extends Component {
  // https://reactnavigation.org/docs/en/headers.html
  // adjusting styles: https://reactnavigation.org/docs/en/headers.html#adjusting-header-styles
  static navigationOptions = ({navigation}) => {
    return {
      headerTitle: () => <LogoTitle/>,
      headerRight: () => (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"/>
      ),
    }
    // title: 'Home'
  }

  componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0
  }

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Text>Counter: {this.state.count}</Text>
        <Button
          title="Go To Details"
          onPress={() => this.props.navigation.navigate('Details', {
            itemId: 1,
            otherParam: 'Hello Details'
          }) }/>
      </View>
    );
  }
}

class DetailsScreen extends Component {
  // Using params in the title https://reactnavigation.org/docs/en/headers.html#using-params-in-the-title
  // Correct styling for buttons on the header: https://github.com/vonovak/react-navigation-header-buttons
  static navigationOptions = ({navigation, navigationOptions }) => {
    return {
      headerTitle: () => <LogoTitle/>,
      // title: navigation.getParam('otherParam', 'A nested details screen'),
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>
          itemId: {navigation.getParam('itemId', 'NO-ID')}
        </Text>
        <Text>
          otherParam: {navigation.getParam('otherParam', 'No Value')}
        </Text>
        <Button
          title="Go To Details... again"
          onPress={() => navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100)
          }) }
          />
        <Button
          title="Go to Home"
          onPress={() => navigation.navigate('Home')}/>
        <Button
          title="Go back"
          onPress={() => navigation.goBack()}/>
        <Button
          title="Update the title"
          onPress={() => navigation.setParams({'otherParam': 'Updated!'})}/>
      </View>
    );
  }
}

// About the stack navigator
// https://reactnavigation.org/docs/en/stack-navigator.html
const RootStack = createStackNavigator({
  Home: {
    // is a React component that will be the main content of the screen.
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  }
}, {
  initialRouteName: 'Home',
  defaultNavigationOptions: {
    // a style object that will be applied to the View that wraps the header. If you set backgroundColor on it, that will be the color of your header.
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    // the back button and title both use this property as their color.
    headerTintColor: '#fff',
    // if we want to customize the fontFamily, fontWeight and other Text style properties for the title, we can use this to do it.
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
});

// const Tabs = createBottomTabNavigator({ Home });
const Navigator = createAppContainer(RootStack);

export default Navigator;

Navigator2.js

import React, { Component } from 'react';
import { View, Text, Button, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

class HomeScreen extends Component {
  // https://reactnavigation.org/docs/en/headers.html
  // adjusting styles: https://reactnavigation.org/docs/en/headers.html#adjusting-header-styles
  static navigationOptions = ({navigation}) => {
    return {
      headerLeft: () => (
        <Button
          onPress={() => navigation.navigate('MyModal')}
          title="Info"
        />
      )
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go To Details"
          onPress={() => this.props.navigation.navigate('Details', {
            itemId: 1,
            otherParam: 'Hello Details'
          }) }/>
      </View>
    );
  }
}

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

class DetailsScreen extends Component {
  // Using params in the title https://reactnavigation.org/docs/en/headers.html#using-params-in-the-title
  // Correct styling for buttons on the header: https://github.com/vonovak/react-navigation-header-buttons
  static navigationOptions = ({navigation, navigationOptions }) => {
    return {
      headerTitle: () => <LogoTitle/>,
      // title: navigation.getParam('otherParam', 'A nested details screen'),
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>
          itemId: {navigation.getParam('itemId', 'NO-ID')}
        </Text>
        <Text>
          otherParam: {navigation.getParam('otherParam', 'No Value')}
        </Text>
        <Button
          title="Go To Details... again"
          onPress={() => navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100)
          }) }
          />
        <Button
          title="Go to Home"
          onPress={() => navigation.navigate('Home')}/>
        <Button
          title="Go back"
          onPress={() => navigation.goBack()}/>
        <Button
          title="Update the title"
          onPress={() => navigation.setParams({'otherParam': 'Updated!'})}/>
      </View>
    );
  }
}

// About the stack navigator
// https://reactnavigation.org/docs/en/stack-navigator.html
const MainStack = createStackNavigator({
  Home: {
    // is a React component that will be the main content of the screen.
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  }
}, {
  initialRouteName: 'Home',
  defaultNavigationOptions: {
    // a style object that will be applied to the View that wraps the header. If you set backgroundColor on it, that will be the color of your header.
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    // the back button and title both use this property as their color.
    headerTintColor: '#fff',
    // if we want to customize the fontFamily, fontWeight and other Text style properties for the title, we can use this to do it.
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
});

const RootStack = createStackNavigator({
  Main: {
    screen: MainStack
  },
  MyModal: {
    screen: ModalScreen
  }
}, {
  mode: 'modal',
  headerMode: 'none'
});

const Navigator = createAppContainer(RootStack);

export default Navigator;

Navigator3.js

import React, { Component } from 'react';
import { View, Text, Button, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

// Using font icons https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance
class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home'
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Button
          onPress={() => navigation.navigate('Details')}
          title="Go To Details"
        />
        <Button
          onPress={() => navigation.navigate('Settigns')}
          title="Settings"
        />
      </View>
    );
  }
}
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}


class DetailsScreen extends Component {
  // Using params in the title https://reactnavigation.org/docs/en/headers.html#using-params-in-the-title
  // Correct styling for buttons on the header: https://github.com/vonovak/react-navigation-header-buttons
  static navigationOptions = ({navigation, navigationOptions }) => {
    return {
      // headerTitle: () => <LogoTitle/>,
      title: navigation.getParam('otherParam', 'A nested details screen'),
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>
          itemId: {navigation.getParam('itemId', 'NO-ID')}
        </Text>
        <Text>
          otherParam: {navigation.getParam('otherParam', 'No Value')}
        </Text>
        <Button
          title="Go To Details... again"
          onPress={() => navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100)
          }) }
          />
        <Button
          title="Go to Home"
          onPress={() => navigation.navigate('Home')}/>
        <Button
          title="Go back"
          onPress={() => navigation.goBack()}/>
        <Button
          title="Update the title"
          onPress={() => navigation.setParams({'otherParam': 'Updated!'})}/>
      </View>
    );
  }
}

// About the stack navigator
// https://reactnavigation.org/docs/en/stack-navigator.html
const MainStack = createStackNavigator({
  Home: {
    // is a React component that will be the main content of the screen.
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  }
}, {
  initialRouteName: 'Home',
  defaultNavigationOptions: {
    // a style object that will be applied to the View that wraps the header. If you set backgroundColor on it, that will be the color of your header.
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    // the back button and title both use this property as their color.
    headerTintColor: '#fff',
    // if we want to customize the fontFamily, fontWeight and other Text style properties for the title, we can use this to do it.
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
});

const RootStack = createBottomTabNavigator({
  Main: {
    screen: MainStack
  },
  Settigns: {
    screen: SettingsScreen
  }
});

const Navigator = createAppContainer(RootStack);

export default Navigator;

Navigator4.js

import React, { Component } from 'react';
import { View, Text, Button, Image } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

// Using font icons https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance
class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home'
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Button
          onPress={() => navigation.navigate('Details')}
          title="Go To Details"
        />
        <Button
          onPress={() => navigation.navigate('Settigns')}
          title="Settings"
        />
      </View>
    );
  }
}
class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}


class DetailsScreen extends Component {
  // Using params in the title https://reactnavigation.org/docs/en/headers.html#using-params-in-the-title
  // Correct styling for buttons on the header: https://github.com/vonovak/react-navigation-header-buttons
  static navigationOptions = ({navigation, navigationOptions }) => {
    return {
      // headerTitle: () => <LogoTitle/>,
      title: navigation.getParam('otherParam', 'A nested details screen'),
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>
          itemId: {navigation.getParam('itemId', 'NO-ID')}
        </Text>
        <Text>
          otherParam: {navigation.getParam('otherParam', 'No Value')}
        </Text>
        <Button
          title="Go To Details... again"
          onPress={() => navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100)
          }) }
          />
        <Button
          title="Go to Home"
          onPress={() => navigation.navigate('Home')}/>
        <Button
          title="Go back"
          onPress={() => navigation.goBack()}/>
        <Button
          title="Update the title"
          onPress={() => navigation.setParams({'otherParam': 'Updated!'})}/>
      </View>
    );
  }
}

// About the stack navigator
// https://reactnavigation.org/docs/en/stack-navigator.html
const MainStack = createStackNavigator({
  Home: {
    // is a React component that will be the main content of the screen.
    screen: HomeScreen
  },
  Details: {
    screen: DetailsScreen
  }
}, {
  initialRouteName: 'Home',
  defaultNavigationOptions: {
    // a style object that will be applied to the View that wraps the header. If you set backgroundColor on it, that will be the color of your header.
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    // the back button and title both use this property as their color.
    headerTintColor: '#fff',
    // if we want to customize the fontFamily, fontWeight and other Text style properties for the title, we can use this to do it.
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }
});

const RootStack = createBottomTabNavigator({
  Main: {
    screen: MainStack
  },
  Settigns: {
    screen: SettingsScreen
  }
});

const Navigator = createAppContainer(RootStack);

export default Navigator;