Как исправить ошибку undefined is not an object?

Ошибка вывода такая:

TypeError: TypeError: undefined is not an object (evaluating '_this.state.userInfo.picture.data')

там я просто хочу передать данные из facebook в свой вид в реакции native. там написано undefined is not an object, как это исправить?

Вот код компонента HomeScreen:

import React, { Component } from 'react';
import { Text, TouchableOpacity, ScrollView, View, StyleSheet, Button, Alert, Image } from 'react-native';
import Expo, { Constants } from 'expo';

export default class HomeScreen extends Component {

    constructor(props){
        super(props);
        this.state = { userInfo: null }
    }

    async logInFB() {
        try {
          const {
            type,
            token,
            expires,
            permissions,
            declinedPermissions,
          } = await Expo.Facebook.logInWithReadPermissionsAsync('214751749451960', {
            permissions: ['public_profile'],
          });
          if (type === 'success') {
            // Get the user's name using Facebook's Graph API
            const response = await fetch(`https://graph.facebook.com/me?access_token=${token}&fields=id.name.picture.type(large)`);
            const userInfo = await response.json();
            this.setState({ userInfo });
            Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
          } else {
            // type === 'cancel'
          }
        } catch ({ message }) {
          alert(`Facebook Login Error: ${message}`);
        }
    }

    _renderUserInfo = () => {
        return(
            <View style = {{ alignItems:'center' }}>
                <Image
                    source = {{ uri: this.state.userInfo.picture.data.url}}
                    style = {{width:100, height:100, borderRadius:50}}
                />
                <Text style = {{ fontSize:20 }}>
                    { this.state.userInfo.name }
                </Text>
                <Text>ID: { this.state.userInfo.id }</Text>
            </View>
        );
    }


    render(){
        return(
            <View style = {styles.container}>
                <Text>welcome to my apps!</Text>
                { !this.state.userInfo ? (<Button title = "Connect with facebook" onPress = {this.logInFB.bind(this)}/>) : (this._renderUserInfo())}
            </View>
        );
    }
}

Вот стиль (они оба в одном файле):

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

Заранее спасибо :)