I'm trying to get a handle on react-navigation by making a dead simple app; I just want two screens with buttons you can click on to go between them. Here's my code:
App.js:
import React from 'react';
import {
Text,
View,
Button
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
import OtherPage from './OtherPage';
const Home = ({navigation}) => (
<View>
<Text style={styles.title}>Welcome</Text>
<Button title="Other Page" onPress={() => {
navigation.navigate('OtherPage')
}}></Button>
</View>
);
const Nav = StackNavigator(
{
OtherPage: { screen: OtherPage},
Index: {
screen: Home
}
},
{
initialRouteName: 'Index',
}
);
export default () => <Nav />;
OtherPage.js:
import React from 'react';
import {
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
const OtherPage = ({navigation}) => (
<View>
<Text>Other Page</Text>
<Button title="Go Home" onPress={() => {
navigation.navigate('Home');
}}></Button>
</View>
);
import Home from './App';
const Nav = StackNavigator(
{
OtherPage: { screen: OtherPage},
Home: { screen: Home }, // THIS LINE CAUSES THE ERROR
},
);
export default () => <Nav />;
For some reason what I get back from import Home from './App'; isn't a screen and so I get the error Route 'Home' should declare a screen. It's definitely that line that's causing the problem, if I comment it out then the app loads and I can click the button on the home screen to go to the other page, but then of course I'm stuck there and can't go back.
What's confusing me is that these files are essentially identical in how everything's declared, and for some reason import OtherPage from './OtherPage'; is a valid screen but import Home from './App'; isn't.
Can anyone help me out? What am I doing wrong?
Related
I tried to give an onPress action to one of my custom button made with TouchableOpacity. It is supposed to navigate me to another screen. I did how exactly i did at other screens but this time it doesn't work and don't get any error as well. On the Navigation.js, when i give initialRouteName manually, screen appears, but when i click on the button, nothing happens.
Home Screen:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
Navigation JS:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: IntroScreen,
Home: HomeScreen,
Baslica: BaslicaScreen
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);
You need to wrap your components between AppContainer tags in your root component similar with below so that the navigation object become aware of the react-navigation context.
import AppContainer from './navigation'; // your navigation.js file
export default class RootApp extends React.Component {
...
render() {
return <AppContainer>
// the rest of your other components here
</AppContainer>
}
}
you Should use navigation param like this:
this.props.navigation.navigate("yourScreen", { ParamName: Valu });
Edit Your code like This:
import React from "react";
import { StyleSheet, View, StatusBar, Image, ImageBackground, TouchableOpacity} from "react-native";
const HomeScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('Baslica')}>
<ImageBackground
source={require("../../assets/HomeScreen/baslicaButton.png")}
resizeMode="contain"
style={styles.baslicaButton}
imageStyle={styles.baslicaButton_imageStyle}
>
<Image
source={require("../../assets/HomeScreen/baslicaText.png")}
resizeMode="contain"
style={styles.baslicaText}
></Image>
</ImageBackground>
</TouchableOpacity>
</View>
);
}
export default HomeScreen;
and Edit this code like that :
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IntroScreen from './src/screens/IntroScreen';
import HomeScreen from './src/screens/HomeScreen';
import BaslicaScreen from './src/screens/BaslicaScreen';
const navigator = createStackNavigator(
{
Intro: {screen:IntroScreen},
Home: {screen:HomeScreen},
Baslica: {screen:BaslicaScreen},
},
{
initialRouteName: "Intro",
}
);
export default createAppContainer(navigator);
I am using react-native: 0.61.4.
In app.js I have
import React from 'react';
import { View, Text } from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './pages';
import ProfileScreen from './pages';
const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen}
});
const App = createAppContainer(MainNavigator);
export default App;
in pages.js I have
import React, { Component } from 'react';
import { Text, View, Button } from 'react-native';
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Main Page',
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={{flex: 1}}>
<Text>You are on the main Page</Text>
<Button
title="Go to Profile"
onPress={() => navigate('Profile')}
/>
</View>
);
}
}
class ProfileScreen extends React.Component {
static navigationOptions = {
title: 'Profile',
};
render() {
return (
<View style={{flex: 1}}>
<Text>You are on the profile page</Text>
</View>
);
}
}
On the IOS simulator, the app loads properly and shows HomeScreen. When clicking on the button though, instead of taking me to ProfileScreen like it should, it looks like it moves forward in the stack to an identical page of HomeScreen, except the page has a back button that goes back to the actual HomeScreen. Anyone know what is wrong with my navigation?
You are using a default export in your pages.js instead of just export HomeScreen as default switch it to:
export { HomeScreen, ProfileScreen };
So you have access to both in app.js, and import them as
import { HomeScreen, ProfileScreen } from './pages';
So, I have got a dummy Register activity. When the user presses on TouchableOpacity, the user should be taken to a PortalListScreen which has DrawerNavigator available i.e. a drawer should be available and it needs to be toggled using a hamburger menu. I don't need the drawer on Register screen, only on PortalListScreen and subsequent screens.
I've tried everything but haven't been able to make it work.
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import{
createStackNavigator,
createAppContainer
} from 'react-navigation';
import Login from './components/Login';
import Register from './components/Register';
import Portal from './components/Portal';
const AppNavigator = createStackNavigator(
{
Login:
{
screen: Login
},
Register:
{
screen: Register
},
Portal:
{
screen: Portal
}
},
{
initialRouteName: 'Register'
}
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component{
render()
{
return(
<AppContainer/>
);
}
}
Register.js:
export default class Register extends Component{
render()
{
return(
<View>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('Portal')}>
<Text>Go to portal</Text>
</TouchableOpacity>
<Text>This is registration</Text>
</View>
);
}
}
Portal.js:
import React, {Component} from 'react';
import {
View,
Text,
TextInput
} from 'react-native';
import{
createDrawerNavigator,
createAppContainer
} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import PortalListScreen from './PortalListScreen';
const PortalStackNavigator = createStackNavigator(
{
PortalStackNavigator: PortalListScreen
},
{
defaultNavigationOptions: ({ navigation }) => {
return {
headerLeft: (
<Icon
style={{ paddingLeft: 10 }}
onPress={() => navigation.openDrawer()}
name="md-menu"
size={30}
/>
)
};
}
}
);
const PortalDrawer = createDrawerNavigator(
{
PortalListScreen:
{
screen: PortalStackNavigator
},
},
{
initialRouteName: 'PortalListScreen'
}
);
const PortalContainer = createAppContainer(PortalDrawer);
export default class Portal extends Component{
render()
{
return(
<PortalContainer/>
);
}
}
PortalListScreen.js:
import React, {Component} from 'react';
import {
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';
export default class PortalListScreen extends Component{
render()
{
return(
<View>
<TouchableOpacity
onPress={() => this.props.navigation.toggleDrawer}>
<Text>Toggle drawer</Text>
</TouchableOpacity>
<Text>This is PortalListScreen</Text>
</View>
);
}
}
Earlier by clicking on Toggle drawer, nothing was happening but now it has started giving me this error message: Module AppRegistry is not a registered callable module (calling runApplication).
You need to add your Drawer Navigator to AppNavigator in App.js
const AppNavigator = createStackNavigator(
{
Login:
{
screen: Login
},
Register:
{
screen: Register
},
PortalDrawer,
},
{
initialRouteName: 'Register'
}
);
I am fairly new to react-native and react-navigation and trying to move from one screen to another via button click, keep getting this error. I've found similar questions here on SO (this and this) but they don't work for me, keep getting this error.
What I am doing is, I have an App.js that is the initial screen which for now shows a login form (called Splash):
import React from 'react';
import {
View,
ActivityIndicator,
StyleSheet
} from 'react-native';
import { createDrawerNavigator, createAppContainer } from "react-navigation";
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
import Splash from './Splash';
export default class App extends React.Component {
render() {
const { navigation } = this.props;
return (
<View>
<Splash navigation={navigation}/>
</View>
);
}
}
const AppNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen
},
Profile: {
screen: ProfileScreen
}
}, {
initialRouteName: "Home",
contentOptions: {
activeTintColor: '#e91e63'
}
});
const AppContainer = createAppContainer(AppNavigator);
On my Splash screen I now have no functionality as I am just trying to get it to move to my HomeScreen when I hit the Login button:
import React, { Component } from 'react';
import {
ScrollView,
Text,
TextInput,
TouchableOpacity,
StyleSheet
} from 'react-native';
class Splash extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ScrollView style={{padding: 20}}>
<TextInput autoCapitalize="none"
onSubmitEditing={() => this.passwordInput.focus()}
autoCorrect={false}
keyboardType='email-address'
returnKeyType="next"
placeholder='Email address'
placeholderTextColor='rgba(225,225,225,0.7)'/>
<TextInput returnKeyType="go"
ref={(input)=> this.passwordInput = input}
placeholder='Password'
placeholderTextColor='rgba(225,225,225,0.7)'
secureTextEntry/>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Home')}>
<Text>LOGIN</Text>
</TouchableOpacity>
</ScrollView>
)
}
};
export default Splash;
What happens now is that as soon as I hit the login button, I get the error in the title. Any clues on what I am doing wrong?
Remove App component, you don't need it in this case. Make Splash as your initial screen
const AppNavigator = createDrawerNavigator({
Splash: {
screen: Splash
},
Home: {
screen: HomeScreen
},
Profile: {
screen: ProfileScreen
}
}, {
initialRouteName: "Splash",
contentOptions: {
activeTintColor: '#e91e63'
}
});
then export AppContainer directly
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer
I followed the documentation here and wrote this code.
App.js
import React from "react";
import {createAppContainer, createStackNavigator} from 'react-navigation';
import LoginScreen from "./src/components/LoginScreen";
export default App = () => createAppContainer(createStackNavigator({
Login: {screen: LoginScreen},
}));
LoginScreen.js
import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';
export default class LoginScreen extends Component {
static navigationOptions = {
title: 'Login',
};
render() {
const {navigate} = this.props.navigation;
return (
<View style={this.styles.viewStyle}>
<Text> Login </Text>
<Button
title="Go to Jane's profile"
onPress={() => navigate('Home', {name: 'Jane'})}
/>
</View>
);
}
}
Output
A blank screen. Login page is not rendered on screen.
You are trying to export a method in your App.js
Either Import and use it as a method or change your default export to
export default App = createAppContainer(createStackNavigator({
Login: {screen: LoginScreen},
}));