To be specific I am using TouchableNativeFeedback from react-native. When gestureEnabled is set to true, touchables no longer work, however with them disabled, the action sheet handle disables.

<ActionSheet
            ref={actionSheetRef}
            id={props.sheetId}
            statusBarTranslucent
            gestureEnabled={true}
            containerStyle={{}}
            indicatorStyle={{}}
        >
</ActionSheet>

Hi! Thanks for this awesome plugin. Portrait mode is working as expected, but horizontal layout does not trigger the content view, the background in toggled as I can see it turning darker.

Could you please look in to it?

Thanks

The component is rendered straight under SafeAreaProvider.

<ActionSheet
      ref={ref}
      onPositionChanged={() => console.log('onPositionChanged')}
      onClose={() => console.log('onClose')}
      onOpen={() => console.log('onOpen')}>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
    </ActionSheet>

This bug causes content jumping on the first open. It's reproduced in ~80% of first renders.

Version used: "react-native-actions-sheet": "0.4.7",

Hi @ammarahm-ed !

I'm trying to create an action sheet with your package. When i set the height to a higher value, the indicator renders 'x' pixels lower (I think because of the indicatorTranslateY):

indicator at the top:

indicator renders lower:

Is this intentionally? I think you check the distance between the action sheet and the top of the screen and based on that the indicator renders couple of pixels lower. We would like to have the indicator always at the top of the action sheet. Is there any chance, to have for example an 'indicatorPositionAlwaysTop'(boolean) attribute which we can set from outside? I'm also open to contribute to this library, so i can make a PR for this solution. What's your opinion?

Android

Desired behavior: Flatlist as a child of ActionSheet IS scrollable and ActionSheet CAN be close with a gesture.

Actual behavior: gestureEnabled={true} Flatlist as a child of ActionSheet IS NOT scrollable. ActionSheet CAN be close with a gesture.

gestureEnabled={false} Flatlist as a child of ActionSheet IS scrollable. ActionSheet CAN NOT be close with a gesture.

iOS

Everything works as desired.

<ActionSheetBase
  containerStyle={{
    ...styles.container,
    paddingBottom: insets.bottom,
    ...containerStyle,
    }}>
  {children}
</ActionSheetBase>

We are setting bottom padding with the value coming from safe area context on, I was able to solve this by wrapping content with a view and passing the padding to it. But I have one sheet that has a sticky button so it should be without bottom spacing but I cannot overwrite the padding.

Thanks for the great efforts, keep it up.

Hello,

I posted this issue on SO regarding the usage with Typescript. Can you please assist?

https://stackoverflow.com/questions/68757797/typescript-createref-for-actionsheet-react-native

export default function MyFunc(){
   const actionSheetRef = createRef<ActionSheet>()
   useEffect(() => {
        actionSheetRef.current?.setModalVisible(props.open)
   }, [props.open])
   return (
        <>
            <ActionSheet
                ref={actionSheetRef}
                onClose={props.onClose}
            >
            // more code here  ....
        <>)
}

I also added a tag for your project so others can find it easier.

Thanks for the great library!

Is there a way to keep the entire sheet above the keyboard? Currently when the user focuses an input the keyboard will pop up and cover whatever portion of the sheet is below the input that is focused.

I have based my sheet off one of the examples here: https://snack.expo.dev/@ammarahmed/github.com-ammarahm-ed-react-native-actions-sheet:expo-example

When I tap on an input, they keyboard opens but it is not smooth like in the example (Keyboard appears, sheets animates up). In mine, there is a bit of a delay, the keyboard appears and the modal doesn't animate up. I tested this in the simulator and a device.

"react-native": "0.70.0", "react-native-actions-sheet": "^0.8.7",

https://user-images.githubusercontent.com/682876/190770925-1b02d5f8-78f4-446c-8bec-26875c5b8c1c.mov

Hello! Thank you for awesome lib, but I have some problems with it. Sometimes I'm getting weird bug when ActionSheet can't be opened. I'm using SheetManager with custom context (tested with global too - same bug):

<ActionSheet
  id={sheetId}
  ref={sheetRef}
  gestureEnabled={true}
  CustomHeaderComponent={<SheetHeader />}
  backgroundInteractionEnabled={true}
  snapPoints={[30, 100]}
>
  ...
</ActionSheet>

UPD: Maybe something with warning in console? WARN Sending 'onAnimatedValueUpdate' with no listeners registered.

https://user-images.githubusercontent.com/19375789/187904262-7df0c711-3d3f-481d-9e39-00377b62dd8b.mp4

Description The error occurs when I try to write on the text input after upgrading to 0.8.8 to resolve issue #224. Version 0.8.7 worked flawlessly.

Error

Additional Information

• [react-native-actions-sheet: 0.8.8
• React Native version: 0.69.4
• Platform: Android, not sure for IOS
• Development Operating System: Window 11
• Hermes enabled

Sample code

 <ActionSheet/>
  id="feed-create-post-sheet"
  ref={actionSheetRef}
  containerStyle={styles.actionContainer}
  statusBarTranslucent
  drawUnderStatusBar={true}
  defaultOverlayOpacity={0.3}
  gestureEnabled={true}>
  <View style={styles.container}>
    <View style={styles.inputConStyle}>
        <TextInput
          value={message}
          onChangeText={handleMessageChange}
          multiline
          style={styles.input}
        />
    </View>
    <Button
      onPress={handle}
    />
  </View>
</ActionSheet>

The ActionSheet vertical position isn't correctly calculated when the react native screen isn't the same height as the device. For example, my app uses Native navigation, and the React Native view is shorter than the device height. In this case, the action sheet is shifted to the bottom, and a good portion of the content can't be seen. Here is a video:

https://user-images.githubusercontent.com/5271876/210626146-be7495b2-902b-44f6-b64d-09dfec521b0d.mov

The portion hidden is the same as the navbar height. I was digging into the code, and the problem is that the height of the <Root /> component it's being hardcoded with the device height, and it is not always the case, the react view can take a different height than the device height. https://github.com/ammarahm-ed/react-native-actions-sheet/blob/8f44dd50ac02340b408c9c537fcb73eafde31857/src/index.tsx#L796

I was testing things, and if instead of using initialWindowHeight we use 100% as height, it worked perfectly for every device.

https://user-images.githubusercontent.com/5271876/210625970-9e9a0463-d418-493f-9904-adac9eff161b.mov

Would you accept a PR with that change?

I get a question how can I make the action sheet upper than the bottom? I have used the positon like containerStyle={{bottom: 50, padding: 50}} but it's still overclap the button which I don't hide and can click the button when the action sheet is showing.

Hi there,

I have an action sheet component, that needs to return a text input value. I'm doing that using the payload props. The problem is, the return only works if I pass the onClose props too..

Here's my code:

Action sheet component:

import React, { useRef, useState } from 'react';
import { Text, View } from 'react-native';
import ActionSheet, { ActionSheetRef, SheetProps } from 'react-native-actions-sheet';
import { textStyles } from '../../../theme';
import i18n from '../../../i18n';
import Input from '../../../components/Input';

export const actionSheetMoodThoughtsID = 'actionSheetMoodThoughtsID';

const MoodActionSheet = (props: SheetProps<{ title: string; thoughts: string }>) => {
  const moodActionSheetRef = useRef<ActionSheetRef>(null);
  const [thoughts, setThoughts] = useState(props.payload?.thoughts);
  return (
    <ActionSheet id={actionSheetMoodThoughtsID} ref={moodActionSheetRef} payload={thoughts}>
      <View>
        <Text style={[textStyles.title, textStyles.semiBold, textStyles.center]}>
          {i18n.t(props.payload?.title || '')}
        </Text>
        <Input
          autoFocus
          rounded
          value={thoughts}
          onChangeText={(value: string) => setThoughts(value)}
          returnKeyType='default'
          multiline
          numberOfLines={4}
        />
      </View>
    </ActionSheet>
  );
};

export default MoodActionSheet;

the function that open and receive the value:

  const handleActionSheet = async () => {
    const response: string = await SheetManager.show(actionSheetMoodThoughtsID, {
      payload: { title: 'mood_what_thoughts_went_through_your_head', thoughts },
    });
    console.log('response: ', response);
    setThoughts(response);
  };

that way, the response always receives undefined but if I update the action sheet to <ActionSheet id={actionSheetMoodThoughtsID} ref={moodActionSheetRef} payload={thoughts} onClose={() => {})> then everything works fine,

Version of the library: 0.8.10. Problem happens on IOS, not tested on Android yet

Is it possible to add resolve or reject promise in this case? https://github.com/ammarahm-ed/react-native-actions-sheet/blob/master/src/sheetmanager.tsx#L144

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.