Navigation Drawer in React-Native

Navigation Drawer in React-Native - android

I am a newbie in react-native, Dont mind if i ask a basic question, i wanted to know,
what is the step by step procedure to implement navigation drawer.
Referred Links this Link
I am not able to integrate it.
Any Demo project implementing drawer will also work.
Any help regarding this will be great.
Thankyou

Implementation of navigation drawer in react native as follows:
index.ios.js
'use strict';
import React, { AppRegistry } from 'react-native';
import App from './components/App';
AppRegistry.registerComponent('ReactNativeProject', () => App);
App.js:
'use strict'
import React, { Component } from 'react';
import { DeviceEventEmitter, Navigator, Text, TouchableOpacity, View } from 'react-native';
import Drawer from 'react-native-drawer';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { EventEmitter } from 'fbemitter';
import Menu from './Menu';
import HomePage from './HomePage'
import ProfilePage from './ProfilePage'
import navigationHelper from '../helpers/navigation';
import styles from '../styles/root';
let _emitter = new EventEmitter();
class App extends Component {
componentDidMount() {
var self = this;
_emitter.addListener('openMenu', () => {
self._drawer.open();
});
_emitter.addListener('back', () => {
self._navigator.pop();
});
}
render() {
return (
<Drawer
ref={(ref) => this._drawer = ref}
type="overlay"
content={<Menu navigate={(route) => {
this._navigator.push(navigationHelper(route));
this._drawer.close()
}}/>}
tapToClose={true}
openDrawerOffset={0.2}
panCloseMask={0.2}
closedDrawerOffset={-3}
styles={{
drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
main: {paddingLeft: 3}
}}
tweenHandler={(ratio) => ({
main: { opacity:(2-ratio)/2 }
})}>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
initialRoute={{
id: 'HomePage',
title: 'HomePage',
index: 0
}}
renderScene={(route, navigator) => this._renderScene(route, navigator)}
navigationBar={
<Navigator.NavigationBar
style={styles.navBar}
routeMapper={NavigationBarRouteMapper} />
}
/>
</Drawer>
);
}
_renderScene(route, navigator) {
switch (route.id) {
case 'HomePage':
return ( <HomePage navigator={navigator}/> );
case 'ProfilePage':
return ( <ProfilePage navigator={navigator}/> );
}
}
}
const NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
switch (route.id) {
case 'HomePage':
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('openMenu')}}>
<Icon name='menu' size={25} color={'white'} />
</TouchableOpacity>
)
default:
return (
<TouchableOpacity
style={styles.navBarLeftButton}
onPress={() => {_emitter.emit('back')}}>
<Icon name='chevron-left' size={25} color={'white'} />
</TouchableOpacity>
)
}
},
RightButton(route, navigator, index, navState) {
return (
<TouchableOpacity
style={styles.navBarRightButton}>
<Icon name='more-vert' size={25} color={'white'} />
</TouchableOpacity>
)
},
Title(route, navigator, index, navState) {
return (
<Text style={[styles.navBarText, styles.navBarTitleText]}>
{route.title}
</Text>
)
}
}
export default App;
Menu.js
import React, { Component } from 'react';
import { ListView } from 'react-native';
import Button from 'react-native-button';
import styles from '../styles/menu'
var _navigate;
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2
})
};
_navigate = this.props.navigate;
}
componentDidMount() {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(['HomePage', 'ProfilePage'])
});
}
_renderMenuItem(item) {
return(
<Button style={styles.menuItem} onPress={()=> this._onItemSelect(item)}>{item}</Button>
);
}
_onItemSelect(item) {
_navigate(item);
}
render() {
return (
<ListView
style={styles.container}
dataSource={this.state.dataSource}
renderRow={(item) => this._renderMenuItem(item)}
/>
);
}
}
module.exports = Menu;
ProfilePage.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import styles from '../styles/home'
class ProfilePage extends Component {
render(){
return (
<View style={styles.container}>
<Text>Profile Page</Text>
</View>
);
}
}
module.exports = ProfilePage;
HomePage.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import styles from '../styles/home'
class HomePage extends Component {
render(){
return (
<View style={styles.container}>
<Text>Home Page</Text>
</View>
);
}
}
module.exports = HomePage;
navigation.js
import React, { Platform } from 'react-native';
import _ from 'underscore';
module.exports = function (scene) {
var componentMap = {
'HomePage': {
title: 'HomePage',
id: 'HomePage'
},
'ProfilePage': {
title: 'ProfilePage',
id: 'ProfilePage'
}
}
return componentMap[scene];
}

Firstly, you need to install the react-navigation package:
npm install --save react-navigation
To make it easier and more comfortable, I put every lines of codes and comments in my App.js file
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
// Create HomeScreen class. When 'Home' item is clicked, it will navigate to this page
class HomeScreen extends Component {
render() {
return <Text> Home Page </Text>
}
}
// Create ProfileScreen class. When 'Profile' item is clicked, it will navigate to this page
class ProfileScreen extends Component {
render() {
return <Text> Profile Page </Text>
}
}
// Create SettingsScreen class. When 'Settings' item is clicked, it will navigate to this page
class SettingsScreen extends Component {
render() {
return <Text> Settings Page </Text>
}
}
const RootNavigation = DrawerNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen},
Settings: { screen: SettingsScreen}
});
export default class App extends Component {
render() {
return <RootNavigation />
}
}
Here is my demo

Download source code from here (Navigation Drawer In React Native)
Create a navigation drawer menu like following:
const MyDrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
},
Settings: {
screen: SettingScreen,
},
Profile:{
screen: ProfileScreen
}
});
const MyAppdrawer = createAppContainer(MyDrawerNavigator);
Thanks!

Related

React Native - Navigate to screen - Invalid hook call

App.js:
import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import Epics from './screens/tmp';
import Pager from './screens/Pager';
const DrawerNavigator = createDrawerNavigator({
Home: {screen: Epics},
Page: {screen: Pager}
},{initialRouteName: 'Home'});
const Stack = createAppContainer(DrawerNavigator);
export default class App extends Component {
render() {
return <Stack />;
}
}
Trying to navigate to a screen through a custom component:
import { ActivityIndicator, Image, StyleSheet, View, TouchableHighlight } from 'react-native';
import PropTypes from 'prop-types';
import React from 'react';
import { useNavigation } from 'react-navigation-hooks';
import AuthorRow from './AuthorRow';
export default class Card extends React.Component {
static propTypes = {
fullname: PropTypes.string.isRequired,
image: Image.propTypes.source.isRequired,
linkText: PropTypes.string.isRequired,
onPressLinkText: PropTypes.func.isRequired,
epicId: PropTypes.string.isRequired,
};
state = {
loading: true,
};
getNav(){
return useNavigation();
}
handleLoad = () => {
this.setState({ loading: false });
};
render() {
const { fullname, image, linkText, onPressLinkText, epicId, prop } = this.props;
const { loading } = this.state;
return (
<View>
<AuthorRow
fullname={fullname}
linkText={linkText}
onPressLinkText={onPressLinkText}
/>
<TouchableHighlight onPress={() => this.getNav().navigate('Pager')} underlayColor="white">
<View style={styles.image}>
{loading && (
<ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
)}
<Image
style={StyleSheet.absoluteFill}
source={image}
onLoad={this.handleLoad}
/>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
image: {
aspectRatio: 1,
backgroundColor: 'rgba(0,0,0,0.02)',
},
});
From above code, trying to navigate using:
import { useNavigation } from 'react-navigation-hooks';
getNav(){ return useNavigation(); }
this.getNav().navigate('Pager')
It errors our stating: Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.
How do I navigate using "useNavigation()" or how do I get "this.props.navigation" reference in a component? (I am new to React Native, please help me understand)
Update
I tried using "this.props.navigation" and it gives me undefined error:

#sayog you are breaking the rule of hook brother.
Could you try this?
const [loading, setLoading] = useState(false);
const navigation = useNavigation();
make sure you put it after your state declaration
Note: Dont' use class component for Hook. use Functional Component for hook

//In Card component remove this
//import { useNavigation } from 'react-navigation-hooks';
//Add this line
import {withNavigation} from 'react-navigation';
class Card extends React.Component {
static propTypes = {
fullname: PropTypes.string.isRequired,
image: Image.propTypes.source.isRequired,
linkText: PropTypes.string.isRequired,
onPressLinkText: PropTypes.func.isRequired,
epicId: PropTypes.string.isRequired,
};
state = {
loading: true,
};
//Remove this
// getNav(){
// return useNavigation();
//}
handleLoad = () => {
this.setState({ loading: false });
};
render() {
const { fullname, image, linkText, onPressLinkText, epicId, prop } = this.props;
const { loading } = this.state;
return (
<View>
<AuthorRow
fullname={fullname}
linkText={linkText}
onPressLinkText={onPressLinkText}
/>
<TouchableHighlight onPress={() =>
//Make change like this
this.props.navigation.navigate('Pager')} underlayColor="white">
<View style={styles.image}>
{loading && (
<ActivityIndicator style={StyleSheet.absoluteFill} size={'large'} />
)}
<Image
style={StyleSheet.absoluteFill}
source={image}
onLoad={this.handleLoad}
/>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
image: {
aspectRatio: 1,
backgroundColor: 'rgba(0,0,0,0.02)',
},
});
//Make change like this
export default withNavigation(Card)

here is your mistake
mistake
onPress={() => this.getNav().navigate('Pager')
replace with
onPress={() => this.props.navigation.navigate('Pager')
here is the example
https://reactnavigation.org/docs/navigating/
https://medium.com/#marizu_makozi/navigating-between-screens-or-activities-using-react-navigation-library-68d57657d81
Another example code
class FirstScreen extends React.Component {
static navigationOptions = {
title: 'First',
}
componentDidMount(){
const {navigate} = this.props.navigation;
navigate('Second');
fetch('http://apiserver').then( (response) => {
navigate('Second');
});
}
render() {
return (
<AppLogo />
);
}
}
const AppNavigator = StackNavigator({
First: {
screen: FirstScreen,
},
Second: {
screen: SecondScreen,
},
});

You cannot use hooks inside Class component convert your class component to a functional component or use navigation object for navigations by passing navigation props to your component this.props.navigation.navigate('screenName')

Error undefined is not an object (evaluating 'this.props.navigation.navigate') // React-native

I found various similar questions all having different problem and solution.I want to navigate to Auth but have error undefined is not an object (evaluating 'this.props.navigation.navigate') ..............................................................................
ReviewScreen.js
import React,{Component} from 'react';
import {View,Text,Platform} from 'react-native';
import {Button} from'react-native-elements'
class ReviewScreen extends Component{
static navigationOptions = ({ navigation }) => {
return {
title: 'Review Jobs',
headerRight: (
<Button title='Settings'
onPress={() => navigation.navigate('settings')}
backgroundColor="rgba(0,0,0,0)"
color="rgba(0,122,255,1)"
/>
),
style:{
marginTop:Platform.OS==='android'?24:0
}
};
}
render(){
return(
<View>
<Text>ReviewScreen</Text>
<Text>ReviewScreen</Text>
<Text>ReviewScreen</Text>
<Text>ReviewScreen</Text>
<Text>ReviewScreen</Text>
<Text>ReviewScreen</Text>
<Text>ReviewScreen</Text>
</View>
);
}
}
export default ReviewScreen;
WelcomeScreen.js
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import Slides from '../components/Slides'
const SLIDE_DATA = [
{text: 'Welcome to JobApp', color: '#03A9F4'},
{text: 'Use this to get a job', color: '#009688'},
{text: 'Set your location,then swipe away', color: '#03A9F4'}
];
class WelcomeScreen extends Component {
onSlidesComplete() {
this.props.navigation.navigate('auth')
}
render() {
return (
<Slides data={SLIDE_DATA} onComplete={this.onSlidesComplete}/>
);
}
}
export default WelcomeScreen;

The method onSlidesComplete is not a part of this in your code. According to ES6, you have to to this this way:
class WelcomeScreen extends Component {
onSlidesComplete = () => {
this.props.navigation.navigate('auth')
}
render() {
return (
<Slides data={SLIDE_DATA} onComplete={this.onSlidesComplete}/>
);
}
}

TypeError: undefined is not an object (evaluating this.props.navigation.navigate) in react native

I have just started with React Native. Here is the code
app.js
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import Splash from "./screens/splash";
import Home from "./screens/home";
import Card from "./screens/card";
export const RootNavigator = StackNavigator({
Home: {
screen: Home,
navigationOptions: {
header: null,
},
},
Profile: {
screen: Profile,
navigationOptions: {
headerTitle: 'Profile',
},
},
Card: {
screen: Card,
navigationOptions: {
header: null,
},
},
});
export default class App extends Component {
constructor(props) {
super(props);
this.state = { showSplash: true };
// after 1200ms change showSplash property for spalsh screen
setTimeout(() => {
this.setState(previousState => {
return { showSplash: false };
});
}, 1200);
}
render() {
if (this.state.showSplash) {
return (<Splash />);
} else {
return (<RootNavigator />);
}
}
}
In the home.js I am using card component directly like this
<ScrollView>
{
this.state.cards.map((data, index) => {
return (
<Card key={data.id} cardData={data} />
);
})
}
and here is the card.js
import React, { Component } from 'react';
import { Button, View, Text, Image } from 'react-native';
export default class Card extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View>
<View style={{ flex: 0.30 }}>
<Image source={{ uri: this.props.cardData.imgUrl }} style={{ height: 100 }} />
</View>
<View style={{ flex: 0.70, backgroundColor: 'steelblue' }}>
<Text >{this.props.cardData.name}</Text>
<Text >{this.props.cardData.imgUrl}</Text>
<Button
onPress={() => this.props.navigation.navigate('Profile', {})}
title="Profile"
/>
</View>
</View>
);
}
}
Now if I use
const { navigate } = this.props.navigation;
in the profile.js it works but in case of card.js it is showing
TypeError : undefined is not an object (evaluating 'this.props.navigation.navigate')
This question is asked many times and tried all the solutions provided by the answers, but none of the answers helped.
What could be this possible issue? Is this because I am using <Card> in the Home component

If I understood correctly, Card component in your home.js screen is component in card.js.
Because you are using Card component directly in home.js (not navigating to it with react-navigation), navigation prop is not being injected. If you want your current code to work, you should pass navigation prop to your card component from profile.js
const { navigation } = this.props;
...
<ScrollView>
{
this.state.cards.map((data, index) => {
return (
<Card navigation={navigation} key={data.id} cardData={data} />
);
})
}
</ScrollView>
Most probably, you are opening your profile.js screen with this.props.navigation.navigate('Profile'), so it is working fine there.

Navigate user to New Screen on listitem click React native

I am trying to navigate user to next screen when user click on list item. I am trying to make use of Navigator in this , i am newbie to react , there is Redux and Flux two different architecture as i am not every much good in react so i am little confuse with there working.We can navigate user by using Navigator and also by using Action. Here is my class :-
ERROR i am Getting is :- undefined is not a function(evaluating '_this4.goDetailPage(rowData)')
Today.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
} from 'react-native';
import {FeedStack} from './movielistdeatilrouter';
export default class TodayView extends Component {
constructor(props , context) {
super(props , context);
}
render() {
return (
<FeedStack />
);
}
}
movielistdeatilrouter.js : -
import React from 'react';
import {StackNavigator } from 'react-navigation';
import MovieDeatilScreen from './MovieDeatilScreen';
import Movielisting from './movielisting';
export const FeedStack = StackNavigator({
Movielisting: {
screen: Movielisting,
navigationOptions: {
title: 'Movielisting',
},
},
MovieDeatilScreen: {
screen: MovieDeatilScreen,
navigationOptions: ({ navigation }) => ({
title: 'MovieDeatilScreen',
}),
},
});
movielistiing.js :-
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation';
import { Actions, ActionConst } from 'react-native-router-flux';
import home from '../images/home.png';
import MovieDeatilScreen from './MovieDeatilScreen'
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
import {
StyleSheet,
Text,
Image,
View,
AsyncStorage,
TouchableOpacity,
TouchableHighlight,
Dimensions,
ListView
} from 'react-native';
const uri = 'http://csswrap.com/wp-content/uploads/2015/03/showmenu.png';
export default class Movielisting extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
moviesData: ds.cloneWithRows([]),
};
}
componentDidMount() {
this.fetchMoviesData();
}
fetchMoviesData() {
var url = 'http://api.themoviedb.org/3/movie/now_playing?api_key=17e62b78e65bd6b35f038505c1eec409';
fetch(url)
.then(response => response.json())
.then(jsonData => {
this.setState({
moviesData: this.state.moviesData.cloneWithRows(jsonData.results),
});
})
.catch( error => console.log('Error fetching: ' + error) );
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
</View>
);
}
renderRow(rowData){
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={() => this.goDeatilPage(rowData)}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</TouchableOpacity>
</View>
);
}
goDeatilPage = (rowData) => {
alert('hi');
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
this.props.navigation.navigate('MovieDeatilScreen');
};
}
const styles = StyleSheet.create({
container: {
position:'relative',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},action: {
flex: 0.4,
},thumb: {
backgroundColor: '#ffffff',
marginBottom: 5,
elevation: 1
},
img: {
height: 300
},
txt: {
margin: 10,
fontSize: 16,
textAlign: 'left'
},ListViewcontainer:{
marginTop:50,
bottom: 50,
}
});
Index.android.js :-
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
StatusBar,
View
} from 'react-native';
import App from './app';
import DrawerMenu from './Drawer/drawer-toolbar-android';
import BookmarkView from './Pages/bookmark';
import CalendarView from './Pages/calendar';
import ClientView from './Pages/client';
import InfoView from './Pages/info';
import SettingsView from './Pages/setting';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
const stackNavigator = StackNavigator({
Info: { screen: InfoView },
Settings: {screen: SettingsView },
Bookmark: {screen: BookmarkView },
Calendar: {screen: CalendarView},
Client: {screen: ClientView},
}, {
headerMode: 'none'
});
const easyRNRoute = DrawerNavigator({
Home: {
screen: App,
},
Stack: {
screen: stackNavigator
}
}, {
contentComponent: DrawerMenu,
contentOptions: {
activeTintColor: '#e91e63',
style: {
flex: 1,
paddingTop: 15,
}
}
});
AppRegistry.registerComponent('flightbot', () => easyRNRoute);
App.js class :-
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
StatusBar,
View
} from 'react-native';
import { Navigator, NativeModules } from 'react-native';
import { COLOR, ThemeProvider } from 'react-native-material-ui';
import { Toolbar, BottomNavigation, Icon } from 'react-native-material-ui';
import Container from './Container';
import { TabRouter } from 'react-navigation';
import TodayView from './Contents/today';
import ProfileView from './Contents/profile';
import MapView from './Contents/map';
import ChatView from './Contents/chat';
const uiTheme = {
palette: {
primaryColor: COLOR.green500,
accentColor: COLOR.pink500,
},
toolbar: {
container: {
height: 70,
paddingTop: 20
}
}
}
const TabRoute = TabRouter({
Today: { screen: TodayView },
Profile: { screen: ProfileView },
Map: { screen: MapView },
Chat: {screen: ChatView}
}, {
initialRouteName: 'Today',
}
);
class TabContentNavigator extends Component {
constructor(props, context) {
super(props, context);
this.state = {
active: props.value.active,
};
}
//this method will not get called first time
componentWillReceiveProps(newProps){
this.setState({
active: newProps.value.active,
});
}
render() {
const Component = TabRoute.getComponentForRouteName(this.state.active);
return <Component/>;
}
}
export default class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
active: 'Today',
};
}
static navigationOptions = {
title: 'Menu',
};
navigate() {
this.props.navigation.navigate('DrawerOpen'); // open drawer
}
render() {
return (
<ThemeProvider uiTheme={uiTheme}>
<Container>
<StatusBar backgroundColor="rgba(0, 0, 0, 0.2)" translucent />
<Toolbar
leftElement="menu"
centerElement={this.state.active}
onLeftElementPress={() => this.navigate()}
/>
<TabContentNavigator value={this.state} key={this.state} />
<BottomNavigation active={this.state.active}
hidden={false}
style={{ container: { position: 'absolute', bottom: 0, left: 0, right: 0 } }}
>
<BottomNavigation.Action
key="Today"
icon="today"
label="Today"
onPress={() => this.setState({ active: 'Today' })}
/>
<BottomNavigation.Action
key="Profile"
icon="person"
label="Profile"
onPress={() => {
this.setState({ active: 'Profile' });
}}
/>
<BottomNavigation.Action
key="Map"
icon="map"
label="Map"
onPress={() => this.setState({ active: 'Map' })}
/>
<BottomNavigation.Action
key="Chat"
icon="chat"
label="Chat"
onPress={() => this.setState({ active: 'Chat' })}
/>
</BottomNavigation>
</Container>
</ThemeProvider>
);
}
}
i am trying my level best to solve this , its almost 3 days today i am looking for solution that how i can do this , i just want to open a new Screen on click on list item. Can any one tell me how to do that.I will be very Grateful if some one let me know the way to navigate to next screen.
ScreenShot of my Error :-
Thanks!!!

Using "React Navigation" should help you to do the trick.
For more information, you can find it here: https://reactnavigation.org
Cheers,
====== UPDATE ======
I believe the way you set up the Today component is incorrect, and also your question is unclear, it took me a while to understand what you're wanting to do.
Anyway, Today component should be a StackNavigator if you want to open a detail screen from it, and it will control 2 screens (ListScreen and DetailScreen):
const TodayView = StackNavigator({
List: {
screen: ListScreen,
},
Detail: {
screen: DetailScreen,
},
});
Then setup your screens like this:
class ListScreen extends Component {
static navigationOptions = {
title: 'List',
}
constructor(props , context) {
super(props , context);
this.goToDetailScreen = this.goToDetailScreen.bind(this);
}
goToDetailScreen() {
this.props.navigation.navigate('Detail');
}
render() {
return (
<TouchableOpacity onPress={() => this.goToDetailScreen()}>
<Text>GO TO DETAIL</Text>
</TouchableOpacity>
);
}
}
class DetailScreen extends Component {
static navigationOptions = {
title: 'Detail',
}
render() {
return (
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text>BACK TO LIST SCREEN</Text>
</TouchableOpacity>
);
}
}
There is an example calling "StacksInTabs" in their Github repo, that you might want to take a look at it: https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksInTabs.js
Cheers,

Finally it works , this is how i do following change in code . :-
<View style={styles.container}>
<ListView
dataSource={this.state.moviesData}
renderRow={this.renderRow.bind(this)}
enableEmptySections={true}
style={styles.ListViewcontainer}
/>
</View>
I just added .bind(this) function to renderRow.
Rest is Same :-
renderRow(rowData){
return (
<View style={styles.thumb} >
<TouchableOpacity onPress={()=>this.goDeatilPage(rowData)}>
<Image
source={{uri:'https://image.tmdb.org/t/p/w500_and_h281_bestv2/'+rowData.poster_path}}
resizeMode="cover"
style={styles.img} />
<Text style={styles.txt}>{rowData.title} (Rating: {Math.round( rowData.vote_average * 10 ) / 10})</Text>
</TouchableOpacity>
</View>
);
}
goDeatilPage = (rowData) => {
alert('hi');
AsyncStorage.setItem('moviesData', JSON.stringify(rowData));
this.props.navigation.navigate('MovieDeatilScreen');
}
Thanks #Goon for your Time i highly Appreciate your effort. Thank you Brother.

Use React Navigation for navigate screen, it is very Easy-to-Use,
Create 3 class in react native
defined navigator class
2.first screen
3.navigate screen
1.Basic.js
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: Movielistiing},
Detail: {screen: Movielistdeatilrouter},
});
module.exports = BasicApp;
2.Movielistiing.js
class Movielistiing extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to movie detail"
onPress={() =>
navigate('Detail', { name: 'Jane' })
}
/>
);
}
}
3.Movielistdeatilrouter.js
class Movielistdeatilrouter extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}

React Native navigation is not working

I am trying to navigate between two screen using react-native navigation https://reactnavigation.org/. It is working from index.js to EnableNotification.js but it is not working from EnableNotification.js to CreateMessage.js
EnableNotification.js
/**
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from "react";
import { View, Text, Image, Button, StyleSheet } from "react-native";
import { StackNavigator } from "react-navigation";
import styles from "./Styles";
import * as strings from "./Strings";
import CreateMessage from "./CreateMessage";
export default class EnableNotificationScreen extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require("./img/enable_notification.png")} />
<Text style={styles.textStyle}> {strings.enable_notification} </Text>
<View style={{ width: 240, marginTop: 30 }}>
<Button
title="ENABLE NOTIFICATION"
color="#FE434C"
onPress={() => navigate("CreateMessage")}
style={{ borderRadius: 40 }}
/>
</View>
<Text
style={{
textAlign: "center",
marginTop: 10
}}
>
NOT NOW
</Text>
</View>
);
}
}
const ScheduledApp = StackNavigator({
CreateMessage: {
screen: CreateMessage,
navigationOptions: {
header: {
visible: false
}
}
}
});
CreateMessage.js
import React, { Component } from "react";
import { View, Text, Image, Button, StyleSheet } from "react-native";
export default class CreateMessage extends Component {
render() {
return <View><Text>Hello World!</Text></View>;
}
}

First :
index.android.js or index.ios.js
import React, { Component } from 'react';
import { AppRegistry, Navigator } from 'react-native';
import Index from './app/Index';
import CreateMessage from './app/CreateMessage';
import EnableNotification from './app/EnableNotification';
render() {
return (
<Navigator
initialRoute={{screen: 'Index'}}
renderScene={(route, nav) => {return this.renderScene(route, nav)}}
/>
)
}
renderScene(route,nav) {
switch (route.screen) {
case "Index":
return <Index navigator={nav} />
case "EnableNotification":
return <EnableNotification navigator={nav} />
case "CreateMessage":
return <CreateMessage navigator={nav} />
}
}
After that :
index.js
goEnableNotification() {
this.props.navigator.push({ screen: 'EnableNotification' });
}
Finally :
EnableNotification.js
goCreateMessage() {
this.props.navigator.push({ screen: 'CreateMessage' });
}
If you want to go back, do a function goBack :
goBack() {
this.props.navigator.pop();
}
I hope this will help you !

This worked for me - CreateMessage component needs to be part of the navigation stack in order to navigate there through this.props.navigator.navigate(<name>)

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Navigation Drawer in React-Native - android

Related

React Native - Navigate to screen - Invalid hook call

Error undefined is not an object (evaluating 'this.props.navigation.navigate') // React-native

TypeError: undefined is not an object (evaluating this.props.navigation.navigate) in react native

Navigate user to New Screen on listitem click React native

React Native navigation is not working

Categories

Resources