docs: add docs about autofocus input behavior

docs/docs/guides/keyboard.mdx

@@ -37,3 +37,21 @@ const App = () => {
 ## Footer Behavior
 
 When using a [`footer`](/reference/configuration#footer) component, it automatically repositions above the keyboard, staying visible while the user types.
+
+## Autofocus Limitation
+
+Avoid using `autoFocus` on `TextInput` components inside the sheet. The keyboard may appear before the sheet has finished presenting, causing layout issues.
+
+Instead, focus the input programmatically after the sheet has presented:
+
+```tsx {4,7}
+const inputRef = useRef<TextInput>(null)
+
+const handlePresent = () => {
+  inputRef.current?.focus()
+}
+
+<TrueSheet onDidPresent={handlePresent}>
+  <TextInput ref={inputRef} placeholder="Type something..." />
+</TrueSheet>
+```

example/shared/src/components/Input.tsx

@@ -1,11 +1,13 @@
 import { StyleSheet, TextInput, View, type TextInputProps } from 'react-native';
 
 import { LIGHT_GRAY, INPUT_HEIGHT, SPACING } from '../utils';
+import { forwardRef } from 'react';
 
-export const Input = (props: TextInputProps) => {
+export const Input = forwardRef<TextInput, TextInputProps>((props, ref) => {
   return (
     <View style={styles.inputContainer}>
       <TextInput
+        ref={ref}
         style={styles.input}
         placeholder="Enter some text..."
         placeholderTextColor={LIGHT_GRAY}
@@ -13,7 +15,7 @@ export const Input = (props: TextInputProps) => {
       />
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   inputContainer: {

example/shared/src/components/sheets/PromptSheet.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, type Ref, useImperativeHandle, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, TextInput } from 'react-native';
 import { TrueSheet, type TrueSheetProps } from '@lodev09/react-native-true-sheet';
 
 import { DARK, DARK_BLUE, FOOTER_HEIGHT, GAP, SPACING } from '../../utils';
@@ -12,6 +12,7 @@ interface PromptSheetProps extends TrueSheetProps {}
 
 export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueSheet>) => {
   const sheetRef = useRef<TrueSheet>(null);
+  const inputRef = useRef<TextInput>(null);
 
   const [isSubmitted, setIsSubmitted] = useState(false);
 
@@ -42,11 +43,13 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueShe
       backgroundBlur="dark"
       backgroundColor={DARK}
       onDidDismiss={handleDismiss}
-      onDidPresent={(e) =>
+      onDidPresent={(e) => {
         console.log(
           `Sheet prompt presented at index: ${e.nativeEvent.index}, position: ${e.nativeEvent.position}`
-        )
-      }
+        );
+
+        inputRef.current?.focus();
+      }}
       onDetentChange={(e) =>
         console.log(
           `Detent changed to index:`,
@@ -63,7 +66,7 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref<TrueShe
       {...props}
     >
       <DemoContent color={DARK_BLUE} />
-      <Input />
+      <Input ref={inputRef} />
       {isSubmitted && <Input />}
       <Button text="Submit" onPress={submit} />
       <Button text="Dismiss" onPress={dismiss} />