I'm trying to add custom component to my react navigation v4 :
this is my code:
const MainNavigator = createDrawerNavigator(
{
MapProfile: {
screen: MapProfileTabNavigator,
navigationOptions: {
drawerLabel: "Maps",
},
},
SportCentersList: SportCentersListNav,
TermsAndConditions: TermsAndConditionsNavigator,
About: AboutScreenNavigator,
},
{
contentComponent: customDrawerComponent,
}
);
I have a customDrawerComponent which I made as a component like so:
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import SafeAreaView from "react-native-safe-area-view";
import { DrawerItems } from "react-navigation-drawer";
const customDrawerComponent = (props) => {
return (
<ScrollView>
<SafeAreaView
style={styles.container}
forceInset={{ top: "always", horizontal: "never" }}
>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
);
};
export default customDrawerComponent;
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
but I get a blank drawer, any ideas?
but the drawer stays the same, any ideas what I did wrong?
Related
I have a couple of issues with setup Stack Navigator and Drawer Navigator. First and foremost, the below picture is the flow that I expected and I followed the documentation provided by the React Navigation to implement but I have no luck to achieve what I expected and the output of the implementation looks so weird (You can find it on the 2nd picture). I also attached my code snippet at the bottom.
Also, the output looks like the Drawer navigator header is duplicated with the Stack Navigator.
Besides that, I am quite new to React Native. I hope someone makes me more clearer how the implementation should look like because I have come across few articles and websites, their solution does not work in my case.
P/S: Screen X is opened when one of item clicked from Screen C
import React, { Component } from 'react';
import {
Image,
Button,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import { createDrawerNavigator, DrawerActions, DrawerItems } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../HomeScreen';
import ItemDetailScreen from '../ItemDetailScreen';
import ProfileScreen from '../ProfileScreen';
const navOptionsHandler = (navigation) => {
header: null
}
const CustomDrawerComponent = (props) => (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white', alignItems: 'center' }}>
<Image source={{ uri: 'https://example.com/logo.png' }} style={{
height: 120,
width: 120,
borderRadius: 60
}} />
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
const MyDrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Profile: {
screen: ProfileScreen
}
},
{
initialRouteName: "Home",
contentComponent: CustomDrawerComponent,
contentOptions: {
activeTintColor: 'orange'
}
}
);
const MyStackNavigator = createStackNavigator(
{
HomeA: {
screen: MyDrawerNavigator
},
ItemDetail: {
screen: ItemDetailScreen,
navigationOptions: navOptionsHandler
}
},
{
initialRouteName: "HomeA"
}
);
const AppContainer = createAppContainer(MyStackNavigator);
export default class StackNavigator extends Component {
render() {
return <AppContainer />;
}
}
Your drawer navigator is encapsulated by the stack navigator, which is why you have a double header.
What you need to do is to have the drawer navigator as your main navigator, and have your stack navigator as your profile screen, so it will be displayed as you click on "Profile" in your drawer navigator.
This should work:
const navOptionsHandler = navigation => {
null
}
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{ height: 150, backgroundColor: 'white', alignItems: 'center' }}
>
<Image
source={{ uri: 'https://example.com/logo.png' }}
style={{
height: 120,
width: 120,
borderRadius: 60,
}}
/>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
const MyStackNavigator = createStackNavigator(
{
Profile: ProfileScreen,
ItemDetail: {
screen: ItemDetailScreen,
navigationOptions: navOptionsHandler,
},
},
{
initialRouteName: 'Profile',
},
)
const MyDrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
ProfileStack: {
screen: MyStackNavigator,
navigationOptions: () => ({
title: 'Profile',
}),
}
},
{
initialRouteName: 'Home',
contentComponent: CustomDrawerComponent,
contentOptions: {
activeTintColor: 'orange',
},
},
)
const AppContainer = createAppContainer(MyDrawerNavigator)
export default class StackNavigator extends Component {
render() {
return <AppContainer />
}
}
By the way since you say you are only just starting using React Native, unless you have a specific reason to use React Navigation v4, you should probably use v5 instead as v4 will become obsolete one day or another.
I had several problems trying to achieve this.
The sidemenu is not displayed on the Login screen, but in the Home component yes(this is fine).
But if I go back to the login component (by clicking on the menu navigation item), drawer is now shown from the login (It only must be showed on the Home component). I do not know why the template that I have to put in the drawer is not shown, by default the routes that I have created appear and with this the problem occurs (I am trying to put a template in the sidemenu)..
How can I fix this?
this is my code:
app.js
import React from "react";
import { StyleSheet, View } from "react-native";
import UserNavigation from "./app/navigation/UserNavigation";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return <UserNavigation />;
}
}
userNavigation.js
import React from "react";
import {
Platform,
StyleSheet,
Text,
View,
SafeAreaView,
ScrollView,
Dimensions,
Image
} from "react-native";
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { Icon } from "native-base";
import LoginScreen from "../screens/login/Login";
import HomeScreen from "../screens/home/Home";
const { width } = Dimensions.get("window");
const CustomDrawerNavigation = props => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{
height: 250,
backgroundColor: "#fff",
opacity: 0.9
}}
>
<View
style={{
height: 200,
backgroundColor: "Green",
alignItems: "center",
justifyContent: "center"
}}
>
<Image
source={require("../../assets/img/logo.webp")}
style={{ resizeMode: "contain", width: "100%" }}
/>
</View>
<View
style={{
height: 50,
backgroundColor: "Green",
alignItems: "center",
justifyContent: "center"
}}
></View>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
<View style={{ left: 20, bottom: 20 }}>
<View style={{ flexDirection: "row" }}>
<View
onPress={() => props.navigation.navigate("Login")}
style={{
flexDirection: "row",
alignItems: "flex-start",
justifyContent: "center",
marginRight: 15
}}
>
<Icon
type="MaterialCommunityIcons"
name="logout"
style={{ fontSize: 24 }}
onPress={() => props.navigation.navigate("Login")}
/>
<Text>Salir</Text>
</View>
</View>
</View>
</SafeAreaView>
);
};
const DrawerStack = createStackNavigator({
Home: HomeScreen
});
const DrawerNavigation = createDrawerNavigator({
Home: {
name: "Home",
screen: HomeScreen
},
Login: {
name: "Cerrar Sesión",
screen: LoginScreen
}
});
const AppNavigator = createSwitchNavigator(
{
App: DrawerNavigation,
Login: {
screen: LoginScreen
}
},
{
initialRouteName: "Login",
drawerPosition: "left",
I have another problem and I don't know why the template (CustomDrawerNavigation) I have to put in the drawer is not shown.
contentComponent: CustomDrawerNavigation,
drawerOpenRoute: "DrawerOpen",
drawerCloseRoute: "DrawerClose",
drawerToggleRoute: "DrawerToggle",
drawerWidth: (width / 3) * 2
}
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
login.js
import React, { Component } from "react";
import { View } from "react-native";
import { Button, Text } from "native-base";
export default class Login extends Component {
constructor() {
super();
this.state = {};
}
handlerLogin = async () => {
this.props.navigation.navigate("Home");
};
render() {
return (
<View>
<Text>Login</Text>
<Button block button onPress={() => this.handlerLogin()}>
<Text>Go to home</Text>
</Button>
<Text>Login</Text>
</View>
);
}
}
home.js
import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { StatusBar } from "react-native";
import {
Container,
Header,
Title,
Left,
Icon,
Right,
Button,
Body,
Content,
Text,
Card,
CardItem
} from "native-base";
export default class Home extends Component {
constructor() {
super();
this.state = {
loading: false
};
}
closeDrawer = () => {
this.drawer._root.close();
};
openDrawer = () => {
this.drawer._root.open();
};
render() {
return (
<Container>
<Header>
<Left>
<Button
transparent
onPress={() => this.props.navigation.openDrawer()}
>
<Icon name="menu" />
</Button>
</Left>
<Body>
<Title>HomeScreen</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card>
<CardItem>
<Body>
<Text>Home</Text>
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
For this you can create two Navigators.
Advantages:
1. After login he cant get back to Login screen if he press back
2. Side Drawer wont be visible in Login Page
Imports we need:
import { createAppContainer, createSwitchNavigator } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { createDrawerNavigator } from 'react-navigation-drawer';
Login Stack:
const LoginStack = createStackNavigator(
{
Login: {
screen: Login,
navigationOptions: {
title: 'Login',
headerLeft: null,
header: null
}
},
forgotPassword: {
screen: ForgotPassword,
navigationOptions: {
title: 'Forgot Password'
}
}
},
{
initialRouteName: 'Login',
} );
Home Page Stack:
const homePageBottomNavigationStack = createStackNavigator(
{
Home: {
screen: Login,
navigationOptions: {
title: 'Login',
headerLeft: null,
header: null
},
},
{
initialRouteName: 'Home',
} )
Drawer Navigator:
const PostLoginStack = createDrawerNavigator(
{
Home: {
screen: homePageBottomNavigationStack
}
} );
Switch Navigator:
const switchNavigator = createSwitchNavigator(
{
LoginStack: LoginStack,
PostLoginStack: PostLoginStack
},
{ headerMode: "none", initialRouteName: "LoginStack" } );
const AppContainer = createAppContainer(switchNavigator);
package.json:
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.1",
"react-native-paper": "^3.2.1",
"react-native-reanimated": "^1.4.0",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",
"react-navigation-material-bottom-tabs": "^2.1.5",
"react-navigation-stack": "^1.10.3"
For Having a custom drawer component, make this change:
const PostLoginStack = createDrawerNavigator(
{
Home: {
screen: homePageBottomNavigationStack
}
},
{
contentComponent: YourCustomDrawerComponent
}
);
You will need to create two navigators one for the Login and one for the App and then wrap them into a SwitchNavigator
So
Login = StackNavigator
App = DrawerNavigator
and Login and App together into a SwitchNavigator
You can refer this article
https://medium.com/building-with-react-native/routing-in-react-native-apps-and-how-to-configure-your-project-with-react-navigation-library-d8d58005bfe9
I have created the side menu using DrawerNavigator with the static menu names and screens. I want the menu names and screens to be dynamic. Meaning to say I like to fetch those details in API and display in the DrawerNavigator. Please help to resolve this.
const MyApp = createDrawerNavigator({
HomeScreen: {
screen: HomeScreen,
},
WebMenuScreen: {
screen: WebMenuScreen,
},
}, {
drawerPosition: 'right',
},{
contentComponent: CustomDrawerComponent
}, {
initialRouteName: 'Login'
});
Try this, I hope this will helps you.
in Route File
import DrawerNavigator from "./DrawerNavigator";
import Home from './Home';
import About from './About'
import {
createStackNavigator,
createAppContainer,
} from "react-navigation";
const MainNavigator = createStackNavigator({
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: {
header: null
}
},
Home: {
screen: Home,
navigationOptions: {
htitle: 'Home'
}
},
About: {
screen: About,
navigationOptions: {
htitle: 'About'
}
},
});
const Routes = createAppContainer(MainNavigator);
export default Routes;
in DrawerNavigator File
import React from 'react';
import { Platform, Dimensions } from 'react-native';
import { createDrawerNavigator, createAppContainer } from 'react-navigation';
import Home from './Home';
import About from '/About'
import MenuDrawer from './MenuDrawer';
const WIDTH = Dimensions.get('window').width;
const DrawerConfig = {
drawerWidth: WIDTH*0.83,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const DrawerNavigator = createDrawerNavigator(
{
Home:{
screen:Home
},
About:{
screen:About
},
},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);
in Menu Drawer File
import React from "react";
import {
View,
Text,
ScrollView,
Image,
TouchableOpacity,
} from "react-native";
var obj = JSON.parse('{ "name":"Home","name":"About" }');
// import styles from './menuDrawerStyles'
class MenuDrawer extends React.Component {
navLink(nav, text) {
return (
<TouchableOpacity
style={{ height: 50 }}
onPress={() => this.props.navigation.navigate(nav)}
>
<Text style={styles.link}>{text}</Text>
</TouchableOpacity>
);
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.scroller}>
{
this.obj.map((data) => {
<View style={styles.bottomLinks}>
<View style={{ flex: 2, flexDirection: "row" }}>
{this.navLink(data.name, data.name)}
</View>
<View style={{ flex: 2, flexDirection: "row" }}>
{this.navLink(data.name, data.name)}
</View>
</View>
})
}
</ScrollView>
</View>
);
}
}
in Menu Button File
import React from "react";
import { StyleSheet , Platform } from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
export default class MenuButton extends React.Component {
render() {
return (
<Icon
name="reorder"
color="black"
size={25}
style={styles.menuIcon}
onPress={() => this.props.navigation.toggleDrawer()}
/>
);
}
}
const styles = StyleSheet.create({
menuIcon: {
zIndex: 9,
position: "absolute",
top: Platform.OS === "android" ? 15 : 25,
left: 20
}
});
In Menu Drawer file you can call Api and fetch menu list.
Help me please. I am making mobile app. I have bottom tab navigation that is making navigation between 3 main pages. I have done navigation between 1st page and second,but not with tab bottom navigation, with button. When i have made this i have not got something i want. I will be very happy if you help me. When i navigate to second page from first i have 2 titles. But i want to make 1:
there is 2 titles, first is < and second is "Courses", i want to make it like this "< Courses". Help me please. Code:
// 1st page
import Courses from './Courses'
<Button
onPress={() => {
navigate('Courses')
}}
title="More courses"
/>
const RootStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Courses: {
screen: Courses,
},
Details: {
screen: DetailsScreen,
},
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'
import Home from './screens/Home'
import Courses from './screens/Courses'
import Editor from './screens/Editor'
import AppNavigator from './AppNavigator';
const TabNavigator = createBottomTabNavigator({
Home:{
screen:Home,
navigationOptions:{
tabBarLabel:'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={24} />
)
}
},
Courses:{
screen:Courses,
navigationOptions:{
tabBarLabel:'Courses',
tabBarIcon:({tintColor})=>(
<Icon name="ios-school" color={tintColor} size={24} />
)
}
},
Editor:{
screen:Editor,
navigationOptions:{
tabBarLabel:'Editor',
tabBarIcon:({tintColor})=>(
<Icon name="ios-document" color={tintColor} size={24} />
)
}
},
},{
tabBarOptions:{
activeTintColor:'#db0202',
inactiveTintColor:'grey',
style:{
fontSize:3,
height:45,
backgroundColor:'white',
borderTopWidth:0,
elevation: 5
}
}
});
export default createAppContainer(TabNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You don't need to define another navigator in your Home screen. If you define Home like this it should work:
import React from 'react'
import { Button, View } from 'react-native'
export default class Home extends React.Component {
render() {
const { navigation: { navigate } } = this.props
<Button
title='More Courses'
onPress={() => navigate('Courses')}
/>
}
}
Your other screens should look similar to this.
When using a basic DrawerNavigator, there is proper paddingTop that avoids overlaying content over the status bar; however, when adding a custom contentComponent, the padding is not there. Code: https://github.com/myplaceonline/testreactexpo/tree/drawermargin
Without custom contentComponent on Android:
With custom contentComponent on Android:
I can add some explicit margin, but what value should I choose? I'm already using SafeAreaView, but I believe that's only for iOS.
Here's the code. Comment the contentComponent: CustomDrawerContentComponent, line to see the working view.
import React from 'react';
import { SafeAreaView, ScrollView, Text, View } from 'react-native';
import { createAppContainer, createDrawerNavigator, createStackNavigator, DrawerItems } from 'react-navigation';
class TestScreen extends React.Component {
static navigationOptions = {
title: "Test",
};
render() {
return (
<View style={{flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Test</Text>
</View>
);
}
}
const CustomDrawerContentComponent = props => (
<SafeAreaView style={{flex: 1}} forceInset={{ top: "always", horizontal: "never" }}>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
);
export default AppDrawer = createAppContainer(
createDrawerNavigator(
{
DrawerTest: {
screen: createStackNavigator(
{
Test: TestScreen
},
),
navigationOptions: {
drawerLabel: "Test",
}
},
},
{
contentComponent: CustomDrawerContentComponent,
}
)
);
<div data-snack-id="#git/github.com/myplaceonline/testreactexpo#drawermargin" data-snack-platform="ios" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>
Solved with:
import Constants from 'expo-constants';
<ScrollView style={{paddingTop: Constants.statusBarHeight}}>