Develop Reference

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

Can't import firebase auth android

I'm new to React Native and have the following problem:
I import firebase auth in such way...
import React, { Component } from 'react';
import { Text } from 'react-native';
import { Button, Card, CardSection, Input } from './common';
import { auth } from 'firebase';
I just import it in my component and use it on log in button press.
class LoginForm extends Component {
state = { email: '', password: '', error: '' };
onButtonPress() {
debugger;
const { email, password } = this.state;
auth.auth().signInWithEmailAndPassword(email, password)
.catch(() => {
auth.auth().createUserWithEmailAndPassword(email, password)
.catch(() => {
this.setState({ error: "Authentication failed." });
});
});
debugger;
}
My App module looks like this...Here I make some initialization for my app
import firebase from '#firebase/app';
import LoginForm from './components/LoginForm'
Here I make some initialization for my app
componentWillMount() {
debugger;
firebase.initializeApp({
apiKey: 'somekey',
authDomain: 'somedomain',
databaseURL: 'someurl',
projectId: 'someid',
storageBucket: 'authentication-afcb6.appspot.com',
messagingSenderId: '253116783153'
});
debugger;
}
But my emulator shows me an error:

The problem is with your import statement I suppose. When using firebase I always used:
import firebase from 'firebase';
firebase.auth().<METHOD>
Or I think you could also import it like this if it's a named export and use it directly:
import {auth} from 'firebase';
auth().<METHOD>
Also hopefully you do know that you have to initialize your app as well using firebase.initializeApp({<CONFIG_DATA>}).

I suggest using react-native-firebase library. It uses native Android and iOS SDK under the hood, instead web javascript library.
Documentation
https://rnfirebase.io/docs/v5.x.x/installation/initial-setup
Android installation https://rnfirebase.io/docs/v5.x.x/installation/android
iOS installation https://rnfirebase.io/docs/v5.x.x/installation/ios

What is the version of firebase you are using?
Downgrading firebase to 5.0.3 is the only solution I find and I just tried myself and it works. For reference, here is the thread on firebase-js-sdk.

React-Native Android Undefined is not an object (evaluating 'root._')

I am having problems running my app, specifically on Android at the moment. When I run react-native run-android and start the app (with or without running react-native start beforehand) I get the following error: Undefined is not an object (evaluating 'root._'). I am then unable to launch the debugger because this gives me a timeout whilst connecting to remote debugger error.
My loading process for the application is as follows:
index.js:
import { AppRegistry } from 'react-native'
import setup from './src/setup'
AppRegistry.registerComponent('appname', setup)
setup.js:
import React, { Component } from 'react'
import { View } from 'react-native'
import { Provider } from 'react-redux'
import { AsyncStorage } from 'react-native'
import { persistStore } from 'redux-persist';
import configureStore from './store/configureStore'
import Spinner from './components/common/Spinner'
import App from './App'
import styles from './styles/setup'
export class Root extends Component {
constructor() {
super()
this.state = {
loaded: false,
// store: configureStore(this.onStoreLoaded.bind(this))
}
}
onStoreLoaded() {
this.setState({
loaded: true,
})
}
render() {
return (
<View style={styles.wrapper}>
<Spinner/>
</View>
)
}
}
export default function setup() {
return Root
}
I have commented out the store loading for now because this seems to have become apparent since adding redux but the configure store looks as follows:
import {applyMiddleware, createStore, compose} from 'redux'
import {persistStore, autoRehydrate} from 'redux-persist';
import { AsyncStorage } from 'react-native'
import thunk from 'redux-thunk'
import reducers from '../reducers'
const middlewares = [
thunk
]
const store = createStore(
reducers,
undefined,
compose(
applyMiddleware(...middlewares),
autoRehydrate()
)
)
export default function(callback) {
persistStore(store, {
blacklist: [],
storage: AsyncStorage
}, callback)
return store
}
I am using react-native 0.53.0 with the redux version being 3.7.2 and react-redux 5.0.6. I have tried re bundling the code as follows:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
I have also tried: adb reverse tcp:8081 tcp:8081
I have also updated my build tools and gradle etc in Android studio and everything syncs fine.

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.

ReactJS Cordova Router issue

I am creating a simple app with ReactJS and Cordova. The app works fine when I run it through reacts npm start. However when I do a npm run build and copy the build folder into the www folder of my cordova project, I get a blank screen when I run it in android. If I do a cordova run browser the router is not working and its landing at index.html. I think I have narrowed it down to a router issue with cordova where route is not setting the page to home. Has anyone else had an issue like this? I created my reactJS project using npm create-react-app.
https://github.com/bscott8605/reactRouterTest
Folder Structure
import React, { Component } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import { Switch, Route } from 'react-router'
import Home from './Home'
import AddNote from './AddNote'
import Note from './Note'
class Main extends Component {
render() {
let notes;
if(this.props.notesList)
{
//console.log(this.props);
notes = this.props.notesList.map(note => {
return(
<Note key={note.title} note={note} />
);
});
}
return (
<Router>
<div>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/AddNote' component={AddNote}/>
{/*<Route exact path='/' render={(props) => (<Home {...props} data={notes}/>)}/>
<Route exact path='/AddNote' render={(props) => (<AddNote {...props} addNoteMethod={this.props.addNoteMethod}/>)}/>*/}
</Switch>
</div>
</Router>
);
}
}
export default Main;

Change BrowserRouter to Router
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import createHistory from 'history/createHashHistory'
import store from './app/redux/store';
import Layout from './app/pages/layout';
import Routes from './app/pages/routes';
import './app/assets/favicon.ico';
import './app/assets/scss/main.scss';
const history = createHistory();
console.log(history);
const Dom = (
<Provider store={store}>
<Router history={history}>
<Layout>
<Routes />
</Layout>
</Router>
</Provider>
);
ReactDOM.render(
Dom,
document.getElementById('app'),
);