I've just installed react-native-navigation using the installation guides provided on https://wix.github.io/react-native-navigation/#/installation-ios and the usage guide https://wix.github.io/react-native-navigation/#/usage.
I've followed these and checked out multiple example apps, but I cannot figure out why my screens won't register.
The error I receive is: console.error: "Navigation: project.testscreen registration result is 'undefined'".
The registerScreens is called and the registration is completed, but it seems like the registration results to undefined.
index.js
import App from './src/app'
const app = new App();
app.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens();
Navigation.startTabBasedApp({
tabs: [{
label: 'Test',
screen: 'project.testscreen',
title: 'Test',
}]
});
screens.js
import { Navigation } from 'react-native-navigation'
import { TestScreen } from './components/testScreen'
export function registerScreens() {
Navigation.registerComponent('project.testscreen', () => TestScreen)
}
testScreen.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class TestScreen extends Component {
render() {
return (
<View>
<Text>Hi</Text>
</View>
)
}
}
export default TestScreen
react-native: 0.55.4
react-native-navigation: latest (1.1.479)
change
import { TestScreen } from './testScreen'
to
import TestScreen from './testScreen'
Because TestScreen exports as default
Related
I am using WIX-React-Native-Navigation and while pushing a component in the stack I am getting this error.
Error
One thing to say, I am using Viro-React ARScene Navigation (Scene Navigation) in WIX-React-Native-Navigation.
Here's my code
index.js
import { AppRegistry } from 'react-native';
var OpenDoor = require('./app/base')
import Stack from './app/navigation';
import { Navigation } from "react-native-navigation";
AppRegistry.registerComponent('ViroSample', () => OpenDoor);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack: Stack
}
});
});
navigation.js
import { Navigation } from "react-native-navigation";
import Base from './base';
import Menu from './components/Menu/menu';
Navigation.registerComponent('Base', () => Base);
Navigation.registerComponent('Menu', () => Menu);
const Stack = {
children: [{
component: {
name: 'Base'
},
}
]
};
export default Stack;
base.js
import React, {Component} from 'react';
import {
Alert,
View
} from 'react-native';
import {ViroARSceneNavigator} from 'react-viro';
import { Navigation } from 'react-native-navigation';
import APIKeys from './index';
import Camera from './components/Camera/camera';
import MenuButton from './components/Menu/menu_button';
class Base extends Component {
constructor(props) {
super(props);
this.navigateScreen = this.navigateScreen.bind(this);
}
navigateScreen(location) {
Navigation.push(this.props.componentId, {
component: {
name: location
}
});
}
render() {
return(
<View style={styles.container}>
<ViroARSceneNavigator
initialScene = {{
scene: Camera
}}
apiKey = {APIKeys.ViroReact}
style = {styles.ar_scene}
/>
<MenuButton navigation={this.navigateScreen}/>
</View>
);
}
};
const styles = {
container: {
flex: 1
}
};
export default Base;
module.exports = Base;
Correct me, If I am wrong somewhere.
What I am doing is, creating an application where users can decorate home virtually with the help of Augmented Reality. The mobile app is created on React-Native while the library used for augmented reality is Viro-React.
So, When I want to navigate from One Screen to another, then while pushing component in the stack I am getting this error.
Thanks.
I am having trouble connecting the tab navigator (from React-Navigation v3) to the redux provider.
So this is how my react-navigation and redux is configured:
app/
/react-redux provider
/app-container (this is the AppContainer of the main SwitchNavigator)
/welcome-screen
/login-screen
/register-screen
/home-navigator (this is the TabNavigator that is inside the SwitchNavigator)
Home navigator holds the screens to which user is directed to when he logs-in. In the first 3 screends (welcome, login and register) I can access the functions that are "connected" from redux to the screen through standard mapDispatchToProps.
This is the app component:
/**
* Entry point for the app
*/
import React, { Component } from "react";
// redux
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import main_app_reducer from "./modules/core/reducers/main_app_reducer";
// create redux store
const create_store = composeWithDevTools(applyMiddleware(reduxThunk))(createStore);
export const store = create_store(main_app_reducer);
// navigation
import AppContainer from "./modules/core/components/AppNavigator";
import { configure_axios } from "./helpers/axios_config";
configure_axios();
class App extends Component {
render() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
);
}
}
export default App;
And then, from there we go to AppContainer:
/**
* this components ensures app navigation so that user can jump from one screen to another
*/
// navigation
import { createSwitchNavigator, createAppContainer } from "react-navigation";
// screens
import WelcomeScreen from "../screens/WelcomeScreen";
import LoginScreen from "../../auth/screens/LoginScreen";
import RegisterScreen from "../../auth/screens/RegisterScreen";
import HomeNavigator from "./HomeNavigator";
const AppSwitchNavigator = createSwitchNavigator({
// for users that are not logged in yet
Welcome: { screen: WelcomeScreen },
Login: { screen: LoginScreen },
Register: { screen: RegisterScreen },
// for logged in users
HomeNavigator: { screen: HomeNavigator },
});
const AppContainer = createAppContainer(AppSwitchNavigator);
export default AppContainer;
All of the code above works perfectly with no errors, the problem occurs inside the HomeNavigator component that you see below.
This is the HomeNavigator component:
import { createBottomTabNavigator } from "react-navigation";
import { HomeScreen } from "../screens/HomeScreen";
import { DashboardScreen } from "../screens/DashboardScreen";
const HomeNavigator = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Dashboard: { screen: DashboardScreen },
},
{
navigationOptions: ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
return {
headerTitle: routeName,
};
},
},
);
export default HomeNavigator;
NONE of the screens inside the HomeNavigator are connected to Redux altough they are defined THE SAME WAY as the screens inside AppContainer file. For comparison let's see Login screen from AppContainer and Home screen from HomeNavigator:
LoginScreen:
import React, { Component } from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { get_user_servers } from "../actions/core_actions";
export class LoginScreen extends Component {
componentDidMount() {
this.props.get_user_servers(); // this function works absolutely fine
}
render() {
return (
<View>
<Text> LoginScreen </Text>
</View>
);
}
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = { get_user_servers };
export default connect(
mapStateToProps,
mapDispatchToProps,
)(LoginScreen);
HomeScreen:
import React, { Component } from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { get_user_servers } from "../actions/core_actions";
export class HomeScreen extends Component {
componentDidMount() {
this.props.get_user_servers();
// the same function as in LoginScreen but here the function does not work
// I'm getting an error = TypeError: this.props.get_user_servers is not a function (see picture below)
}
render() {
return (
<View>
<Text> HomeScreen </Text>
</View>
);
}
}
const mapStateToProps = (state) => ({});
const mapDispatchToProps = { get_user_servers };
export default connect(
mapStateToProps,
mapDispatchToProps,
)(HomeScreen);
That function (get_user_servers) is defined properly and it works fine in LoginScreen.
thanks everyone who took their time to help me, in the end it was my mistake that I overlooked. If you check out the third code-block from this question you can see that I import my components like this:
import { HomeScreen } from "../screens/HomeScreen";
import { DashboardScreen } from "../screens/DashboardScreen";
Which is wrong, I changed that to:
import HomeScreen from "../screens/HomeScreen";
import DashboardScreen from "../screens/DashboardScreen";
And now everything works fine, thanks again :)
Assuming it's the same function you're importing, please could you try to check your import of get_user_servers function from both screen : LoginScreen and HomeScreen. According to your code it look like LoginScreen ("../../auth/screens/LoginScreen") and HomeScreen ("../screens/HomeScreen") are not in the same path.
As asked above, could check the path of the files, or post it so we can help. Also could you open the remote debugger, and inside the componentWillMount you can put:
console.log(this.props)
to check if the HomeScreen is geting the function inside props.
I just updated RNN to version 2 and I'm stuck with my first push
I get an error :
undefined is not an object (evaluating '_reactNativeNavigation.default.push')
other answers on stack overflow didn't help me much so far
I guess my issue is related to this.props.componentId but I couldn't find any help in the official doc as well.
or perhaps it's coming from a wrong call to the stack since I never use the id property set in App.js
I'm also wondering if I have to provide an id manually for each screen or, as it is said in the doc it will be done automatically by RNN
if someone can guide me, I'm a bit lost -_-
my code :
App.js
import { Navigation } from 'react-native-navigation';
import { Provider } from 'react-redux';
import LandingScreen from './src/screens/Landing/Landing';
import AuthScreen from './src/screens/Auth/Auth';
import configureStore from './src/store/configureStore';
import strings from './src/global/strings';
const store = configureStore();
// Landing
Navigation.registerComponentWithRedux(strings.screens.screenLanding, () => LandingScreen, Provider, store);
// Auth
Navigation.registerComponentWithRedux(strings.screens.screenAuth, () => AuthScreen, Provider, store);
// Start App
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
stack:{
id:"appStack",
children: [
{
component: {
name: strings.screens.screenLanding,
options: {
topBar:{
title:{
text:"Welcome"
}
}
}
}
}
]
},
}
});
});
Landing.js
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import Navigation from 'react-native-navigation';
import strings from '../../global/strings';
class Landing extends Component {
goToScreen = (screenName) => {
Navigation.push(this.props.componentId, {
component: {
name: screenName
}
})
}
render() {
return (
<View>
<Button
title="Connexion"
onPress={() => this.goToScreen(strings.screens.screenAuth.toString())}
/>
</View>
)
}
}
export default Landing;
as indicated by jinshin1013 in RNN issue tracker In Landing.js,
I should have import Navigation like this :
import { Navigation } from 'react-native-navigation
im using react-native and react-native-navigation but when I run the project, occur this error "Requested prototype of a value that is not an object".
i did not to use redux
App.js :
import {Navigation} from 'react-native-navigation';
import {HomeComponent} from './src/home';
Navigation.registerComponent("navigation.playground.HomeComponent", () => HomeComponent);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
component: {
name: 'navigation.playground.HomeComponent'
}
}
});
});
index.js :
import {Navigation} from "react-native-navigation";
import {App} from './App';
Navigation.registerComponent(`navigation.playground.HomeComponent`, () => App);
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setRoot({
root: {
component: {
name: "navigation.playground.HomeComponent"
}
}
});
});
home.js :
import React, {Component} from 'react';
import { Text, View} from 'react-native';
class HomeComponent extends Component{
render() {
return (
<View>
<Text>This is Home</Text>
</View>
);
}
}
export default HomeComponent;
and then end,
result:
You are having this problem when your Gradle is not compatible with your version of react-native
https://wix.github.io/react-native-navigation/#/docs/Installing
7 and 8 section is very important and the solution of the problem
If you read the documentation carefully, wouldn't happen!
Although the implementation of react-native-navigation is really complicated!
at the end use Gradle 4.4 instead of 4.6 for react-native57
I'm trying to use react-native-navigation as navigation system in my react-native. I've wrote a very simple app for test it, but this app crashes(without giving me any error or info) after the splash screen.
my index.ios.js:
/* eslint-disable no-unused-vars */
import App from './src/app';
my app.ios.js:
import {
Platform
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens(); // this is where you register all of your app's screens
// this will start our app
Navigation.startTabBasedApp({
tabs: [{
label: 'One',
screen: 'AwesomeProject.Home', // this is a registered name for a screen
icon: require('../img/one.png'),
selectedIcon: require('../img/one_selected.png'), // iOS only
title: 'Screen One'
}]
});
my screens.js
import { Navigation } from 'react-native-navigation';
import Home from './containers/Home';
import About from './containers/About';
// register all screens of the app (including internal ones)
export function registerScreens() {
Navigation.registerComponent('AwesomeProject.Home', () => Home);
Navigation.registerComponent('AwesomeProject.About', () => About);
}
my Home.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class Home extends Component {
render() {
return (
<Text>Home!</Text>
);
}
}
export default Home;
my About.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class About extends Component {
render() {
return (
<Text>About!</Text>
);
}
}
export default About;
You can see a full gist here: https://gist.github.com/inchr/d0184f4ae91abd6036a2fa61725744c9
I've done very test on how loads the tabs in startTabBasedApp() and I've tried to load only a screen too.
Any idea on the reason of the crash/close after the splash screen ?
Thanks.
Ok the problem was that after I've run: react-native link
I've forgot to edit the AppDelete.m file as explained here:
https://github.com/wix/react-native-navigation/wiki/Installation---iOS#installation---ios
https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m