Keyboard handler causing full screen sheet to rapidly close and reopen, header scrolling behind dynamic island.

[richardshaw700]

// Issue 1: While sheet is fullscren, the keyboard handler makes the sheet rapidly close and open again, onFocus, and onBlur. // Issue 2: There's no method to add margin to the top of the main container, so when you scroll on a list, the header sits behind the iPhone dynamic island. drawUnderStatusBar={false} and statusBarTranslucent={false} don't do anything.

See video here: https://github.com/ammarahm-ed/react-native-actions-sheet/assets/103525068/56036d80-363e-45fc-8c88-ee1c395bd95d

// Attempted solutions for Issue 1: // a. Set keyboardHandlerEnabled={false} and wrap the view, sheet, or children in react-native KeyboardAvoidingView. Didn't do anything // b. Attempted onChange position tracking to dynamically add padding to the bottom of the sheet. Massive jitter artifacts. Not a viable solution // c. 🛑 Only option for keyboard handling is to use the built-in keyboardHandlerEnabled prop.

// Attempted solutions for Issue 2: // a. Add paddingTop: 80 to containerStyle. Problem: doesn't solve issue 1 // b. Set containerStyle={{backgroundColor: 'transparent', height: '90%'}} and payload value View style={{backgroundColor: 'white', height: '110%'}}. ⭐️ Best solution yet, but causes several render artifacts, especially when opening a TextInput that sits behind the keyboard.

return (
   <ActionSheet
     id={props.sheetId}
     snapPoints={[100]}
     headerAlwaysVisible={true}
     containerStyle={{backgroundColor: 'transparent', height: '90%'}}
     CustomHeaderComponent={customHeader()}
     gestureEnabled={true}
     keyboardHandlerEnabled={keyboardHandler}
     onClose={props.onClose}>
     <BlurView style={{borderRadius: 20, height: '110%'}} blurType={backgroundBlur} blurAmount={13} reducedTransparencyFallbackColor="white">
       {value}
     </BlurView>
   </ActionSheet>