Develop Reference

React Native - navigation.addListner is not an object

App.js:
import React, { Component } from 'react';
import {View,Text} from 'react-native';
import { createDrawerNavigator } from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import Epics from './screens/tmp';
import Pager from './screens/Pager';
const DrawerNavigator = createDrawerNavigator({
Home: {screen: Epics},
Page: {screen: Pager}
},{initialRouteName: 'Home'});
const Stack = createAppContainer(DrawerNavigator);
export default class App extends Component {
render() {
return <Stack />;
}
}
Trying to invoke fetch API everytime a user lands on screen using navigation addListner event
componentDidMount() {
this.loadFeed(); // fetch API
const { navigation } = this.props;
this.focus = navigation.addListener('willFocus', () => {
this.loadFeed(); // fetch API
});
}
React Navigation version from package.json:
"react-navigation": "^4.2.2"
"react-navigation-drawer": "^2.4.2"
Is there a better way to detect an active screen on app and invoke the fetch API? Or fix for the given error below?
Type Error: undefined is not an object (evaluating 'navigation.addListner'):
Error when the app launches
Update
I am trying to replicate following example in snack: https://snack.expo.io/HkrP8YPIf
What am I doing wrong? (I am new to React Native, please help me understand)

Try using the NavigationEvents component shipped with react-navigation 4.x. Just nest it anywhere inside your screen's render method.
Example:
import React from 'react';
import { View } from 'react-native';
import { NavigationEvents } from 'react-navigation';
const MyScreen = () => (
<View>
<NavigationEvents
onWillFocus={() => console.log('Screen will be in focus')}
onDidFocus={() => console.log('Screen is in focus')}
onWillBlur={() => console.log('Screen will blur')}
onDidBlur={() => console.log('Screen blurred')}
/>
{/*
other code
*/}
</View>
);
export default MyScreen;

This just means that navigation doesn't exist. So it looks like the component is supposed to receive it via props and isn't. That's all I can tell from this code.

Check your props keys, agree with James. Have one suggestion here, since you're expecting a props, you should handle this common error whether key exist or not(if else)

React Navigation: Swipe on drawer does not work in Android

I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it.
I have created a simple Drawer Navigator with React Navigation V3. I have added a Menu icon, and when I click it, the drawer appears as it should be. But, no hand gesture is working. Swiping from left to right don't do anything. Even when the drawer is open, tapping on empty space doesn't close the drawer.
Here is my code:
import {
createStackNavigator,
createSwitchNavigator,
createAppContainer,
createDrawerNavigator
} from 'react-navigation';
import Home from './screens/Home';
import LoginForm from './screens/LoginForm';
import Articles from './screens/Articles';
const AuthStack = createStackNavigator({
LoginScreen: LoginForm
});
const AppStack = createDrawerNavigator({
HomeScreen: Home,
ArticlesScreen: Articles
});
const RootNavigator = createSwitchNavigator(
{
Auth: AuthStack,
App: AppStack
},
{
initialRouteName: 'Auth'
}
);
export default createAppContainer(RootNavigator);

I have found the solution. React Navigation depends on the react-native-gesture-handler library. In the Installation section of React Navigation docs, it only says to create link by using the command react-native link. This is enough for iOS. But for Android, you have to edit the MainActivity.java file, so that the gesture handler library can work as expected:
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
#Override
protected String getMainComponentName() {
return "Example";
}
+ #Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ #Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
Refer to the documentation: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html
Actually, it's nowhere stated in React Navigation documentation to modify any files, as it is specific to react-native-gesture-handler and not React Navigation. I am keeping the answer here so it may help others.
UPDATE: The latest docs of React Navigation addresses this issue

In the index.js of your project just use gestureHandlerRootHOC:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
resource: https://github.com/react-navigation/drawer/issues/105#issuecomment-540667009
Update:
In React Navigation > 5.x
Just put react-native-gesture-handler at the beginning of root index.js
import 'react-native-gesture-handler';

Seems to be fixed in versions above 0.61.0, but for older versions this worked for me.
In the index.js :
. . .
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => gestureHandlerRootHOC(App));
. . .

React native docs updated this issue and you can find a section named Installing dependencies into a bare React Native project in the below link
https://reactnavigation.org/docs/en/getting-started.html#installation

WebStorm + React-Native : Navigator is deprecated and has been removed from this package

I am going through the react-native tutorials on lynda.com, "React-Native: Building Mobile Apps". The difference lies in the fact that I am using WebStorm to develop JavaScript based apps. I've created the files according to the tutorial:
appContainer.js:
import React, { Component } from "react";
import { Drawer, View } from "react-native";
import { Navigator } from "react-native";
export default class AppContainer extends Component {
constructor(props){
super(props);
this.state = {
store: {},
toggled: false,
theme: null
}
}
toggleDrawer(){
this.state.toggled ? this._drawer.close() : this._drawer.open();
}
openDrawer(){
this.setState({toggled: true});
}
closeDrawer(){
this.setState({toggled: false});
}
renderScene(route, navigator){
switch(route){
default: {
return null
}
}
}
configureScene(route, routeStack){
return Navigator.SceneConfigs.PushFromRight;
}
render(){
return (
<Drawer
ref={(ref) => this._drawer = ref}
type="displace"
content={<View style={{backgroundColor: "#000", height: 1000}}
/>}
onClose={this.closeDrawer.bind(this)}
onOpen={this.openDrawer.bind(this)}
openDrawerOffset={0.2}
>
<Navigator
ref={(ref) => this._navigator = ref}
configureScene={this.configureScene.bind(this)}
renderScene={this.renderScene.bind(this)}
/>
</Drawer>
);
}
}
index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import AppContainer from "./app/appContainer";
export default class dinder extends Component {
render() {
return (
<AppContainer/>
);
}
}
AppRegistry.registerComponent('dinder', () => dinder);
Run/Debug Configuration screen:
However, when I run the app by selecting run 'ios' from the run drop down windows, I am receiving the following error in the emulator window:
Can someone please explain how I can fix this issue within the confines of the code presented for the tutorial that I pasted?

In React-Nav 0.44.3 the Navigator has been deprecated: https://github.com/facebook/react-native/releases/tag/v0.44.3, so is not really a webstorm's configuration's issue.
To fix this, you can follow this Github issue, install the react-native-deprecated-custom-components package through npm or yarn.
And then in your appContainer.js, replace your
import { Navigator } from "react-native";
with
import NavigationExperimental from 'react-native-deprecated-custom-components';
And change all your Navigator call to NavigationExperimenal.Navigator

Unexpected token while importing react native

I am new to react native and having issues importing basic component into the index.android.js file. I could not find what was wrong and also couldn't find posts on this specific issue. Please help what is wrong.
Error says: Unexpected Token near CounterComponent.android.js line 7. Marked it with **.
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class Counter extends Component {
render() {
return{
**<View>**
<Text>Counter component</Text>
</View>
};
}
}
Imported the file using command below in the index.android.js
import Counter from './app/components/CounterComponent'

Try replacing your { for ( after the return, something like this:
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class Counter extends Component {
render() {
return (
<View>
<Text>Counter component</Text>
</View>
);
}
}

undefined is not an object (evaluating '_reactNative.PropTypes.string') Error

I got this error when i am implementing third party library as https://github.com/ayoubdev/react-native-android-kit what this error indicates?
'use strict';
import React, {Component} from 'react';
import{
Platform,
StyleSheet,
Text,
View,
Image,
Navigator,
ToolbarAndroid,
ScrollView
}from 'react-native';
import EventList from './javra-event-list';
import AndroidToolBar from './javra-android-toolbar';
import JResource from '../../javra-resource';
import ScrollableTabView, {DefaultTabBar,ScrollableTabBar} from 'react-native-scrollable-tab-view';
import CustomTab1 from './javra-custom-tabbar';
import {TabLayoutAndroid, TabAndroid} from "react-native-android-kit";
export default class Home extends Component{
constructor(props){
super(props);
this.eventThumnailHandler = this.eventThumnailHandler.bind(this);
this.movies = [{id:1,title:'Event 2016'},{id:2,title:'Event 2015'},{id:3,title:'Event 2014'},{id:4,title:'Event 2013'},
{id:5,title:'Event 2016'},{id:6,title:'Event 2015'},{id:7,title:'Event 2014'},{id:8,title:'Event 2013'}
];
}
static childContextTypes = {
eventThumnailHandler: React.PropTypes.func.isRequired,
};
getChildContext() {
return {
eventThumnailHandler: (item) => (this.eventThumnailHandler(item)),
};
}
static contextTypes = {
openDrawer: React.PropTypes.func.isRequired,
};
_openDrawer(){
this.context.openDrawer();
}
eventThumnailHandler(item: Object){
console.log('*/*/*/*///*/*/: ' + item.title);
this.props.navigator.push(
{id: 'NewView' , index:1}
)
}
render(){
var toolbarActions = [{title:'Next',show:'always'}];
return(
<View style={{flex:1}}>
<TabLayoutAndroid style={{height:60}} backgroundColor='#009688' indicatorTabColor='#ffc400'
indicatorTabHeight={2} scrollable={false} center={false}>
<TabAndroid text='Tab1' textSize={16} textColor="white" selectedTextColor='#ffc400'
icon='ic_home_black_24dp' iconPosition='left'>
<Text>I'm the first Tab content!</Text>
</TabAndroid>
<TabAndroid text='Tab2' textSize={16} textColor='white' selectedTextColor='#ffc400'
icon='ic_important_devices_black_24dp' iconPosition='left'>
<Text>I'm the second Tab content!</Text>
</TabAndroid>
</TabLayoutAndroid>
</View>
);
}
}
i have implemented tablayout as provided by the link above mentioned. what could be the error in my file.please suggest me.

import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Text,
TouchableOpacity,
View
} from 'react-native';
Including PropTypes next to component helped me

like this :
import PropTypes from 'prop-types';
注：reactVersion：0.51

try running
npm outdated
and update the third-party modules that are not at the current version.
I had to do the same after upgrading React Native and uninstall and re-install some modules.

node-modules->react-native-prompt->propmt.js
old : import React, { Component,PropTypes } from 'react';
new:------
import PropTypes from "prop-types"
import React, { Component, } from 'react';