From c8a0d1695e68795db745d8a213ad55c2d0292970 Mon Sep 17 00:00:00 2001 From: kirillzyusko Date: Fri, 25 Aug 2023 09:20:01 +0200 Subject: [PATCH 01/14] feat: added `KeyboardAvoidingView` --- example/src/constants/screenNames.ts | 1 + .../src/navigation/ExamplesStack/index.tsx | 10 + .../Examples/KeyboardAvoidingView/index.tsx | 51 +++++ .../Examples/KeyboardAvoidingView/styles.ts | 26 +++ .../src/screens/Examples/Main/constants.ts | 5 + src/components/KeyboardAvoidingView.tsx | 196 ++++++++++++++++++ src/components/index.ts | 3 + src/index.ts | 5 + 8 files changed, 297 insertions(+) create mode 100644 example/src/screens/Examples/KeyboardAvoidingView/index.tsx create mode 100644 example/src/screens/Examples/KeyboardAvoidingView/styles.ts create mode 100644 src/components/KeyboardAvoidingView.tsx create mode 100644 src/components/index.ts diff --git a/example/src/constants/screenNames.ts b/example/src/constants/screenNames.ts index ee2655d376..2acfbb8c56 100644 --- a/example/src/constants/screenNames.ts +++ b/example/src/constants/screenNames.ts @@ -11,4 +11,5 @@ export enum ScreenNames { INTERACTIVE_KEYBOARD = 'INTERACTIVE_KEYBOARD', INTERACTIVE_KEYBOARD_IOS = 'INTERACTIVE_KEYBOARD_IOS', NATIVE_STACK = 'NATIVE_STACK', + KEYBOARD_AVOIDING_VIEW = 'KEYBOARD_AVOIDING_VIEW', } diff --git a/example/src/navigation/ExamplesStack/index.tsx b/example/src/navigation/ExamplesStack/index.tsx index b31e58d15a..ad2abd1a5e 100644 --- a/example/src/navigation/ExamplesStack/index.tsx +++ b/example/src/navigation/ExamplesStack/index.tsx @@ -13,6 +13,7 @@ import NonUIProps from '../../screens/Examples/NonUIProps'; import InteractiveKeyboard from '../../screens/Examples/InteractiveKeyboard'; import InteractiveKeyboardIOS from '../../screens/Examples/InteractiveKeyboardIOS'; import NativeStack from '../NestedStack'; +import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoidingView'; export type ExamplesStackParamList = { [ScreenNames.ANIMATED_EXAMPLE]: undefined; @@ -25,6 +26,7 @@ export type ExamplesStackParamList = { [ScreenNames.INTERACTIVE_KEYBOARD]: undefined; [ScreenNames.INTERACTIVE_KEYBOARD_IOS]: undefined; [ScreenNames.NATIVE_STACK]: undefined; + [ScreenNames.KEYBOARD_AVOIDING_VIEW]: undefined; }; const Stack = createStackNavigator(); @@ -61,6 +63,9 @@ const options = { [ScreenNames.NATIVE_STACK]: { title: 'Native stack', }, + [ScreenNames.KEYBOARD_AVOIDING_VIEW]: { + title: 'KeyboardAvoidingView', + }, }; const ExamplesStack = () => ( @@ -115,6 +120,11 @@ const ExamplesStack = () => ( component={NativeStack} options={options[ScreenNames.NATIVE_STACK]} /> + ); diff --git a/example/src/screens/Examples/KeyboardAvoidingView/index.tsx b/example/src/screens/Examples/KeyboardAvoidingView/index.tsx new file mode 100644 index 0000000000..b8801b61aa --- /dev/null +++ b/example/src/screens/Examples/KeyboardAvoidingView/index.tsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from 'react'; +import { + Button, + Platform, + KeyboardAvoidingView as RNKeyboardAvoidingView, + Text, + TextInput, + View, +} from 'react-native'; +import { KeyboardAvoidingView } from 'react-native-keyboard-controller'; +import { StackScreenProps } from '@react-navigation/stack'; +import { ExamplesStackParamList } from '../../../navigation/ExamplesStack'; +import styles from './styles'; + +type Props = StackScreenProps; + +export default function KeyboardAvoidingViewExample({ navigation }: Props) { + const [isPackageImplementation, setPackageImplementation] = useState(true); + + useEffect(() => { + navigation.setOptions({ + headerRight: () => ( + setPackageImplementation((value) => !value)} + > + {`${isPackageImplementation ? 'Package' : 'RN'}`} + + ), + }); + }, [isPackageImplementation]); + + const Container = isPackageImplementation + ? KeyboardAvoidingView + : RNKeyboardAvoidingView; + + return ( + + + Header + + +