Customize React Native drawer navigation - javascript

I want to create drawer navigation like that
I able to add icons but don't know how to design right side like in the image
that's my drawer navigator
<Drawer.Navigator
drawerContent={(props) => <CustomDrawer {...props} />}
drawerStyle={{
width: '80%',
}}>
<Drawer.Screen name={strings.NAV_HOME} component={StackComp} />
<Drawer.Screen name={strings.NAV_MY_PROFILE} component={Proifle} />
<Drawer.Screen name={strings.NAV_SETTING} component={Setting} />
<Drawer.Screen
name={strings.NAV_MANAGE_BOOKING}
component={Booking}
/>
</Drawer.Navigator>
and that's my customize code
<DrawerContentScrollView
style={{backgroundColor: colors.themeColor, flex: 1}}
{...props}>
<View style={{flex: 1}}>
<View
style={{
flex: 1,
paddingTop: moderateScaleVertical(24),
}}>
<Image
source={imagePath.logo}
style={{marginLeft: moderateScale(16)}}
/>
<TouchableOpacity
onPress={() => navigation.navigate(strings.NAV_HOME)}
style={styles.drawCont}>
<Image source={imagePath.homeIcon} />
<Text style={styles.text}>{strings.HOME}</Text>
</TouchableOpacity>
</View>
</View>
</DrawerContentScrollView>
Can someone tell me how can I design it like in the image?


To create a drawer component you can check the official documentation here
You will then have to make use of icons such as MaterialCommunityIcons. First on your drawer navigator import MaterialCommunityIcons like this
import { MaterialCommunityIcons } from "#expo/vector-icons";
Then add an options props on screen navigation as shown
<Drawer.Screen name={strings.NAV_HOME} component={StackComp} options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}} />


nice to meet you.
pls check my code....
const Tab = createBottomTabNavigator();
const Main = () => {
return (
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: '#fda039',
activeBackgroundColor: 'transparent',
labelPosition: 'bottom-icon',
tabStyle: styles.tabStyle,
style: styles.tabBarStyle,
}}>
<Tab.Screen name="Home" component={Home}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color}/>,
tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 14}}>Hogar</Text>: null,
}}
/>
<Tab.Screen name="QRscan" component={ProfileScreen}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="qr-code-scanner" color={color}/>,
tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 14}}>QR Scan</Text>: null,
}}
/>
<Tab.Screen name="Help" component={Help}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="help" color={color}/>,
tabBarLabel: ({ focused, color}) => focused?<Text style={{color: color, marginTop: 5, fontSize: 16}}>Ayuda</Text>: null,
}}
/>
</Tab.Navigator>
);
It's my project code running now using React Native navigator.
It's using react bottom navigation.
You can rewrite the code like mine.
Thank you.

Related

the home button in the drawer is not working but the one on the bottom tab is working well

This is the App.js when I change the home name in the navigator it works well.
<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}><Drawer.Screen
options={{
headerShown: false
}}
name='Home' component={MainTabScreen} />
{/* <Drawer.Screen name="Products" component={Products} /> */}
</Drawer.Navigator>
</NavigationContainer>`
Here is the Drawer.js which has the home button which isn't responding:
<Drawer.Section style={styles.drawerSection}><DrawerItem
icon={({color, size}) => (
<Icon
name="home-outline"
color={color}
size={size}
/>
)}
label="Home"
onPress={() => {props.navigation.navigate('Home')}}
/>
<DrawerItem />
and finally the mainTab js:
const MainTabScreen = () => (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
>
<Tab.Screen
name="Home"
component={HomeStackScreen}
options={{
tabBarLabel: 'Home',
tabBarColor: '#009387',
tabBarIcon: ({ color }) => (
<Icon name="home" color={color} size={26} />
),
}}
/>

Try below code
<Drawer.Section style={styles.drawerSection}>
<DrawerItem
icon={({color, size}) => (
<Icon
name="Home"
color={color}
size={size}
/>
)}
label="Home"
onPress={() => {props.navigation.navigate('Home')}}
/>
<Drawer.Section />

How to add a customHeaderLeft button on a screen with goBack functionality using react-navigation in React Native?

<NavigationContainer>
<Stack.Navigator screenOptions={{}}>
<Stack.Screen name="home" component={Home} />
<Stack.Screen
name="MyProfile"
component={Profile}
options={{
headerTintColor: 'white',
title: 'My Profile',
headerTransparent: true,
headerShadowVisible: false,
headerRight: () => (
<TouchableOpacity>
<DrawerIcon size={30} color={'white'} name="md-reorder-two-sharp" />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity>
<Ionicons
name="arrow-back-sharp"
size={22}
color="white"
style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
/>
</TouchableOpacity>
),
}}
/>
</Stack.Navigator>
<ModalPortal />
</NavigationContainer>
Below is the code I used for my stack navigation, and I want to go back from that screen
1.headerLeft: () => <TouchableOpacity>
<Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} />
</TouchableOpacity>
}} />

There are two ways you can achieve this
1.) Set options On the Screen itself
You can use the useLayoutEffect hook to achieve this
On the screen where you want to put this header, i.e., the Profile screen just add the following code
React.useLayoutEffect(() => {
navigation.setOptions({
headerLeft: () => (
<Ionicons
name="arrow-back-sharp"
size={22}
color="white"
style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
onPress={() => navigation.goBack()}
// make sure you destructure the navigation variable from the props
// or otherwise you'll have to write it like this
// onPress={() => props.navigation.goBack()}
/>
),
});
}, [navigation]);
And your Navigation Container should look like
<NavigationContainer>
<Stack.Navigator screenOptions={{}}>
<Stack.Screen name="home" component={Home} />
<Stack.Screen
name="MyProfile"
component={Profile}
options={{
headerTintColor: 'white',
title: 'My Profile',
headerTransparent: true,
headerShadowVisible: false,
}}
/>
</Stack.Navigator>
<ModalPortal />
</NavigationContainer>;
Have a look at the Working Example Here
2.) Set the headerLeft and headerRight props in the Navigation Container
Setting the properties in the NavigationContainer, like this
<NavigationContainer>
<Stack.Navigator screenOptions={{}}>
<Stack.Screen name="home" component={Home} />
<Stack.Screen
name="MyProfile"
component={Profile}
options={({ navigation, route }) => ({
headerTintColor: 'white',
title: 'My Profile',
headerTransparent: true,
headerShadowVisible: false,
headerRight: () => (
<TouchableOpacity>
<DrawerIcon size={30} color={'white'} name="md-reorder-two-sharp" />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={() => navigation.goBack()}>
<Ionicons
name="arrow-back-sharp"
size={22}
color="white"
style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }}
/>
</TouchableOpacity>
),
})}
/>
</Stack.Navigator>
<ModalPortal />
</NavigationContainer>
Have a look at the Working Example Here

You have provided a TouchableOpacity as the back button but you haven't specified any onPress callback. You should provide an onPress callback to your TouchableOpacity.
<NavigationContainer>
<Stack.Navigator screenOptions={{}}>
<Stack.Screen name='home' component={Home} />
<Stack.Screen
name='MyProfile'
component={Profile}
options={({ navigation, route }) => ({
headerTintColor: 'white',
title: 'My Profile',
headerTransparent: true,
headerShadowVisible: false,
headerRight: () => (
<TouchableOpacity>
<DrawerIcon size={30} color={'white'} name='md-reorder-two-sharp' />
</TouchableOpacity>
),
headerLeft: () => (
<TouchableOpacity onPress={()=> navigation.goBack()}>
<Ionicons name="arrow-back-sharp" size={22} color="white" style={{ marginRight: 7, marginTop: 1, marginLeft: 3 }} />
</TouchableOpacity>
)
})}
/>
</Stack.Navigator>
<ModalPortal />
</NavigationContainer>
If you just wanted to change the back button appearance only, You are better off with headerBackImage props of react-navigation stack.
Here's a Live Snack Example

Open a Modal with ReactNative does not work

I want that when I click on my button "More", the last tab of my list, it opens a Modal but with my code it does not work. How to make it work ?
function MyTabs() {
const [modal, setModal] = useState(true);
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Mon compte" component={AccountScreen} />
<Tab.Screen name="Mes transferts" component={TransfertsScreen} />
<Tab.Screen name="Créer" component={CreerScreen} />
<Tab.Screen name="Suivi" component={SuiviScreen} />
<Tab.Screen name="More" component={MoreScreen} listeners={({ navigation, route }) => ({
tabPress: e => {
console.log(1)
e.preventDefault();
<Modal isVisible={modal}>
<View style={{ flex: 1 }}>
<Text>I am the modal content!</Text>
<Button title="Fermer la modale" onPress={() => {setModal(false);}}></Button>
</View>
</Modal>
},
})} />
</Tab.Navigator>
</NavigationContainer>
);
}

Try
<Button title="Fermer la modale" onPress={() => setModal(false)}></Button>

How can I show a new screen after a button is pressed in a component in react native?

I have a created a Carousel component Splash and at the last view/page of it, I have a TextInput and button.On Press, I want this button to open a new screen with BottomNav component where I can do by other stuffs. I just want this Splash as a landing page. But when on running this code I get Splash and BottomNav mounted in same screen.
My Apps.js:
export class App extends Component {
render() {
return (
<PaperProvider>
<Splash />
<BottomNav />
</PaperProvider>
)
}
}
export default App
Splash.js:
render() {
return (
<View style={styles.container} onLayout={this._onLayoutDidChange} >
<Carousel
style={this.state.size}
currentPage={0}
autoplay
isLooped={false}
bulletStyle={{borderColor:'#02101a'}}
bullets
chosenBulletStyle={{backgroundColor:'#02101a'}}
>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Sanitize Your Hands Properly
</Text>
<Animated.View>
<Image source={require('../src/sanitizehand.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Use an alcohol-based hand sanitizer that contains at least 60% alcohol to disinfect your hand at regular basis.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Practice Social Distancing
</Text>
<Animated.View>
<Image source={require('../src/socialdistancing.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Practice social distancing and maintain space between yourself and others to prevent infection and its spread.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<TextInput
label='Phone No.'
value={this.state.text}
placeholder='Enter here'
onChangeText={text => this.setState({ text })}
style={styles.textinput}
/>
<Button mode="contained" onPress={() => console.warn('Press')} icon='arrow-right'>
Register
</Button>
</View>
</Carousel>
</View>
);
}
BottomNav.js:
render() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feeds" component={Feeds} />
<Tab.Screen name="Global" component={Global} />
<Tab.Screen name="FAQ" component={Faq} />
</Tab.Navigator>
</NavigationContainer>
)
}
}

How to set the background color of Tab.Navigator?

As you can see below, I've tried many ways of setting the background color to green, all to no avail. The background remains blue like the image.
The inactiveColor and activeColor are working (white and red respectively).
<NavigationContainer>
<Tab.Navigator
initialRouteName="HomeScreen"
activeColor="red"
inactiveColor="white"
activeBackgroundColor="green"
inactiveBackgroundColor="green"
style={{ backgroundColor: 'green' }}
tabBarOptions={{
style:{
backgroundColor: 'green'
}
}}
>
<Tab.Screen
name="HomeScreen"
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
>
{props => <HomeScreen {...props} state={this.state} />}
</Tab.Screen>
<Tab.Screen
name="Files"
component={FilesScreen}
options={{
tabBarLabel: 'Files',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="file" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
package.json
"dependencies": {
"#react-native-community/masked-view": "^0.1.7",
"#react-navigation/material-bottom-tabs": "^5.1.7",
"#react-navigation/native": "^5.1.4",
}

In React Navigation 6.x, you use tabBarStyle
<Tab.Navigator
screenOptions={({ route }) => ({
headerShown: false,
tabBarStyle: {
height: 90,
paddingHorizontal: 5,
paddingTop: 0,
backgroundColor: 'rgba(34,36,40,1)',
position: 'absolute',
borderTopWidth: 0,
},
})}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="List" component={RegistrationList} />
<Tab.Screen name="News" component={News} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>

in the react-navigation V5 your can to do this:
<Tab.Navigator
initialRouteName={'Critic'}
tabBarOptions={{
activeTintColor: '#fff',
inactiveTintColor: 'lightgray',
activeBackgroundColor: '#c4461c',
inactiveBackgroundColor: '#b55031',
style: {
backgroundColor: '#CE4418',
paddingBottom: 3
}
}}
>
<Tab.Screen name="Critic" component={Critic} options={CriticOptions} />
<Tab.Screen name="Urgent" component={Urgent} options={UrgentOptions} />
<Tab.Screen name="Moderate" component={Moderate} options={ModerateOptions} />
<Tab.Screen name="All" component={All} options={AllOptions} />
</Tab.Navigator>
);

Refer documentation here, You need to use barStyle.
Try
<Tab.Navigator
initialRouteName="Feed"
shifting={true}
labeled={false}
sceneAnimationEnabled={false}
activeColor="#00aea2"
inactiveColor="#95a5a6"
barStyle={{ backgroundColor: '#ffff' }}

You need to add the backgroundColor in screenOptions.
https://reactnavigation.org/docs/bottom-tab-navigator/#screenoptions
Try this:
<Tab.Navigator screenOptions={{
tabBarOptions: {
style: {
backgroundColor: '#f9f9f9',
},
},
}}>

<Navigator
screenOptions={{
tabBarActiveTintColor: theme.colors.main,
tabBarInactiveTintColor: theme.colors.text_detail,
tabBarShowLabel: false,
tabBarStyle: {
paddingVertical: Platform.OS === 'ios' ? 20 : 0,
height: 78,
backgroundColor: theme.colors.background_primary
}
}}
>

<Tab.Navigator
screenOptions={{
tabBarActiveTintColor: "red",
tabBarInactiveTintColor: "blue",
tabBarStyle: {
height: 55,
},
tabBarLabelStyle: {
fontSize: 14,
margin: 0,
},
}}>

you can set the property in tabBarOptions of Tab.Navigator
<Tab.Navigator
screenOptions={({ route }) => ({
....
})}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
showLabel: false,
style: {backgroundColor: primaryLighterColor,},
}}
>

you may try this
<Tab.Navigator
screenOptions={{
headerShown: false,
gestureEnabled: true,
gestureDirection: 'horizontal',
tabBarStyle: {
backgroundColor: '#3E48A0',
},
}}>
</Tab.Navigator>

Categories