I'm having problem with custom drawer navigator. all the methods on internet address lower versions of react navigation which do not work anymore.
here's my code
import { createAppContainer,DrawerItems } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
import {SafeAreaView,ScrollView,Dimensions,View} from 'react-native';
const MyDrawerNavigator = createDrawerNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
},{
contentComponent:CustomDrawerComponent,
})
const CustomDrawerComponent = (props) => {
<SafeAreaView style={{flex:1}}>
<View>
<Image source={{'uri' : 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'}} />
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
}
const AppContainer = createAppContainer(MyDrawerNavigator);
export default AppContainer;
the code works fine without custom drawer. but when i add custom drawer the links on the sidebar do not appear. the side bar is empty.
You need to change your import to import from react-navigation-drawer.
If you're using react-navigation-drawer 1.x:
import { DrawerItems } from 'react-navigation-drawer';
If you're using react-navigation-drawer 2.x, use DrawerNavigatorItems instead:
import { DrawerNavigatorItems as DrawerItems } from 'react-navigation-drawer';
Always read the official docs: https://reactnavigation.org/docs/en/drawer-navigator.html#providing-a-custom-contentcomponent
Instead of using this
const CustomDrawerComponent = (props) => {
<SafeAreaView style={{flex:1}}>
<View>
<Image source={{'uri' : 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'}} />
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
}
i created a new react component
class CustomDrawerComponent React.Componect{
render(){
return(
<SafeAreaView style={{flex:1}}>
<View>
<Image source={{'uri' : 'https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg'}} />
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
}
}
this worked
Related
I am trying to learn react native but getting following error
ReferenceError: navigation is not defined
I am a beginner can you please guide me to solve this error.
I have also tried to change to functional component but getting same error.
I am using expo for learning purpose
import 'react-native-gesture-handler';
import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, Text, View, Image, Button,ImageBackground } from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
class HomeScreen extends Component {
render() {
return (
<View style = {styles.container}>
<Text>Hello HomeScreen</Text>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}
}
class Profile extends Component {
render() {
return (
<View style = {styles.container}>
<Text>Hello profile</Text>
</View>
);
}
}
const Stack = createStackNavigator();
class App extends Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profle" component={Profile} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems : 'center'
},
});
export default App;
You are using a class based component so use this.props.navigation
<Button
title="Go to Profile"
onPress={() => this.props.navigation.navigate('Profile')}
/>
I am using react native drawer with navigation 5, I have created a drawer but from the drawer when I click some of option to navigate to next screen it gives me error like "Undefined is not object.. this.props" and when I define prop on top like const navigation = this.props.navigation it then gives me error "Navigation is undefined..."
This is my Drawer where my content is placed:
export function DrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<View
style={
styles.drawerContent
}
>
<View style={styles.userInfoSection}>
<Avatar.Image
...
/>
</View>
<Drawer.Section style={styles.drawerSection}>
<DrawerItem
label="Preferences"
onPress={() => {}}
/>
<DrawerItem
label="Classes"
onPress={() => this.props.navigation.navigate('ClassHome')} //Over Here I want to navigation
/>
</Drawer.Section>
</View>
</DrawerContentScrollView>
);
}
And this is where I placed my Drawer Screens:
import * as React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<Drawer.Navigator drawerContent={() => <DrawerContent navigation = {this.props.navigation} />}>
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
<Drawer.Screen name="ClassHome" component={ClassHome} />
</Drawer.Navigator>
);
}
}
You have to pass props from drawerContent to your DrawerContent as below :
import * as React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<Drawer.Navigator drawerContent={(props) => <DrawerContent {...props}/>}> {/* pass props here */}
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
<Drawer.Screen name="ClassHome" component={ClassHome} />
</Drawer.Navigator>
);
}
}
Now, you can use that props directly in your custom component :
export function DrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<View
style={
styles.drawerContent
}
>
<View style={styles.userInfoSection}>
<Avatar.Image
...
/>
</View>
<Drawer.Section style={styles.drawerSection}>
<DrawerItem
label="Preferences"
onPress={() => {}}
/>
<DrawerItem
label="Classes"
onPress={() => props.navigation.navigate('ClassHome')} // user props here
/>
</Drawer.Section>
</View>
</DrawerContentScrollView>
);
}
According to the documentation, the navigation prop should be passed by default to the DrawerContent. I would recommend doing it this way:
import * as React from 'react';
import { createDrawerNavigator } from '#react-navigation/drawer';
import HomeTimeTable from './HomeTimeTable';
import {DrawerContent} from './DrawerContent';
import ClassHome from './ClassHome';
const Drawer = createDrawerNavigator();
export default class DrawerScreens extends React.Component {
render(){
return (
<Drawer.Navigator drawerContent={DrawerContent}>
<Drawer.Screen name="HomeTimeTable" component={HomeTimeTable} />
<Drawer.Screen name="ClassHome" component={ClassHome} />
</Drawer.Navigator>
);
}
}
returning this error while tying to navigate using switchnavigation.
i have tried removing this. props then returns undefined 'navigation'.
import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createSwitchNavigator, createAppContainer , withNavigation } from 'react-navigation';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import layout from '../../constants/LayoutStyle'
import QuoteScreen from './QuoteScreen';
const HomeScreen = () => {
return (
<View style={styles.viewStyles}>
<View style={{position: 'absolute',top: hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height:
wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
<View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
<Icon name="ios-book" color="purple" size={wp('10%')}
onPress={() => this.props.navigation.navigate('Quote')}
/>
<Text style={styles.tabTextStyle}>Books</Text>
</View>
</View>
);
};
const RootStack = createSwitchNavigator(
{
Home: HomeScreen,
Quote: QuoteScreen,
}
);
const AppContainer = createAppContainer(RootStack);
export default class app extends React.Component {
render() {
return <AppContainer />
}
}
expected to complete navigation properly
HomeScreen is a functional component and hence you should not use this.props.navigation, just say props.navigation.
And If you want to use props inside the function component, then use should pass props as an argument to that functional component. Like this =>
const HomeScreen = (props) => {
return (
<View style={styles.viewStyles}>
<View style={{position: 'absolute',top:
hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height:
wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
<View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
<Icon name="ios-book" color="purple" size={wp('10%')}
onPress={() => this.props.navigation.navigate('Quote')}
/>
<Text style={styles.tabTextStyle}>Books</Text>
</View>
</View>
);
};
If this does not work then pass navigation as props to HomeScreen component wherever u use, Like this =>
<HomeScreen
navigation = {this.props.navigation} // or navigation = {props.navigation}, if it is functional component
/>
I have a custom header like this
import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, Image } from 'react-native';
import { Header, Left, Right, } from 'native-base';
import { Icon } from 'react-native-elements';
export default class MainHeader extends React.Component {
pressSearch() {
this.props.navigation.navigate('Login');
}
render () {
return(
<Header style={{paddingTop:25}}>
<Left style={{marginBottom:10}}>
<TouchableOpacity>
<View style={{flexDirection:'row'}}>
<Image
style={styles.stretch}
source={require('../images/logoforplay.png')}
/>
<Text style={styles.headerText} > Eventlinn </Text>
</View>
</TouchableOpacity>
</Left>
<Right>
<TouchableOpacity
style={styles.headerButton}
onPress={this.pressSearch.bind(this)}
>
<Icon
name={'search'}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerButton}
>
<Icon
name={'add-location'}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.headerButton}
>
<Icon
name={'notifications'}
/>
</TouchableOpacity>
</Right>
</Header>
)
}
}
const styles = StyleSheet.create ({
mainContainer: {
flex:1,
backgroundColor:'white'
},
cardContainer: {
flex:1
},
stretch: {
height:35,
width:35,
},
headerText: {
fontSize:24,
marginTop:3,
},
headerButton: {
marginBottom:10,
marginLeft:15
}
})
My problem navigation.navigate not working.My routers working well because i can navigate to 'login' with another screen.I read something about pure components but still dont understand how to solve this problem.What do you suggest ? By the way i am new to react native.
If your header isn't a route within your Router at the head of your app you will need to use withRouter from react-router
import {withNavigation} from 'react-navigation'
export default withNavigation(MainHeader)
Now you should be able to access this.props.navigation without directly passing it down as a prop from a parent component.
use import { withNavigation } from 'react-navigation'; at the top and then export default withNavigation(FilmItem); at the end.
See doc : https://reactnavigation.org/docs/en/connecting-navigation-prop.html
I am doing navigation in the following manner Home.js -> discover-things.js(which includes a top nav-bar) -> Filter-screen.js
In Home.js,I have a stack navigator defined like this---
import { StackNavigator } from 'react-navigation';
import DiscoverScreen from './discover-things';
import TopNavBar from './discover-things/top-nav-bar';
export default StackNavigator({
DiscoverScreen: {
screen: DiscoverScreen,
navigationOptions: { header: TopNavBar },
},
});
In the top-nav-bar, I have this---
import React from 'react';
import {Alert} from 'react-native';
export default ({...props}) => ( //Here the props are undefined
<View style={styles.navbarContainer}>
<View style={[styles.titleContainer, globalStyles.verticallyBottom]}>
<Text style={styles.discoverTitle}>
Discover
</Text>
</View>
<View style={[styles.toolsContainer, globalStyles.verticallyBottom]}>
<View style={[styles.toolsInnerContainer, globalStyles.verticallyBottom]}>
<Icon name="search" size={25} style={styles.icon} />
<Icon name="sliders" size={25} style={styles.icon} onPress={() => {props.navigation.navigate('FilterScreen')}
/>
</View>
</View>
</View>
);
Here I am applying an OnClick on one of the icons, so that It can lead me to the filter screen.
In Filter Screen, I have this----
import { StackNavigator } from 'react-navigation';
import FilterScreen from './view';
export default StackNavigator({
FilterScreen: {
screen:FilterScreen,
navigationOptions: {header : null}
}
})
But on click of the icon in the filter screen, nothing happens. What am I doing wrong here and how to correctly implement it?