Keyboard Aware Error (Using Context)

[anhquan291]

Hi, Thanks for this great library.

I'm having a problem with the KeyboardAware. Don't know if it is a bug. Please help. It gives the error. Thank you so much

<BottomSheet dragEnabled={true} keyboardAware keyboardAwareExtraSnapHeight={300} ref={ShareBottomRef} initialPosition={0} snapPoints={snapPoints} isBackDrop={true} isBackDropDismissByPress={true} isRoundBorderWithTipHeader={true} onClose={onClose} onChangeSnap={(e) => setSnapIndex(e.index)} containerStyle={{backgroundColor: theme.BACKGROUND_COLOR_RGB}} headerStyle={{padding: 0}} tipStyle={{ backgroundColor: 'rgb(255, 255, 255)', top: snapIndex === 1 ? -20 : 0, }}/>

[numandev1]

@anhquan291 can you provide a reproducible example through github?

[anhquan291]

@anhquan291 can you provide a reproducible example through github?

Unfortunately, I can't. I only can share the screen bottom sheet code here.

const ShareOptionSheet = () => { const [ BottomRef, selectedPost, setSelectedPost, setActionLoading, ShareBottomRef, selectedSharePost, setSelectedSharePost, ] = useContext(CommunityContext); const dispatch = useDispatch(); const navigation = useNavigation(); const [privacy, setPrivacy] = useState(false); const [snapIndex, setSnapIndex] = useState(0); const [content, setContent] = useState(''); const [feeling, setFeeling] = useState(''); const inputRef = useRef(null); const user = useSelector((state) => state.auth.user); const theme = useSelector((state) => state.themes.theme); const snapPoints = [0, HEIGHT / 1.2]; const togglePrivacy = () => { setPrivacy((prev) => !prev); }; const sharePostHandler = async () => { ShareBottomRef.current.snapTo(0); const shareId = uuid.v4(); try { setActionLoading(true); await dispatch( PostUserActions.postShare( selectedSharePost, shareId, content, feeling, privacy, ), ); setActionLoading(false); SuccessNotifier(Messages.SUCCESS_SHARE); } catch (e) { console.log(e); } }; const onClose = () => { setTimeout(() => { setContent(null); if (inputRef.current !== null) { inputRef.current.blur(); } setSelectedSharePost(null); }, 50); }; return ( <Portal> <BottomSheet dragEnabled={true} ref={ShareBottomRef} initialPosition={0} snapPoints={snapPoints} isBackDrop={true} keyboardAware keyboardAwareExtraSnapHeight={300} isBackDropDismissByPress={true} isRoundBorderWithTipHeader={true} onClose={onClose} onChangeSnap={(e) => setSnapIndex(e.index)} containerStyle={{backgroundColor: theme.BACKGROUND_COLOR_RGB}} headerStyle={{padding: 0}} tipStyle={{ backgroundColor: 'rgb(255, 255, 255)', top: snapIndex === 1 ? -20 : 0, }} body={ <View style={{ ...styles.body, }}> {/* <KeyboardAvoidingView style={{flexGrow: 1}} behavior={'padding'}> /} <ScrollView contentContainerStyle={{height: HEIGHT}} keyboardShouldPersistTaps="handled"> {selectedSharePost !== null && ( <View style={styles.userContainer}> <View style={{marginRight: SPACING}}> <ProfileImage source={user.profilePicture} /> </View> <View style={{width: '90%'}}> <View style={{...styles.feeling, width: '100%'}}> <Text allowFontScaling={false} numberOfLines={1} style={styles.text}> {user.name} </Text> </View> <TouchableOpacity onPress={togglePrivacy} activeOpacity={0.8} style={{ ...styles.privacyContainer, borderColor: theme.COLOR_BORDER, }}> {privacy ? ( <> <FontAwesome name="lock" size={PRIVACY_ICON} color={theme.CALENDAR_TEXTCOLOR} /> <Text allowFontScaling={false} numberOfLines={1} style={{ ...styles.privacyText, color: theme.CALENDAR_TEXTCOLOR, }}> Chỉ mình tôi </Text> </> ) : ( <> <Fontisto name="earth" size={PRIVACY_ICON} color={theme.CALENDAR_TEXTCOLOR} /> <Text allowFontScaling={false} numberOfLines={1} style={{ ...styles.privacyText, color: theme.CALENDAR_TEXTCOLOR, }}> Công khai </Text> </> )} </TouchableOpacity> </View> </View> )} <View style={styles.textInputContainer}> <TextInput placeholder="Bạn nghĩ gì về bài viết này?" placeholderTextColor={theme.PLACEHOLDER_TEXTCOLOR} keyboardAppearance={theme.KEYBOARD_COLOR} selectionColor={Colors.PRIMARY_COLOR} ref={inputRef} multiline={true} value={content} onChangeText={setContent} style={{ color: theme.PRIMARY_TEXTCOLOR, fontFamily: 'Roboto-Regular', fontSize: SIZES.body, maxHeight: 60, }} /> </View> <TouchableOpacity onPress={sharePostHandler} style={styles.shareButton}> <Text allowFontScaling={false} numberOfLines={1} style={{...styles.text, color: Colors.WHITE}}> Chia sẻ </Text> </TouchableOpacity> <SharePostItem item={selectedSharePost} theme={theme} /> </ScrollView> {/ </KeyboardAvoidingView> */} </View> } /> </Portal> ); };

And one more thing, the Bottom Sheet doesn't work correctly on android, isBackDropDismissByPress and dragEnabled doesn't work. When the bottom sheet shows up on android, it seems to freeze the app. Thank you so much

[numandev1]

@anhquan291 I can only help you when you will provide a reproducible example to me. because on busy days it is hard to get time to reproduce and fix. it is easy for me to fix it if i have reproducible example thanks

[anhquan291]

Yes, I'll. Thank you

[anhquan291]

Hi, I got a new update. On Android, it doesn't work when provide the props "keyboardAware". I also tried your example. The error occurs. When I remove keyboardAware props It works well. However, when I want the bottom sheet to be on the top of Bottom Tabbar. I tried to put the BS inside {Portal} from '@gorhom/portal'. Unfortunately, the bottom sheet does not work correctly, cannot drag or close it. (Only works on IOS) I think it is related this one: https://github.com/gorhom/react-native-portal/issues/14

Thank you so much for your time.

***Update: I reconfigured the React Native Gesture Handler and isBackDropDismissByPress works but dragEnabled doesn't.