React native 04

stack navigation

import {Button, View} from 'react-native'
import {NavigationContainer} from '@react-navigation/native'
import {createStackNavigator} from '@react-navigation/stack'

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center'}}>
      <Button
        title="Go to Notification"
        onPress={() => navigation.navigate('Notifications')}
        />
    </View>
  )
}

function NotificationsScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center'}}>
      <Button title = "Go Back" onPress={()=>navigation.goBack()}/>
    </View>
  )
}

const Stack = createStackNavigator();

function Mystack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen}/>
      <Stack.Screen name="Notifications" component={NotificationsScreen}/>
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <Mystack/>
    </NavigationContainer>
  )
}

Tab Navigation

import {Text, View} from 'react-native'
import {NavigationContainer} from '@react-navigation/native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'

function HomeScreen() {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text style={{fontSize:30}}>Home!</Text>
    </View>
  )
}

function SettingsScreen() {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text style={{fontSize:30}}>Settings!</Text>
    </View>
  )
}

const Tab = createBottomTabNavigator();

function MyTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen}/>
      <Tab.Screen name="Settings" component={SettingsScreen}/>
    </Tab.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTab/>
    </NavigationContainer>
  )
}

Drawer Navigation

import {Text, View} from 'react-native'
import {NavigationContainer} from '@react-navigation/native'
import {createDrawerNavigator} from '@react-navigation/drawer'

function HomeScreen() {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text style={{fontSize:30}}>Home!</Text>
    </View>
  )
}

function SettingsScreen() {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text style={{fontSize:30}}>Settings!</Text>
    </View>
  )
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen}/>
      <Drawer.Screen name="Settings" component={SettingsScreen}/>
    </Drawer.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer/>
    </NavigationContainer>
  )
}