Skip to content

Doesn't work with react-native version 0.72.6 with fabric enabled on Android physical device #318

Open
@fractalscape13

Description

ISSUE: On react-native version 0.72.6 with fabric enabled, action sheet on Android physical device doesn't open reliably and the onPress events are never triggered. The package works with the latest version of RN (currently 0.73.2) but does not work with RN version 0.72.6.

SETUP:
npx [email protected] init TestProject --version 0.72.6

Enable new architecture (for android, in gradle.properties set newArchEnabled=true)

In package.json, your versions should look like:
"react-native": "0.72.6"
"@expo/react-native-action-sheet": "^4.0.1",

Sample code for App.tsx:

import React from 'react';
import {SafeAreaView, Text, TouchableOpacity} from 'react-native';
import {
  ActionSheetProvider,
  useActionSheet,
} from '@expo/react-native-action-sheet';

const ActionSheetComponent = () => {
  const {showActionSheetWithOptions} = useActionSheet();
  const onPress = () => {
    const options = ['Delete', 'Save', 'Cancel'];
    const destructiveButtonIndex = 0;
    const cancelButtonIndex = 2;
    showActionSheetWithOptions(
      {
        options,
        cancelButtonIndex,
        destructiveButtonIndex,
      },
      selectedIndex => {
        switch (selectedIndex) {
          case 1:
            console.log('Save--->>>>>>');
            break;
          case destructiveButtonIndex:
            console.log('Delete--->>>>>>');
            break;
          case cancelButtonIndex:
            console.log('Cancel--->>>>>>');
        }
      },
    );
  };
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{
        borderWidth: 5,
        borderColor: 'darkred',
        borderRadius: 14,
        padding: 10,
      }}>
      <Text>Open Action Sheet</Text>
    </TouchableOpacity>
  );
};

function App(): React.JSX.Element {
  return (
    <ActionSheetProvider>
        <SafeAreaView
          style={{
            flex: 1,
            backgroundColor: 'lightblue',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <ActionSheetComponent />
        </SafeAreaView>
    </ActionSheetProvider>
  );
}

export default App;

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions