React native android:
When I am navigating from one screen to next screen
undefined is not a function (evaluating '(0,
_reactNavigation.StackNavigator)({ SettingScreen: { screen: _settings.default }, HomeScreen: { screen: _Home.default } })')
App.js
import React, {Component} from 'react';
import { AppRegistry} from 'react-native';
import { Button } from 'react-native';
import {Navigation} from 'react-native'
import { StackNavigator } from 'react-navigation';
import Settings from './screens/Settings';
import Home from './screens/Home';
const AppNavigator = StackNavigator({
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
});
export default class App extends Component<Props> {
render() {
return (
<AppNavigator />
);
}
}
Setting.js
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
export class Settings extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
</View>
)
}
};
export default Settings;
Home.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
export class Home extends Component {
render() {
return (
<View>
<Text>This is the home screen</Text>
</View>
)
}
}
export default Home
Update your App.js to the below.
const App = createStackNavigator({
Home: HomeScreen,
Profile: ProfileScreen,
});
export default createAppContainer(App);
Remove the line export default Settings;
Remove the line export default Home;
Please try the updated function like below.
const App = createStackNavigator({
Home: {screen: HomeScreen},
Profile: {screen: ProfileScreen},
});
Please, Try with the below changes.
import { createStackNavigator } from "react-navigation";
const AppNavigator = createStackNavigator(
{
SettingScreen: { screen: Settings },
HomeScreen: { screen: Home }
}
)
Related
I have a Tab Navigator in a Component, but to set the first router when showing in a tab by the value of props, I don't know how, Can someone help me with the problem this
My code as below:
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { Dimensions } from 'react-native';
const TabNavigator = createMaterialTopTabNavigator(
{
A: {
screen: (props) => (
<A />
)
},
B: {
screen: (props) => (
<B />
)
},
C: {
screen: (props) => (
<C />
)
}
},
{
initialRouteName: props.initRouter
}
);
const TopTab = createAppContainer(TabNavigator);
export default TopTab;
Edit: Version react-navigation I use:
"#react-navigation/bottom-tabs": "^5.11.8",
"#react-navigation/native": "^5.9.3",
"#react-navigation/stack": "^5.12.5",
I'm actually working on single page navigation, tab navigation and Drawer navigation by using react native navigation.
After the drawer implementation is done, single page navigation is working fine but the whole application is getting crashed after clicking on a login button.
Take a look at the code that I have written :
app.js:
import { Navigation } from 'react-native-navigation';
import AuthScreen from './src/screens/Auth/Auth';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import SideDrawer from "./src/screens/SideDrawer/SideDrawer";
// register screens
Navigation.registerComponent('example.AuthScreen', () => AuthScreen);
Navigation.registerComponent('example.SharePlaceScreen', () => SharePlaceScreen);
Navigation.registerComponent('example.FindPlaceScreen', () => FindPlaceScreen);
Navigation.registerComponent('example.SideDrawer', () => SideDrawer);
// start a app
Navigation.startSingleScreenApp({
screen: {
screen:'example.AuthScreen',
title:"Login"
}
})
startMainTab.js
import { Navigation } from 'react-native-navigation';
import {Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
const wDim = Dimensions.get('window');
const fixedWidth = Math.round(wDim.width * wDim.scale * 0.8);
const startTab = () =>{
Promise.all([
Icon.getImageSource("map",30),
Icon.getImageSource("share",30),
Icon.getImageSource("menu",30),
]).then(sources =>{
Navigation.startTabBasedApp({
tabs: [
{
screen:"example.AuthScreen",
label : "Find Place",
title : "Find Place",
icon : sources[0],
navigatorButtons:{
leftButton:[
{
icon:sources[2],
title:"Menu",
id:"sideDrawerToggle"
}
]
}
},
{
screen:"example.AuthScreen",
label : "Share Place",
title : "Share Place",
icon : sources[1],
navigatorButtons:{
leftButton:[
{
icon:sources[2],
title:"Menu",
id:"sideDrawerToggle"
}
]
}
}
],
drawer: {
left: {
screen:"example.SideDrawer"
}
}
});
})
}
export default startTab;
SideDrawer.js
import React, { Component } from 'react';
import {View,Text,Dimensions,StyleSheet} from 'react-native';
class SideDrawer extends Component{
render(){
return(
<View >
<Text
style={[styles.container,{width:Dimensions.get("window").width*0.8}]}>
On SideDrawer
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
paddingTop:22,
backgroundColor:"white",
flex:1
}
})
export default SideDrawer;
sharePlace.js
import React,{ Component } from 'react';
import {View,Text} from 'react-native';
class SharePlaceScreen extends Component{
constructor(props){
super(props);
props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent = event => {
console.log(events)
if(event.type === "NavBarButtonPress"){
if(event.id === "sideDrawerToggle"){
this.props.navigator.toggleDrawer({
side: 'left'
})
}
}
}
render(){
return(
<View>
<Text>On Share place screen</Text>
</View>
);
}
}
export default SharePlaceScreen;
leftButton: [
{
icon: sources[2],
title: "Menu",
id: "sideDrawerToggle"
}
]
This should be ,
leftButtons: [
{
icon: sources[2],
title: "Menu",
id: "sideDrawerToggle"
}
]
Follow this link :
https://wix.github.io/react-native-navigation/#/adding-buttons-to-the-navigator.
Hope this helps you. :)
I recreated the Drawer Navigation following this code: https://github.com/mariodev12/react-native-menu-drawer-navigator
Everything works correctly but now I do not know how to handle the native button to go back .. I would like to always return to the previous page, but if you press twice in the home exit the app.
This is my Code:
App.js
import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';
const Navigator = StackNavigator({
drawerStack: {screen: DrawerStack}
}, {
headerMode: 'none',
initialRouteName: 'drawerStack'
})
export default Navigator
drawerStack.js
import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";
const DrawerNavigation = StackNavigator({
DrawerStack: {screen: DrawerScreen}
}, {
headerMode: 'float',
navigationOptions: ({navigation}) => ({
headerStyle: {
backgroundColor: 'rgb(255,45,85)',
paddingLeft: 10,
paddingRight: 10
},
title: 'Home',
headerTintColor: 'white',
headerLeft: <View>
<TouchableOpacity
onPress={() => {
if (navigation.state.isDrawerOpen === false) {
navigation.dispatch(DrawerActions.openDrawer());
} else {
navigation.dispatch(DrawerActions.closeDrawer());
}
}}>
<Text>Menu</Text>
</TouchableOpacity>
</View>
})
})
export default DrawerNavigation;
drawerScreen.js
import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';
const DrawerScreen = DrawerNavigator({
Home: {screen: Home},
Login: {screen: Login},
Contacts: {screen: Contacts},
News: {screen: News}
}, {
headerMode: 'none',
initialRouteName: 'Home'
})
export default DrawerScreen;
news.js "Example of one page"
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
Now, how do I insert the back button in the header instead of the classic menu (DrawerStack) for only the 'News.js' page?
In Android you have to handle back button actions by yourself with BackHandler from react-native.
First of all
import { BackHandler } from 'react-native';
in ComponentDidMount add an event listener to listen for backpress:
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}
in ComponentwillUnmount make sure you remove the listener:
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}
then
onBackPress = () => {
//inside here do what you want with single back button
}
Checkout this link too:
https://reactnavigation.org/docs/en/drawer-based-navigation.html
If you want to go back to previous Screen with back button drawer navigation isn't for you and you should try to use Stack Navigator.
You need create the button in your news screen too, like this.
import React from "react";
import {Text, View} from 'react-native';
export default class News extends React.Component {
static navigationOptions = ({navigation}) => {
return {
headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
}
}
render() {
return (
<View>
<Text> Here Leave the News!! </Text>
</View>
);
}
}
To make better, you can create a new screen with only your custom navigation options.
I am using react-native framework for developing my small android app.I'm trying to redirect to Home.js from index.android.js.when i run it,it showing red error message on my Emulator
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from 'App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp);
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii';
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;
Check with this import Path import Home from 'App/Component/Home';. I assume the Home.js is inside the Project(Folder) -> App (Folder) -> Component (Folder) -> Home.js. If it so then you need import like this import Home from './App/Component/Home';
Update 1:
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import Home from './App/Component/Home';
export default class mylApp extends Component {
render() {
return (
<View>
<Home />
</View>
);
}
}
AppRegistry.registerComponent('reactTutorialApp', () => mylApp);
Update 2
Home.js
import React, { Component } from 'react';
import {Text,View} from 'react-native';
class Home extends Component {
state = {
myTxt: 'hiiiiiiiiiiiiiiiiiiiiiii'
}
render() {
return (
<View>
<Text>
{this.state.myTxt}
</Text>
</View>
);
}
}
export default Home;
I am just learning react-native and how it works with redux. I have setup a store, setup a loginContainer, loginView. This view has a button that when it is clicked, i send an action / reducer to change the text of the button too "logged in". I was hoping I could get some insight into why I see the logs for the action / reducer, but nothing ever gets sent to the loginContainer to then re-render on the loginView.
Here is the code for loginView:
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import MainView from '../MainView/mainview';
import loginReducers from '../../reducers';
import { createStore } from 'redux';
import * as loginActions from '../../actions/actions';
import { LOGIN } from '../../actions/actions';
class LoginView extends Component {
constructor(props)
{
super(props);
}
render() {
const {text, _loginPressed} = this.props;
return (
<View style={styles.container}>
<TextInput style={styles.textInput} placeholder={"Username.."}/>
<TextInput style={styles.textInput} placeholder={"Password.."}/>
<TouchableHighlight onPress={_loginPressed} style={styles.loginButton} underlayColor={'#2f9bd7'}>
<Text style={styles.loginButtonText}>{text}</Text>
</TouchableHighlight>
</View>
);
}
}
export default LoginView;
Login Container:
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import { createStore } from 'redux';
import { StyleSheet } from 'react-native';
import styles from './styles';
import loginReducers from '../../reducers';
import {LOGIN} from '../../actions/actions'
import LoginView from '../../components/Login/loginview';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
export default class LoginContainer extends Component {
constructor(props) {
super(props);
}
render() {
const {text} = this.props;
console.log(this.state);
return (
<LoginView
text={text}
_loginPressed={this._loginPressed.bind(this)}/>
);
}
}
const stateToProps = (state) => {
return {
state: this.state
}
}
const dispatchToProps = (dispatch) => {
return {
_loginPressed: () => {
dispatch(LOGIN())}
};
};
export default connect(stateToProps, dispatchToProps)(LoginView)
top view (setup.js):
import App from './components/App';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from './store';
const store = configureStore();
function setup() {
class Root extends Component {
render() {
return (
<Provider store={store}>
<App/>
</Provider>
);
}
}
return Root;
}
module.exports = setup;
App/index.js
import { View, Platform, Text, TextInput, TouchableHighlight, Alert, Navigator} from 'react-native';
import React, { Component } from 'react';
import styles from './styles';
import LoginContainer from '../../containers/Login/loginContainer';
import configureStore from '../../store';
class App extends Component {
render() {
return (
<Navigator
initialRoute={{name: 'LoginView', component: LoginContainer}}
renderScene={(route, navigator) => {
//creates new element with the component and navigator;]
if (route.component) {
return React.createElement(route.component, Object.assign({navigator }, {type: 'LoginView', text: 'Login'}));
}
}}
/>
);
}
}
export default App;