I'm trying to add a background image to a react navigation drawer
import React from "react";
import { createDrawerNavigator } from "#react-navigation/drawer";
import { StackNavigator } from "../../routes/HomeStack";
import { MaterialIcons } from "#expo/vector-icons";
import { DemonHunterIcon, DruidIcon} from "../../icons";
import { DemonHunter } from "../../screens/DemonHunter";
import { Druid } from "../../screens/Druid";
import { HomeHeader } from "../../components/Header";
import { ImageBackground } from "react-native";
const { Navigator, Screen } = createDrawerNavigator();
export default function Drawer() {
return (
<ImageBackground source={require("../../assets/drawer-bg.png")} style={{ flex: 1 }}>
<Navigator initialRouteName="Home" hideStatusBar>
<Screen
name="Home"
options={{
drawerIcon: () => <MaterialIcons name="home" size={24} color="black" />,
}}
>
{() => <StackNavigator component={Home} name="Home" header={HomeHeader} />}
</Screen>
<Screen
name="Hunter"
options={{
drawerIcon: () => <HunterIcon />,
}}
>
{() => <StackNavigator component={Hunter} name="Hunter" />}
</Screen>
<Screen name="Demon Hunter" options={{ drawerIcon: () => <DemonHunterIcon /> }}>
{() => <StackNavigator component={DemonHunter} name="Demon Hunter" />}
</Screen>
<Screen name="Druid" options={{ drawerIcon: () => <DruidIcon /> }}>
{() => <StackNavigator component={Druid} name="Druid" />}
</Screen>
</Navigator>
</ImageBackground>
);
}
Tried wrapping the drawer on tag but didn't work. Any clue on how to do this? I have searched a lot and didn't found a solution.
Also if you can tell me how to change the font family and color of the labels I'll be thankful :)
Related
I just start react native.
How do I change the pink splash colour on the home tab?
The screenshot is from an android 12 device, but I tried it on an older android version and there isn't that splash pink colour but instead the standard android ripple effect.
app.tsx
import { StatusBar } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
import Settings from './screens/settings';
import Home from './screens/home';
import Search from './screens/search';
const Tab = createMaterialBottomTabNavigator();
import {
StyleSheet,
SafeAreaView,
} from "react-native";
import React from 'react';
import { Icon } from 'react-native-elements';
export default function App() {
return (
<SafeAreaView style={styles.background}>
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
shifting={true}
barStyle={{ backgroundColor: 'rgb(220, 220, 220)' }}
activeColor="black"
compact={false}
sceneAnimationEnabled={true}
inactiveColor='grey'
>
<Tab.Screen name="Settings" component={Settings} options={{
tabBarIcon: ({ focused, color }) => (
<Icon type='ionicon' name={focused ? 'settings' : "settings-outline"} color={color}></Icon>
),
}} />
<Tab.Screen name="Home" component={Home} options={{
tabBarIcon: ({ focused, color }) => (
<Icon type='ionicon' name={focused ? 'home' : "home-outline"} color={color}></Icon>
),
}} />
<Tab.Screen name="Search" component={Search} options={{
tabBarIcon: ({ focused, color }) => (
<Icon type='ionicon' name={focused ? 'search' : "search-outline"} color={color}></Icon>
),
}} />
</Tab.Navigator>
</NavigationContainer>
<StatusBar backgroundColor={'#fff'} barStyle={'dark-content'}></StatusBar>
</SafeAreaView >
);
}
const styles = StyleSheet.create({
background: {
backgroundColor: "#fff",
flex: 1.0
},
});
settings.tsx
function Settings() {
return (
<SafeAreaView style={styles.background}>
</SafeAreaView >
);
}
home.tsx
function Home() {
return (
<SafeAreaView style={styles.background}>
</SafeAreaView >
);
}
search.tsx
function Search() {
return (
<SafeAreaView style={styles.background}>
</SafeAreaView >
);
}
I erased some non relevant parts in the home, settings and search pages, for clearness.
I tried any settings that i could think of, but i didn't find any that would change that ugly pink color.
I've been trying to create a normal material bottom tabs navigator and it just doesnt want to work. I also tried another identical code I had and there it works like it should, but with this code the Material bottom Tabs Navigator shows the BottomNavigation from React-Native-Paper. Is there any help?Anything i have to change?
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import AuthScreen from './screens/AuthScreen';
import HomeScreen from './screens/HomeScreen';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { userAuthStateListener } from './redux/actions/auth';
const Stack = createNativeStackNavigator()
export default function Main() {
const currenUserObject = useSelector(state => state.auth) // access data from redux from here
const dispatch = useDispatch()
useEffect(() => {
dispatch(userAuthStateListener());
}, []);
if (currenUserObject == null) {
console.log("nothing in user obj")
} else {
console.log("this prints" + { currenUserObject })
}
return (
<NavigationContainer>
<Stack.Navigator>
{currenUserObject.currentUser == null ?
<Stack.Screen name='AuthScreen' component={AuthScreen} options={{ headerShown: false }} />
:
<>
<Stack.Screen name='hb' component={HomeScreen} options={{ headerShown: false }} />
</>
}
</Stack.Navigator>
</NavigationContainer>
)
}
And the HomeScreen should have the material bottom tabs navigator.
import { View, Text, StyleSheet, SafeAreaView } from 'react-native'
import React from 'react'
import { Feather } from '#expo/vector-icons'
import { createMaterialBottomTabNavigator } from '#react-navigation/material-bottom-tabs';
const Tab = createMaterialBottomTabNavigator();
const Test = () => {
return (
<View style={{backgroundColor:"blue"}}>
<Text>Test</Text>
</View>
)
}
//options={{ tabBarIcon: ({ color }) => (<Feather name="home" size={24} color={color} />)}}
//barStyle={{ backgroundColor: "black" }}
export default function HomeScreen() {
return (
<Tab.Navigator barStyle={{ backgroundColor: 'black' }} activeColor="white" shifting={true}>
<Tab.Screen name="Home" component={Test} />
<Tab.Screen name="Search" component={Test} options={{ tabBarColor:"white",tabBarBadge:false, tabBarIcon: ({ color }) => (<Feather name="search" size={24} color={color} />) }} />
<Tab.Screen name="Post" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="plus-square" size={24} color={color} />) }} />
<Tab.Screen name="Chat" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="message-square" size={24} color={color} />) }} />
<Tab.Screen name="Me" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="user" size={24} color={color} />) }} />
</Tab.Navigator>
)
}
But it doesnt show the right material-bottom-tabs-navigator.
It shows this:
Image of wrong navigator
Show right material-bottom-tabs-navigator but it actually shows the bottomnavigation from react-native-paper
I am nesting a drawer navigation on top of a stack navigator. It works, but the problem is that it lags excessively while opening the drawer. What could be the issue here?
import React, { useEffect, useState } from "react";
import CartIcon from "../CartIcon";
import Home from "../../screens/Home";
import Orders from "../../screens/Orders";
import ProductsScreen from "../../screens/ProductsScreen";
import Cart from "../../screens/Cart";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import HomeHeader from "../HomeHeader";
import OrdersDetails from "../../screens/OrdersDetails";
import { createDrawerNavigator } from "#react-navigation/drawer";
const Drawer = createDrawerNavigator()
const Stack = createNativeStackNavigator();
My drawer navigator here
const HomeScreen=()=> {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home} options={() => ({
title: "BarPoint",
headerRight: () => <HomeHeader />,
})} />
</Drawer.Navigator>
);
}
stack navigator here
const AppStack = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ProductsScreen"
component={ProductsScreen}
options={({ navigation }) => ({
title: "Products",
headerRight: () => <CartIcon navigation={navigation} />,
})}
/>
<Stack.Screen name="Cart" component={Cart} />
<Stack.Screen name="Orders" component={Orders} />
<Stack.Screen name="OrdersDetails" component={OrdersDetails} />
</Stack.Navigator>
);
};
export default AppStack;
Add useLegacyImplementation in Drawer.Navigator and compile.
const HomeScreen=()=> {
return (
<Drawer.Navigator
useLegacyImplementation //<- Add here
>
<Drawer.Screen name="Home" component={Home} options={() => ({
title: "BarPoint",
headerRight: () => <HomeHeader />,
})} />
</Drawer.Navigator>
);
}
It occurred an Error to me by adding useLegacyImplementation.
Here is my code.Also,I can't touch off my sidebar by navigation.openDrawer
my devices: xcode13 react-navigation6.x
import React ,{Component}from 'react';
import { Button, View ,Text,StyleSheet} from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer=createDrawerNavigator()
//two function
function HomeScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>Home Screen</Text>
<Button title={"Open Drawer"} onPress={()=>prop.navigation.openDrawer()}/>
<Button title={"Toggle Drawer"} onPress={()=>prop.navigation.toggleDrawer()}/>
</View>
)
}
function NewsScreen(prop){
return(
<View style={styles.container}>
<Text style={styles.text}>News Screen</Text>
<Button title={"jump to Home"} onPress={()=>prop.navigation.navigate('Home')}/>
</View>
)
}
export default class index extends Component{
render(){
return(
<Drawer.Navigator useLegacyImplementation={true} >
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="News" component={NewsScreen} />
</Drawer.Navigator>
)
}
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems: 'center',
},
text:{
fontSize:40
}
})
I'm new to React Native and I have a very simple first page that I'm testing out. My only thing I'm having a hard time understanding is where there is a Title view at the top area. Here's what my app currently looks like https://i.stack.imgur.com/H7vbO.png As you can see, there's that huge white space that has "Home" in it. I'm trying to get rid of it completely and just have the my background color throughout the whole thing. My only problem is that I don't even know where that is coming from. Here is my code and thank you.
This is my HomeScreen
import React from "react";
import { StyleSheet, Text, SafeAreaView, Platform } from "react-native";
import { StatusBar } from "expo-status-bar";
const HomeScreen = ({}) => {
return (
<SafeAreaView style={styles.container}>
<Text style={{ color: "white" }}>Home Screen</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#4B4B4B",
alignItems: "center",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
},
});
export default HomeScreen;
This is my App.js
import React from "react";
import { NavigationContainer } from "#react-navigation/native";
import { createNativeStackNavigator } from "#react-navigation/native-stack";
import MainTabScreen from "./screens/MainTabScreen";
const Stack = createNativeStackNavigator();
const App = () => {
return (
<NavigationContainer>
<MainTabScreen />
</NavigationContainer>
);
};
export default App;
Here is my MainTabScreen
import React from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import Icon from "react-native-vector-icons/Ionicons";
import HomeScreen from "./HomeScreen";
import SearchScreen from "./SearchScreen";
import InboxScreen from "./InboxScreen";
import AccoutScreen from "./AccountScreen";
const Tab = createBottomTabNavigator();
const MainTabScreen = () => {
return (
<Tab.Navigator initialRouteName="Home" activeColor="#000000">
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Search"
component={SearchScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-search" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Inbox"
component={InboxScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-chatbox" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Account"
component={AccoutScreen}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-person" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
export default MainTabScreen;
P.S.: I already tried changing SafeAreaView to just View, and I also try removing the padding top
That view is actually the header of the navigator. Thus, to remove it, on your main navigator, set headerShown: false.
In your mainTabScreen;
<Tab.Navigator screenOptions={{headerShown: false}} initialRouteName="Home" activeColor="#000000">
...
Rest will be same.
Bottom tab accepts header related options in options property of Navigator Screens and screenOptions property in The Navigator Component
e.g
const MainTabScreen = () => {
return (
<Tab.Navigator
initialRouteName="Home"
activeColor="#000000"
// To remove header from all screens,
// screenOptions={{ headerShown: false }}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-home" color={color} size={26} />
),
// Update Header Title
// headerTitle: 'NOT A HOME',
}}
/>
<Tab.Screen
name="Search"
component={Home}
options={{
tabBarIcon: ({ color }) => (
<Icon name="ios-search" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
};
You can read about all header related options in - https://reactnavigation.org/docs/elements#header
I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator, my code is below. I just want to hide bottom tabs for the Player screen, or open Player screen with modal can anyone help me?
This is my code for my main tab navigator
import React from 'react';
import { StatusBar } from 'react-native';
import { NavigationContainer, DarkTheme } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
//views
import HomeStack from './src/views/Home';
import SearchStack from './src/views/Search';
import MoviesStack from './src/views/Movies';
import SeriesStack from './src/views/Series';
import Other from './src/views/Other';
//icons
import {
HomeIcon,
SearchIcon,
MovieIcon,
SeriesIcon,
OtherIcon,
} from './src/components/icons';
const Tab = createBottomTabNavigator();
export default function App() {
return (
<>
<StatusBar barStyle="dark-content" />
<NavigationContainer theme={DarkTheme}>
<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
activeTintColor: 'white',
keyboardHidesTabBar: false,
}}
>
<Tab.Screen
name="Home"
component={HomeStack}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<HomeIcon
fill={focused ? 'white' : 'gray'}
width={24}
height={24}
/>
),
}}
/>
<Tab.Screen
name="Search"
component={SearchStack}
options={{
tabBarLabel: 'Search',
tabBarIcon: ({ focused }) => (
<SearchIcon
stroke={focused ? 'white' : 'gray'}
width={24}
height={24}
/>
),
}}
/>
<Tab.Screen
name="Movie"
component={MoviesStack}
options={{
tabBarLabel: 'Movie',
tabBarIcon: ({ focused }) => (
<MovieIcon
color={focused ? 'white' : 'gray'}
width={24}
height={24}
/>
),
}}
/>
<Tab.Screen
name="Series"
component={SeriesStack}
options={{
tabBarLabel: 'Series',
tabBarIcon: ({ focused }) => (
<SeriesIcon
color={focused ? 'white' : 'gray'}
width={24}
height={24}
/>
),
}}
/>
<Tab.Screen
name="Other"
component={Other}
options={{
tabBarLabel: 'Other',
tabBarIcon: ({ focused }) => (
<OtherIcon
fill={focused ? 'white' : 'gray'}
width={24}
height={24}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
</>
);
}
This is my code for my main stack navigator
import React from 'react';
import { View, Image } from 'react-native';
import { createStackNavigator } from '#react-navigation/stack';
//components
import Screen from '../components/Screen';
import HomeList from '../components/HomeList';
//views
import MovieDetail from './MovieDetail';
import SeriesDetail from './SeriesDetail';
import Player from './Player';
function Home({ navigation }) {
return (
<Screen>
<View>
<Image source={require('../../assets/logo.png')} />
...
</View>
</Screen>
);
}
const Stack = createStackNavigator();
export default function HomeStack() {
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="MovieDetail" component={MovieDetail} />
<Stack.Screen name="SeriesDetail" component={SeriesDetail} />
<Stack.Screen name="Player" component={Player} />
</Stack.Navigator>
);
}
and this is my code for stack navigator of the page I use to send data to the page i want to hide
import React from 'react';
import {
View,
Text,
TouchableOpacity,
} from 'react-native';
//components
import Screen from '../components/Screen';
import Loading from '../components/Loading';
export default function MovieDetail({ route, navigation }) {
const { id, title } = route.params;
return (
<Screen>
<TouchableOpacity
activeOpacity={0.7}
onPress={() =>
navigation.navigate('Player', {
uri: 'https://blabla.com',
})
}
>
<PlayIcon color="black" />
<Text>
Play
</Text>
</TouchableOpacity>
</Screen>
);
}
and here I want to hide tab bar this screen
import React from 'react';
import WebView from 'react-native-webview';
export default function Player({ route }) {
const { uri } = route.params;
return (
<WebView source={{ uri }} />
);
}
Ciao, you can hide bottom tabbar in Player screen like that:
Modify your Tab.Screen Home like this:
<Tab.Screen
name="Home"
component={HomeStack}
options={({ route }) => ({
tabBarLabel: 'Keşfet',
tabBarIcon: ({ focused }) => (
<HomeIcon
fill={focused ? 'white' : 'gray'}
width={24}
height={24}
/>
),
tabBarVisible: getTabBarVisibility(route),
})}
/>
Then create getTabBarVisibility function to check that the name of the root is Player:
const getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'Player') {
return false;
}
return true;
};
That's it. Now if you navigate into Player page, tabBar disappears.