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
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.
Is there a way to read the options before using the mergeOptions function.
I'm trying to add a sideMenu that opens and closes with the same button. But to handle that logic, Instead of making use of redux, I want to read the options before the merge, so I can simply do something like visible: !pastVisible.
navigationButtonPressed({ buttonId }) {
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
'left': {
visible: false
}
}
});
console.log(`Se presiono ${buttonId}`);
}
So basically I want to read the value of the visible option before changed it.
By now, I can only achieve this using redux.
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import { Navigation } from 'react-native-navigation';
import { connect } from 'react-redux';
import { toggleSideMenu } from './../../store/actions/index';
class SideDrawer extends Component {
constructor(props) {
super(props);
Navigation.events().registerComponentDidDisappearListener(({ componentId }) => {
this.props.toggleSideMenu(false);
});
}
render() {
return (
<View>
<Text>This is the sidedrawer</Text>
</View>
);
}
}
const mapDispatchToProps = dispatch => {
return {
toggleSideMenu: (visible) => dispatch(toggleSideMenu(visible))
};
};
export default connect(null, mapDispatchToProps)(SideDrawer);
Then I just add the listeners to the sidemenu component. Depending on the case, I update the current state of the component (visible or not).
Finally on the components where I want to use the side drawer button I just implement the navigationButtenPressed method. Then I just call the reducer to know the current visible state and toggled it.
navigationButtonPressed({ buttonId }) {
const visible = !this.props.sideMenu;
Navigation.mergeOptions(this.props.componentId, {
sideMenu: {
'left': {
visible: visible
}
}
});
this.props.toggleSideMenu(visible);
}
If there is a more easy way to achieve this I'll be glad to know about it.
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'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
I am receiving the Actions may not have an undefined "type" property. Have you misspelled a constant? error from all actions within the RecommendationItemActions.js actions file.
This issue occurs with both exports contained within.
import firebase from 'firebase';
import {} from 'redux-thunk';
import {
RECOMMENDATION_ITEM_UPDATE,
RECOMMENDATION_ITEMS_FETCH_SUCCESS
} from './types';
export const recommendationItemUpdate = ({ prop, value }) => {
//ex. Want to change name? Send in prop [name] and value [ what you want the new name to be ]
return {
type: RECOMMENDATION_ITEM_UPDATE,
payload: { prop, value }
};
};
export const recommendationItemsFetch = () => {
const { currentUser } = firebase.auth();
return (dispatch) => {
firebase.database().ref(`/users/${currentUser.uid}/recommendationItems`)
//snapshot is the value found
//snapshot is an object that describes what data is there
.on('value', snapshot => {
console.log(snapshot.val());
dispatch({
type: RECOMMENDATION_ITEMS_FETCH_SUCCESS,
payload: snapshot.val()
});
//snapshot.val() is the actual data at snapshot
});
};
};
These types are clearly defined within the imported type.js file
export const RECOMMENDATION_ITEMS_FETCH_SUCCESS = 'recommendation_items_fetch_success';
export const RECOMMENDATION_ITEM_UPDATE = 'recommendation_item_update';
The Actions are exported via the index.js file in the actions folder
export * from './RecommendationItemActions';
They are imported within the RecommendationItemCreate.js file
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, Image, View } from 'react-native';
import { recommendationItemUpdate, recommendationItemCreate } from '../../actions';
import { CardSection, Input, Button } from './../common';
import GooglePlacesAutocomplete from './../googlePlaces/GooglePlacesAutocomplete';
And referenced within the onChangeText of my Input component
<Input
label="ADDRESS"
placeholder="Address"
value={this.props.formattedAddress}
onChangeText={
value => this.props.recommendationItemUpdate({ prop: 'formattedAddress', value })
}
/>
I can not trace any error that would lead to the Actions may not have an undefined "type" property and have been banging my head against this for a couple days now. The type is clearly defined and can be accurately traced throughout it's usage.
Closest Reference Found
React+Redux - Uncaught Error: Actions may not have an undefined “type” property
This was still unhelpful. Here is my createStore as reference:
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';
class App extends Component {
componentWillMount() {
const config = {
REMOVED FOR EXAMPLE
};
firebase.initializeApp(config);
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
//applyMiddleware is a store-enhancer - it adds additional functionality
//to store
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
export default App;
I believe I have hit an issue like this before, and it was caused by dispatching a plain object within a thunk rather than an action creator, such as what you are doing. Could you try creating a recommendationItemsFetchSuccess action creator and dispatching that? Such as:
const recommendationItemsFetchSuccess = (snapshotVal) => {
return {
type: RECOMMENDATION_ITEMS_FETCH_SUCCESS,
payload: snapshotVal
};
}
export const recommendationItemsFetch = () => {
const { currentUser } = firebase.auth();
return (dispatch) => {
firebase.database().ref(`/users/${currentUser.uid}/recommendationItems`)
.on('value', snapshot => {
dispatch(recommendationItemsFetchSuccess(snapshot.val()));
});
};
};
As stated by DJSrA the fix is a reference error. In my case, I was importing from two different files that contains constants. I referenced the wrong file for a particular constant.