I am trying to add left padding or margin to the header left icon which is a back button on the login page. Below is my code, I tried adding headerLeftContainerStyle but it is not working. On the home page the menu icon is perfectly set with a padding from the left, but on the login page the back button is attached with the left side of the screen.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import Colors from './src/settings/Colors';
import {StyleSheet, StatusBar, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { DrawerContent } from './src/navigation/DrawerContent';
import { TabContent } from './src/navigation/TabContent';
import Login from './src/screens/auth/Login';
import Feedback from './src/screens/Feedback';
const Drawer = createDrawerNavigator();
const App = () => {
return (
<NavigationContainer>
<StatusBar barStyle="dark-content" backgroundColor={Colors.primary} />
<Drawer.Navigator drawerContent={props => <DrawerContent {...props} />} screenOptions={{
headerShown: true,
headerTitleAlign: 'center',
headerStyle: styles.headerBackgroundColor,
headerTitleStyle: styles.headerTitleStyle,
}}>
{/* <Drawer.Screen name="home" component={TabContent} options={{ title: 'DevMuscles' }} /> */}
<Drawer.Screen name="Home" component={TabContent} />
<Drawer.Screen name="Feedback" component={Feedback} options={{ title: 'Feedback' }} />
<Drawer.Screen name="Login" component={Login} options={{
title: 'Login' ,
headerLeft: () => (
<Icon name="arrow-left" size={23} />
),
headerLeftContainerStyle: {
screenLeft: 50
},
}} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default App;
Fixed it using the below code.
import { HeaderBackButton } from '#react-navigation/stack';
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
// Do something
}}
/>
),
Try to add styles manually to the Icon component.
<Icon name='' style={{ marginLeft: 10 }} />
Related
//Here is my App.js file
import React, {Suspense} from 'react';
import {
SafeAreaView,
Text,
View,
Button,
Image,
TouchableOpacity,
} from 'react-native';
import {
NavigationContainer,
getFocusedRouteNameFromRoute,
} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
import DrawerNavigator from './navigation/DrawerNavigator';
const SinginScreens = React.lazy(() => import('./screens/Login/SinginScreens'));
const Billing = React.lazy(() => import('./screens/Home/Billing'));
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Loading = () => {
return <SafeAreaView>{/* <Text>Loading</Text> */}</SafeAreaView>;
};
const Routes = ({navigation}) => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName={'Main'}>
<Stack.Screen
name={'Main'}
component={DrawerNavigator}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="Billing"
component={Billing}
options={{
headerLeft: null,
headerShown: false,
}}
/>
<Stack.Screen
name="SinginScreen"
component={SinginScreens}
options={{
headerShown: false,
gestureEnabled: false,
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
class App extends React.PureComponent {
render() {
return (
<Suspense fallback={<Loading />}>
<Routes />
</Suspense>
);
}
}
export default App;
//Here is my stack navigator
import React from 'react';
import {createStackNavigator} from '#react-navigation/stack';
import {Button} from 'react-native';
import {NavigationContainer} from '#react-navigation/native';
const Dashboard = React.lazy(() => import('../screens/Home/Dashboard.js'));
const Splash = React.lazy(() => import('../screens/Login/Splash'));
import {AuthContext} from './context';
const Stack = createStackNavigator();
const StackNavigator = ({route, navigation}) => {
return (
// <NavigationContainer>
<Stack.Navigator initialRouteName="Splash">
<Stack.Screen
name="Splash"
component={Splash}
options={{headerShown: false, gestureEnabled: false}}
/>
<Stack.Screen
name="Dashboard"
component={Dashboard}
options={{headerShown: false,}}
/>
</Stack.Navigator>
);
};
export default StackNavigator;
//Here is my drawer navigator
import React, {useState,useEffect} from 'react';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import {
SafeAreaView,
Text,
View,
Button,
Image,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import {DrawerActions} from '#react-navigation/native';
import StackNavigator from './StackNavigator';
import { useNavigation } from '#react-navigation/native';
const Drawer = createDrawerNavigator()
const CustomDrawer = props => {
return (
<View style={{flex: 1}}>
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
{...props}
label="Contacts"
labelStyle={styles.itemStyle}
icon={(focused, size, color) => (
<Image
style={{width: 25, height: 25}}
source={require('../assets/images/ic_contacts1.png')}
resizeMode="contain"
/>
)}
onPress={() => {
props.navigation.closeDrawer();
}}
/>
<DrawerItem
{...props}
label="POS Catalog"
labelStyle={styles.itemStyle}
icon={(focused, size, color) => (
<Image
style={{width: 25, height: 25}}
source={require('../assets/images/catalog.png')}
resizeMode="contain"
/>
)}
onPress={() => {
props.navigation.closeDrawer();
}}
/>
</DrawerContentScrollView>
</View>
);
};
const DrawerNavigator = () => {
return (
<Drawer.Navigator
drawerContent={props => <CustomDrawer {...props} />}
screenOptions={{
drawerPosition: 'right',
// drawerType:"permanent",
headerTintColor: '#000000',
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Drawer.Screen
name="Home"
component={StackNavigator}
options={{
drawerIcon: ({focused, size}) => (
<Ionicons name="ios-home-outline" size={size} color={'#000'} />
),
headerStyle: {
backgroundColor: 'white',
},
headerShown: false,
headerTintColor: 'black',
}}/>
</Drawer.Navigator>
);
};
export default DrawerNavigator;
I have drawer and stack navigator in my react native application.I have Screens called Splash,SigninScreen,Billing and Dashboard.
Screens in navigator
Splash,Dashboard- Stack Navigator
SigninScreen,Billing-App.js file(mentioned these screens out of drawer navigator to remove drawer for these screens)
What i want to achieve is when app is opening splash screen comes first and from splashscreen i am navigating to signinscreen using navigation.replace('SinginScreen') to avaoid back navigating to splash screen again when user clicks back button in 'SigninScreen'.
Similarly i am using navigation.replace('Billing') when navigating from SigninScreen to Billing to avoid back navigating to SigninScreen again when user clicks back button in Billing.
Now Inside Billing i am using navigation.navigate('Dashboard') to navigate from Billing to Dashboard page.Here i am facing error like The action 'NAVIGATE' with payload {"name":"Dashboard"} was not handled by any navigator.
Do you have a screen named 'Dashboard'?
Note:
I want to navigate to Dashboard page from Billing and also i don't want the user to go back again billing from Dashboard.
Im getting the following issue:
The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator.
Do you have a screen named 'EditProfileScreen'?
My code:
settingsNavigator.js
import React from 'react';
import { createStackNavigator } from "#react-navigation/stack";
import SettingsScreen from "../screens/settingsScreen";
import EditProfileScreen from "../screens/editProfileScreen"
const SettingsStack = createStackNavigator();
const SettingsNavigator = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
<SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
</SettingsStack.Navigator>
)
export default SettingsNavigator
settingScreen.js
import React from 'react';
import { Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
import { Card } from 'react-native-paper'
import Screen from '../Components/Screen'
function SettingsScreen({navigation}) {
return (
<Screen style={styles.screen}>
<TouchableOpacity onPress={() => navigation.navigate("EditProfileScreen")}>
<Card style={styles.list} >
<Text>Edit Profile</Text>
</Card>
</TouchableOpacity>
</Screen>
)
}
const styles = StyleSheet.create({
list: {
padding: 20,
backgroundColor: 'white',
borderRadius: 5,
marginTop: 10,
},
})
export default SettingsScreen
editProfileScreen
import React from 'react';
import { Text, StyleSheet} from 'react-native';
import Screen from '../Components/Screen'
function EditProfileScreen({navigation}) {
return (
<Screen style={styles.screen}>
<Text>Edit Profile Screen</Text>
</Screen>
)
}
const styles = StyleSheet.create({
})
export default EditProfileScreen
I have tried wrapping my settingNavigation in a NavigationContainer, but thats not working.
You need to return JSX in settingsNavigator.js file
const SettingsNavigator = () => (
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
<SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
</SettingsStack.Navigator>
);
)
const SettingsNavigator = () => {
return <SettingsStack.Navigator>
<SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
<SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
</SettingsStack.Navigator>
}
Add return this type
I have a webview component in my project, where the flow being =>
The bottomTabBar opens the initial screen of the url that is given to Webview source prop, which should remain, when any link is clicked on the webview and it moves to another screen, the bottomtabbar should not come up.
Below is my WebviewScreen code :
import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
import {View, SafeAreaView, ActivityIndicator} from 'react-native';
export default class ConsultationHomeScreen extends Component {
renderLoadingView = () => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<ActivityIndicator size="large" />
</View>
);
};
render() {
const {url} = this.props.route.params;
return (
<SafeAreaView style={{flex: 1}}>
<WebView
source={{uri: url}}
renderLoading={this.renderLoadingView}
startInLoadingState={true}
ref={(ref) => {
this.webview = ref;
}}
onNavigationStateChange={(event) => {
if (event.url !== url) {
this.webview.stopLoading();
}
}}
/>
</SafeAreaView>
);
}
}
And Appnavigation.js
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import LoginScreen from '../screens/authentication/LoginScreen';
import OtpScreen from '../screens/authentication/OtpScreen';
import AddChild from '../screens/Child/AddChild';
import AcceptInviteScreen from '../screens/AcceptInviteScreen';
import ConsultationHomeScreen from '../screens/ConsultationHomeScreen';
import HomeScreen from '../screens/HomeScreen/HomeScreen';
import PlansScreen from '../screens/PlansScreen';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
function BottomTabBar() {
return (
<Tab.Navigator
lazy={false}
tabBarOptions={{
labelStyle: {
color: '#FF1493',
fontSize: 15,
},
}}>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: () => {
<MaterialIcon name="home" color="#FF1493" size={20} />;
},
}}
/>
<Tab.Screen
name="Consult"
component={ConsultationHomeScreen}
initialParams={{
url: 'some link',
}}
/>
<Tab.Screen name="Plans" component={PlansScreen} />
</Tab.Navigator>
);
}
export default function AppNavigation() {
return (
<NavigationContainer>
<Stack.Navigator headerMode="none">
<Stack.Screen name="login" component={LoginScreen} />
<Stack.Screen name="otp" component={OtpScreen} />
<Stack.Screen name="addchild" component={AddChild} />
<Stack.Screen
name="acceptinvitescreen"
component={AcceptInviteScreen}
/>
<Stack.Screen name="home" component={BottomTabBar} />
</Stack.Navigator>
</NavigationContainer>
);
}
However, am unable to remove the bottomtabbar,could anyone please suggest how should I implement this behaviour?
Step1-> Webview initial screen renders and has bottomtabtabr
Step2-> Link clicked on the initial screen and navigates to next screen handled by web source
Step3->Bottom tab bar should not occur anywhere but only on the first initial screen
Please,any suggestion would be appreciated and let me know if anything else is required for better understanding.
I tested this modification in your source code and it works like a charm.
GIT difference in WebviewScreen.js :
## -23,6 +23,7 ## export default class ConsultationHomeScreen extends Component {
}}
onNavigationStateChange={(event) => {
if (event.url !== url) {
+ this.props.navigation.setOptions({ tabBarVisible: false });
this.webview.stopLoading();
}
}}
Let me know if you have any issue.
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.
I wish to create Header for my Notes Storage App on React Native. I have Tried using stackNavigator till now but I am caught up on how to add menu icon which onPres will open the Drawer. I tried using HeaderLeft in stackDesignHead but it gives an error. Also using a FAB is not recommended.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import HomePage from './src/HomePage/HomePage';
import NotesFolder from './src/notes';
import CreateNewFolder from './src/CreateNewFolder';
import Icon from 'react-native-vector-icons/Ionicons';
import Constants from 'expo-constants';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const stackDesignHead = {
title: "Notes Classifier",
headerTintColor:"white",
headerStyle:{
backgroundColor:"#fcba03"
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center'
}
function LeftDrawer () {
return(
<Stack.Navigator>
<Stack.Screen
name="HomePage"
component={HomePage}
options={stackDesignHead}
/>
<Stack.Screen
name="NotesFolder"
component={NotesFolder}
options={{...stackDesignHead,title:"Notes"}}
/>
<Stack.Screen
name="CreateNewFolder"
component={CreateNewFolder}
options={{...stackDesignHead,title:"+ new Folder"}}
/>
</Stack.Navigator>
)
}
const menuDesignHead = {
title: "Notes Classifier",
headerTintColor:"white",
headerStyle:{
backgroundColor:"#fcba03"
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center'
}
function App () {
return(
<View style={styles.container}>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen
name="Home"
component={LeftDrawer}
options={{menuDesignHead}}
/>
</Drawer.Navigator>
</View>
);
}
export default()=>{
return(
<NavigationContainer>
<App/>
</NavigationContainer>
)
}
I am new to react native and unaware of various ways to create header.
Provides a way to create your own custom headers in React-navigation documents.
Replacing the title with a custom component
Sometimes you need more control than just changing the text and styles of your title -- for example, you may want to render an image in place of the title, or make the title into a button. In these cases you can completely override the component used for the title and provide your own.
Example
function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('#expo/snack-static/react-native-logo.png')}
/>
);
}
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerTitle: props => <LogoTitle {...props} /> }}
/>
</Stack.Navigator>
);
}