keyboardAvoidingView not working with Actionsheet on ios

[faorte]

Description

Trying your example for keyboardAvoidingView when you are using ActionSheet but it does not work on ios

CodeSandbox/Snack link

No response

Steps to reproduce

1. add example code from your website to project:

`function App() { const [showActionsheet, setShowActionsheet] = React.useState(false) const handleClose = () => setShowActionsheet(!showActionsheet) return ( <>

Open Mastercard Card ending in 2345 Confirm security code Pay $1000 ) }` 2. toggle keyboard. 3. its not moving the actionsheet properly ### gluestack-ui Version 1.1.1 ### Platform - [X] Expo - [ ] React Native CLI - [ ] Next - [ ] Web - [ ] Android - [X] iOS ### Other Platform _No response_ ### Additional Information _No response_

[surajahmed]

@faorte Thanks for reporting this. We'll have a look.

[anup-a]

Hi @surajahmed , any update on this. Facing the same issue. Thanks

[surajahmed]

@anup-a We're working on it. Please eject the components and try replacing ScrollView with View for Actionsheet content and wrap it with KeyboardAvoidingView for now. Please follow https://gluestack.io/ui/docs/home/theme-configuration/customizing-theme/eject-library

[altick]

Is there any estimate of when we can expect this to be fixed? We are also experiencing this issue.

[surajahmed]

We're working on it. Hope to push the fix in the coming release. Thanks for your patience.

[leogaletti]

@surajahmed

The problem apparently is with the Overlay.

It is possible to modify Actionsheet.tsx to listen to the Keyboard keyboardDidShow event and thus add a marginBottom: 200 when opening the keyboard.

File path: node_modules/@gluestack-ui/actionsheet/src/Actionsheet.tsx

An example, how to implement the solution:

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardVisible(true);
    });
    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardVisible(false);
    });

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  return (
<Overlay
          isOpen={visible}
          onRequestClose={handleClose}
          isKeyboardDismissable={isKeyboardDismissable}
          useRNModal={useRNModal}
          // @ts-ignore
          style={{
            ...overlayStyle,
            ...(Platform.OS === 'ios' && { marginBottom: isKeyboardVisible ? 200 : undefined }),
          }}
        >
          <ActionsheetContext.Provider value={contextValue}>
            <StyledActionsheet
              ref={ref}
              style={[StyleSheet.absoluteFill]}
              {...(props as T)}
            >
              {children}
            </StyledActionsheet>
          </ActionsheetContext.Provider>
        </Overlay>
  );

This worked for me. It's not the best solution, but it works!

Sorry for my english.