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 (

<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={{marginRight: SPACING}}>


<View style={{width: '90%'}}>
<View style={{...styles.feeling, width: '100%'}}>

{user.name}


<TouchableOpacity
onPress={togglePrivacy}
activeOpacity={0.8}
style={{
...styles.privacyContainer,
borderColor: theme.COLOR_BORDER,
}}>
{privacy ? (
<>

<Text
allowFontScaling={false}
numberOfLines={1}
style={{
...styles.privacyText,
color: theme.CALENDAR_TEXTCOLOR,
}}>
Chỉ mình tôi

</>
) : (
<>

<Text
allowFontScaling={false}
numberOfLines={1}
style={{
...styles.privacyText,
color: theme.CALENDAR_TEXTCOLOR,
}}>
Công khai

</>
)}



)}

<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,
}}
/>


<Text
allowFontScaling={false}
numberOfLines={1}
style={{...styles.text, color: Colors.WHITE}}>
Chia sẻ




{/ */}

}
/>

);
};

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: gorhom/react-native-portal#14

Thank you so much for your time.

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