react-native-actions-sheet

react-native-actions-sheet copied to clipboard

Closing the action sheet is causing the below bounce on Android only. On iOS the close is smooth and normal. Am i missing something with this?

Thanks

Using version 0.8.10

   <ActionSheet
      useBottomSafeAreaPadding
      indicatorStyle={styles.indicatorStyle}
      id={sheetId}
      ref={actionSheetRef}
      snapPoints={[100]}
      statusBarTranslucent
      gestureEnabled
      defaultOverlayOpacity={0.7}
      containerStyle={styles.actionSheetContainer}
    >
      <SafeAreaView>
        <ScrollView {...scrollHandlers} style={styles.scrollview}>
          <View>
            <View style={styles.actionSheetHeader}>
              <Text style={styles.text}>{payload.title}</Text>
              <Pressable onPress={() => SheetManager.hide('select-sheet')}>
                <MaterialIcons
                  name="close"
                  size={26}
                  color={isDarkMode ? colours.white : colours.greyDark80}
                />
              </Pressable>
            </View>
            {payload?.children}
          </View>
        </ScrollView>
      </SafeAreaView>
    </ActionSheet>

https://user-images.githubusercontent.com/10877466/199248096-8586bd80-edca-44f1-a3b6-d25696f28700.mov

+1

Hey there @SKempin! I was facing this annoying bug yesterday and managed to solve it just now. My scenario was that I was using a button with a loading state inside @ammarahm-ed's action sheet. When the onPress got triggered, changing the loading state would conditionally render a loading spinner as shown below.

<TouchableOpacity
      className={`rounded-lg ${
        bgColor ?? 'bg-ay-green'
      } flex flex-row justify-center items-center ${containerClass ?? ''} **the fix -> ** h-12`}
      onPress={() => handleFn()}
      disabled={loading}>
      {loading ? (
        <Flow color="white" size={38}  **used to be -> ** className="my-5" />
      ) : (
        <Text
          className={`font-gilroybold ${
            transform ?? ''
          } text-white text-center ${buttonPadding ?? 'p-4'}`}>
          {title ?? 'Start'}
        </Text>
      )}
</TouchableOpacity>

The problem was me using vertical margins on the spinner to holdup the height of the button, which in iOS wasn't a problem maybe because how it handles height calculations. The solution was to give the button a fixed height and placing the spinner appropriately using flex properties.

Maybe you could look into your components that are being used that specific action sheet and make some style changes, hope that helps!

Thanks @nafis25, in the end I switched to the @gorhom/bottom-sheet instead as found this suited my needs better.