u

code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx

@@ -3,6 +3,7 @@ import type { NavItem } from '@/store/navigation'
 import { Slot, usePathname, useRouter } from 'expo-router'
 import { useCallback, useEffect, useState } from 'react'
 import { Text, TouchableOpacity, View } from 'react-native'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
 import Animated, { useAnimatedRef } from 'react-native-reanimated'
 import Sortable from 'react-native-sortables'
 import { ADrawer, LucideIcon } from '@/components/common/ao'
@@ -71,7 +72,14 @@ export default function TabsLayout() {
   return (
     <View className="flex-1 bg-gray-100">
       <View className="flex-1 bg-white">
-        <Slot />
+        <KeyboardAvoidingView
+          behavior="padding"
+          style={{
+            flex: 1,
+          }}
+        >
+          <Slot />
+        </KeyboardAvoidingView>
       </View>
 
       <View

code/allapp/allapp-rn/src/app/(tabs)/chat.tsx

@@ -1,64 +1,68 @@
-import { useCallback } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import Sortable from 'react-native-sortables'
-
-const DATA = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`)
-
-export default function CustomHandleExample() {
-  const renderItem = useCallback(
-    ({ item }: { item: string }) => (
-      <View style={styles.card}>
-        <Text style={styles.text}>{item}</Text>
-        <Sortable.Handle>
-          <View style={styles.handle}>
-            <Text style={styles.handleText}>::</Text>
-          </View>
-        </Sortable.Handle>
-      </View>
-    ),
-    [],
-  )
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
 
+export default function KeyboardAvoidingViewExample() {
   return (
-    <View style={styles.container}>
-      <Sortable.Grid
-        activeItemScale={1.05}
-        columns={1}
-        data={DATA}
-        overDrag="vertical"
-        renderItem={renderItem}
-        rowGap={10}
-        highlight-next-line
-        customHandle // must be set to use a custom handle
-      />
-    </View>
+    <KeyboardAvoidingView
+      behavior="padding"
+      keyboardVerticalOffset={100}
+      style={styles.content}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.heading}>Header</Text>
+        <View>
+          <TextInput placeholder="Username" style={styles.textInput} />
+          <TextInput placeholder="Password" style={styles.textInput} />
+        </View>
+        <TouchableOpacity style={styles.button}>
+          <Text style={styles.text}>Submit</Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
   )
 }
 
 const styles = StyleSheet.create({
-  card: {
-    alignItems: 'center',
-    backgroundColor: '#2e8555',
-    borderRadius: 12,
-    flexDirection: 'row',
-    justifyContent: 'center',
+  content: {
+    flex: 1,
+    maxHeight: 600,
+  },
+  heading: {
+    fontSize: 36,
+    marginBottom: 48,
+    fontWeight: '600',
+  },
+  inner: {
     padding: 24,
+    flex: 1,
+    justifyContent: 'space-between',
   },
-  container: {
-    padding: 16,
+  textInput: {
+    height: 45,
+    borderColor: '#000000',
+    borderWidth: 1,
+    borderRadius: 10,
+    marginBottom: 36,
+    paddingLeft: 10,
   },
-  handle: {
-    backgroundColor: 'rgba(0,0,0,0.2)',
-    borderRadius: 5,
-    padding: 10,
-  },
-  handleText: {
-    color: 'white',
-    fontWeight: 'bold',
+  button: {
+    marginTop: 12,
+    height: 45,
+    borderRadius: 10,
+    backgroundColor: 'rgb(40, 64, 147)',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   text: {
+    fontWeight: '500',
+    fontSize: 16,
     color: 'white',
-    flex: 1,
-    fontWeight: 'bold',
   },
 })