[v4] | [v2] Keyboard dismiss but bottom sheet is flash showing

[Adhri14]

Bug

I have a bug where when I focus text input, and when it's onblur it seems like the bottom sheet appears quickly and closes also quickly. Please help with this issue

1695958275441722.mp4

Environment info

Library	Version
@gorhom/bottom-sheet	^4.2.1
react-native	0.66.3
react-native-reanimated	2.3.1
react-native-gesture-handler	2.4.1

Steps To Reproduce

1. On Focus in Text Input Android
2. When you close the keyboard using a physical Android button, the bottom sheet flashes

Describe what you expected to happen:

Supposedly, when you turn on blur or press the physical Android button, the bottom sheet will not appear like in the video

Reproducible sample code

import BottomSheet, {
  BottomSheetBackdrop
} from '@gorhom/bottom-sheet';
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import {
  Keyboard,
  Linking,
  StatusBar,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import {
  Button,
  Gap,
  Header,
  TextInput
} from '../../components';
import { LoginPhoneChecker } from '../../redux/action';
import {
  BOLD,
  COLOR_BLACK,
  COLOR_PURPLE,
  COLOR_WHITE,
  EXTRA_BOLD,
  I18n,
  REGULAR,
  getUniqueID
} from '../../utils';
import ModalDialCode from './ModalDialCode';
import callingCodes from './callingCodes';

export default function Login({ navigation }) {
  const dispatch = useDispatch();
  const { reducerLogin, reducerError } = useSelector(state => state);
  const [device_id, setDevice_id] = useState('');
  const [form, setForm] = useState({
    phone: '',
    phone_code: '+62',
    device_id: '',
  });
  const [image, setImage] = useState(require('../../assets/Image/flag/indonesia.png'));

  const [errorValidation, setErrorValidation] = useState({
    phone_code: false,
    phone: false,
    text_error_phone: device_id,
  });

  const [isLoading, setIsLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [dialCode, setDialCode] = useState(callingCodes);
  const [search, setSearch] = useState('');
  const [dataCountries, setDataCountries] = useState(callingCodes);
  const [disable, setDisable] = useState(true);
  const [visible, setVisible] = useState(false);
  const bottomSheetRef = useRef();

  const snapPoints = useMemo(() => [0.1, '40%'], []);

  const handleOpenSheet = useCallback(() => {
    bottomSheetRef.current?.snapToIndex(1);
  }, []);

  const handleCloseSheet = useCallback(() => {
    bottomSheetRef.current?.close();
  }, []);

  // const setNavigationColor = () => {
  //   changeNavigationBarColor('#ffffff', true, true);
  // };

  useEffect(() => {
    getUniqueID()
      .then(res => {
        console.log('device id : ', res);
        setForm({ ...form, device_id: res });
      })
      .catch(err => {
        console.log(err);
      });
    // setNavigationColor();
  }, []);

  const renderModalError = () => {
    return (
      <BottomSheet backdropComponent={(props) => <BottomSheetBackdrop {...props} opacity={0.3} />} ref={bottomSheetRef} snapPoints={snapPoints} index={0} onClose={handleCloseSheet}>
        {reducerError.phone ===
          'Akun kamu terblokir karena gagal login lebih dari 3 kali.'
          ? renderErrorBlock()
          : renderErrorPhone()}
      </BottomSheet>
    );
  };

  const onSubmit = () => {
    dispatch(
      LoginPhoneChecker(navigation, form, setIsLoading, setDisable, handleOpenSheet),
    );
  };

  //   // tambahkan ini
  const renderErrorBlock = () => {
    return (
      <View style={[styles.container, { flex: 1 }]}>
        <Gap height={3} />
        <Text style={styles.titles}>{I18n.t('screen.loginPhoneChecker.bottomSheet.titleErrorBlock')}</Text>
        <Text style={styles.subtitles}>
          {I18n.t('screen.loginPhoneChecker.bottomSheet.subtitleErrorBlock')}
        </Text>
        <Gap height={27} />
        <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}>
          <Button
            isPrimary
            title="Reset PIN"
            onPress={() => {
              toggleModal();
              navigation.navigate('ForgotPin');
            }}
          />
        </View>
      </View>
    );
  };

  return (
    <View style={styles.page}>
      <StatusBar backgroundColor={COLOR_WHITE} barStyle="dark-content" />
      <Header onPress={() => navigation.goBack()} />
      <View style={styles.wrapper}>
        <Text style={styles.text1}>{I18n.t('screen.loginPhoneChecker.title')}</Text>
        <Text style={styles.text2}>
          {I18n.t('screen.loginPhoneChecker.subtitle')}
        </Text>
      </View>
      <View style={styles.wrapperinput}>
        <TextInput
          type="phoneNumber"
          keyboardType="phone-pad"
          value={form.phone}
          placeholder="8123456789"
          onFocus={() => handleCloseSheet()}
          onBlur={() => handleCloseSheet()}
          onChangeText={val => {
            if (val === '') {
              setErrorValidation({
                ...errorValidation,
                phone: true,
                text_error_phone: I18n.t('screen.loginPhoneChecker.input.phone.validation1'),
              });
              setForm({ ...form, phone: val });
              return;
            }
            if (val.substr(0, 1) === '0') {
              setErrorValidation({
                ...errorValidation,
                phone: true,
                text_error_phone: I18n.t('screen.loginPhoneChecker.input.phone.validation2'),
              });
              setForm({ ...form, phone: val });
              return;
            }
            if (val.length < 9) {
              setErrorValidation({
                ...errorValidation,
                phone: true,
                text_error_phone: I18n.t('screen.loginPhoneChecker.input.phone.validation3'),
              });
              setForm({ ...form, phone: val });
              return;
            }
            if (val.length > 12) {
              setErrorValidation({
                ...errorValidation,
                phone: true,
                text_error_phone: I18n.t('screen.loginPhoneChecker.input.phone.validation4'),
              });
              setForm({ ...form, phone: val });
              return;
            }
            // if (val.)
            setErrorValidation({
              ...errorValidation,
              phone: false,
              text_error_phone: '',
            });
            setForm({ ...form, phone: val });
          }}
          placeholderPhone={
            form.phone_code === '' ? I18n.t('screen.loginPhoneChecker.dialCode') : `${form.phone_code}`
          }
          image={image}
          onPress={() => setModalVisible(!modalVisible)}
          isError={errorValidation.phone}
          textError={errorValidation.text_error_phone}
          isErrorCodePhone={errorValidation.phone_code}
        />
        <Gap height={10} />
        <Text style={[styles.text2, { fontSize: 12 }]}>
          {I18n.t('screen.loginPhoneChecker.textInfo')}
        </Text>
      </View>
      <View style={styles.button}>
        <Button
          isPrimary
          title={isLoading ? 'Loading...' : I18n.t('screen.loginPhoneChecker.button')}
          onPress={() => {
            onSubmit();
            setDisable(true);
            setForm({ ...form, phone: '' });
            Keyboard.dismiss();
          }}
          disable={disable}
          isLoading={isLoading ? true : false}
        />
        <Gap height={20} />
        <Text onPress={() => navigation.navigate('CodeInvitation')} style={[styles.text2, { fontSize: 14, color: COLOR_PURPLE }]}>
          {I18n.t('screen.loginPhoneChecker.textRegister')}
        </Text>
      </View>
      {renderModalError()}
      <ModalDialCode search={search} onChangeText={(val) => searchCountry(val)} visible={modalVisible} onRequestClose={() => setModalVisible(!modalVisible)} data={dialCode} onSelect={onSelect} />
    </View>
  );
}

[saqlain110]

following

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[playsoremobile]

issue

[dlehddnjs]

is there any progress?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[nqbzlkfl]

Its happened to me also, any progress?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[fendermany]

same problem

[fendermany]

Looks like it fixed by #690, but for now I am facing with it on the latest versions (4.51, 4.6.1)

I also have tried to:

const containerAnimatedStyle = useAnimatedStyle(
      () => ({
        opacity: 0,
        transform: [
          {
            translateY: animatedPosition.value,
          },
        ],
      }),
      [animatedPosition, animatedIndex]
    );

It solved problem, but ...

[fendermany]

@gorhom

[NguyenVanHoang19]

same problem!! @gorhom

[vorn-dev-ni]

same same any solution?

[vlad-sensi]

i still see the issue on v4.4.6 and also in 5.0.0

[santimone]

Same issue here, i fixed it by changing the android:windowSoftInputMode to "adjustPan" but that causes a lot of other problems

[vorn-dev-ni]

@gorhom
help

[gorhom]

Could someone confirm if this issue presents in v5 alpha 11 ?

Thanks

[vlad-sensi]

I am sorry, this was because I used BottomSheet in Portal instead of BottomSheetModal component. BottomSheetModal didn't work for me at first. At v4.6 issue is fixed

Documentation of BottomSheetModal should mention that minimum index={0} is working for it. If you pass -1 (like in BottomSheet component for example) modal won't display.

[santimone]

Could someone confirm if this issue presents in v5 alpha 11 ?

Thanks

Its fixed for me on v5 alpha 11, thanks for the work <3