Cannot read property 'getItem' of undefined React Native and Parse - react-native

Question

I've started learning React Native with Redux and I'm building a simple login with Google and Facebook login which I want to sent to a Parse backend on AWS.
I have the following Facebook Button Component:
import { Button } from 'react-native';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import { LoginManager } from 'react-native-fbsdk';
import { createUser } from '../actions';
class FacebookButton extends Component {
facebookButtonPressed(){
this.props.createUser("dummyemail#gmail.com","12345");
}
render() {
return (
<Button
onPress={this.facebookButtonPressed.bind(this)}
title="Sign In with Facebook"
color="#000000"
/>
);
}
}
export default connect(null,{ createUser })(FacebookButton);
I haven't done any Facebook integration yet, I just want to see if I can create a parse user. This is the action I'm using:
import Parse from 'parse/react-native';
export const createUser = (email, name) => {
return (dispatch) => {
var user = new Parse.User();
user.set("username", "my name");
user.set("password", "my pass");
user.set("name",name);
user.set("email", email);
// other fields can be set just like with Parse.Object
user.set("phone", "415-392-0202");
user.signUp(null, {
success: function(user) {
// Hooray! Let them use the app now.
console.log("User created");
},
error: function(user, error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
});
}
};
When I run the debugger in the browser, I'm able to see that the createUser is called and when we call user.signUp I get the following error:
undefined is not an object (evaluating 'reactNative.AsyncStorage.getItem')
When I read the Parse Javascript docs and try the following:
//Get your favorite AsyncStorage handler with import (ES6) or require
import { AsyncStorage } from 'react-native';
//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
I call the Parse.setAsyncStorage(AsyncStorage); in the code below.
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Parse from 'parse/react-native';
import { Provider } from 'react-redux';
import Login from './src/screens/Login';
import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
export default class App extends Component {
componentWillMount() {
Parse.initialize("MY KEY");
Parse.serverURL = 'MY URL';
Parse.setAsyncStorage(AsyncStorage);
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Login />
</Provider>
);
}
}
I get an error of reactNative2.default.setAsyncStorage is not a function. Frankly I tried Parse.setAsyncStorage(AsyncStorage); in hopes of this fixing the AsyncStorage issue mentioned above.
So any ideas as to why I get the funny AsyncStorage error message when trying to create a Parse user?

Answer 1

I'm leaving an answer here in case someone else stumbles across any other issues. The problem was the version of Parse I was using. I was using Parse version 1.6.14. Steps to fix:
Open the package.json file and update your Parse version to any version above 1.11, for me 1.11.1 worked.
In the terminal: npm install
this should fix the issues mentioned above, bear in mind that you have to implement:
//Get your favorite AsyncStorage handler with import (ES6) or require
import { AsyncStorage } from 'react-native';
//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
as per documentation.