From 6fbf6ddd74dcfb0d47321e19475c8c69b2dafa68 Mon Sep 17 00:00:00 2001
From: tomwaitforitmy <tomwaitforitmy@gmail.com>
Date: Sun, 9 Apr 2023 16:13:53 +0200
Subject: [PATCH] Add note how to use KeyboardAvoidingView with tab and stack
 navigator

Details are described here: https://github.com/react-navigation/react-navigation/issues/11244
---
 .../version-6.x/tab-based-navigation.md       | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/versioned_docs/version-6.x/tab-based-navigation.md b/versioned_docs/version-6.x/tab-based-navigation.md
index 1ddce383803..5f8634770a4 100755
--- a/versioned_docs/version-6.x/tab-based-navigation.md
+++ b/versioned_docs/version-6.x/tab-based-navigation.md
@@ -237,3 +237,25 @@ For example, React Navigation's tab navigator takes care of handling the Android
 ## A tab navigator contains a stack and you want to hide the tab bar on specific screens
 
 [See the documentation here](hiding-tabbar-in-screens.md)
+
+## A tab navigator contains a stack and you want to use KeyboardAvoidingView to prevent hidden TextInput
+
+Make sure you to wrap KeyboardAvoidingView around the main tab navigator
+
+```js
+function TabNavigator() {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}>
+      <Tab.Navigator
+        screenOptions={{
+          tabBarHideOnKeyboard: true,
+          headerShown: false,
+        }}>
+        <Tab.Screen name="Tab" component={StackContainer} />
+      </Tab.Navigator>
+    </KeyboardAvoidingView>
+  );
+}
+```