Question 33161 in React native Question posted in
The official React Native documentation can be found here.

What is the proper way to have only one header with Open Drawer and Back button? – React native

What I need is a single header with a back button on StackScreen2 and a toggle drawer button in StackScreen1.

I apologise for my poor writing and English.

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function StackScreen1({ navigation }) {
    return (
        <View>
            <Text>StackScreen1</Text>
            <Button title="Go To StackScreen2" onPress={() => navigation.navigate("StackScreen2")} />
        </View>
    )
}

function StackScreen2() {
    return (
        <View>
            <Text>StackScreen2</Text>
        </View>
    )
}

function DrawerScreen1() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="StackScreen1" component={StackScreen1} />
            <Stack.Screen name="StackScreen2" component={StackScreen2} />
        </Stack.Navigator>
    )
}

function DrawerScreen2() {
    return (
        <View>
            <Text>DrawerScreen2</Text>
        </View>
    )
}

const Drawer = createDrawerNavigator();

export default function Test3() {
    return (
        <NavigationContainer>
            <Drawer.Navigator>
                <Drawer.Screen name="DrawerScreen1" component={DrawerScreen1} />
                <Drawer.Screen name="DrawerScreen2" component={DrawerScreen2} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

StackScreen1
StackScreen2

I tried hiding drawer header but then I don’t have toggle drawer button anywhere.

Tags:

2

Answers


  1. 0

    Check below code for drawer navigation:

    import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

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

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

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator useLegacyImplementation initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

    You can check more about drawer here.

    Login or Signup to reply.
  2. 0

    May be this will help you!

    import * as React from 'react';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import { Button, View, Text, Pressable,Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';


function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('SettingsScreen')}
      />


    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}
const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      useLegacyImplementation
      //  screenOptions={{
      //     drawerLabelStyle: { fontSize: 17, color: '#000',marginLeft:-30 }
      //   }}
    >
      <Drawer.Screen
        name="HomeScreen"
        component={DetailsScreen}
        screenOptions={{
          headerShown: false,
        }}
      />
    </Drawer.Navigator>
  );
}


function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="SettingsScreen"
        component={MyDrawer}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="md-home" size={24} color={'#eee'} />
          ),
          tabBarStyle: { position: 'absolute' },
          tabBarActiveTintColor: '#eee',
          tabBarInactiveTintColor: '#eee',
        }}
      />
      <Tab.Screen
        name="DetailsScreen"
        component={DetailsScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Image source={{uri:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUAN0zLcvLFjdaYN1dBRSKoIuJndRW6VuX85w2yzEzxvTwO3B0Y_gv1x8kVDISNKJEbq0&usqp=CAU"}}
            style={{width:24,height:24,borderRadius:24}} />
          ),
          tabBarStyle: { position: 'absolute' },
          tabBarActiveTintColor: '#eee',
          tabBarInactiveTintColor: '#eee',
        }}
      />
    </Tab.Navigator>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>2</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen
          name="HomeScreen"
          component={HomeScreen}
          options={{ headerShown: false }}
        />

        <Stack.Screen
          name="SettingsScreen"
          component={MyTabs}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search