Add wrapper for KeyboardAvoidingView + deprecated AvoidKeyboardView (#822)

Author: YoussefHenna

example/src/App.tsx

@@ -64,6 +64,7 @@ import LinearProgressExample from "./LinearProgressExample";
 import CircularProgressExample from "./CircularProgressExample";
 import VideoPlayerExample from "./VideoPlayerExample";
 import PinInputExample from "./PinInputExample";
+import KeyboardAvoidingViewExample from "./KeyboardAvoidingViewExample";
 
 const ROUTES = {
   AudioPlayer: AudioPlayerExample,
@@ -103,6 +104,7 @@ const ROUTES = {
   CircularProgress: CircularProgressExample,
   VideoPlayer: VideoPlayerExample,
   PinInput: PinInputExample,
+  KeyboardAvoidingView: KeyboardAvoidingViewExample,
 };
 
 let customFonts = {

example/src/KeyboardAvoidingViewExample.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "react-native";
+import { KeyboardAvoidingView, TextField } from "@draftbit/ui";
+
+const KeyboardAvoidingViewExample: React.FC = () => {
+  const [value, setValue] = React.useState("");
+  return (
+    <View style={{ flex: 1, justifyContent: "flex-end" }}>
+      <KeyboardAvoidingView behavior="height">
+        <TextField
+          value={value}
+          onChangeText={(text) => setValue(text.toString())}
+          numberOfLines={1}
+          type="solid"
+        />
+      </KeyboardAvoidingView>
+    </View>
+  );
+};
+
+export default KeyboardAvoidingViewExample;

packages/core/src/components/KeyboardAvoidingView.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  KeyboardAvoidingView as KeyboardAvoidingViewComponent,
+  Platform,
+  ViewProps,
+} from "react-native";
+
+const isIos = Platform.OS === "ios";
+const isAndroid = Platform.OS === "android";
+
+type KeyboardAvoidingViewBehavior = "height" | "position" | "padding";
+
+interface KeyboardAvoidingViewProps extends ViewProps {
+  enabled?: boolean;
+  behavior?: KeyboardAvoidingViewBehavior;
+  keyboardVerticalOffset?: number;
+  androidBehavior?: KeyboardAvoidingViewBehavior;
+  androidKeyboardVerticalOffset?: number;
+  iosBehavior?: KeyboardAvoidingViewBehavior;
+  iosKeyboardVerticalOffset?: number;
+}
+
+const KeyboardAvoidingView: React.FC<KeyboardAvoidingViewProps> = ({
+  behavior = "padding",
+  keyboardVerticalOffset = 0,
+  androidBehavior,
+  androidKeyboardVerticalOffset,
+  iosBehavior,
+  iosKeyboardVerticalOffset,
+  ...rest
+}) => {
+  let behaviorResult: KeyboardAvoidingViewBehavior;
+
+  if (isIos && iosBehavior !== undefined) {
+    behaviorResult = iosBehavior;
+  } else if (isAndroid && androidBehavior !== undefined) {
+    behaviorResult = androidBehavior;
+  } else {
+    behaviorResult = behavior;
+  }
+
+  let keyboardVerticalOffsetResult: number;
+
+  if (isIos && iosKeyboardVerticalOffset !== undefined) {
+    keyboardVerticalOffsetResult = iosKeyboardVerticalOffset;
+  } else if (isAndroid && androidKeyboardVerticalOffset !== undefined) {
+    keyboardVerticalOffsetResult = androidKeyboardVerticalOffset;
+  } else {
+    keyboardVerticalOffsetResult = keyboardVerticalOffset;
+  }
+
+  return (
+    <KeyboardAvoidingViewComponent
+      behavior={behaviorResult}
+      keyboardVerticalOffset={keyboardVerticalOffsetResult}
+      {...rest}
+    />
+  );
+};
+
+export default KeyboardAvoidingView;

…ore/src/components/AvoidKeyboardView.tsx …recated-components/AvoidKeyboardView.tsxpackages/core/src/components/AvoidKeyboardView.tsx renamed to packages/core/src/deprecated-components/AvoidKeyboardView.tsx packages/core/src/components/AvoidKeyboardView.tsx renamed to packages/core/src/deprecated-components/AvoidKeyboardView.tsx

@@ -35,6 +35,9 @@ interface AvoidKeyboardViewProps
   onKeyboardHidden?: () => void;
 }
 
+/**
+ * @deprecated DEPRECATED
+ */
 const AvoidKeyboardView: React.FC<AvoidKeyboardViewProps> = ({
   onKeyboardHidden,
   onKeyboardShown,

packages/core/src/index.tsx

@@ -73,7 +73,7 @@ export {
   Spacer,
   Square,
 } from "./components/Layout";
-export { default as AvoidKeyboardView } from "./components/AvoidKeyboardView";
+export { default as KeyboardAvoidingView } from "./components/KeyboardAvoidingView";
 
 /* Deprecated: Fix or Delete!  */
 export { default as AccordionItem } from "./deprecated-components/AccordionItem";
@@ -102,3 +102,4 @@ export { default as RowBodyIcon } from "./deprecated-components/RowBodyIcon";
 export { default as RowHeadlineImageCaption } from "./deprecated-components/RowHeadlineImageCaption";
 export { default as RowHeadlineImageIcon } from "./deprecated-components/RowHeadlineImageIcon";
 export { useAuthState } from "./components/useAuthState";
+export { default as AvoidKeyboardView } from "./deprecated-components/AvoidKeyboardView";

packages/ui/src/index.tsx

@@ -68,6 +68,7 @@ export {
   ZStack,
   PickerItem,
   AvoidKeyboardView,
+  KeyboardAvoidingView,
 } from "@draftbit/core";
 
 /**