react-native-actions-sheet

react-native-actions-sheet copied to clipboard

action sheet is popped out of the screen when input is focused. when i change the keyboard, action sheet scroll into view.Does anyone know how to fix this? https://user-images.githubusercontent.com/38945816/192695375-9e8bc285-e173-4419-9370-3b40e122cfe9.mp4

When the input is focused, the sheet moves upward! I've the same issue. any update?

Can you guys drop your implementation so i can replicate the issue?

The same for me - sheet moves upward every time keyboard is triggered

const keyboardBehavior = Platform.select({
  android: false,
  default: true,
});

const DRAWER_MARGIN = 30

return (
 <ActionSheet
      headerAlwaysVisible
      animated
      gestureEnabled={gestureEnabled}
      isModal={false}
      keyboardHandlerEnabled={keyboardBehavior}>
      <KeyboardAvoidingView behavior="height" keyboardVerticalOffset={-DRAWER_MARGIN}>
        <SafeAreaView edges={['right', 'left', 'bottom']}>
          <ScrollView
            keyboardShouldPersistTaps="handled"
            showsVerticalScrollIndicator={false}
            bounces={false}>
            <AutocompleteDropdown />
            <Input />
            <Input />
            <Input />
          </ScrollView>
        </SafeAreaView>
      </KeyboardAvoidingView>
    </ActionSheet>
)

Also happened when AutocompleteDropdown from https://www.npmjs.com/package/react-native-autocomplete-dropdown changes its state

Can you guys drop your implementation so i can replicate the issue?

Try removing KeyboardAvoidingView & SafeAreaView, you don't need those in the Sheet especially KeyboardAvoidingView can cause problems.

In my case, I did it in the following manner:

`<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>`

Try removing KeyboardAvoidingView & SafeAreaView, you don't need those in the Sheet especially KeyboardAvoidingView can cause problems.

Hello! Thanks for tip. It helps for IOS, but not for Android( Drawer still jumps depending on input focus/unfocus

Hi, try v0.8.8. It should fix keyboard issues.

I solved it by two method. one is setting the marginbottom of the container to a negative number.
other way is set keyboardHandlerEnabled false

setp 1 : add hooks

import { useState, useEffect } from 'react';
import { Keyboard } from 'react-native';
import { isIOS } from 'utils/helper';

const useKeyboardOffset = () => {
  const [keyboardOffset, setKeyboardOffset] = useState(0);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      event => {
        if (isIOS) {
          setKeyboardOffset(event.endCoordinates.height);
        }
      },
    );

    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        setKeyboardOffset(0);
      },
    );

    return () => {
      keyboardDidShowListener.remove();

      keyboardDidHideListener.remove();
    };
  }, []);

  return keyboardOffset;
};

export default useKeyboardOffset;

step 2: in your components use hooks

import useKeyboardOffset from 'hooks/useKeyboardOffset';
import { isIOS } from 'utils/helper';

const YourtComponet = () => {

 const keyboardOffset = useKeyboardOffset();
 const marginBottom = isIOS && keyboardOffset ? 90 - keyboardOffset : 0;

// other code

return (

<ActionSheet>
   <Container style={{
       marginBottom: marginBottom
    }}>
   </Container>
</ActionSheet>
)
}

another way is set keyboardHandlerEnabled false to the ActionSheet

<ActionSheet keyboardHandlerEnabled={false}>
...
</ActionSheet>