White Bar at bottom after keyboard dismissal and sheet disappears when TextInput + autofocus is used about react-native-actions-sheet HOT 4 CLOSED

Also I am pushing a point release to fix a few issues you listed here. Thank you very much for using this library!

from react-native-actions-sheet.

I solved it by also give it a custom containerStyle.
But I have a new problem:

When I have a TextInput inside the custom component that pops up and give it the prop autofocus, when I open the modal the keyboard snaps up and then the modal completely disappears, but the keyboard stays open (ios only).

When I close the keyboard and open the modal again, everything works as expected. So the first opening of the modal gives me this strange behavior.

What can I do about it? The code for the component that does all this is in my post above (pastebin).

Ty so much again for this awesome library!

EDIT: Also this is solved. When I put the prop gestureEnabled={false} on my action sheet and headerAlwaysVisible it works as expected.

Except: Ofc I can't now close it with a drag down. That's a bummer.

Also a very minor problem I have is that something is faulty with type declaration because I have this error / warning in vsc (my project uses typescript):

I don't know is it because the types are not complete or am I using the whole thing incorrect? Thx again the third time!

from react-native-actions-sheet.

Hi,

Thank you for opening the issue, I will look into it and report back ASAP.

The link you gave for the code is not working anymore, I think it has expired?

Edit: You were right about the .ts definations, they are incorrect and I will fix them.

You should use the prop initialOffsetFromBottom and set its value to 1 then I think your problem will not take place, since you are using a text input inside it and gestures will work too.

Also I noticed that the onOpen event is not firing which I will fix too. What you can do to handle the textInputs is to listen to the onOpen function. So what you do is hide the textInput when the actionSheet opens, and show it after a minor delay, like 300 or 500ms.

// IN YOUR COMPONENT
const [textInput,setTextInput] = useState(false);


const _onClose = () => {
      setTextInput(false);         
}


return  <ActionSheet
        initialOffsetFromBottom={1}
        ref={ref => (actionSheet = ref)}
        bounceOnOpen={true}
        bounciness={8}
        gestureEnabled={true}
        onClose={_onClose}
        onOpen={() => {
            setTimeout(() => {
              setTextInput(true);
            },500)
        }}
        defaultOverlayOpacity={0.3}>
<View>
{
                    textInput?     <TextInput
                    style={{
                      width: '100%',
                      minHeight: 50,
                      borderRadius: 5,
                      borderWidth: 1,
                      borderColor: '#f0f0f0',
                      marginBottom: 15,
                      paddingHorizontal: 10,
                    }}
                    autoFocus={true}
                    multiline={true}
                    placeholder="Write your text here"
                  /> : null
                  }
</View>
</ActionSheet>

This is only in case your keyboard does not show up at all on opening.

I have tested this on iOS and its working fine on keyboard open.

The white margin you are seeing is the footer. You need to use the footerStyle and set its background to your backgroundColor or the containerStyle prop. Since you are setting the backgroundColor of your customComponent, the top and bottom is white as I can see.

from react-native-actions-sheet.

I am closing this issue for now, if you face any problem, you can open it again or create a new one.

from react-native-actions-sheet.