Related
I'm trying to move through screens using React Navigation, the problem lies in the nested return that i use to dynamically render a set of items and doesn't let me use an arrow function to directly navigate, so i have to implement this on a function. My question here is, how do i do that? As far as my internet research went you can only push a new screen after a dialog alert shows up, i don't want that.
I'm attaching the code:
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image
} from 'react-native';
import Pie from 'react-native-pie';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import NaviBarView from './../Commons/NaviBar'
import actions from '../../Redux/actions'
class Main extends Component {
constructor(props){
super(props);
this.state={
cargando:true,
cryptoCurrencyValues:{}
}
this.onNextPress = this.onNextPress.bind(this);
this.renderItems = this.renderItems.bind(this);
}
static getDerivedStateFromProps(nextProps,prevState){
console.warn('Positivo', Object.keys(nextProps.cryptoCurrencyValues).length)
if (Object.keys(nextProps.cryptoCurrencyValues).length !== 0){
}else{
console.warn('Negativo')
}
return null;
}
onNextPress(){
**//HERE I WANT TO CALL NAVIGATE TO MOVE TO ANOTHER SCREEN**
}
componentDidMount(){
console.warn('esto una vez')
this.props.actions.getCryptoValues();
this.setState({cargando:true})
}
renderItems(){
var self = this;
return listData.map(function(cryptoValue,i){
return(
<View style={styles.itemContainer} key={i}>
<View style={{alignSelf:'center',backgroundColor:'transparent', marginLeft:10}}>
<Image source={cryptoValue.img} style={{width:width*0.095, height:height*0.050}} resizeMode={'stretch'}/>
</View>
<View style={{marginLeft:10}}>
<View style={{alignSelf:'flex-start',marginTop:15}}>
<Text style={{color:'#ffffff',fontSize:18,fontWeight: 'bold'}}>{cryptoValue.name}</Text>
</View>
<View style={{alignSelf:'flex-start',marginBottom:10}}>
<Text style={{color:'#6e6e6e',fontSize:18}}>{cryptoValue.desc}</Text>
</View>
</View>
<View style={{marginLeft:40}}>
<View style={{alignSelf:'flex-start',marginTop:15}}>
<Text style={{color:'#ffffff',fontSize:18}}>{cryptoValue.price}</Text>
</View>
<View style={{alignSelf:'flex-start',marginBottom:10}}>
<Text style={{color:'#6e6e6e',fontSize:18}}>{cryptoValue.currency}</Text>
</View>
</View>
<View style={{alignSelf:'center',backgroundColor:'transparent', marginLeft:50}}>
<TouchableOpacity onPress={() => self.onNextPress()} style={{alignSelf:'center',backgroundColor:'transparent'}}>
<Image source={require('./../../img/next.png')} style={{width:width*0.035, height:height*0.032}} resizeMode={'stretch'}/>
</TouchableOpacity>
</View>
</View>
);
});
}
render(){
return(
<View style={styles.container}>
<View>
<NaviBarView/>
</View>
<View style={styles.cardContainer}>
<View style={{marginTop:10,flexDirection: 'row',marginTop:10,marginLeft:10,alignItems:'stretch'}}>
<Image source={require('./../../img/pie-chart.png')} resizeMode={'stretch'} style={{width:width*0.095, height:height*0.055}}/>
<Text style={{fontSize:20,color:'#ffffff',fontWeight:'bold',marginLeft:15,alignSelf:'center'}}>STATUS</Text>
<TouchableOpacity style={{marginLeft:230,alignSelf:'center'}}>
<Image source={require('./../../img/reload.png')} resizeMode={'stretch'} style={{width:width*0.065, height:height*0.035}}/>
</TouchableOpacity>
</View>
<View style={{alignSelf:'flex-start',marginTop:50}}>
<Pie
radius={100}
innerRadius={97}
series={[10, 20, 30, 40]}
colors={['#f00', '#0f0', '#00f', '#ff0']}
/>
</View>
</View>
{this.renderItems()}
</View>
);
}
}
const listData = [
{_id:1,name:'Bitcoin',desc:'Billetera BTC',price:'$141,403.22',currency:'BTC: $11.673,50',img:require('./../../img/bitcoin.png')},
{_id:2,name:'Ethereum',desc:'Billetera ETH',price:'$20200,50',currency:'ETH: $863,40',img:require('./../../img/ethereum.png')},
{_id:3,name:'NEO',desc:'Billetera NEO',price:'$40.401',currency:'NEO: $118,02',img:require('./../../img/neo.png')},
];
const styles = new StyleSheet.create({
container:{
flex:1,
backgroundColor: '#0d0d0d',
flexDirection: 'column',
position:'relative',
},
cardContainer:{
backgroundColor:'#1a1a1a',
marginTop: 7,
marginBottom:7,
marginLeft:7,
marginRight:7,
height:height*0.50,
width:width,
justifyContent: 'flex-start'
},
itemContainer:{
flexDirection: 'row',
backgroundColor:'#1a1a1a',
width:width,
height:height*0.115,
marginLeft:7,
marginRight:7,
marginBottom:7,
justifyContent: 'flex-start'
},
})
function mapStateToProps (state,props) {
return {cryptoCurrencyValues: state.cryptocurrencyValues,
}
}
function mapDispatchToProps (dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Main);
You can use Stack Navigator here which is very easy to navigate from one screen to another and as well as in function too...
First.
Install library :-
npm install --save react-navigation
Then use it in your class by using import :-
import {StackNavigator} from 'react-navigation';
export that class
export default Project = StackNavigator(
{
xyz: { screen: xyz },
});
After that navigating using function:-
onNextPress=()=>
{
this.props.navigation.navigate('xyz');
}
Hope.it will helps you .
Thanx!
I was not passing the navigation prop when defining my RootStack:
import React, {Component} from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import createStore from './../../Redux/store';
import {StackNavigator} from 'react-navigation';
import { Provider } from 'react-redux';
import MainView from '../Main/Main';
import MainSecondLvlView from '../Main/MainSecondLvl';
import BalanceView from './../Charts/BalanceView'
import MenuView from './Menu'
const store = createStore();
const RootStack = StackNavigator({
Main: { screen: MainView },
MainSecondLvl: { screen: MainSecondLvlView},
Menu:{ screen: MenuView }
},
{
initialRouteName: 'Main',
headerMode: 'none',
});
export default class App extends Component {
render(){
return(
<Provider store={store}>
<RootStack navigation={this.props.navigation}/>
</Provider>
);
}
}
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.
I'm using the NativeBase (and especially the NativeBaseSink template). All my routes are defined in the App.js like this :
App.js
import { Platform } from "react-native";
import { Root } from "native-base";
import { StackNavigator, TabNavigator } from "react-navigation";
import Drawer from "./Drawer";
import Homepage from "./main_scenes/main";
import Splashscreen from "./main_scenes/home/";
import LoginScene from "./main_scenes/home/login/";
import RegisterScene from "./main_scenes/home/register/";
import InsertPhoneCode from "./main_scenes/home/pin/";
import MyResults from "./main_scenes/results/";
import MyMap from "./main_scenes/results/map/";
import UserDetails from "./main_scenes/profile/";
import MyResultsByDistance from "./main_scenes/results/Distance"
import MyResultsByAvis from "./main_scenes/results/Avis"
import Test from "./main_scenes/tab"
const AppNavigator = StackNavigator(
{
Drawer: { screen: Drawer },
RegisterScene: {screen : RegisterScene},
Splashscreen:{ screen : Splashscreen},
Homepage:{ screen : Homepage},
InsertPhoneCode:{screen:InsertPhoneCode},
LoginScene: {screen : LoginScene},
MyResults: {screen:MyResults},
MyMap:{screen:MyMap},
UserDetails:{screen:UserDetails},
MyResultsByDistance:{screen:MyResultsByDistance},
MyResultsByAvis:{screen:MyResultsByAvis},
},
{
initialRouteName: "Splashscreen",
headerMode: "none",
}
);
export default () =>
<Root>
<AppNavigator />
</Root>;
I'm using the Tabs functionality of Nativebase framework. Then, I have create an index.js where i've define all my tabs like this :
index.js
import React, { Component } from "react";
import {Dimensions, AppRegistry, StyleSheet,
ListView, ScrollView,View,Image,TouchableOpacity,AsyncStorage, Alert} from 'react-native';
import {
Container,
Header,
Title,
Button,
Icon,
Tabs,
Tab,
Text,
Right,
Left,
Body,
TabHeading,
Footer,
FooterTab,
} from "native-base";
import DisplayByDistance from "./Distance/";
import DisplayByAvis from "./Avis/";
import styles from "./styles";
import { StackNavigator } from 'react-navigation';
export default class ConfigTab extends Component {
constructor(props) {
super(props);
this.state = {
tab1: false,
mapRegion: null,
lastLat: null,
lastLong: null,
};
}
toggleTab1() {
this.setState({
tab1: true,
});
}
render() {
return (
<Container>
<Header hasTabs>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body style={{ flex: 3 }}>
<Title> Résultats</Title>
</Body>
<Right />
</Header>
<Tabs style={{ elevation: 3 }}>
<Tab
heading={
<TabHeading><Icon name="navigate" /><Text
style={styles.TabTitle}>Le plus prés</Text></TabHeading>
}
>
<DisplayByDistance />
</Tab>
<Tab heading={<TabHeading><Icon name="star-half" /><Text
style={styles.TabTitle}>Le mieux noté</Text></TabHeading>}>
<DisplayByAvis />
</Tab>
</Tabs>
<Footer>
<FooterTab>
<Button active={this.state.tab1} onPress={() => this.props.navigation.navigate("MyMap")}>
<Icon active={this.state.tab1} name="paper-plane" />
<Text>Afficher la carte</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
AppRegistry.registerComponent('ConfigTab', () => ConfigTab);
According to the files i've edited, when i press on the TabOne, it opens the right tab where the content is located in the file called Distance.js
So right now, everything works well except that the "props.navigation.navigate"is not recognized in my Distance.js file.
Here is my file
Distance.js
import React, { Component, PropTypes } from "react";
import {...} from 'react-native';
import {...} from "native-base";
import styles from "./../styles";
import { StackNavigator } from 'react-navigation';
import App from "./../../../App"
var productArray = [];
class TabOne extends Component {
constructor(props){
super(props)
var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid});
this.state={
data:[],
dataSource: dataSource.cloneWithRows(productArray),
isLoading:true,
}
this.donePressed=this.donePressed.bind(this);
};
componentDidMount()
{
this.getTheData(function(json){
productArray = json;
this.setState({
dataSource:this.state.dataSource.cloneWithRows(productArray),
isLoading:false
})
}.bind(this));
}
donePressed() {
const { navigate } = this.props.navigation;
navigate('UserDetails');
}
getTheData(callback) {
var url = "http://paradox.ma/workshop/webservices/getPOI_info.php";
fetch(url)
.then(response => response.json())
.then(json => callback(json))
.catch(error => alert("Erreur de connexion Internet") );
}
list(rowData) {
if (rowData === null) { return <View></View>; };
let VerifiedUser;
const VerifiedTest=rowData.Verified;
if (VerifiedTest==='1')
{
VerifiedUser=(
<Right>
<View style={styles.avatarBox}>
<Text numberOfLines={2}><Icon name="verified" size={30} color="green" /></Text>
<Text>Profil vérifié</Text>
</View>
</Right>
)}
return (
<ListItem thumbnail
onPress={() => this.donePressed().bind(this)}
>
<Left>
<View style={styles.avatarBox}>
<Thumbnail size={55} source={{uri:rowData.Avatar}} />
<Text style={styles.avatarTitle}>{rowData.Title}</Text>
</View>
</Left>
<Body>
<Text>{rowData.Title}</Text>
<Text numberOfLines={2}><Icon name="map-marker" size={15} color="grey" /> {rowData.Address}, {rowData.City} ({rowData.Distance} km)</Text>
<Text numberOfLines={3}>{rowData.Description}</Text>
</Body>
{VerifiedUser}
</ListItem>
);
}
render(){
return(
<Container>
<View>
<TouchableOpacity onPress={() => this.donePressed().bind(this)}>
<Text>Test</Text>
</TouchableOpacity>
</View>
</Container>
);
}
}
export default TabOne;
My function called donePressed() works very well when i replace the this.props.navigation.navigate by alert("Hello") But once I try to navigate between screens, I have an error : Undefined is not an object...this_2.props.navigation.navigate().
I really don't know where is the problem coming from. I have tried to define the function in the constructor, no way.
Hope to find a solution.
if you want to react navigation to inject navigation prop you'll need to declare that specific Component as a Navigator scene
but I would totally suggest using React navigation's TabNavigator,
you can find here how to nest Navigators: https://reactnavigation.org/docs/intro/nesting
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()}
/>
);
}
}
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!