fix: changes after self review

Author: kirillzyusko

docs/docs/guides/components-overview.mdx

@@ -8,6 +8,7 @@ keywords:
     views,
     extend keyboard,
     keyboard extender,
+    keyboard background view,
     over keyboard view,
     keyboard toolbar,
     keyboard avoiding view,
@@ -19,6 +20,7 @@ keywords:
     KeyboardToolbar,
     OverKeyboardView,
     KeyboardExtender,
+    KeyboardBackgroundView,
   ]
 ---
 

example/src/screens/Examples/KeyboardExtender/index.tsx

@@ -58,19 +58,6 @@ export default function KeyboardExtendExample() {
             testID="donation_amount"
           />
 
-          <KeyboardExtender enabled={showExtend}>
-            <Reanimated.View style={[styles.keyboardExtend, animatedStyle]}>
-              <TouchableOpacity onPress={() => Alert.alert("10$")}>
-                <Text style={styles.priceText}>10$</Text>
-              </TouchableOpacity>
-              <TouchableOpacity onPress={() => Alert.alert("20$")}>
-                <Text style={styles.priceText}>20$</Text>
-              </TouchableOpacity>
-              <TouchableOpacity onPress={() => Alert.alert("50$")}>
-                <Text style={styles.priceText}>50$</Text>
-              </TouchableOpacity>
-            </Reanimated.View>
-          </KeyboardExtender>
           <OverKeyboardView visible={isOKVMode}>
             <View style={{ flex: 1, justifyContent: "flex-end" }}>
               {/* TODO replace hardcoded value */}
@@ -82,6 +69,19 @@ export default function KeyboardExtendExample() {
           </OverKeyboardView>
         </SafeAreaView>
       </TouchableWithoutFeedback>
+      <KeyboardExtender enabled={showExtend}>
+        <Reanimated.View style={[styles.keyboardExtend, animatedStyle]}>
+          <TouchableOpacity onPress={() => Alert.alert("10$")}>
+            <Text style={styles.priceText}>10$</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => Alert.alert("20$")}>
+            <Text style={styles.priceText}>20$</Text>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => Alert.alert("50$")}>
+            <Text style={styles.priceText}>50$</Text>
+          </TouchableOpacity>
+        </Reanimated.View>
+      </KeyboardExtender>
     </>
   );
 }