react-native-fbsdk imports are undefined after RN 0.52 upgrade - react-native

Question

I just upgraded my RN project to RN 0.52 and the react-native fbsdk was not working correctly so I changed my import structure from:
const FBSDK = require('react-native-fbsdk');
const {
LoginManager,
AccessToken,
GraphRequest,
GraphRequestManager
} = FBSDK;
To
import { LoginManager,
AccessToken,
GraphRequest,
GraphRequestManager } from 'react-native-fbsdk';
full source code:
import React, { Component } from 'react';
import { View, ActivityIndicator, FlatList, Image, TouchableHighlight, StatusBar, Alert} from 'react-native';
import styles from './styles';
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Container, Header, Content, Button, Text, Spinner, Title } from 'native-base';
import { requestBusiness, receiveBusiness, storeLoginScreenId, receiveAwsId } from '../../actions'
import { withApollo, ApolloClient, graphql } from 'react-apollo';
import gql from 'graphql-tag';
var AWS = require('aws-sdk/dist/aws-sdk-react-native');
import { LoginManager,
AccessToken,
GraphRequest,
GraphRequestManager } from 'react-native-fbsdk';
class Login extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
isLoggedIn: PropTypes.bool.isRequired,
isFetching: PropTypes.bool.isRequired,
client: PropTypes.instanceOf(ApolloClient).isRequired
}
_handleFacebookLogin(navigation, dispatch, client, isFetching) {
//const { navigation } = this.props
//LoginManager.logOut();
LoginManager.logInWithReadPermissions(["business_management","pages_show_list"]).then(
function (result) {
if (result.isCancelled) {
Alert.alert(
'Facebook Permissions issue')
} else {
//alert('Login success with permissions: ' + result.grantedPermissions.toString())
AccessToken.getCurrentAccessToken().then(
(data) => {
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'xxxxxxxxxxxxxxx',
Logins: {
'graph.facebook.com': data.accessToken.toString()
}
}
);
AWS.config.credentials.clearCachedId();
AWS.config.credentials.get(function(err) {
if (err){ alert("Error" + err);
console.log(err);
}
dispatch(requestBusiness())
client.query({
query: gql`query getCurrentUser($Id: String!) {
User(id: $Id) {
id,
posts {
postId,
postText
}
}
}
}`,
variables: {Id: AWS.config.credentials.identityId},
fetchPolicy: 'network-only'
}).then((result) => {
dispatch(receiveAwsId(AWS.config.credentials.identityId))
dispatch(receiveBusiness())
if(result.data.businessUser != null){
navigation.dispatch({ type: 'LOGGEDIN' });
}
else {
navigation.dispatch({ type: 'ONBOARD' });
}
}).catch((err) => {
console.log('catch', err)
});
});
}
)
//navigation.dispatch({ type: 'LOGIN' });
}
},
function (error) {
alert('Login fail with error: ' + error)
console.log(error)
}
)
}
componentWillReceiveProps(nextProps) {
/*
const { business, navigation, isFetching, dispatch } = this.props
if(nextProps.isFetching == false && isFetching == true){
if(nextProps.business == null && business == undefined){
navigation.dispatch({ type: 'ONBOARD' });
} else {
navigation.dispatch({ type: 'LOGIN' });
}
}*/
}
render() {
const {navigation, dispatch, isFetching, client} = this.props
return (
<Container style={styles.container}>
<Text></Text>
<Title>
<Title style={styles.title}>App</Title>
<Title style={styles.secondaryTitle}>Login</Title>
</Title>
{isFetching ? <Spinner color='#FFFFFF' /> :
<Button bordered rounded light
style={styles.loginButton}
onPress={() => this._handleFacebookLogin(navigation, dispatch, client, isFetching)}>
<Text>Login With Facebook</Text>
</Button>}
</Container>
);
}
}
const LoginComponentWithApollo = withApollo(Login)
const mapStateToProps = state => {
const { business } = state
const {
businessInfo,
lastUpdated,
isFetching
} = business
return {
isLoggedIn : state.isLoggedIn,
dispatch : state.dispatch,
businessInfo,
lastUpdated,
isFetching
}
}
export default connect(mapStateToProps)(LoginComponentWithApollo);
psckage.json:
{
"name": "MyApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"aws-sdk": "^2.130.0",
"native-base": "^2.3.9",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-apollo": "^1.4.16",
"react-native": "^0.52.1",
"react-native-code-push": "^5.1.2-beta",
"react-native-fbsdk": "^0.7.0",
"react-native-onesignal": "^3.0.6",
"react-native-sentry": "^0.26.0",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.13",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
^^ I am getting the following error:
Cannot read property 'loginWithReadPermissions' of undefined.
Any idea what might be causing this? when I go into the react-native-fbdsk I do see that these functions are defined in there.