I want to configure various scene animations with Navigator.SceneConfigs ("FloatFromRight" and "FloatFromLeft").
Within the Scene - if I call the scene with a configured animation I receive the error message "Can't find variable: Navigator" (although I am of the opinion that I copied the code above from the React-Native examples).
_onPressBar1: function(){
debugger;
this.props.nav.push({
id: 'Login',
sceneConfig: Navigator.SceneConfigs.FloatFromLeft,
});
},
I created the following Navigator:
render: function() {
return (
<Navigator
style={styles.container}
renderScene ={this.renderScene}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromRight;
}}
initialRoute={{
id: 'Login',
index: 0,
}} />
);
}
with the following renderScene:
renderScene: function(route, navigator){
if ('Login' === route.id) {
return (
<View style={{flex: 1}}>
<TopBar nav={navigator} displBackIcon={false} />
<Login
name={route.name}
navigator={navigator} />
<BottomBar nav={navigator} currentPage={route.id} />
</View>
);
} else if ('Test' === route.id) {
return (
<View style={{flex: 1}}>
<TopBar nav={navigator} displBackIcon={false} />
<Test
navigator={navigator} />
<BottomBar nav={navigator} currentPage={route.id} />
</View>
);
}
},
The _onPressBar1 function was included in a different file where I forgot to include the Navigator in the React definition:
var {
Image,
Navigator,
StyleSheet,
Text,
TouchableOpacity,
View,
} = React;
Related
This Is My Home Page Code:
import React from "react";
//More Imports
export default class Home extends React.Component {
//Some Code
render() {
const { navigation } = this.props;
return (
<ScrollView>
//Some Code
<View style={styles.barContainer}>
<Button
title="Add Lesson"
onPress={() => navigation.navigate("ThisLesson")}
/>
</View>
//Some Code
{ScrollViewWithCards}
//Some Code
</ScrollView>
);
}
}
const styles = StyleSheet.create({
//Some Style
});
const cards = [
{
day: "3",
month: "Jan",
numberOfPeople: "4",
time: "17:00-18:00",
title: "Dance Class",
image: require("../../../assets/images/image1.jpeg"),
},
//More Cards...
];
const ScrollViewWithCards = (
<ScrollView>
{cards.map((card, index) => (
<View key={index} style={styles.cardContainer}>
<TouchableOpacity
onPress={() =>
navigation.navigate("ThisLesson", {
image: card.image,
day: card.day,
month: card.month,
time: card.time,
title: card.title,
numberOfPeople: card.numberOfPeople,
})
}
>
<HomeCard
image={card.image}
day={card.day}
month={card.month}
time={card.time}
title={card.title}
numberOfPeople={card.numberOfPeople}
/>
</TouchableOpacity>
</View>
))}
</ScrollView>
);
I'm mapping through an array of static data and rendering cards unto the screen
I made the cards pressable so that they take me to another page,
when I click the card it Returns an error:Reference Error: Can't find variable: navigation
But the Button Above the Cards Works Just Fine
What Am I Doing Wrong?
I tried the useNavigation Hook but it didn't work either
Update
This is my HomeCard component:
import React from "react";
//More Imports
const HomeCard = (props) => {
return (
<View style={styles.container}>
//Some Code
</View>
);
};
export default HomeCard;
const styles = StyleSheet.create({
//Some Style
});
const smallAvatars = [
//Some Array
];
I passed {navigation} to ScrollViewWithCards like so:
const ScrollViewWithCards =({navigation})=>()
but now I'm Getting another Error TypeError: undefined is not an object (evaluating 'navigation.navigate')
Solution
The Solution for this Problem is to transform ScrollViewWithCards to a function component, then pass props to it and add return:
const ScrollViewWithCards = (props) => {
return (
<ScrollView>
{cards.map((card, index) => (
<View key={index} style={styles.cardContainer}>
<TouchableOpacity
onPress={() =>
props.navigation.navigate("ThisLesson", {
image: card.image,
day: card.day,
month: card.month,
time: card.time,
title: card.title,
numberOfPeople: card.numberOfPeople,
})
}
>
<HomeCard
image={card.image}
day={card.day}
month={card.month}
time={card.time}
title={card.title}
numberOfPeople={card.numberOfPeople}
/>
</TouchableOpacity>
</View>
))}
</ScrollView>
);
};
and then in the main render:
<ScrollViewWithCards navigation={this.props.navigation} />
You are setting the const navigation inside the render function, and it wont be accessible inside other functions, so you have to use
this.props.navigation.navigate
Then you can simply do
const ScrollViewWithCards =()=> (
<ScrollView>
{cards.map((card, index) => (
<View key={index} style={styles.cardContainer}>
<TouchableOpacity
onPress={() =>
this.props.navigation.navigate("ThisLesson", {
image: card.image,
day: card.day,
month: card.month,
time: card.time,
title: card.title,
numberOfPeople: card.numberOfPeople,
})
}
>
<HomeCard
image={card.image}
day={card.day}
month={card.month}
time={card.time}
title={card.title}
numberOfPeople={card.numberOfPeople}
/>
</TouchableOpacity>
</View>
))}
</ScrollView>
);
In the routing section, you need to mention the both component like this,
<Stack.Screen name="<your component name>" component={your component class} />
please don't forget to import the files at the above.
and then you can use the navigation props like,
this.props.navigation //for class component
props.navigation //for functional component
or if you have parent child relation in your compoent try this one:
<YOUR_COMPONENT navigation={props.navigation}/> // functional component
<YOUR_COMPONENT navigation={this.props.navigation}/> // class component
I am able to open menu when 3 dots icon is clicked for each item. But can the code be written in a better way..
Right now menu is getting created for each card item but ideally it would have been good to create single Menu View and dynamically associate it to some card where ever the 3 dots is clicked.
Expo Source Code Link
Code
export default class App extends React.Component {
constructor(props, ctx) {
super(props, ctx);
this.state = {
list: [
{ name: "Michael", mobile: "9292929292", ref: React.createRef() },
{ name: "Mason Laon Roah", mobile: "1232313233", ref: React.createRef() },
{ name: "Constructor", mobile: "4949494949", ref: React.createRef() },
{ name: "Rosling", mobile: "4874124584", ref: React.createRef() }
],
};
}
_menu = null;
hideMenu = () => {
this._menu.hide();
};
showMenu = (ref) => {
this._menu = ref;
this._menu.show();
};
render() {
const renderItem = ({ item, index }) => (
<ListItem
title={
<View>
<Text style={{ fontWeight: "bold" }}>{item.name}</Text>
<Text>{item.mobile}</Text>
</View>
}
subtitle={
<View>
<Text>445 Mount Eden Road, Mount Eden, Auckland. </Text>
<Text>Contact No: 134695584</Text>
</View>
}
leftAvatar={{ title: 'MD' }}
rightContentContainerStyle={{ alignSelf: 'flex-start'}}
rightTitle={this.getMenuView(item.ref)}
/>
);
return (
<View style={styles.container}>
<View style={{ flex: 1, marginTop: 30 }}>
<FlatList
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
data={this.state.list || null}
renderItem={renderItem}
ItemSeparatorComponent={() => (
<View style={{ marginBottom: 5 }} />
)}
/>
</View>
</View>
);
}
getMenuView(ref) {
return (
<Menu
ref={ref}
button={<Icon onPress={() => this.showMenu(ref.current)} type="material" color="red" name="more-vert" />}
>
<MenuItem onPress={this.hideMenu}>Menu item 1</MenuItem>
<MenuItem onPress={this.hideMenu}>Menu item 2</MenuItem>
<MenuItem onPress={this.hideMenu} disabled>
Menu item 3
</MenuItem>
<MenuDivider />
<MenuItem onPress={this.hideMenu}>Menu item 4</MenuItem>
</Menu>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});
Sample Output
As mentioned here, you can find an undocumented UIManager.java class that allows you to create Popups with its showPopupMenu method.
This currently works only for Android.
import React, { Component } from 'react'
import { View, UIManager, findNodeHandle, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/MaterialIcons'
const ICON_SIZE = 24
export default class PopupMenu extends Component {
constructor (props) {
super(props)
this.state = {
icon: null
}
}
onError () {
console.log('Popup Error')
}
onPress = () => {
if (this.state.icon) {
UIManager.showPopupMenu(
findNodeHandle(this.state.icon),
this.props.actions,
this.onError,
this.props.onPress
)
}
}
render () {
return (
<View>
<TouchableOpacity onPress={this.onPress}>
<Icon
name='more-vert'
size={ICON_SIZE}
color={'grey'}
ref={this.onRef} />
</TouchableOpacity>
</View>
)
}
onRef = icon => {
if (!this.state.icon) {
this.setState({icon})
}
}
}
Then use it as follows.
render () {
return (
<View>
<PopupMenu actions={['Edit', 'Remove']} onPress={this.onPopupEvent} />
</View>
)
}
onPopupEvent = (eventName, index) => {
if (eventName !== 'itemSelected') return
if (index === 0) this.onEdit()
else this.onRemove()
}
Source: https://cmichel.io/how-to-create-a-more-popup-menu-in-react-native
There is now a React Native plugin for this. I'm not sure it was around when the question was originally asked. But I'm leaving this here for anyone else looking for the answer.
https://www.npmjs.com/package/react-native-popup-menu
The example worked for me. I wanted to use the vertical ellipsis, so I did this modification to the MenuTrigger part of the example to an icon instead of text:
<MenuTrigger>
<Icon name="more-vert" size={25} color={colors.rustRed} />
</MenuTrigger>
As a side note, I had difficulty finding and using the ellipsis. I eventually went with using react-native-vector-icons by using 'npm -i react-native-vector-icons' and importing the Material Icons like this:
import Icon from 'react-native-vector-icons/MaterialIcons';
Use React Portals
https://reactjs.org/docs/portals.html
In short the receipts is:
You define your dynamic menu at sibling level only once in the parent i.e. in your case it would be adjacent to App.
Handle Click at each item level to open your component. You can pass some specific event days to achieve the dynamism.
Easier example https://codeburst.io/reacts-portals-in-3-minutes-9b2efb74e9a9
This achieves exactly what you are trying to do which is defer the creation of component untill clicked.
Attempting to get the modal working on my react native app. I want the more page to display a modal of more options. I have made the following attempt in regards putting the modal in the more menu page. The error I am currently getting is:
MoreMenu.js
import React, { Component } from 'react';
import { Modal, Text, TouchableHighlight, View } from 'react-native';
class MoreMenu extends Component {
state = {
modalVisible: false,
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
render() {
return (
<View style={{marginTop: 22}}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {alert("Modal has been closed.")}}
>
<View style={{marginTop: 22}}>
<View>
<Text>Hello World!</Text>
<TouchableHighlight onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight onPress={() => {
this.setModalVisible(true)
}}>
<Text>Show Modal</Text>
</TouchableHighlight>
</View>
);
}
}
TabsRoot.JS
class Tabs extends Component {
_changeTab (i) {
const { changeTab } = this.props
changeTab(i)
}
_renderTabContent (key) {
switch (key) {
case 'today':
return <Home />
case 'share':
return <Share />
case 'savequote':
return <SaveQuote />
case 'moremenu':
return <MoreMenu />
}
}
render () {
const tabs = this.props.tabs.tabs.map((tab, i) => {
return (
<TabBarIOS.Item key={tab.key}
icon={tab.icon}
selectedIcon={tab.selectedIcon}
title={tab.title}
onPress={() => this._changeTab(i)}
selected={this.props.tabs.index === i}>
{this._renderTabContent(tab.key)}
</TabBarIOS.Item>
)
})
return (
<TabBarIOS tintColor='black'>
{tabs}
</TabBarIOS>
)
}
}
export default Tabs
You forget to export MoreMenu Component. and you use MoreMenu Component in TabsRoot.js.
pls add following line at the end of MoreMenu.js
export default MoreMenu
I am confused in the use of Navigator with react-native-side-menu. In my code I use navigator and NavigatorIOS for side-menu in navbar,but that code is not working in Android, because of the usage of NavigatorIOS. Now I am trying to convert my code to usage of Navigator in react-native.
Here is the my code with the usage of NavigatorIOS:
var Basic = React.createClass({
getInitialState() {
return {
navigationBarHidden: false
};
},
showSideBar () {
return this.refs.sidemenu.openMenu();
},
getNavigator(){
if (this.refs.nav){
return this.refs.nav.navigator;
}else{
return undefined;
}
},
LogOut(){
this.refs.sidemenu.closeMenu();
this.props.navigator.popToTop();
},
render(){
//alert("renderEmail:"+this.props.email);
return (
<SideMenu
ref="sidemenu"
touchToClose={true}
disableGestures={true}
menu={
<Menu
getNavigator={this.getNavigator}
showSideBar={this.showSideBar}
LogOut={this.LogOut}
/>
}
>
<NavigatorIOS
ref = "nav"
shouldUpdate={true}
style={styles.container}
barTintColor='#1A8A29'
tintColor='white'
titleTextColor='white'
initialRoute={{
component: BecomeMember,
title:'Become Member',
leftButtonIcon: require('image!menu1'),
onLeftButtonPress: ()=> {this.showSideBar(); },
rightButtonTitle: 'Log Out',
onRightButtonPress: ()=> {this.LogOut();},
passProps: {email:this.props.email,userId:this.props.userId},
}}
/>
</SideMenu>
);
}
});
when i wrote using navigatorIOS side-menu works correctly but using navigator in react-native-side-menu it not working, here is the code using Navigator
showSideBar () {
return this.refs.sidemenu.openMenu();
},
getNavigator(){
if (this.refs.nav){
return this.refs.nav.navigator;
}else{
return undefined;
}
},
LogOut(){
this.refs.sidemenu.closeMenu();
this.props.navigator.popToTop();
},
render(){
//alert("renderEmail:"+this.props.email);
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState){
if(index > 0){
return(
<TouchableHighlight style={{marginTop: 10}} onPress={() =>{
if(index > 0){
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)
}else{
return (
<Text onPress={this.showSideBar()}>Main</Text>
)
}
},
RightButton(route, navigator, index, navState){
return null;
},
Title(route, navigator, index, navState){
return <Text style={styles.navBarTitle}>MaxWords</Text>
}
}
return (
<SideMenu ref="sidemenu" touchToClose={true} disableGestures={true} menu={<Menu getNavigator={this.getNavigator} showSideBar={this.showSideBar} LogOut={this.LogOut}/>}>
<Navigator
ref="nav"
shouldUpdate={true}
style={{flex:1}}
initialRoute={{name:'My Profile',component:MyProfile,leftButtonIcon: require('image!menu1'),
onLeftButtonPress: ()=> {this.showSideBar()},index:0}}
renderScene={(route, navigator) => {
if(route.component){
return React.createElement(route.component, {...this.props, ...route.passProps, navigator, route});
}
}}
navigationBar = {<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} style={styles.navBar}/>}/>
</SideMenu>
);
}
when i calling the function this.showSideBar(), it throws an error as shown in the image below
Can any one give me suggestions on how to solve this and how to use Navigator with side-menu in react-native ? Any help much appreciated.
Either
1) Add it via passProps to the component. e.g.
initialRoute={{
component: YourComponent,
passProps: {
onLeftButtonPress: this.showSideBa,
},
(..other stuff here)
}}
or
2) Add it to the renderScene as a property. e.g.
renderScene: function(route, navigator) {
var Component = route.component;
var navBar = route.navigationBar;
return (
<View style={styles.navigator}>
<Component
{...route.passProps}
navigator={navigator}
route={route}
onLeftButtonPress={this.showSideBar}/>
</View>
);
},
and update your renderScene() in the Navigator to point to the function instead.
initialRoute={{
component: YourComponent,
(..other stuff here),
renderScene={this.renderScene}
}}
Using method 2 will pass it down to every scene that get rendered through the navigator.
How can I pass data from sceneA to sceneB with Navigator in React Native?
I'm using this to go to sceneB:
this.props.navigator.push({
id: "MainPage",
name: 'mainPage'
});
You need to set up the passProps property on the navigator. There are a few recent examples on stack overflow, specifically here and here.
<Navigator
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigator, route } );
}} />
or
<Navigator
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
<route.component {...route.passProps} navigator={navigator} route={route} />
}
}
/>
If you are looking for the most basic of setups just to understand the functionality, I have set up a project here that you can reference, and pasted the code below.
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
Image,
TouchableHighlight, TouchableOpacity
} = React;
class Two extends React.Component {
render(){
return(
<View style={{marginTop:100}}>
<Text style={{fontSize:20}}>Hello From second component</Text>
<Text>id: {this.props.id}</Text>
<Text>name: {this.props.name}</Text>
<Text>name: {this.props.myVar}</Text>
</View>
)
}
}
class Main extends React.Component {
gotoNext(myVar) {
this.props.navigator.push({
component: Two,
passProps: {
id: 'page_user_infos',
name: 'page_user_infos',
myVar: myVar,
}
})
}
render() {
return(
<View style={{flex: 4, flexDirection: 'column', marginTop:100}}>
<TouchableHighlight style={{ height:40, borderWidth:1, marginBottom:10, backgroundColor: '#ddd'}} name='Pole' onPress={ () => this.gotoNext('This is a property that is being passed') }>
<Text style={{textAlign:'center'}}>Go to next page</Text>
</TouchableHighlight>
</View>
)
}
}
class App extends React.Component {
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
if (route.component) {
return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}
}}
navigationBar={
<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} />
} />
);
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight style={{marginTop: 10}} onPress={() => {
if (index > 0) {
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)} else {
return null}
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return null
}
};
var styles = StyleSheet.create({
});
AppRegistry.registerComponent('App', () => App);
I would set up your navigator as this example. Essentially, put the navigator in your index scene and have all the necessary components imported there. Then, define a renderScene() function to handle all the routes based on a name (or id, like you did). I would not use the component object as the thing itself that is passed from the call to the navigator push method because if you do that you will have to import the component in that specific view. I used to do that and ran into many problems, so I am just warning you if you run into any issues, consider this approach.
renderScene(route, navigator) {
if(route.name == 'root') {
return <Root navigator={navigator} />
}
if(route.name == 'register') {
return <Register navigator={navigator} />
}
if(route.name == 'login') {
return <Login navigator={navigator} />
}
if(route.name == 'home') {
return <Home navigator={navigator} {...route.passProps} />
}
if(route.name == 'update') {
return <Update navigator={navigator} {...route.passProps} />
}
}
Sometimes the pass prop doesn't work (at least for me) So what I do is I pass it in the route object itself
nav.push({
id: 'MainPage',
name: 'LALA',
token: tok
});
so to access it in the next scene I use
var token = this.props.navigator.navigationContext.currentRoute.token;
although kind of a complicated "access" but it is fool proof pass props might work or might not also in this way you can pass the properties in the route object itself thus saving you from the hassle of sending it in a different way.
This might not be the right way but I find it a tad bit more convenient.
If you are using react-native-navigation, simply add passProps to your params object, according to documentation.
eg.:
this.props.navigator.push({
screen: 'example.Screen',
title: 'Screen Title',
passProps: {
id: 'MainPage',
name: 'mainPage'
}
})
You can also pass parameters to sceneA to sceneB using following way. Assume that _handlePressOnClick() is written on some button click in SceneA screen.
_handlePressOnClick(){ //this can be anything
this.props.navigator.push({
name: "sceneB", //this is the name which you have defined in _renderScene
otherData: {
dataA: "data1"
}
})
}
Then defined data in your _renderScene where you have implemented your navigator like this way
_renderScene(route, navigator) {
switch(route.name) {
case "sceneA":
return (
<sceneA navigator={navigator} />
);
break;
case "sceneB":
return (
<sceneB navigator={navigator} otherData={route.otherData}/>
);
break;
}
Don't forget to import your views files like this
import sceneA from './sceneA';
import sceneB from './sceneB';
Now in sceneB file you can access your otherData following way
var {dataA} = this.props.otherData;
or
constructor(props){
super(props);
this.state={
otherData: this.props.otherData
}
}
then in your render() method you can access otherData using state.
<Text>{this.state.otherData.dataA}</Text>
You can also use to maintain global level state using redux which is accessible through action and props automatically.
1.While passing the data from scene A to scene B, you must specify in the navigator tag that you are also passing the data with route.
ex.
if(route.name == 'home') {
return <Home navigator={navigator} data={route.data} />
}
send data from scene A
ex.this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});
in scene B access data like this
ex. this.props.data.name
and you get the data from scene A to scene B