Suppose I have this:
const navtest = StackNavigator({
Home: {screen: HomeScreen},
Stuff: {screen: Screen2},
Stuff2: {screen: Screen3},
});
And I'm currently viewing Stuff2/Screen3. And I have some function in my HomeScreen component, say XYZ( ). On the basis of any certain action on my current route ( Screen3 ), how do I call that function XYZ( ) in HomeScreen?
My Routes file which directly links to index.js.
import {AppRegistry} from 'react-native';
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import Screen2 from './Screen2';
import Screen3 from './Screen3';
import HomeScreen from './HomeScreen';
const navtest= StackNavigator({
Home: {screen: HomeScreen},
Stuff: {screen: Screen2},
Stuff2: {screen: Screen3},
});
AppRegistry.registerComponent('navtest', () => navtest);
and in my HomeScreen file
export default class HomeScreen extends Component {
constructor(props){
super(props);
this.state = {one: '0'};
}
static navigationOptions = {
header: null,
};
functionToPass() {
console.log('Function accessed');
this.setState({one: 'X'});
}
render() {
const {navigate} = this.props.navigation;
return (
<View>
<TouchableOpacity onPress = {() => navigate('Stuff', {ABC: 'abc'})}>
<Text>
{this.state.one}
</Text>
</TouchableOpacity>
</View>
);
}
}
Are you navigating from Home to Screen3? Then you can pass you function down as a param to be available in the navigation state. E.g. this.props.navigation.navigate(‘Stuff2’, { someFunc: someFuncFromHome }); then, in your Screen3, you can invoke the function like this: this.props.navigation.state.params.someFunc();
If Home is not the previous route, then maybe the function should be extracted outside of the Home component and use a redux action or similar things to achieve the same result.
Follow up:
There are a few ways that I think that may be able to help you.
1) Introduce Redux to your app. This is a good use case for redux as this state can be manipulated from anywhere in the app. Dispatch the same redux action from any where in the app, and the HomeScreen can read from redux.
2) If you don't want redux in your app yet, maybe you can keep the state in a navigator wrapper component like the one in my comment earlier.
class App extends Component {
constructor(props) {
super(props)
this.state = { one: '0' };
}
yourRootChangeFunc() {
this.setState({ one: 'X' });
}
render() {
return <App screenProps={{ rootChange: this.rootChange, one: this.state.one }} />
}
}
Then you can access one in other screens with this.props.screenProps.one
3) Another way is use setParams, which you can setParams for a specific screen by passing in the key of the route.
In HomeScreen component:
export default class HomeScreen extends Component {
...
componentWillMount() {
this.props.navigation.setParams({ one: '0' });
}
render() {
const { state: { params = {} } = this.props.navigation;
return (
...
<View>
{params.one || '0'} // this is because currently there is no way to set a default params for a route
</View>
...
);
}
}
Then in Screen2 component:
import React, { Component } from 'react';
import {
View,
TouchableOpacity,
Text,
} from 'react-native';
import { NavigationActions } from 'react-navigation';
export default class Screen2 extends Component {
onPress = () => {
const setParamsAction = NavigationActions.setParams({
params: { one: 'X' },
key: this.props.navigation.state.params.homeKey,
})
this.props.navigation.dispatch(setParamsAction)
}
render() {
return (
<View>
<TouchableOpacity onPress={this.onPress}>
<Text>Screen2</Text>
</TouchableOpacity>
</View>
);
}
}
This way, pressing on Screen2 text in Screen2 will change the params for HomeScreen. Then when go back to HomeScreen, we can see that the text changed from '0' to 'X'.
Related
running my react app gives error in navigationOptions() but it is working fine in render() function
App.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import AppNavigator from './routs.js'
class App extends Component {
render() {
return (
<AppNavigator />
)
}
}
export default App
routs.js
import React from 'react'
import Home from './home.js'
import Phone from './phone.js'
import PhoneScreen from './phoneScreen.js'
import {createStackNavigator, createAppContainer} from 'react-navigation';
const MainNavigator = createStackNavigator({
home: {screen: Home},
add: {screen: Phone},
userScreen: {screen: PhoneScreen},
});
const AppNavigator = createAppContainer(MainNavigator);
export default AppNavigator;
home.js
import React from 'react'
import { TouchableOpacity, Text, View, TouchableHighlight, StyleSheet, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import {AsyncStorage} from 'react-native';
class Home extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
headerTitle: 'Contacts',
headerRight: (
<Button
onPress={() => this.props.navigation.navigate('add')}
title="create new contact"
color="#000000"
size="20"
/>
),
};
}
export default Home;
"undefind is not an object(evaluating '_this3.props.navigation')"
please give solution
From the React Navigation Docs:
The binding of this in navigationOptions is not the HomeScreen
instance, so you can't call setState or any instance methods on it.
This is pretty important because it's extremely common to want the
buttons in your header to interact with the screen that the header
belongs to.
So, as you can see, this is not what you think it is in this case. Here's more from the docs detailing a working example:
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
As you can see, changing navigationOptions from an object into a function allows you to grab the navigation reference. From there you can successfully navigate.
I have an App which has a state that contains the information if the user is loggged in or not. This state is passed to a Context Provider:
App.native.js
import React, { Component } from "react";
import Orientation, { orientation } from "react-native-orientation";
import Navigator from "./navigation/Navigator";
import { createContext } from 'react';
export const LoginContext = createContext({
isLoggedIn: false,
login: () => {},
logout: () => {}
});
export default class App extends Component {
constructor(props) {
super(props);
this.login = () => {
this.setState(state => ({
isLoggedIn: true
}));
console.log("Logged in!");
};
this.logout = () => {
this.setState(state => ({
isLoggedIn: false
}));
console.log("Logged out!");
};
this.state = {
isLoggedIn: false,
login: this.login,
logout: this.logout
};
}
componentDidMount = () => {
Orientation.lockToPortrait();
};
render() {
return <LoginContext.Provider value={this.state}><Navigator /></LoginContext.Provider>;
}
}
In (almost) every screen of the App I want to show an Icon in the header, e.g.:
SearchScreen.js
import styles from './styles';
import React, { Component } from 'react';
import { Text, View,AsyncStorage } from 'react-native';
import { Button } from 'react-native-elements';
import LoginIcon from '../../components/LoginIcon'
import { StatusBar } from 'react-native'
class SearchScreen extends Component {
static navigationOptions = ({ navigation }) => ({
headerTitle: "Suchen",
headerRight: <LoginIcon navigation={navigation} />
});
render() {
return (
<View style={styles.container}>
<StatusBar barStyle = "dark-content" hidden = {false} backgroundColor = "#338A3E" />
<Text>This is the SearchScreen.</Text>
</View>
);
}
}
export default SearchScreen;
The icon should show either a LogIn or Logout image, depending on the state of the App. I try to do that by using the Context Consumer:
LoginIcon.js
import styles from "./styles";
import React, { Component } from "react";
import { View, AsyncStorage } from "react-native";
import { Icon } from "react-native-elements";
import AntIcon from "react-native-vector-icons/AntDesign";
import {LoginContext} from "../../App.native.js";
const LoginIcon = ({navigation}) => {
return (
<LoginContext.Consumer>
{({isLoggedIn, login, logout}) => {
return (isLoggedIn ?
<Icon
name="logout"
type='material-community'
containerStyle={styles.icon}
color="white"
onPress={logout}
/>
:
<Icon
name="login"
type='material-community'
containerStyle={styles.icon}
color="white"
onPress={navigation.navigate("Login")}
/> );
}
}
</LoginContext.Consumer>
);
}
export default LoginIcon;
Now, when I login (via a LoginScreen not shown here), the state changes as expected (isLoggedIn = true), and the Icon in the Heder of the SearchScreen shows the correct "Logout" button. That is great!
But when I click this button, I get two errors:
1: Warning: Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state.
This is a riddle for me, I know I have a design flaw here but don't know how to solve it because ...well, basically everything happens inside a render function?
2) Failed prop type: Invalid prop 'onPress' of type 'boolean' supplied to 'Icon', expected 'function'.
in Icon (at withTheme.js:24) in Themed.Icon (at LoginIcon.js:22) in LoginIcon (at SearchScreen.js:12)
As far as I understand passing props to a function component is possible, but this.props should be left out when calling the prop inside the component. But it does not seem to work. How can I make that work?
I have been working on this problem for two days now and nothing on the web seems to be exactly what I am looking for.
I am attempting to implement a StackNavigator into my React Native app, but for some reason "navigation" is not being passed as a prop to the involved components. Therefore when I call this.props.navigation.navigator by pressing Button, I get the error undefined is not an object (evaluating this.props.navigation.navigate).
I have logged the props several times and the props object is empty, so the issue is not a deconstruction-of-the-props-object issue like others who get this error have had, but the fact that the navigation prop is not there in the first place.
I've tried placing the navigator code in its own file and in the App.js file thinking that it was somehow called after the components are rendered, and therefore not getting a chance to pass the navigation prop in, but that didn't work either. I've also looked to see if it is part of the props in the componentDidMount event. Still not.
import React, { Component } from 'react'
import { Text, View, Button, StyleSheet, FlatList } from 'react-native'
import { StackNavigator } from 'react-navigation'
import { getDecks } from '../utils/api'
import NewDeckView from './NewDeckView'
import DeckListItem from './DeckListItem'
export default class DeckListView extends Component {
constructor(props){
super(props)
this.state = {
decks: []
}
}
componentDidMount(){
console.log('props now test',this.props)
getDecks()
.then( result => {
const parsedResult = JSON.parse(result);
const deckNames = Object.keys(parsedResult);
const deckObjects = [];
deckNames.forEach( deckName => {
parsedResult[deckName].key = parsedResult[deckName].title
deckObjects.push(parsedResult[deckName])
})
this.setState({
decks:deckObjects
})
} )
}
render(){
return (
<View style={styles.container}>
<Text style={styles.header}>Decks</Text>
<FlatList data={this.state.decks} renderItem={({item})=><DeckListItem title={item.title} noOfCards={item.questions?item.questions.length:0}/>} />
<Button styles={styles.button} title="New Deck" onPress={()=>{this.props.navigation.navigate('NewDeckView')}}/>
</View>
)
}
}
const styles = StyleSheet.create({
header:{
fontSize:30,
margin:20,
},
container:{
flex:1,
justifyContent:'flex-start',
alignItems:'center'
},
button:{
width:50
}
})
const Stack = StackNavigator({
DeckListView : {
screen: DeckListView,
},
NewDeckView: {
screen:NewDeckView,
}
})
Like Vicky and Shubhnik Singh mentioned, you need to render the imported navigation stack in App.js like so:
import React from 'react';
import { Stack } from './navigator/navigator'
export default class App extends React.Component {
render() {
return <Stack/>
}
}
The navigator should look something like this and the first key in the object passed to StackNavigator will be rendered by default. In this case, it will be DeckListView.
import { StackNavigator } from 'react-navigation'
import DeckListView from '../components/DeckListView'
import NewDeckView from '../components/NewDeckView'
export const Stack = StackNavigator({
DeckListView : {
screen: DeckListView,
navigationOptions: {
headerTitle: 'Home',
},
},
NewDeckView: {
screen:NewDeckView,
navigationOptions: {
headerTitle: 'New Deck',
},
},
})
Thanks guys for the support! Somehow this wasn't clear for me in the documentation.
I have a HomePage.js with only one button, Login Button, and when clicked I want to render LoginPage.js. I tried something like this but it's not working:
HomePage.js:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
constructor () {
super();
this.state = {LoginPage:false};
}
showLogin = () => {
this.setState({LoginPage:true});
}
render() {
return(
<View>
<TouchableOpacity onPress={() => this.showLogin()}>
<Text>LogIn</Text>
</TouchableOpacity>
</View>
)
}
}
export default HomePage;
In React it's easily done with react-router but I don't know how to do it with React-Native.
EDIT 1 after including react-navigation I get the following error: Route 'navigationOptions' should declare a screen. Did I miss something?
App.js:
import React, {Component} from 'react';
import {StackNavigator} from 'react-navigation';
import HomePage from './HomePage';
import LoginPage from './LoginPage';
const App = StackNavigator({
Home: {screen: HomePage},
LoginPage: {screen: LoginPage},
navigationOptions: {
header: () => null,
}
});
export default App;
HomePage.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return(
<View>
<TouchableOpacity onPress={() => navigate('LoginPage'), { name: 'Login' }}>
<Text>Login</Text>
</TouchableOpacity>
<Button
onPress={() => navigate('LoginPage'), { name: 'Login' }}
>Log In</Button>
</View>
)
}
}
export default HomePage;
LoginPage.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class LoginPage extends Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
return (
<View>
<Text>This is login page</Text>
</View>
);
}
}
export default LoginPage;
Use React Navigation. Its the best and simple solution right now for react native.
for adding the library use npm install --save react-navigation
You can define class for routing like below using a StackNavigator.
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: MainScreen},
Profile: {screen: ProfileScreen},
, {
headerMode: 'none',
}
});
Then u can define classes like the one u mentioned in the question.
eg:
class MainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
and second class
class ProfileScreen extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}
The navigate function can be used for navigating to a class and goBack can be used for going back to a screen.
For hiding header u can use header mode or specify navigation options in each screen
For details please refer : https://reactnavigation.org/
If you're just looking for a plugin like react-router to use on React Native, you can use react-native-router-flux, available here: https://github.com/aksonov/react-native-router-flux.
Also, it's better if you just put a reference to the function in there instead of invoking it. Something like:
<TouchableOpacity onPress={this.showLogin}>...</TouchableOpacity>
I'm new to React Native and trying to set up a navigation between two screens (or pages) using react-navigation package. I'm using a StackNavigator right now.
The problem I am facing is that there seems to be no way to navigate back to a previous screen. All I can do is call navigate(). If, for example, I want to navigate from Home to FRW and back to Home, it seems this will leave me with two instances of Home on the stack that are executed in parallel (one of which can't be seen). My code is something like this:
app.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './views/HomeScreen.js'
import FRWScreen from './views/FRWScreen.js'
const MainNavigator = StackNavigator({
FRW: { screen: FRWScreen },
Home: { screen: HomeScreen },
}, {
headerMode: 'screen',
headerVisible: false,
navigationOptions: {
header: null
},
initialRouteName: "Home"
});
export default class TestApp extends Component {
render() {
return (
<MainNavigator></MainNavigator>
);
}
}
AppRegistry.registerComponent('TestApp', () => TestApp);
HomeScreen.js
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Welcome'
};
(...)
onSomeButtonPressed() {
this.props.navigation.navigate('FRW');
}
componentDidMount() {
if (this.locationWatchID !== undefined) return;
this.locationWatchID = navigator.geolocation.watchPosition((position) => {
console.log(this.locationWatchID);
});
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.locationWatchID);
}
render() {
(...)
return (
<View style={styles.container}>
<MapView ref={ref => { this.map = ref; }} />
<TouchableHighlight
style={styles.someButton}
onPress={this.onSomeButtonPressed.bind(this)}
>
<Text>Press Me</Text>
</TouchableHighlight>
</View>
)
}
}
FRWScreen.js looks similar to HomeScreen.js (and contains .navigate("Home"))
The result of this code is, after navigating to FRW and back, that the geolocation callback is executed twice with different watchIDs. Which makes me believe the HomeScreen is actually on the navigation stack twice.
On your FRWScreen you should use this.props.navigation.goBack(null) instead. See https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back.