Crashes on Android 15 & react-native 0.77.0 _reactNative.BackHandler.removeEventListener is not a function
#337
Comments
|
Thanks, @wottpal. |
|
Another alternative until this package is fixed, @wottpal. npm install react-native-actions-sheetMenuActionSheet.tsx import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
type Props = {
options: string[];
cancelIndex?: number;
onOptionPress: (index: number) => void;
};
export default function MenuActionSheet(props: Props) {
const {options, cancelIndex, onOptionPress} = props;
return (
<View>
{options.map((option, index) => (
<TouchableOpacity
key={`${index}-${option}`}
onPress={() => onOptionPress(index)}
style={styles.optionButton}>
<Text
style={[
styles.optionText,
cancelIndex === index ? styles.cancelOptionText : undefined,
]}>
{option}
</Text>
</TouchableOpacity>
))}
</View>
);
}
const styles = StyleSheet.create({
optionButton: {
padding: 16,
justifyContent: 'center',
alignItems: 'flex-start',
},
optionText: {
fontSize: 16,
color: 'black'
},
cancelOptionText: {color: 'red'},
});ActionSheetProvider.tsx import MenuActionSheet from './MenuActionSheet';
import React, {
createContext,
PropsWithChildren,
useCallback,
useMemo,
useRef,
useState,
} from 'react';
import {ActionSheetIOS, Platform} from 'react-native';
import ActionSheet, {ActionSheetRef} from 'react-native-actions-sheet';
type Params = {
options: string[];
icons: React.ReactNode[];
cancelButtonIndex?: number;
destructiveButtonIndex?: number[];
};
type ActionSheetValue = {
showActionSheetWithOptions: (
options: Params,
callback: (index: number) => void,
) => void;
};
const ActionSheetContext = createContext<ActionSheetValue>(undefined as any);
export default function ActionSheetProvider(props: PropsWithChildren) {
const actionSheetRef = useRef<ActionSheetRef>(null);
const callbackRef = useRef<(index: number) => void | undefined>();
const [params, setSheetParams] = useState<Params | undefined>();
const dispose = useCallback(() => {
callbackRef.current = undefined;
setSheetParams(undefined);
}, []);
const handleOptionPress = useCallback((index: number) => {
const cb = callbackRef.current;
actionSheetRef.current?.hide();
cb && cb(index);
}, []);
const showActionSheetWithOptions = useCallback<
ActionSheetValue['showActionSheetWithOptions']
>((params, callback) => {
if (Platform.OS === 'android') {
callbackRef.current = callback;
setSheetParams(params);
actionSheetRef.current?.show();
return;
}
ActionSheetIOS.showActionSheetWithOptions(
{
options: params.options,
destructiveButtonIndex: params.destructiveButtonIndex,
cancelButtonIndex: params.cancelButtonIndex,
},
callback,
);
}, []);
const value = useMemo<ActionSheetValue>(
() => ({
showActionSheetWithOptions,
}),
[showActionSheetWithOptions],
);
return (
<ActionSheetContext.Provider value={value}>
{props.children}
{Platform.OS === 'android' && (
<ActionSheet
useBottomSafeAreaPadding
onClose={dispose}
containerStyle={{
borderRadius: 0,
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
}}
ref={actionSheetRef}>
<MenuActionSheet
onOptionPress={handleOptionPress}
options={params?.options ?? []}
cancelIndex={params?.cancelButtonIndex}
/>
</ActionSheet>
)}
</ActionSheetContext.Provider>
);
}
export function useActionSheet() {
const context = React.useContext(ActionSheetContext);
if (context === undefined) {
throw new Error(
'useActionSheetContext must be used within a ActionSheetProvider',
);
}
return context;
}Usage with the same API. Just replace the @expo/react-native-action-sheet Provider and the hook with the custom version. |
|
same issue here. |
|
@wottpal After calling BackHandler.addEventListener, it needs to be removed with removeEventListener to restore the original behavior. Since this was not done, the addEventListener handler intercepts the hardwareBackPress event to dismiss the action sheet, while blocking the default behavior in other cases. This seems like a critical bug. When will the fix be applied? |
|
Temporarily I am using this code |
|
Let's try to have this one merge (not fully tested yet though): #339 |
|
The below patch worked for me: |
|
@dprevost-LMI u save me. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Might be related to #334. Is there any known workaround/hotfix rn?
Update: Ugly Hotfix
The text was updated successfully, but these errors were encountered: