ammarahm-ed / react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
https://rnas.vercel.app
MIT License
1.49k stars 121 forks source link

Focusing a TextInput does not work well with snap point resizing #374

Closed x43n closed 3 months ago

x43n commented 3 months ago
import { TextInput } from 'react-native'
import ActionSheet from 'react-native-actions-sheet'
import { Box } from 'components/Box'

export const ExampleSheet = () => {
  return (
    <ActionSheet
      backgroundInteractionEnabled={true}
      isModal={false}
      gestureEnabled
      snapPoints={[20, 100]}
      keyboardHandlerEnabled={true}
    >
      // Note: Box is just a View linked to a theme (@shopify/restyle)
      <Box height={500}>
        <TextInput
          placeholder="Something..."
          style={{ height: 40, borderColor: 'black', borderWidth: 1 }}
        />
      </Box>
    </ActionSheet>
  )
}

Simple use-case of having a text input inside the sheet does not work well. The height / snap points dont work as expected. Does this library support this? Is there an example somewhere of this working well?

If the sheet is at snap point 20, and I target the input, I expect it to still be at 20 and not stretch to a bigger size. Once it's expanded with the keyboard, I cannot get it back to a snap point 20 without it dismissing the keyboard.

The video demonstrates the above code, when I target the input at snappoint "20" I expect it to stay at that level when the input is focused. When i try manually drag it back down to where I expect it to be initially, and release it, it dismisses. The position that it opens to is more like the "100" snappoint.

https://github.com/ammarahm-ed/react-native-actions-sheet/assets/107351382/fdfc5aa0-3227-4839-a34d-6e7ee83376f0

x43n commented 3 months ago

Can disable the keyboardHandlerEnabled and use KeyboardAvoidingView.