diff --git a/docs/docs/guides/keyboard.mdx b/docs/docs/guides/keyboard.mdx index 9fba4f6..63b7878 100644 --- a/docs/docs/guides/keyboard.mdx +++ b/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(null) + +const handlePresent = () => { + inputRef.current?.focus() +} + + + + +``` diff --git a/example/shared/src/components/Input.tsx b/example/shared/src/components/Input.tsx index d4239e2..973bc70 100644 --- a/example/shared/src/components/Input.tsx +++ b/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((props, ref) => { return ( { /> ); -}; +}); const styles = StyleSheet.create({ inputContainer: { diff --git a/example/shared/src/components/sheets/PromptSheet.tsx b/example/shared/src/components/sheets/PromptSheet.tsx index f2b262c..fa7ac2d 100644 --- a/example/shared/src/components/sheets/PromptSheet.tsx +++ b/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) => { const sheetRef = useRef(null); + const inputRef = useRef(null); const [isSubmitted, setIsSubmitted] = useState(false); @@ -42,11 +43,13 @@ export const PromptSheet = forwardRef((props: PromptSheetProps, ref: Ref + 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 - + {isSubmitted && }