I have a nested navigation structure.
A Sign-In screen that needs to navigate to Profile screen and Profile needs to navigate to Inbox. Like so, Sign In -> Profile -> Inbox.
Sing In
import React, {Component} from 'react';
import Profile from "../Profile";
class AppSignIn extends React.Component{
_doSignIn(){
this.props.navigation.navigate('Profile')
}
render(){
return(
<View>
<TouchableHighlight onPress={this._doSignIn.bind(this)}>
<Text>Go to Profile</Text>
</TouchableHighlight>
</View>
)
}
}
const AppSignInNav = createStackNavigator(
{
AppSignIn:{
screen : AppSignIn
},
Profile:{
screen:Profile
}
});
export default createAppContainer(AppSignInNav);
Profile
import React, {Component} from 'react';
import Inbox from "../Inbox";
class Profile extends React.Component{
_goToInbox(){
this.props.navigation.navigate('Inbox')
}
render(){
return(
<View>
<TouchableHighlight onPress={this._goToInbox.bind(this)}>
<Text>Go to Inbox</Text>
</TouchableHighlight>
</View>
)
}
}
const ProfileNav = createStackNavigator(
{
Profile:{
screen : Profile
},
Inbox:{
screen : Inbox
}
});
export default createAppContainer(ProfileNav);
How ever i get this error as a result of trying to navigate from createStackNavigator to another.
The component for route 'Profile' must be a React component...
How can i export Profile as a React Component but still have it navigate to Inbox.?
There can be only one appContainer for navigation. You are trying to create the app container twice using createAppContainer.
You can use AppSignInNav as the app container and export the ProfileNav as a normal StackNavigator.
Refer this link for details on createAppContainer and its use.
Related
I have a React component (Highlight.js) that accepts two properties, image and description. The user will swipe through 4 different screens with it's own background image and description, as an introduction to the app.
TestScreen.js is where I've setup the logic for navigating between screens. When i try to set the screen in my AppContainer as the Highlight component, I keep getting the error that 'The component for route 'Page1' must be a React component.
I've tried to play around a lot with the code to see how I can manage to get it working and the only way it does is when I don't mention the image and description properties, in which case neither is displayed and the screen is mostly blank.
Highlight.js
import React, { Component } from 'react';
import { View, Text, Image, ImageBackground } from 'react-native';
import { NextButton } from '../Buttons';
import styles from './styles';
export default class Highlight extends Component {
render() {
return (
<ImageBackground style={styles.container}>
<Image
style={styles.image}
source={this.props.image} // the image goes here
resizeMode="cover"
/>
<View style={styles.textContainer}>
<Text style={styles.text1}>MYAPP</Text>
<Text style={styles.text2}>Highlights</Text>
<Text style={styles.text3}>{this.props.description}</Text> // the description goes here
</View>
<View style={styles.buttonContainer}>
<NextButton />
</View>
</ImageBackground>
);
}
}
TestScreen.js
import React, { Component } from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation';
import { Highlight } from '../components/Highlights';
export default class TestScreen extends Component {
render() {
return <AppContainer />;
}
}
const AppContainer = createAppContainer(
createStackNavigator({
Page1: {
screen: (
<Highlight
image={require('../components/Highlights/images/highlight1.png')}
description={
'Avoid No-Show of Candidates after setting up an interview'
}
/>
)
}
})
);
I expect the screen to display content with the image and description properties. Currently I have 4 separate components with essentially the same code (except for the image and description). How to I tackle this problem and avoid the repetition of code?
A brief explanation
you're passing an element to the route not a Component itself
() => (<Highlight ... />)
this creates a new function Component which returns your expected element,
that's why it worked
I have a tabBarNavigation and i have a Home component. In the Home component i want to be able to navigate between two different screens. I have a component called ReadButton which when pressed should take me to another screen called 'BookScreen'. Now i have written so my HomeStack component have two screens 'HomeScreen' and 'BookScreen'. My problem is i cant make the 'ReadButton' to navigate to 'BookScreen' when pressed. It says ''Undefined is not an object(evaluating props.navigation.navigate).
...//This is in the main class provided by react
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
Book: BookScreen,
},
config
);
const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
tabNavigator.path = '';
export default tabNavigator;
...
//Below is the ReadButton class in a seperate file
import {withNavigation} from 'react-navigation'
const ReadButton = (props) => {
const [ReadPressed, setReadPressed] = useState(true)
const {navigate} = props.navigation.navigate
if(ReadPressed){
return(
<View>
<TouchableOpacity style={styles.buttonstyle} onPress={navigate("Home")}>
<Text style={styles.textstyle}> READ </Text>
</TouchableOpacity>
</View>
)
}
else {
return(
props.book
)
}
}
// Another class where i have my <ReadButton>
function BookCover(){
<TouchableOpacity style={styles.bottomFlexItemWhenClicked} onPress= .
{() => setBookCoverState(true)}>
<Text style={styles.BackgroundText}>{props.text}</Text>
<ReadButton book={props.book} navigation={props.navigation}>
</ReadButton>
</TouchableOpacity>)}
}
export default withNavigation(ReadButton);
Now i have tried putting 'Book: BookScreen' over 'Home: HomeScreen' and then the screen actually shows but i cant navigate between them. What am i missing?
Maybe you can try hooks?
install hooks: yarn add react-navigation-hooks#alpha
and then use it in your function component:
import { useNavigation } from 'react-navigation-hooks'
export default function Screen1 () {
const { navigate } = useNavigation()
return (
<Button
title='Try'
onPress={() => { navigate('Screen2') }}
/>
)
}
Please note that components inside the HomeScreen or BookScreen won't receive the navigation prop.
1.Either you send them manually like this
<ReadButton navigation={this.props.navigation}/>
or
2.Use the built in withNavigation of react-navigation like this
import {withNavigation} from 'react-navigation'
const ReadButton=(props)=>{}//Now you can access navigation prop here
export default withNavigation(ReadButton)
Second method will come to handy when your component is deeply nested and you want to access the navigation prop without manually passing the props.
I am using react-navigation but my codes return ; this undefined is not an object (evaluating '_this2.props.navigation.navigate)
how can i fix this error?
myCodes;
import React, { Component } from 'react';
import Login from './components/LoginScreen/LoginScreen';
import AddNewUser from './components/AddNewUserScreen/AddNewUserScreen';
import { createStackNavigator } from 'react-navigation';
class App extends Component{
render(){
return(
<Login />
);
}
}
const RootStack = ({ createStackNavigator }) => (
{
Login: Login,
AddNew: AddNewUser,
});
export default App;
LoginScreen.js
<TouchableOpacity style={styles.ButtonContainer} onPress={()=> this.props.navigation.navigate('AddNew')}>
<Text style={styles.buttonText} >GİRİŞ</Text>
</TouchableOpacity>
You should start your app by calling RootStack like this:
class App extends Component{
render(){
return(
<RootStack />
);
}
}
also you can set initialRout in stack like this:
const RootStack = createStackNavigator({
Login: Login,
AddNew: AddNewUser,
}, { initialRouteName: 'Login'} )
Now, as you define, your app will start with login page and it has this.props.navigation by itself so you can use this.props.navigation.navigate('AddNew') without error.
But if you need to use navigation from a component, you have to send this.props.navigation from parent to component like this:
<YourComponent navigation={this.props.navigation}/>
Then you can use navigation in YourComponent component.
I hope this can help you
How do i go to the next screen in react native when i clicked a button?
Here is my code
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
import Test from './android/components/Test'
export default class ReactTest extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome click the button to register.
</Text>
<Button
style={styles.cancelButton}
onPress={this.editUser}
title="Register"
color="#343434"
accessibilityLabel="Register a User."/>
</View>
);
}
}
I am new to react-native. I am trying to navigate from one screen to another when the register button is pressed.
Write a function at the top before render method for editUser to direct where to navigate to.
editUser = () => {
this.props.navigation.navigate("Screen");
};
You can use any of the following api
React Native Router
NavigatorIOS
React Navigation
Navigator
But I recommend you to use React Navigation. Here is an example how to use React Navigation
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile')
}
/>
);
}
}
I'm developing an app with ReactNative and React-Navigation.
And I set a DrawerNavigator as main UI.
But when app launches, it will always enter default item screen, without displaying drawer item.
What am I missing?
React-Navigation version: "2.18.2"
code of App.js is as the following. When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}
const DrawerNavi = createDrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
You should use createDrawerNavigator instead of DrawerNavigator. I don't actually understand what you mean by "When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'"
The drawerNavigator will show your drawerItems on the left or right (depending on where you want to place it) then you can swipe left/right to access it. It also demands that you have a default screen. You can change this default screen by passing initialRouteName to the component.
You can read more about the drawerNavigator here: https://reactnavigation.org/docs/en/drawer-navigator.html