Strange behavior of action sheet on android

[JaifDev]

WhatsApp.Video.2024-07-26.at.12.22.35_00367ff3.mp4

The action sheet magically disappears after appearing.

`import React, { useRef } from "react";
import { StyleSheet, Text, View } from "react-native";
import ActionSheet, {
  ActionSheetRef,
  SheetProps,
} from "react-native-actions-sheet";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";

import { COLORS, FONT, SIZES } from "../../constants/theme";
import { StudentDataType, studentHomework } from "@/constants/studentData";
import { TouchableOpacity, FlatList } from "react-native-gesture-handler";

const CheckHomeworkStudent = (props: SheetProps<"checkHomeworkStudent">) => {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  const { payload } = props;
  const { selectedStudent, getStudentById } = payload!;

  const renderStudent = ({ item }: { item: StudentDataType }) => {
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        style={[
          styles.studentInfo,
          selectedStudent === item.id && { backgroundColor: COLORS.extraLight },
        ]}
        onPress={() => {
          getStudentById(item.id);
          actionSheetRef?.current?.hide();
        }}
      >
        <Text style={styles.studentName}>{item.studentName}</Text>
        <Text style={styles.classInfo}>
          Class: {item.class}, Section: {item.section}
        </Text>
      </TouchableOpacity>
    );
  };

  return (
    <ActionSheet
      id={props.sheetId}
      ref={actionSheetRef}
      drawUnderStatusBar={false}
      indicatorStyle={{
        width: wp(20),
        marginVertical: hp(1),
        backgroundColor: COLORS.white,
      }}
      gestureEnabled={true}
      containerStyle={{
        height: hp(75),
        backgroundColor: COLORS.sheetColor,
      }}
      useBottomSafeAreaPadding={false}
    >
      <View style={styles.container}>
        <Text style={styles.title}>Select Student</Text>
      </View>
      <FlatList
        data={studentHomework}
        renderItem={renderStudent}
        keyExtractor={(item) => item.id.toString()}
        nestedScrollEnabled={true}
      />
    </ActionSheet>
  );
};

export default CheckHomeworkStudent;

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: wp(3),
    paddingVertical: hp(1),
  },
  title: {
    fontFamily: FONT.bold,
    color: COLORS.white,
    fontSize: SIZES.l,
    maxWidth: wp(50),
  },
  btn: {
    width: wp(93),
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: COLORS.primary,
    borderRadius: wp(2),
    paddingVertical: hp(2),
  },
  btnTxt: {
    fontFamily: FONT.medium,
    color: COLORS.white,
    fontSize: SIZES.m,
  },
  studentInfo: {
    marginBottom: hp(1),
    borderRadius: wp(3),
    borderWidth: wp(0.3),
    borderColor: COLORS.extraLight,
    paddingHorizontal: wp(5),
    paddingVertical: wp(2),
  },
  studentName: {
    fontSize: wp(5),
    fontFamily: FONT.medium,
    color: COLORS.white,
  },
  classInfo: {
    fontSize: wp(4),
    fontFamily: FONT.medium,
    color: COLORS.white,
  },
});`

In Android with New Architectrure Enabled.

[ammarahm-ed]

Can you try and reproduce this issue in the example app? Does this issue happen only when new arch is enabled?

[ammarahm-ed]

Import FlatList from react-native-actions-sheet.

[ed-sparkes]

Seeing very similar result on Android even with gestureEnabled={false} scrolling around the view the action sheet some times disappears or goes really small but the overlay remains across the whole screen

i decided to just disabled gestures on android but even then getting very weird rendering behaviour when i start scrolling

[JaifDev]

Seeing very similar result on Android even with gestureEnabled={false} scrolling around the view the action sheet some times disappears or goes really small but the overlay remains across the whole screen

i decided to just disabled gestures on android but even then getting very weird rendering behaviour when i start scrolling

Wierd, I am still getting this error on a new app

[JaifDev]

Import FlatList from react-native-actions-sheet.

Tried it too, it's only happening on new architecture

[Medkhat]

Hi there! See this issue: #321