[RNKC-076] - various small updates for example (#84)

## 📜 Description Updated example project with some small fixes. ## 💡 Motivation and Context I decided to rework `KeyboardAnimation` example because of several reasons: - now two circles stick to the bottom of the screen <- it will be easier to detect any insets changes (these circles will be cut); - progress value is shown at the top of the screen (it will never be overlapped by the keyboard); - text input field will be always covered by keyboard; ## 📢 Changelog ### JS - reworked KeyboardAnimation example; - added `useResizeMode` where it was needed to assure, that everything works on API < 30 too; ### Android - set `adjustPan` for FabricExample on Android (to assure that native module actually changes necessary values); ## 🤔 How Has This Been Tested? Tested manually on Android (API 32, API 28) and iPhone (iOS 15.5). ## 📸 Screenshots (if appropriate): |Before|After| |------|-----| |<img width="284" alt="image" src="https://user-images.githubusercontent.com/22820318/194595638-9ef711ff-6116-4500-b59d-d682b41e4373.png">|<img width="280" alt="image" src="https://user-images.githubusercontent.com/22820318/194595529-3fb2797b-d99b-4c14-aa62-0bae542df697.png">| ## 📝 Checklist - [x] CI successfully passed
kirillzyusko · Oct 7, 2022 · fb3294a · fb3294a
1 parent 0399456
commit fb3294a
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 53 deletions.
diff --git a/FabricExample/android/app/src/main/AndroidManifest.xml b/FabricExample/android/app/src/main/AndroidManifest.xml
@@ -15,7 +15,7 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
+        android:windowSoftInputMode="adjustPan"
         android:exported="true">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

diff --git a/FabricExample/src/components/KeyboardAnimation/index.tsx b/FabricExample/src/components/KeyboardAnimation/index.tsx
@@ -12,16 +12,7 @@ export default function KeyboardAnimation() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.row}>
-        <Animated.View
-          style={{
-            width: 50,
-            height: 50,
-            backgroundColor: 'red',
-            borderRadius: 25,
-            transform: [{ translateY: height }],
-          }}
-        />
+      <View>
         <Animated.View
           style={{
             width: 50,
@@ -38,24 +29,37 @@ export default function KeyboardAnimation() {
             ],
           }}
         />
-        <Animated.View
+      </View>
+      <View>
+        <TextInput
           style={{
-            width: 50,
+            width: 200,
+            marginTop: 50,
             height: 50,
-            backgroundColor: 'blue',
-            borderRadius: 25,
-            transform: [{ translateY: heightReplica }],
+            backgroundColor: 'yellow',
           }}
         />
+        <View style={[styles.row, styles.center]}>
+          <Animated.View
+            style={{
+              width: 50,
+              height: 50,
+              backgroundColor: 'red',
+              borderRadius: 25,
+              transform: [{ translateY: height }],
+            }}
+          />
+          <Animated.View
+            style={{
+              width: 50,
+              height: 50,
+              backgroundColor: 'blue',
+              borderRadius: 25,
+              transform: [{ translateY: heightReplica }],
+            }}
+          />
+        </View>
       </View>
-      <TextInput
-        style={{
-          width: 200,
-          marginTop: 50,
-          height: 50,
-          backgroundColor: 'yellow',
-        }}
-      />
     </View>
   );
 }
diff --git a/FabricExample/src/components/KeyboardAnimation/styles.ts b/FabricExample/src/components/KeyboardAnimation/styles.ts
@@ -4,7 +4,7 @@ export default StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
   },
   box: {
     width: 60,
@@ -14,4 +14,7 @@ export default StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  center: {
+    justifyContent: 'center',
+  },
 });
diff --git a/FabricExample/src/screens/Examples/AwareScrollView/index.tsx b/FabricExample/src/screens/Examples/AwareScrollView/index.tsx
@@ -1,6 +1,9 @@
 import React, { useEffect } from 'react';
 import { TextInput, View, Dimensions } from 'react-native';
-import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  KeyboardEvents,
+  useResizeMode,
+} from 'react-native-keyboard-controller';
 import Reanimated, {
   useAnimatedRef,
   useAnimatedScrollHandler,
@@ -18,6 +21,8 @@ export default function BottomTabs() {
   const position = useSharedValue(0);
   const fakeViewHeight = useSharedValue(0);
 
+  useResizeMode();
+
   const onScroll = useAnimatedScrollHandler({
     onScroll: (e) => {
       position.value = e.contentOffset.y;

diff --git a/FabricExample/src/screens/Examples/Events/index.tsx b/FabricExample/src/screens/Examples/Events/index.tsx
@@ -2,7 +2,10 @@ import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { TextInput } from 'react-native-gesture-handler';
-import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  KeyboardEvents,
+  useResizeMode,
+} from 'react-native-keyboard-controller';
 
 const styles = StyleSheet.create({
   input: {
@@ -13,6 +16,8 @@ const styles = StyleSheet.create({
 });
 
 function EventsListener() {
+  useResizeMode();
+
   useEffect(() => {
     const show = KeyboardEvents.addListener('keyboardWillShow', (e) => {
       Toast.show({

diff --git a/example/src/components/KeyboardAnimation/index.tsx b/example/src/components/KeyboardAnimation/index.tsx
@@ -12,16 +12,7 @@ export default function KeyboardAnimation() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.row}>
-        <Animated.View
-          style={{
-            width: 50,
-            height: 50,
-            backgroundColor: 'red',
-            borderRadius: 25,
-            transform: [{ translateY: height }],
-          }}
-        />
+      <View>
         <Animated.View
           style={{
             width: 50,
@@ -38,24 +29,37 @@ export default function KeyboardAnimation() {
             ],
           }}
         />
-        <Animated.View
+      </View>
+      <View>
+        <TextInput
           style={{
-            width: 50,
+            width: 200,
+            marginTop: 50,
             height: 50,
-            backgroundColor: 'blue',
-            borderRadius: 25,
-            transform: [{ translateY: heightReplica }],
+            backgroundColor: 'yellow',
           }}
         />
+        <View style={[styles.row, styles.center]}>
+          <Animated.View
+            style={{
+              width: 50,
+              height: 50,
+              backgroundColor: 'red',
+              borderRadius: 25,
+              transform: [{ translateY: height }],
+            }}
+          />
+          <Animated.View
+            style={{
+              width: 50,
+              height: 50,
+              backgroundColor: 'blue',
+              borderRadius: 25,
+              transform: [{ translateY: heightReplica }],
+            }}
+          />
+        </View>
       </View>
-      <TextInput
-        style={{
-          width: 200,
-          marginTop: 50,
-          height: 50,
-          backgroundColor: 'yellow',
-        }}
-      />
     </View>
   );
 }
diff --git a/example/src/components/KeyboardAnimation/styles.ts b/example/src/components/KeyboardAnimation/styles.ts
@@ -4,7 +4,7 @@ export default StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
   },
   box: {
     width: 60,
@@ -14,4 +14,7 @@ export default StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  center: {
+    justifyContent: 'center',
+  },
 });
diff --git a/example/src/screens/Examples/AwareScrollView/index.tsx b/example/src/screens/Examples/AwareScrollView/index.tsx
@@ -1,6 +1,9 @@
 import React, { useEffect } from 'react';
 import { TextInput, View, Dimensions } from 'react-native';
-import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  KeyboardEvents,
+  useResizeMode,
+} from 'react-native-keyboard-controller';
 import Reanimated, {
   useAnimatedRef,
   useAnimatedScrollHandler,
@@ -18,6 +21,8 @@ export default function BottomTabs() {
   const position = useSharedValue(0);
   const fakeViewHeight = useSharedValue(0);
 
+  useResizeMode();
+
   const onScroll = useAnimatedScrollHandler({
     onScroll: (e) => {
       position.value = e.contentOffset.y;

diff --git a/example/src/screens/Examples/Events/index.tsx b/example/src/screens/Examples/Events/index.tsx
@@ -2,7 +2,10 @@ import React, { useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import Toast from 'react-native-toast-message';
 import { TextInput } from 'react-native-gesture-handler';
-import { KeyboardEvents } from 'react-native-keyboard-controller';
+import {
+  KeyboardEvents,
+  useResizeMode,
+} from 'react-native-keyboard-controller';
 
 const styles = StyleSheet.create({
   input: {
@@ -13,6 +16,8 @@ const styles = StyleSheet.create({
 });
 
 function EventsListener() {
+  useResizeMode();
+
   useEffect(() => {
     const show = KeyboardEvents.addListener('keyboardWillShow', (e) => {
       Toast.show({