How to provide a custom style to React navigation drawer screen title - reactjs

I'm using React Navigation drawer and i want to have a different fontSize (custom styling) for each drawer screen title. Changing the labelStyle in the drawerContentOptions would change the fontSize for all the drawer screen titles and I wanna have each one customized.
<Drawer.Navigator
drawerStyle={{
backgroundColor: Colors.mainBackground,
width: WIDTH * 0.6,
}}
drawerContentOptions={{
activeTintColor: Colors.mainForeGround,
itemStyle: { marginVertical: 8, marginHorizontal: 8 },
labelStyle: {
fontSize: 18,
},
}}
>
<Drawer.Screen name="Profile" component={Profile}
options={{
title: 'Profile Name',
drawerIcon: ({ color }) => {
return <Icon name={'account'} size={ICON_SIZE} color={color} />
},
}}
/>
<Drawer.Screen name="Menu" component={Menu}
options={{
title: 'Shopping menu',
drawerIcon: ({ color }) => {
return <Icon name={'menu'} size={ICON_SIZE} color={color} />
},
}}
/>
<Drawer.Screen name="Cart" component={Cart}
options={{
title: 'Shopping cart',
drawerIcon: ({ color }) => {
return <Icon name={'cart'} size={ICON_SIZE} color={color} />
},
}}
/>
<Drawer.Screen name="Settings" component={Settings}
options={{
title: 'Settings',
drawerIcon: ({ color }) => {
return <Icon2 name={'settings'} size={ICON_SIZE} color={color} />
},
}}
/>
</Drawer.Navigator>

Drawer.Navigator provides a prop called drawContent which needs to return a React component which will be used to render the contents of the drawer.
Usage:
function CustomDrawerContent(props) {
return (
<Here goes your code for rendering individual elements of your drawer>
);
}
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
For full example, refer link

Related

How can I remove the rounded shape around my selected tab text?

I just start learning React Native, and I added my bottom nav using Material Bottom Tabs.
My only issue is this purple circle around my icon when selected. I checked the docs looking for this default setting but couldn't find it.
Here is my code:
const Tab = createMaterialBottomTabNavigator();
const App = () => {
const [loaded] = useFonts({
InterBold: require("./assets/fonts/Inter-Bold.ttf"),
InterSemiBold: require("./assets/fonts/Inter-SemiBold.ttf"),
InterMedium: require("./assets/fonts/Inter-Medium.ttf"),
InterRegular: require("./assets/fonts/Inter-Regular.ttf"),
InterLight: require("./assets/fonts/Inter-Light.ttf"),
});
if (!loaded) return null;
return (
<NavigationContainer theme={theme}>
<Tab.Navigator initialRouteName="Menu principal"
activeColor="#f0edf6"
inactiveColor="white"
barStyle={{ backgroundColor: 'black' }}
>
<Tab.Screen name="Menu principal" component={Home}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen name="Collections" component={Collections}
options={{
tabBarLabel: 'Collections',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="cards" color={color} size={26} />
),
}}
/>
<Tab.Screen name="Associations" component={Associations}
options={{
tabBarLabel: 'Associations',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="account-group" color={color} size={26} />
),
}}
/>
<Tab.Screen name="Classement" component={Classement}
options={{
tabBarLabel: 'Classement',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="trophy" color={color} size={26} />
),
}}
/>
<Tab.Screen name="News" component={News}
options={{
tabBarLabel: 'News',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="newspaper" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
Here is the solution I found. You have to npm install react-native-paper, import, and use it.
To use react-native-paper to change the little circle tab buttons, wrap <Tab.Navigator>...</Tab.Navigator> with <PaperProvider theme={theme}> as shown below.
Finally, create a const theme like I did, and change the secondaryContainer to whatever color you want.
P.S. make sure to change your import names as shown to not conflict with the Provider for redux.
import {
MD3LightTheme as DefaultTheme,
Provider as PaperProvider,
} from "react-native-paper";
const Tab = createMaterialBottomTabNavigator();
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
secondaryContainer: "red",
},
};
const App = () => {
return (
<NavigationContainer>
<PaperProvider theme={theme}>
<Tab.Navigator initialRouteName="Menu principal"
activeColor="#f0edf6"
inactiveColor="white"
barStyle={{ backgroundColor: 'black' }}
>
// rest of your code
</Tab.Navigator>
</PaperProvider>
</NavigationContainer>
)
}

React Navigation change backgroundColor below tabBar

I am using React Navigations tabBar with my React Native project, and I don't know how to change the background color of my bottom tab bar properly. I used Expo to make my app and I have also edited app.json to have the correct backgroundColor, yet nothing changes. Here is my code:
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
screenOptions={{
tabBarActiveTintColor: "#E40066",
tabBarInactiveTintColor: "#fff",
tabBarActiveBackgroundColor: "#171717",
tabBarInactiveBackgroundColor: "#171717",
headerShown: false,
tabBarStyle: {
borderWidth: 1,
},
style: {
backgroundColor: "#171717",
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="glass-cocktail"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
tabBarLabel: "Search",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="magnify" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Saved"
component={Saved}
options={{
tabBarLabel: "Saved",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="heart" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
export default function App() {
const navTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: "#171717",
},
};
return (
<NavigationContainer theme={navTheme}>
<MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
</NavigationContainer>
);
}
Yet my tabBar looks like this, I want it to be #171717, not white... Thank you in advance
The solution was to make a theme to change the background color:
export default function App() {
const navTheme = {
colors: {
background: "#171717"
}
};
return (
<NavigationContainer theme={navTheme}>
<MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
</NavigationContainer>
);
}
You can use this
<Tab.Navigator
tabBarOptions={{
style: {
backgroundColor:'#171717 '
}
}}>
{Screens}
</Tab.Navigator>

How to shorten the code of adding header in drawer Navigator?

I am new to react native, I am using react navigator
Now I am trying to add the header to the pages. But I think my code is not following the dry principle.
here is the pic
Here is my code
const Drawer = createDrawerNavigator();
const HomeStack = createStackNavigator();
const AboutStack = createStackNavigator();
//this one
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {backgroundColor: '#009388'},
headerTintColor: '#fff',
}}>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'Home',
headerLeft: () => (
<Icon.Button
name="bike"
size={25}
backgroundColor="#009388"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
}}
/>
</HomeStack.Navigator>
);
//this one
const AboutStackScreen = ({navigation}) => (
<AboutStack.Navigator
screenOptions={{
headerStyle: {backgroundColor: '#009388'},
headerTintColor: '#fff',
}}>
<AboutStack.Screen
name="About"
component={AboutScreen}
options={{
title: 'About',
headerLeft: () => (
<Icon.Button
name="bike"
size={25}
backgroundColor="#009388"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
}}
/>
</AboutStack.Navigator>
);
const DrawerNavigator = ({navigation}) => {
return (
<Drawer.Navigator drawerContent={(props) => <DrawerContent {...props} />}>
<Drawer.Screen name="Home" component={HomeStackScreen} />
<Drawer.Screen name="More" component={MoreScreen} />
<Drawer.Screen name="About" component={AboutStackScreen} />
<Drawer.Screen name="FindBike" component={FindBikeShop} />
{/* Aricles Screens */}
<Drawer.Screen name="Cases" component={Cases} />
<Drawer.Screen name="Guides" component={Guides} />
<Drawer.Screen name="LatestBlogs" component={LatestBlogs} />
<Drawer.Screen name="LatestNews" component={LatestNews} />
<Drawer.Screen name="News" component={News} />
);
};
As you can see in the code. I am rewriting same createStackNavigator code for HomeStack & AboutStack. As the page grow , my code base will also grow larger. Is there anyway to shortern these codes?
You can create function to return the base navigator you find yourself reusing and pass any unique values as arguments.
const createMyStackNavigator = (name, screen) => ({ navigation }) => {
const Stack = createStackNavigator();
return (
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#009388' },
headerTintColor: '#fff',
}}
>
<Stack.Screen
name={name}
component={screen}
options={{
title: name,
headerLeft: () => (
<Icon.Button
name="bike"
size={25}
backgroundColor="#009388"
onPress={() => {
navigation.openDrawer();
}}
></Icon.Button>
),
}}
/>
</Stack.Navigator>
);
};
const HomeStackScreen = createMyStackNavigator('Home', HomeScreen);
const AboutStackScreen = createMyStackNavigator('About', AboutScreen);

How can i customize react navigation v5 material bottom navigator?

I was trying to customize my material bottom navigation tab but there is not enough resource on the internet as far as i searched. Can you help me with this problem?
Here is my current bottom navigation tab:
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
interface IAppTabsProps extends IAppStackNavigationProps<'AppTabs'> {}
const Tabs = createMaterialBottomTabNavigator<AppTabsParamList>();
const AppTabs: React.FC<IAppTabsProps> = () => {
return (
<Tabs.Navigator labeled keyboardHidesNavigationBar initialRouteName="Home" shifting sceneAnimationEnabled>
<Tabs.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused, ...props }) => (
<Ionicons name={focused ? 'home' : 'home-outline'} size={24} {...props} />
),
tabBarBadge: true,
tabBarLabel: 'Home',
}}
/>
<Tabs.Screen
name="Profile"
component={Profile}
options={{
tabBarIcon: props => <Ionicons name="ios-person" size={24} {...props} />,
tabBarLabel: 'Profile',
}}
/>
<Tabs.Screen
name="Notifications"
component={Notifications}
options={{
tabBarIcon: ({ focused, ...props }) => (
<FontistoIcons name={focused ? 'bell-alt' : 'bell'} size={24} {...props} />
),
tabBarLabel: 'Notifications',
tabBarBadge: 4,
}}
/>
<Tabs.Screen
name="Preferences"
component={Preferences}
options={{
tabBarIcon: props => <SimpleLineIcons name="settings" size={24} {...props} />,
tabBarLabel: 'Preferences',
}}
/>
</Tabs.Navigator>
);
};

React Native Navigation Error: Warning: Can't perform a React state update on an unmounted component

I am working on React native project, after sign in, when it jumps from signIn screen to Home screen then I am getting this Error warning, I have tried all solutions, like component unmount in useEffect, but still getting the same error. This is my App js component, where I have defined all routes.
So please suggest me a good solution, I Am also getting the same issue on some other screens especially when I navigate to the previous screen
const AuthStack = createStackNavigator();
export const AuthStackScreen = () => (
<AuthStack.Navigator>
<AuthStack.Screen name="Signin" component={Signin} />
<AuthStack.Screen name="Signup" component={Signup} />
</AuthStack.Navigator>
);
const HomeStack = createStackNavigator();
export const HomeStackScreen = () => (
<HomeStack.Navigator
screenOptions={({ route, navigation }) => ({
headerShown: false,
gestureEnabled: true,
cardOverlayEnabled: true,
headerStatusBarHeight:
navigation
.dangerouslyGetState()
.routes.findIndex((r) => r.key === route.key) > 0
? 0
: undefined,
// ...TransitionPresets.ModalSlideFromBottomIOS,
})}
mode="modal">
<HomeStack.Screen name="Home" component={Home} unmountOnBlur={true}
options={{ ...TransitionPresets.ModalTransition, unmountOnBlur: true }} />
<HomeStack.Screen name="Hotels" component={Hotels} unmountOnBlur={true}
options={{ ...TransitionPresets.ModalTransition, unmountOnBlur: true }} />
<HomeStack.Screen name="Rooms" component={Rooms} options={{
...TransitionPresets.ModalTransition }} />
<HomeStack.Screen name="ReserveRoom" component={ReserveRoom} options={{
...TransitionPresets.ModalTransition }} />
<HomeStack.Screen name="News" component={News} options={{
...TransitionPresets.ModalTransition }} />
<HomeStack.Screen name="Deals" component={Deals} options={{
...TransitionPresets.ModalTransition }} />
<HomeStack.Screen name="Destinations" component={Destinations} options={{
...TransitionPresets.ModalTransition }} />
<HomeStack.Screen name="Signin" component={Signin} options={{
...TransitionPresets.ModalTransition }} />
<HomeStack.Screen name="Signup" component={Signup} options={{
...TransitionPresets.ModalTransition }} />
</HomeStack.Navigator>
);
const ProfileStack = createStackNavigator();
export const ProfileStackScreen = () => (
<ProfileStack.Navigator>
<ProfileStack.Screen name="Profile" component={Profile} />
</ProfileStack.Navigator>
);
const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
<Drawer.Navigator initialRouteName="Home" drawerContent={props => <CustomDrawerContent
{...props} />}>
<Drawer.Screen name="Home" unmountOnBlur={true}
options={{ unmountOnBlur: true }} component={TabsScreen} />
<Drawer.Screen name="Profile" component={ProfileStackScreen} />
</Drawer.Navigator>
);
const RootStack = createStackNavigator();
const RootStackScreen = () => (
<RootStack.Navigator headerMode="none">
<RootStack.Screen name="App" component={DrawerScreen} options={{ animationEnabled: false }} />
</RootStack.Navigator>
);
const AuthDStack = createStackNavigator();
const AuthDStackScreen = () => (
<AuthDStack.Navigator headerMode="none">
<AuthDStack.Screen name="Home" component={TabsScreen} />
</AuthDStack.Navigator>
);
export default function App() {
// It convert Auth Headers in correct format
if (!global.btoa) {
global.btoa = encode;
}
if (!global.atob) {
global.atob = decode;
}
LogBox.ignoreAllLogs(true)
const dispatch = useDispatch();
const { user, isLoading, error, csrfToken, userDetail } = useSelector((state) => {
return {
userDetail: state.Auth.userDetail,
user: state.Auth.user,
isLoading: state.Auth.isLoading,
csrfToken: state.Auth.csrfToken
}
})
useEffect(() => {
dispatch(getUserAuth());
}, []);
console.log(userDetail, "143 App js")
return (
<>
{isLoading === true ? (
<View style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
opacity: 0.6,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
zIndex: 1000
}}>
<ActivityIndicator size="large" color="black" />
</View>
) : null
}
<NavigationContainer>
{user !== null ? (
<RootStackScreen />
) : (
<AuthDStackScreen />
)}
</NavigationContainer>
</>
)
}

Resources