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)

undefined is not an object (evaluating '_reactNativeContacts.default.getAll')

I am trying du use react-native-contacts with a react-native app made with Expo, but I have this error message :
undefined is not an object (evaluating '_reactNativeContacts.default.getAll')
Here is the code I use :
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
Modal,
TouchableHighlight,
ImageBackground,
TextInput,
Picker,
PermissionsAndroid
} from 'react-native';
import { WebBrowser } from 'expo';
import Contacts from 'react-native-contacts';
import { MonoText } from '../components/StyledText';
Contacts.getAll((err, contacts) => {
if (err === 'denied'){
// error
} else {
// contacts returned in Array
}
})
I tried to follow all he steps for the installation in this page for the android part :
https://github.com/rt2zz/react-native-contacts#getting-started
But I don't find where I can do this part :
I don't know where I can find this file : android/settings.gradle
By the way I tried this command "react-native link" in my app directory and nothing changed.
Android
In android/settings.gradle
...
include ':react-native-contacts'
project(':react-native-contacts').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-contacts/android')
In android/app/build.gradle
...
dependencies {
...
implementation project(':react-native-contacts')
}
Has anyone had this kind of problem ?
Thanks for help !

As far as I understand, you are developing your app with Expo. Some of independent libraries doesn't work well with Expo. I have two suggestions for you.
If you want to keep using react-native-contacts, you need to eject your app from Expo
Or directly use Expo's contacts api, You can find the details in this link Expo's Contacts I would do this which is less work for you to do and solve your problem
import { Contacts } from 'expo';
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.Emails],
});
if (data.length > 0) {
const contact = data[0];
console.log(contact);
}
You can find same issue created in react-native-contacts github page . Issue

July 2021 update
The Contacts module has been moved from the core expo package to expo-contacts (see documentation).
Example:
import * as Contacts from 'expo-contacts';
const { status } = await Contacts.requestPermissionsAsync();
if (status === 'granted') {
const { data: contacts } = await Contacts.getContactsAsync();
console.log('Retrieved contacts!', contacts);
}

Route does not identifying the scree in stacknavigation?

I am trying to implement stacknavigation using react-navigation. When I am creating a stacknavigation const and calling in my default screen it is giving me this error.
Route 'Main' should declare a screen. For example:
import MyScreen from './MyScreen';
...
Home: {
screen: MyScreen,
}
My StackNavigation code is here
import React from 'react';
import {View, Text } from 'react-native';
import Register from './Register';
import Main from './Main';
import { StackNavigator } from 'react-navigation';
const ScreenList = StackNavigator({
Main: {
screen: Main,
},
Register: {
screen: Register,
},
});
export default ScreenList;
And this is the main and default screen
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Card, Button, CardSection } from '../components/common/Index';
import Login from '../components/Login';
import ScreenList from './ScreenList';
export default class Main extends Component {
render() {
return (
<View>
<Button>Register</Button>
</View>
);
}
}

This is an issue with react-native-navigation not yet being compatible with React 0.52.0
More information on this issue can be found on this specific issue tracked on Github.
Edit: a quick fix I just implemented to unblock myself while the project contributors figure out a solid solution was to add the missing interface (ReactInstanceDevCommandsHandler.java) directly into my react-native-navigation project.

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>
);
}
}

App from Socially tutorial with angular2 stuck in loading page on Android

I'm following the tutorial from meteor and angular 2 and when I reach the step 11 Running your app on Android or iOS with PhoneGap I can't make it work on my android device.
This is the output I get from the console.
Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: The selector "app" did not match any elements
This is what I have so far in my app.component.ts file:
import { Component } from '#angular/core';
import template from './app.component.html';
#Component({
selector: 'app',
template
})
export class AppComponent {}
The app works perfectly on the web browser. I think that can be a problem with the router, but I'm not quite sure.
This is the code from the app.routes.ts
import { Route } from '#angular/router';
import { Meteor } from 'meteor/meteor';
import { PartiesListComponent } from '../parties/parties-list.component';
import { PartyDetailsComponent } from '../parties/party-details.component';
export const routes: Route[] = [
{ path: '', component: PartiesListComponent },
{ path: 'party/:partyId', component: PartyDetailsComponent}
];
This is the index.html:
<head>
<base href="/" />
</head>
<body>
<app>Loading...</app>
</body>
And this is the app.component.html
<div>
<router-outlet></router-outlet>
</div>
It is supossed to redirect to the PartiesListComponent but just throw that error and stucks on loading. Thank you.

SOLVED
This is the original code in the main.ts (Extracted from the website of the tutorial)
import 'angular2-meteor-polyfills';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './imports/app/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
I've just find that this tutorial is obsolete (again) and there's a new way to bootstrap applications.
With the next code the app works fine on android.
import 'angular2-meteor-polyfills';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { enableProdMode } from '#angular/core';
import { Meteor } from "meteor/meteor";
import { AppModule } from './imports/app/app.module';
enableProdMode();
Meteor.startup(() => {
platformBrowserDynamic().bootstrapModule(AppModule);
});
I hope this help someone.