I have a confusion regarding React Navigation. I need a Login screen which don't have Drawer and in rest of application, I need drawer Navigation.
I am looking for a solution where I can write code in a single place and applicable on whole application.
So I have created one stack navigator which contains the path of
createStackNavigator({
LoginRT:{
screen:Login
},
HomeRT:{
screen:Home
},
ContactRT:{
screen:Contact,
navigationOptions: {
headerRight: (
<Text></Text>
)
}
},
HaulerSelectionRT:{
screen:HaulerSelection
}
},
{
initialRouteName: 'LoginRT',
/* The header config from HomeScreen is now here */
defaultNavigationOptions : ({ navigation}) => ({
headerStyle: {
backgroundColor: "#3B9EC1",
color: 'white',
fontSize: 16,
},
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 20,
textAlign:"center",
flex:1
},
// headerRight: (
// <Icon
// size={30}
// name="bars"
// style={{ paddingRight: 5 }}
// onPress={() => navigation.openDrawer()}
// />
// ),
// headerLeft: <Text onPress={() =>
// navigation.navigate('LoginRT')}>Menu</Text>,
headerTintColor: "#fff",
animationEnabled: true
})
}
);
and one for Drawer Navigation
const DrawerStack = createDrawerNavigator(
{
LoginRoute: Login,
Hauler: HaulerSelection,
},
{
initialRouteName: 'LoginRoute',
drawerPosition: 'left',
// navigationOptions: {navigationOptions
// },
}
);
and then I register both in Appcontainer
const AppContainer = createAppContainer(MyRoutes,DrawerStack);
But DrawerNavigation is not working.
My doubt is, Is my approach is right? Or there is another way to achieve same.
Please help.
The header part is added by default and is avoidable.
You can use the following code to achieve this.
navigationOptions: {
header: null
}
This navigation options could either be screen specific or common to all screens.
Related
I have a header where i want to show menu or back Icon depending on the current page. so i am rendering the Icon conditionally like bellow
import Icon from 'react-native-vector-icons/Ionicons';
const HeaderContainer = ({navigation}) => {
return (
<SafeAreaView forceInset={{top: 'never'}}>
<View
style={{
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 10,
paddingRight: 10,
}}>
<View>
{navigation.state.routeName !== 'Home' ? (
<Icon
name="chevron-back-sharp"
size={30}
onPress={() => {
navigation.goBack();
}}
/>
): (<Icon
name="ios-menu"
size={30}
onPress={() => {
navigation.toggleDrawer();
}}
/>)}
</View>
</SafeAreaView>
const CustomHeader = ({navigation}) => {
return {
header: (props) => <HeaderContainer {...props} />,
headerStyle: {backgroundColor: '#fff'},
headerTintColor: '#000',
};
};
const AppNavigator = createStackNavigator(
{
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
Cart: { screen: CartScreen },
},
{
initialRouteName: 'Home',
defaultNavigationOptions: ({navigation}) => {
return CustomHeader(navigation);
},
},
);
const AppDrawerNavigator = createDrawerNavigator(
{ App: { screen: AppNavigator } },
{contentComponent: DrawerContainer},
);
export default AppContainer = createAppContainer(AppDrawerNavigator);
But initially it is loading with only one Icon, i.e menu icon, but when i change the navigation, getting menu and back icon overlapped. please help me how can i fix this
screenshot
Firstly, I would console.log the navigation right before returning the header to see how the routeName is changing. That might be happening because the initialRouteName is 'Home'.
Edit: you could store the routeName in a variable right before return and call it isHome = navigation.state.routeName and instead of having two icons between which you choose, put just one and change its props depending on isHome.
<Icon
name= !isHome ? "chevron-back-sharp" : "ios-menu"
size={30}
onPress={() => !isHome ? navigation.goBack() : navigation.toggleDrawer()}
/>
Another solution would be to have a param on Home screen, when it mounts
componentDidMount() {
this.props.navigation.setParams({isHome: true})
}
and then, isHome = navigation.state && navigation.state.params && navigation.state.params.isHome
Using react native with react navigation I use a DrawNavigator and several StackNavigators. Now I want to define the header style (header comes with StackNavigator) of the StackNavigator just once and for all StackNavigators.
This is what i have:
// View1.js
export default StackNav1 = createStackNavigator(
{
View1: View1Screen,
View2: View2Screen
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerStyle: {
backgroundColor: '#9eb9b3',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerLeft: (
<Icon style={{ paddingLeft: 10 }} name="bars" size={30}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
),
}
}
}
)
// View2.js
export default StackNav2 = createStackNavigator(
{
View3: View3Screen,
View4: View4Screen
},
// here I need to define the style from View1.js again ?!
)
Is there a smarter solution to share the appearance than writing it over and over again.
When the app is scaling I probably will have a lot StackNavigators and want them to have the same header/appearance.
I appreciate your thoughts!
Create stackNavigatorConfig which is the second parameter of react navigation methods.
stackNavigatorConfig = {
defaultNavigationOptions: ({ navigation }) => {
return {
headerStyle: {
backgroundColor: '#9eb9b3'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
name="bars"
size={30}
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
/>
)
};
}
};
Then you can use it like
export default StackNav1 = createStackNavigator({
View1: View1Screen,
View2: View2Screen
},
stackNavigatorConfig);
export default StackNav2 = createStackNavigator({
View3: View3Screen,
View4: View4Screen
},
stackNavigatorConfig);
I am having a problem with my line of code specifically with the headerLeft onPress. I wanted to put an icon where when pressed it will open the drawerNavigator of my simple application.
this is my AppNavigation.js
//DRAWER NAVIGATOR
const drawerNav = createDrawerNavigator({
JobFeed: {
screen: MainScreen,
navigationOptions: {drawerLabel: 'Job Feed',}
},
},
{
drawerPosition : "left", contentComponent: CustomDrawerComponent,
});
// Manifest of possible screens
const primaryNav = createStackNavigator({
LaunchScreen: {
screen: LaunchScreen,
navigationOptions: {
title: "Ty, Next",
headerTitleStyle: {
textAlign: 'center',
flex: 1,
fontFamily: 'CoreSansD65Heavy',
color: Colors.semiGray,
}
}
},
MainScreen: {
screen: MainScreen,
navigationOptions: {
title: "Ty, Next",
headerTitleStyle: {
textAlign: 'center',
flex: 1,
fontFamily: 'CoreSansD65Heavy',
color: Colors.semiGray,
marginBottom: 20,
}
}
},
},
{
// Default config for all screens
initialRouteName: 'MainScreen',
})
so here's the problem. In my MainScreen.js I put this code, whenever I press the button It is saying that undefined is not an object (evaluating _this2.props.navigation ) Please help me I am stuck on this particular matter..
static navigationOptions = ({ navigation }) => {
const { state } = navigation;
const {} = state;
return {
headerStyle:{
backgroundColor: "Transparent",
marginRight: 20,
marginLeft: 20,
},
headerLeft: (
<TouchableOpacity onPress={this.props.navigation.openDrawer()}>
<Icon name="bars" color={Colors.red} size={30}/>
</TouchableOpacity>
),
headerLeftStyle: styles.drawerIcon,
headerRight: (
<TouchableOpacity>
<Icon2 name="sc-telegram" color={Colors.red} size={30} />
</TouchableOpacity>
),
headerRightStyle: styles.planeIcon,
headerTransparent: true,
};
}
Also I can't even access my drawer navigator when swiping to right. Any Ideas why is this happening?
In your mainscreen.js is your component is class based component if it is try to create a fat arrow function instead of directly calling on onpress prop and call from that function and if your component is not class based make it first..!
I need to use state on my App.js code but react-navigation v3 don't use class so I can't define the constructor method.
Is there any other way so I can use state?
I tried to use a boolean javascript variable but it didn't help.
I use StackNavigator, drawer navigator and DrawerNavigator and BottomTabNavigator like this
const TabAppNavigator = createBottomTabNavigator({
Posts: {
screen: PostsScreen,
navigationOptions: {
tabBarLabel: 'Posts',
tabBarIcon: ({ tintColor }) => (<Icon name="md-home" color={tintColor} size={25} />)
}
},
Tools: {
screen: ToolsScreen,
navigationOptions: {
tabBarLabel: 'Tools',
tabBarIcon: ({ tintColor }) => (<Icon name="md-apps" color={tintColor} size={25} />)
}
},
Favourite: {
screen: FavouriteScreen,
navigationOptions: {
tabBarLabel: 'Favourite',
tabBarIcon: ({ tintColor }) => (<Icon name="md-heart" color={tintColor} size={25} />)
}
},
}, {
initialRouteName: 'Posts',
order: ['Posts', 'Tools', 'Favourite'],
tabBarOptions: {
activeTintColor: '#d94854',
inactiveTintColor: '#818181',
style: {
backgroundColor: '#fff',
borderTopColor: '#818181',
borderTopWidth: 1,
paddingBottom: 5,
paddingTop: 15,
},
labelStyle: {
fontSize: 13,
marginTop: 10,
},
},
navigationOptions: ({ navigation }) => {
return {
headerTitle: 'Growth Hack Toolkit',
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#d94854',
},
headerLeft: (
<Icon name="md-menu" color="#fff" size={25} style={{ paddingLeft: 15 }} onPress={() => navigation.openDrawer()} />
),
headerRight: (
<Icon name="md-search" color="#fff" size={25} style={{ paddingRight: 15 }} onPress={() => search()} />
)
}
}
}
)
const PostsStackAppNavigator = createStackNavigator({
TabAppNavigator: TabAppNavigator,
Posts: { screen: PostsScreen },
Post: { screen: PostScreen }
})
const ToolsStackAppNavigator = createStackNavigator({
TabAppNavigator: TabAppNavigator,
Tools: { screen: ToolsScreen },
Tool: { screen: ToolScreen },
ToolList: { screen: ToolListScreen },
Web: { screen: WebScreen },
Mobile: { screen: MobileScreen },
})
const DrawerAppNavigator = createDrawerNavigator({
Posts: { screen: PostsStackAppNavigator },
Tools: { screen: ToolsStackAppNavigator },
About: { screen: AboutScreen },
}, {
contentComponent: SideMenu,
drawerWidth: 250,
})
const App = createAppContainer(DrawerAppNavigator);
export default App;
I want to change my header view based on my state
basically, I have a default header (the same header for all tab screens) that contains a title, menu icon to open the drawer navigation and search icon to start searching
what I need to do is that when search icon is pressed I will change my state to show the instead of the title and when close icon is pressed I will change the state to show my default header again.
after spending so much time searching for a solution or a workaround, the answer is: I cannot.
It is not possible to have state in a functional component. So I have to use react navigation v2 instead of v3 as it is implemented as class-based component.
These links could help to understand:
difference between functional and class-based React components
React State without Constructor
I have a static data file (json) that stores information like facebook page link. If the facebook page link is empty, I do NOT want the Follow Us tab to show. The facebook page link is stored in businessDataJSON.facebook. Is there a way to only show the Follow Us Tab if businessDataJSON.facebook is not empty (empty string)? This is my App.js:
const ListStack = createStackNavigator(
{
ListCategories: ListCategoriesScreen,
ListCategoryItems: ListCategoryItemsScreen
},
{
initialRouteName: "ListCategories",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: businessDataJSON.theme.navigationBarBackground
},
headerTintColor: businessDataJSON.theme.navigationBarTint,
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
const FollowUsStack = createStackNavigator(
{
FollowUs: FollowUsScreen
},
{
initialRouteName: "FollowUs",
defaultNavigationOptions: {
headerStyle: {
backgroundColor: businessDataJSON.theme.navigationBarBackground
},
headerTintColor: businessDataJSON.theme.navigationBarTint,
headerTitleStyle: {
fontWeight: "bold"
}
}
}
);
export default createAppContainer(
createBottomTabNavigator(
{
ListTab: {
screen: ListStack,
navigationOptions: {
title: businessDataJSON.theme.tabBarListTitle,
tabBarIcon: ({ tintColor }) => (
<Icon
name={businessDataJSON.theme.tabBarListIcon}
size={17}
color={tintColor}
/>
)
}
},
FollowUsStack: {
screen: FollowUsStack,
navigationOptions: {
title: "Follow Us",
tabBarIcon: ({ tintColor }) => (
<Icon name="users" size={17} color={tintColor} />
)
}
}
},
{
tabBarOptions: {
activeTintColor: businessDataJSON.theme.tabBarIconActive,
inactiveTintColor: businessDataJSON.theme.tabBarIconInactive,
style: {
elevation: 8,
...Platform.select({
ios: { paddingTop: 4, paddingBottom: 4 },
android: {
borderTopWidth: 0,
paddingTop: 6,
paddingBottom: 6
}
})
}
}
}
)
);
Yes but you would need to make the creation of the tabs dinamic wich leads to the navigation prop to be lost and make a nightmare to use it without redux. The simple approach that i can see is to use a root createSwitchNavigator with a loading screen/start screen and the tabs as the 2nd screen. in the loading screen you check if there is your facebook page, and navigate to them accordingly. this example is for auth, but it works in your case . trust me, the navigation props is a nightmare to manage.