title: Exception thrown while executing UI block: - [ABI27_0_0RCTview updateContentOffsetINeeded]:
body: <p>I am trying to add drawer navigation to my app. However, I am running into issues and have no clue why they arise. I am following <a href="https://www.youtube.com/watch?v=7uhJN4kVS6g&amp;t=387s" rel="nofollow noreferrer">this YouTube video</a>.</p>
  
  <ol>
  <li><p>I am trying to have a navigation drawer with tabs such as home, my profile, settings and so on. </p>
  
  <pre><code>const AppDrawerNavigator = createDrawerNavigator({
    Home: HomeScreen
  }, {
    contentComponent: CustomDrawerComponent
  })
  </code></pre>
  
  <p>When I try and load the Home: HomeScreen for whatever reason the code doesn't load or crashes. However, if I do something like <code>Login: LoginScreen</code> or <code>SignUp: SignUpScreen</code> the code runs properly and navigates the tabs properly avoiding <code>Home:HomeScreen</code>.</p></li>
  <li><p><code>&lt;AppDrawerNavigator/&gt;</code><br>
  Whenever I put this tag in my return statement between   I get the error of </p>
  
  <blockquote>
    <p>Exception thrown while executing UI block:<br>
    [ABI27_0_0RCTview updateContentOffsetINeeded]:  </p>
  </blockquote>
  
  <p>I don't have the slightest clue what that means and why.<br>
  When I do something in the return such as:</p>
  
  <pre><code>&lt;AppDrawerNavigtor&gt;
    &lt;MapView&gt;
    &lt;/MapView&gt;
  &lt;/AppDrawerNavigtor&gt;
  </code></pre>
  
  <p>the application works and the drawer navigator works with the issues that were brought up in 1.</p></li>
  </ol>
  
  <p>Any help would be greatly appreciated!<br>
  Here is my code. Please excuse its formatting issues.</p>
  
  <pre><code>import React from 'react';    
  import { StyleSheet, Text, View, KeyboardAvoidingView,Dimensions, Button, SafeAreaView, Image, ScrollView, TouchableOpacity} from 'react-native';    
  import MapView from 'react-native-maps';    
  import { Constants, Location, Permissions } from 'expo';   
  import {createDrawerNavigator, DrawerItems} from 'react-navigation';    
  import {Header, Left, Icon} from 'native-base';    
  import LoginScreen from '../LoginScreen/LoginScreen';    
  import SignUpScreen from '../SignUpScreen/SignUpScreen';    
  import { Ionicons } from '@expo/vector-icons';`
  
  const {width, height} = Dimensions.get('window')    
  const SCREEN_HEIGHT = height    
  const SCREEN_WIDTH = width    
  const ASPECT_RATIO = width / height    
  const LATITUDE_DELTA = 0.0922    
  const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
  
  export default class HomeScreen extends React.Component {    
    static navigationOptions = {
      header: null
    };
  
  
    // gets users current location
    constructor(props){
      super(props)
  
      this.state = {
        initialPosition: {
          latitude: 0,
          longitude: 0,
          latitudeDelta: 0,
          longitudeDelta: 0
        },
  
        markerPosition: {
          latitude: 0,
          longitude: 0
        }
      }
    }
  
   watchID = null
  
      componentDidMount() {
  
   navigator.geolocation.getCurrentPosition((position) =&gt; {
  
   var lat = parseFloat(position.coords.latitude)
  
  var long = parseFloat(position.coords.longitude)
  
          var initialRegion = {
  
  latitude: lat,            
  longitude: long,            
  latitudeDelta: LATITUDE_DELTA,            
  longitudeDelta: LONGITUDE_DELTA
  
  }
  
   this.setState[{initialPosition: initialRegion}]
  
   this.setState[{markerPosition: initialRegion}]
  
   }, (error) =&gt; alert(JSON.stringify[error]),
  
   {enableHighAccuracy: true, timeout: 20000, maximumAge: 10000})
  
      this.watchID = 
  
  navigator.geolocation.watchPosition((position) =&gt; {
  
  var lat =  parseFloat(position.coords.latitude)
  
  var long = parseFloat(position.coords.longitude)
  
   var lastRegion = {
  
  latitude: lat,
  
   longitude: long,
  
   longitudeDelta: LONGITUDE_DELTA,
  
  latitudeDelta: LATITUDE_DELTA
  
  }
  
  this.setState({initialPosition: lastRegion})
  this.setState({markerPosition: lastRegion})
  
   })
  
  }
  
   componentWillMount() {
  
   navigator.geolocation.clearWatch(this.watchID)
  
  }
  
    render() {
  
  return (
  
   &lt;MapView  style = {[style.container, style.map]}
  
  region = {this.state.initialPosition}&gt;
  
   &lt;Header&gt;
  
  &lt;TouchableOpacity  onPress = {() =&gt; this.props.navigation.openDrawer('DrawerOpen')}&gt;
  
  &lt;Ionicons name="ios-menu" size={30} color="#01D56A"/&gt;
  
  &lt;/TouchableOpacity&gt;
  
  &lt;/Header&gt;
  
        &lt;MapView.Marker coordinate = {this.state.markerPosition}&gt;
  
  
   &lt;View style = {style.radius}&gt; 
  
  &lt;View style = {style.marker}/&gt;
  
        &lt;/View&gt;
  
        &lt;/MapView.Marker&gt;
  
        &lt;View style = {style.menuSection}&gt;
  
        &lt;/View&gt;
  
   &lt;AppDrawerNavigator/&gt;
  
  &lt;/MapView&gt;
  
    );
  
    }
  
  }
  
  const style = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
  
   text: {
        color: '#fff'
  
  },
    map: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      position: 'absolute'
      },
  
    radius:{
  
        height: 50,
        width: 50,
        borderRadius: 50 / 2,
        overflow: 'hidden',
        backgroundColor: 'rgba(1,213,106,0.3)',
        borderWidth: 1,
        borderColor: 'rgba(1,213,106,0.3)',
        alignItems:'center',
        justifyContent: 'center'
      },
  
    marker: {
        height: 20,
        width: 20,
        borderWidth: 3,
        borderColor: '#fff',
        borderRadius: 20 / 2,
        borderWidth: 3,
        overflow: 'hidden',
        backgroundColor: '#01D56A'
  
      },
  
   menuSection: {
      backgroundColor: 'rgba(255, 255, 255, 0.7)',
      width: Dimensions.get('window').width,
      height: Dimensions.get('window').height/3,
    },
  
  // side menu
  
  const CustomDrawerComponent = (props) =&gt; (
  
    &lt;SafeAreaView style = {{flex: 1}}&gt; 
  
    &lt;View style = {{height: 150, backgroundColor: 'white'} }&gt;
  
    &lt;DrawerItems {... props} /&gt;
  
      &lt;/ScrollView&gt;
  
    &lt;/SafeAreaView&gt;
  
  )
  
  const AppDrawerNavigator = createDrawerNavigator({
  
    Home: HomeScreen
  }, {
    contentComponent: CustomDrawerComponent
  })
  </code></pre>