I am learning react-native navigation https://reactnavigation.org/docs/intro/ . I see in examples there
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
I could not understand what exactly this line of code is for const { navigate } = this.props.navigation;
syntax has nothing to do with React Native
it is called Destructuring assignment in es6 / es2015
const { navigate } = this.props.navigation;
is equivilent to with exception to var and const .
var navigate = this.props.navigation.navigate
the example without Destructuring should look like this
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => this.props.navigation.navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
Include on your ServiceAction the this.props.navigation something like this:
<HomeScreen navigation={this.props.navigation}/>
because the props.navigation are by default on your parent component
and on HomeScreen component you will access to navition like:
..
goToSignUp() {
this.props.navigation.navigate('SignUp');
}
..
For me also was confusing before. Cheers!
Related
I'm currently working on an app in React-Native and it includes DrawerNavigation, SwitchNavigation and AppContainer. There is a method at header.js that i need to use in order to make the drawer functionable (toggleDrawer())
I've tried passing the function at the DrawerNavigator but it didnt work.
export default class Header extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => {
this.props.navigation.toggleDrawer();
}}
>
<Image
source={require("/Users/Rron/AnketaApp/assets/hamburger-
icon.jpg")}
style={styles.imageStyle}
/>
</TouchableOpacity>
</View>
);
}
}
});
export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
let drawerLabel = "Home";
return { drawerLabel };
};
render() {
return (
<View style={styles.container}>
<Header {...this.props}/>
<ScrollView>
<Content />
</ScrollView>
</View>
);
}
}
export default class DrawerNavigator extends React.Component {
render() {
return <AppContainer />;
}
}
const AppDrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Anketa: {
screen: AnketaScreen
}
}
);
const AppContainer = createAppContainer(
createSwitchNavigator({
Introduction: {
screen: IntroductionScreen
},
Drawer: {
screen: AppDrawerNavigator``
}
})
);
The error says
this.props.navigation.toggleDrawer is not a function and its not
defined.
What you can do is import { DrawerActions } from 'react-navigation-drawer' and use it as it says in the docs.
this.props.navigation.dispatch(DrawerActions.toggleDrawer());
Also make sure that you components are inside the navigation.
What would be the cleanest way to wrap all screens managed by react-navigation in an error boundary that can also navigate. My current approach involves a top level component like:
class App extends Component{
navigateTo(routeName) {
this.navigator && this.navigator.dispatch(NavigationActions.navigate({ routeName }));
}
render(){
return (
<Provider store={store}>
<PersistGate persistor={persistor}>
<MenuProvider>
<ErrorBoundary navigateTo={this.navigateTo.bind(this)}>
<AppNavigator
ref={navigator=> {
NavigationService.setTopLevelNavigator(navigator);
this.navigator = navigator;
}}
/>
</ErrorBoundary>
</MenuProvider>
</PersistGate>
</Provider>
)
}
}
with a rather standard ErrorBoundary:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, info: null };
}
componentDidCatch(error, info) {
this.setState({error, info});
this.props.navigateTo('SomeScreen');
}
render() {
if (this.state.error) {
return (
<Container>
<Content>
<Text> Got error: {JSON.stringify(this.state.error)}, info {JSON.stringify(this.state.info)} </Text>
</Content>
</Container>
)
}
return this.props.children;
}
}
However when an error occurs the navigator gets unmounted and ref is called again with null.
Alternatively, is there a way to have an ErrorBoundary as a descendant of AppNavigator that catches errors from any screen and can also access the navigator, eventually through a NavigationService?
you should be able to do this with custom navigators, below is an example with the new react-navigation V3 createAppContainer api as per, https://reactnavigation.org/docs/en/custom-navigators.html.
We have just implemented a revision in our app to achieve this when upgrading to V3.
That way your AppNavigator will still be mounted when the error boundary hits and will have access to your navigation props.
const StackNavigator = createStackNavigator({..});
class AppNavigator extends React.Component {
static router = StackNavigator.router;
render() {
const { navigation } = this.props;
return (
<ErrorBoundary navigation={navigation}>
<StackNavigator navigation={navigation} />
</ErrorBoundary>
);
}
}
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;
I was trying to use StackNavigator for navigation and it works when I use it to go from one screen to the other as explained here. But when I try to have a subcomponent to navigate through itself, the navigation doesn't seem to work and I couldn't find any solution to it.
As given in the code below, I'm trying to use the Test Component in which there is a button that can be clicked to move from HomeScreen to ChatScreen.
I'm pretty sure the solution is something basic, but I really can't find it anywhere.
Here's my code:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
let userName = 'Ketan';
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: userName })}
title={"Chat with " + userName}
/>
<Test />
</View>
);
}
}
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
class Test extends React.Component {
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Button
onPress={() => navigate('Chat', { user: 'TestBot' })}
title={'This is a test'}
/>
</View>
)
}
}
const NavApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('NavApp', () => NavApp);
Here's the error I'm getting:
Here's the demo to test: https://snack.expo.io/HyaT8qYob
I hope my question is clear enough of what I mean.
Since your Test component does not belong to navigation stack it doesn't have the navigation prop. You can do couple of things.
Simple one is to pass the navigation to the child component like the example below.
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: userName })}
title={"Chat with " + userName}
/>
<Test navigation={this.props.navigation} />
</View>
);
The second option is, you can use withNavigation from react-navigation. You can find more details about it here
import { Button } 'react-native';
import { withNavigation } from 'react-navigation';
const MyComponent = ({ to, navigation }) => (
<Button title={`navigate to ${to}`} onPress={() => navigation.navigate(to)} />
);
const MyComponentWithNavigation = withNavigation(MyComponent)
withNavigation
withNavigation is a higher order component which passes the
navigation prop into a wrapped component. It's useful when you
cannot pass the navigation prop into the component directly, or
don't want to pass it in case of a deeply nested child.
I have a leaderboard which calls a component and passes it data to it like so:
_renderItem =({item}) => (
<childComponent
key={item._id}
id={item._id}
name={item.name}
/>
);
And inside the childComponent I try do this:
<TouchableOpacity onPress={() => this.props.navigation.navigate("Profile", { id: this.props.id})} >
<View>
<Right>
{arrowIcon}
</Right>
</View>
</TouchableOpacity>
Where I am hoping that it will then go to the profile page and grab the correct data based on the id passed to it. The issue is that when I click the arrow to go to the profile page I get the error Cannot read property 'navigate of undefined. I have put both the leaderboard and childComponent in my HomeDrawerrRoutes.js and MainStackRouter.js. Any help would be great, thanks.
There is an easy Solution for this,
use withNavigation . it's a higher order component which passes the navigation prop into a wrapped Component.
example child component
import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';
class ChildComponent extends React.Component {
render() {
<View
onPress = {()=> this.props.navigation.navigate('NewComponent')}>
... logic
</View>
}
}
// withNavigation returns a component that wraps ChildComponent and passes in the
// navigation prop
export default withNavigation(ChildComponent);
for more details : https://reactnavigation.org/docs/en/connecting-navigation-prop.html
This is a 3 page example that shows how to pass the navigate function to a child component and how to customize props send to screens from within the StackNavigator
// subcomponent ... receives navigate from parent
const Child = (props) => {
return (
<TouchableOpacity
onPress={() => props.navigate(props.destination) }>
<Text>{props.text}>>></Text>
</TouchableOpacity>
);
}
// receives navigation from StackNavigator
const PageOne = (props) => {
return (
<View>
<Text>Page One</Text>
<Child
navigate={props.navigation.navigate}
destination="pagetwo" text="To page 2"/>
</View>
)
}
// receives custom props AND navigate inside StackNavigator
const PageTwo = (props) => (
<View>
<Text>{props.text}</Text>
<Child
navigate={props.navigation.navigate}
destination="pagethree" text="To page 3"/>
</View>
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => <View><Text>{props.text}</Text></View>
export default App = StackNavigator({
pageone: {
screen: PageOne, navigationOptions: { title: "One" } },
pagetwo: {
screen: (navigation) => <PageTwo {...navigation} text="Page Deux" />,
navigationOptions: { title: "Two" }
},
pagethree: {
screen: () => <PageThree text="Page III" />,
navigationOptions: { title: "Three" }
},
});
The useNavigation hook was introduced in v5:
import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '#react-navigation/native';
export function ChildComponent() => {
const navigation = useNavigation();
return (
<Button
title="Back"
onPress={() => {
navigation.goBack();
}}
/>
);
}
Docs: https://reactnavigation.org/docs/use-navigation
For some reason if you don't want to use withNavigation, the following solution works too. You just have to pass navigation as a prop to your child component.
For example:
export default class ParentComponent extends React.Component {
render() {
return (
<View>
<ChildComponent navigation={this.props.navigation} />
</View>
);
}
}
And in child component:
const ChildComponent = (props) => {
return (
<View>
<TouchableOpacity
onPress={() => props.navigation.navigate('Wherever you want to navigate')}
/>
</View>
);
};
export default ChildComponent;
I have an infinite loop that seems to be occurring when I use react-redux. I use Navigation Experimental which loads connectRouteScreen as the scene to be rendered through NavigationCardStack. I'm using RN 0.30. But also could reproduce this in 0.31-rc.0
[...]
Use Navigation Experimental to transition and load connectRouteScreen as a Scene
export default function connectRouteScreen(Scene, sceneProps){
class RouteScreen extends React.Component{
[...]
render() {
const { navigator, pathVariables } = this.props;
return (
<View style={styles.container}>
<Scene
navigator={navigator}
{...pathVariables.toJS()}
/>
</View>);
}
}
RouteScreen.propTypes = {...RouteScreenPropTypes};
const routeScreenProperties = extractSceneRendererProps(sceneProps);
/*return <Scene
navigator={routeScreenProperties.navigator}
{...routeScreenProperties.pathVariables.toJS()}
/>;
*/
return <RouteScreen
{...routeScreenProperties}
/>;
}
LoadingScreen is loaded as "Scene".
#connect(
() => {return {}},
(dispatch) => {
return {
loginActions: bindActionCreators(loginActions, dispatch),
}
})
export default class LoadingScreen extends React.Component {
constructor(props){
super(props);
}
shouldComponentUpdate(nextProps){
return false;
}
componentDidMount(){
const { navigator } = this.props;
this.props.loginActions.executeLoginFlow();
}
render() {
const Animatable = require('react-native-animatable');
return (
<Animatable.View
animation="pulse"
easing="ease-out"
iterationCount="infinite"
style={localStyle.container}>
<Icon name="logo" style={localStyle.iconStyle} size={150}/>
</Animatable.View>
);
}
};
So, If I return the Scene directly instead of RouteScreen, no problem.
If I remove the #connect syntax and escape this.props.loginActions..., no problem.
If I return RouteScreen and remove everything it does and just return the Scene => infinite loop.
Does anybody have any suggestions how to deal with this?