u

code/base-project/base-app/src/app/(tabs)/chat.tsx

@@ -1,68 +1,64 @@
+import type {
+  TextInputProps,
+} from 'react-native'
 import React from 'react'
 import {
   StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
+  TextInput as TextInputRN,
 } from 'react-native'
-import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
 
-export default function KeyboardAvoidingViewExample() {
+function TextInput(props: TextInputProps) {
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      keyboardVerticalOffset={100}
-      style={styles.content}
+    <TextInputRN
+      placeholderTextColor="#6c6c6c"
+      style={styles.textInput}
+      multiline
+      numberOfLines={2}
+      testID={props.placeholder}
+      {...props}
+      placeholder={`${props.placeholder} (${
+        props.keyboardType === 'default' ? 'text' : 'numeric'
+      })`}
+    />
+  )
+}
+
+export default function AwareScrollView() {
+  return (
+    <KeyboardAwareScrollView
+      bottomOffset={50}
+      style={styles.container}
+      contentContainerStyle={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>
+      {Array.from({ length: 10 }).fill(0).map((_, i) => (
+        <TextInput
+          key={i}
+          placeholder={`TextInput#${i}`}
+          keyboardType={i % 2 === 0 ? 'numeric' : 'default'}
+        />
+      ))}
+    </KeyboardAwareScrollView>
   )
 }
 
 const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+  },
   content: {
-    flex: 1,
-    maxHeight: 600,
-  },
-  heading: {
-    fontSize: 36,
-    marginBottom: 48,
-    fontWeight: '600',
-  },
-  inner: {
-    padding: 24,
-    flex: 1,
-    justifyContent: 'space-between',
+    paddingTop: 50,
   },
   textInput: {
-    height: 45,
-    borderColor: '#000000',
-    borderWidth: 1,
+    width: '100%',
+    minHeight: 50,
+    maxHeight: 200,
+    marginBottom: 50,
+    borderColor: 'black',
+    borderWidth: 2,
+    marginRight: 160,
     borderRadius: 10,
-    marginBottom: 36,
-    paddingLeft: 10,
-  },
-  button: {
-    marginTop: 12,
-    height: 45,
-    borderRadius: 10,
-    backgroundColor: 'rgb(40, 64, 147)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  text: {
-    fontWeight: '500',
-    fontSize: 16,
-    color: 'white',
+    color: 'black',
+    paddingHorizontal: 12,
   },
 })