title: KeyboardAvoidingView + React Navigation + Safe Area View = not working
body: <p>The problem I am having is while using a <code>react-navigation</code> stack navigator nested inside a tab navigator for a basic chat UI appearance, the keyboard was hiding the chat message input field at the bottom. So I tried <code>KeyboardAvoidingView</code> to bring the keyboard up to a visible position, but the keyboard wasn't showing. I have tried a solution that involves adding <code>headerHeight</code> to the <code>keyboardVerticalOffset</code> prop, but it seems to be about 50px off. For example, if I add <code>headerHeight + 50</code> to <code>keyboardVerticalOffset</code> everything looks great, but if I switched devices to an iPhone 5 or something, with a smaller screen, different SafeArea insets, etc, the keyboard would be in the wrong position again.</p>
  <p>I am not sure what the culprit is exactly, but I am now thinking it's the SafeArea padding on top and/or bottom, which I have learned are the &quot;insets&quot;. I am trying to use <code>useSafeAreaInsets</code>, but all the values return 0! I want to use those insets to add to the <code>keyboardVerticalOffset</code> prop so the avoiding view works properly.</p>
  <p>I like the style of the tab bar right now, so I'd like to keep it with an increased height and padding and font size, but maybe I am doing it wrong with react native navigation? Maybe I cannot have this tab bar and stack navigator styling as I want with React Native? Regardless, I believe the insets should be returning a value, so I think that's where a problem lies.</p>
  <p>Notice if I move the <code>&lt;SafeAreaView&gt;</code> block to surround the <code>&lt;TouchableWithoutFeedback&gt;</code>, instead of around the <code>&lt;NavigationContainer&gt;</code> block, and remove the 50 extra pixels added to the <code>keyboardVerticalOffset</code>, then the keyboard pushes the input field up properly, but the tab bar icons on iPhone 11 are squished. As I am writing this out, I am noticing that this change now has the bottom/topPadding variables returning values? If I then remove the <code>tabBarOptions</code>, I get a basic appearance of the tabs that work, but I like the design of my initial tabs much more.</p>
  <p><strong>How do I maintain my current styling of the tab bar and have the keyboard avoid the chat input field on every device?</strong></p>
  <p>(Note: The <code>useEffect</code> usage below is something I tried using the solution outlined in this issue: <a href="https://github.com/th3rdwave/react-native-safe-area-context/issues/54" rel="noreferrer">https://github.com/th3rdwave/react-native-safe-area-context/issues/54</a>)</p>
  <p><strong>App.js:</strong></p>
  <pre><code>import React, { Component, useEffect, useState } from 'react';
  import { View, KeyboardAvoidingView, TextInput, Text, Platform, TouchableWithoutFeedback, Keyboard, ActivityIndicator, SafeAreaView, ScrollView, Button, StatusBar } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import { createStackNavigator, useHeaderHeight } from '@react-navigation/stack';
  import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
  import { useSafeAreaInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
  import { Dimensions } from 'react-native';
  
  const Stack = createStackNavigator();
  
  function TicketStack() {
    return (
      &lt;Stack.Navigator
      screenOptions={{
        headerStyle: { 
          backgroundColor: &quot;dodgerblue&quot;,
          elevation: 0, // remove shadow on Android
          shadowOpacity: 0, // remove shadow on iOS
        },
        headerTintColor: &quot;#fff&quot;,
        headerTitleStyle: {
          fontWeight: &quot;900&quot;,
          fontSize: 26,
        },
  
      }}&gt;
        &lt;Stack.Screen name=&quot;Ticket&quot;&gt;
          {(props) =&gt; &lt;TicketScreen {...props} /&gt;}
        &lt;/Stack.Screen&gt;
        &lt;Stack.Screen name=&quot;Chat&quot;&gt;
          {(props) =&gt; &lt;ChatScreen {...props} /&gt;}
        &lt;/Stack.Screen&gt;
      &lt;/Stack.Navigator&gt;
    );
  }
  
  function HomeScreen() {
    return (
      &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
        &lt;Text&gt;&lt;FontAwesome5 name={&quot;home&quot;} size={20} color={&quot;dodgerblue&quot;} /&gt; Home screen!&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  
  function TicketScreen(props){
    return (
      &lt;View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}&gt;
        &lt;Text&gt;Ticket screen :)!&lt;/Text&gt;
        &lt;Button title=&quot;Go to Chat&quot; onPress={() =&gt; props.navigation.navigate('Chat')} /&gt;
      &lt;/View&gt;
    );
  }
  
  function CustomKeyboardAvoidingView({ children, style }) {
      const headerHeight = useHeaderHeight();
      console.log(&quot;headerHeight: &quot; + headerHeight)
      console.log(&quot;StatusBar.currentHeight: &quot; + StatusBar.currentHeight)
  
      const insets = useSafeAreaInsets();
      console.log(&quot;insets.top: &quot; + topPadding)
      console.log(&quot;insets.bottom: &quot; + bottomPadding)
  
      const [bottomPadding, setBottomPadding] = useState(insets.bottom)
      const [topPadding, setTopPadding] = useState(insets.top)
  
      useEffect(() =&gt; {
        setBottomPadding(insets.bottom)
        setTopPadding(insets.top)
  
        console.log(&quot;topPadding: &quot; + topPadding)
        console.log(&quot;bottomPadding: &quot; + bottomPadding)
      }, [insets.bottom, insets.top])
  
      // const frame = useSafeAreaFrame();
      // const windowHeight = Dimensions.get('window').height  
      // console.log(&quot;frame.height: &quot; + frame.height)
      // console.log(&quot;windowHeight: &quot; + windowHeight)
      // const safeAreaHeight = windowHeight - frame.height
      // console.log(&quot;safeAreaHeight: &quot; + safeAreaHeight)
      // safeAreaHeight is too much, needs to just be bottom or top padding from safearea
      return (
          &lt;KeyboardAvoidingView
              style={style}
              behavior={Platform.OS == &quot;ios&quot; ? &quot;padding&quot; : &quot;height&quot;}
              keyboardVerticalOffset={headerHeight + 50}
          &gt;
              {children}
          &lt;/KeyboardAvoidingView&gt;
      );
  }
  
  function ChatScreen(){
    return(
        &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss}&gt;
          &lt;CustomKeyboardAvoidingView style={{backgroundColor: &quot;#fff&quot;, flex: 1, flexDirection: &quot;column&quot;, justifyContent: &quot;space-between&quot; }}&gt;
            &lt;View style={{backgroundColor: &quot;dodgerblue&quot;, paddingVertical: 15}}&gt;
                &lt;View style={{ margin: 10, marginBottom: 15}}&gt;
                    &lt;ActivityIndicator size=&quot;large&quot; style={{marginBottom: 10}}/&gt;
                    &lt;Text&gt;Waiting for more info here....&lt;/Text&gt;
                &lt;/View&gt;
            &lt;/View&gt;
  
            &lt;ScrollView style={{backgroundColor: &quot;tomato&quot;, paddingVertical: 15}}&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
                &lt;Text&gt;Chat messages&lt;/Text&gt;
            &lt;/ScrollView&gt;
            
            &lt;View style={{backgroundColor: &quot;yellow&quot;, paddingVertical: 15}}&gt;
                &lt;TextInput placeholder=&quot;Type your message here...&quot; /&gt;
            &lt;/View&gt;
          &lt;/CustomKeyboardAvoidingView&gt;
        &lt;/TouchableWithoutFeedback&gt;
    )
  }
  
  const Tab = createBottomTabNavigator();
  
  // TODO:
  // - removing safeareaview makes tabs squished and icon nearly invisible, but chat message input fields avoids keyboard properly (squished can be fixed by removing tabBarOptions)
  // - having safeareaview makes tabs look good, but chat message input field is hidden by keyboard
  // - safeareainsets? why are they 0? i would be adding the bottom or top padding of insets to the vertical offset of the keyboard avoiding view.
  export default class App extends Component {
    render(){
      return (
        &lt;SafeAreaView style={{flex: 1, backgroundColor: &quot;dodgerblue&quot;}}&gt;
          &lt;NavigationContainer&gt;
            &lt;Tab.Navigator
              screenOptions={({ route }) =&gt; ({
                tabBarIcon: ({ color, size }) =&gt; {
                  let iconName;
  
                  if (route.name === 'Home') {
                    iconName = 'home';
                  } else if (route.name === 'Ticket') {
                    iconName = 'question';
                  }
                  return &lt;FontAwesome5 name={iconName} size={size} color={color} /&gt;;
                },
              })}
              tabBarOptions={{
                style: {
                  height: 70
                }, 
                activeTintColor: &quot;#fff&quot;,
                inactiveTintColor: &quot;dodgerblue&quot;,
                inactiveBackgroundColor: &quot;#fff&quot;,
                activeBackgroundColor: &quot;dodgerblue&quot;,                               
                tabStyle: {
                  paddingTop: 10,
                  paddingBottom: 10
                },
                labelStyle: {
                  fontSize: 14
                },
              }}&gt;
              &lt;Tab.Screen name=&quot;Home&quot;&gt;
                {(props) =&gt; &lt;HomeScreen {...props} /&gt;}
              &lt;/Tab.Screen&gt;
              &lt;Tab.Screen name=&quot;Ticket&quot;&gt;
                {(props) =&gt; &lt;TicketStack {...props} /&gt;}
              &lt;/Tab.Screen&gt;
            &lt;/Tab.Navigator&gt;
          &lt;/NavigationContainer&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  }
  </code></pre>
  <p><strong>Screenshot:</strong>
  <a href="https://i.stack.imgur.com/pI0ME.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/pI0ME.jpg" alt="enter image description here" /></a></p>
  <p><strong>package.json:</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;ReactNativeTest&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;android&quot;: &quot;react-native run-android&quot;,
      &quot;ios&quot;: &quot;react-native run-ios&quot;,
      &quot;start&quot;: &quot;react-native start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@react-native-community/masked-view&quot;: &quot;^0.1.10&quot;,
      &quot;@react-navigation/bottom-tabs&quot;: &quot;^5.9.2&quot;,
      &quot;@react-navigation/native&quot;: &quot;^5.7.6&quot;,
      &quot;@react-navigation/stack&quot;: &quot;^5.9.3&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;0.63.3&quot;,
      &quot;react-native-gesture-handler&quot;: &quot;^1.8.0&quot;,
      &quot;react-native-reanimated&quot;: &quot;^1.13.1&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;^3.1.8&quot;,
      &quot;react-native-screens&quot;: &quot;^2.11.0&quot;,
      &quot;react-native-vector-icons&quot;: &quot;^7.1.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;7.11.6&quot;,
      &quot;@babel/runtime&quot;: &quot;7.11.2&quot;,
      &quot;@react-native-community/eslint-config&quot;: &quot;1.1.0&quot;,
      &quot;babel-jest&quot;: &quot;25.5.1&quot;,
      &quot;eslint&quot;: &quot;6.8.0&quot;,
      &quot;jest&quot;: &quot;25.5.4&quot;,
      &quot;metro-react-native-babel-preset&quot;: &quot;0.59.0&quot;,
      &quot;react-test-renderer&quot;: &quot;16.13.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;
    }
  }
  </code></pre>