Screen slides all the way up

[babyrusa]

Description

Hello. This is a very odd issue as it only occurs to maybe like 0.01% of the users. I'm unsure if this is related to the Keyboard/KeyboardAvoidingView, react-navigation or react screens, or the react-native-confirmation-code-field library that I'm using but I'm going to post here just in case anyone has encounter.
I attached the video.
https://user-images.githubusercontent.com/57869783/124852243-e3638b80-df58-11eb-9d08-9064bd8887e2.mp4
Let me know what other info You need me to provice

Expected behavior

You can see as soon as the user clicks "Verify phone", it was supposed to show the verification boxes with the keyboard (like any authentication process)

Actual behavior

but in this rare case, the screen slides all the way up and there is no way to navigate to anywhere. It was reported to us by 4 users on iPhone, and they all have the newest ISO 14. I suspect it could either be because of the Keyboard not being dismissed or react navigation is acting up. I should emphasize that we have thousands of users but only heard from 3. It's odd it it does happen and I cannot reproduce this issue no matter how much I test.

Snack or minimal code example

Package versions

"react": "16.13.1",
"react-native": "^0.64.0",
"react-native-screens": "^2.17.1",
"react-native-confirmation-code-field": "^6.5.1",
"@react-navigation/stack": "^5.14.2",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/native": "^5.9.2",

[WoLewicki]

It is almost impossible to say anything about it without a reproduction. Could you post a snippet with the simplified code of the buggy screen, even if it is impossible to recreate it?

[babyrusa]

@WoLewicki Sorry for the delay. I was waiting for Apple to approve a test version so I could let a user who faced this issue test. I adding Keyboard.dismiss() when the component is destroyed but that didn't help so I guess I can cross out the theory of the keyboard being the issue. Here is some code: App has AuthStack. AuthStack includes Sign Up and Sign In pages (where the error occurs).
Within Sign up, the verification code screen (ScreenTwo) is where the issue is.
Within Sign in, the verification code screen (ScreenTwo) is where the issue is
Both screen uses this react-native-confirmation-code-field
(Could it be that I'm moving between screens by using useState instead of routing?)

Let me know if you need me to provide anything else. Thank you very much

App

function App() {
 return (
    <SafeAreaView
      style={{
        flex: 1,...}}>
         //a few context
         <Context.Provider value={{value}}>
          <KeyboardAvoidingView
                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
                style={{flex: 1}}>
                <RootStack.Navigator screenOptions={horizontalAnimation}
                  initialRouteName="Main">
                   {user ? (
                    <RootStack.Screen
                      name="Main"
                      component={Profile}
                      options={{headerShown: false}}
                      initialParams={{notiToastRef: notiToastRef}}
                    />
                  ) : (
                    <RootStack.Screen
                      name="Main"
                      component={AuthStack}
                      options={{headerShown: false}}
                      initialParams={{notiToastRef: notiToastRef}}
                    />
                  )}
                  </RootStack.Navigator>


                   // Out side of RootStack there are ActivityIndicator, a few Toast and a Modal. Not sure if this impacts but I just want to include
                  {isLoading && (
                  <View
                    style={{
                      position: 'absolute',
                      flex: 1,
                      height: '100%',
                      width: '100%',
                      top: 0,
                      left: 0,
                    }}>
                    <View
                      style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                      <ActivityIndicator size="large" color={'green'} />
                      <Text
                        style={colorScheme == 'dark' ? dark.text : light.text}>
                        Loading...
                      </Text>
                    </View>
                  </View>
                )}

               </KeyboardAvoidingView>

              <Toast ref={notiToastRef} />
              <Toast ref={internetToastRef} />
              <Toast ref={errorToastRef} />
              <NoNotiModal
                setModalVisible={setModalVisible}
                modalVisible={modalVisible}
              />
         </Context.Provider> 
    </SafeAreaView>
}

AuthStack

export default function AuthStack(props) {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="Home" component={OnboardingScreens} />
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="SignIn" component={SignIn} />
    </Stack.Navigator>
  );
}

Sign Up

import {CountdownCircleTimer} from 'react-native-countdown-circle-timer';

export default function SignUp(props) {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [step, setStep] = useState(0);

 return (
    <View
      style={{flex: 1}}>
      {step == 0 && <ScreenZero/>}

      {step == 1 && <ScreenOne/>}

      {step == 2 && <ScreenTwo/>}
       ...
    </View>
}

function ScreenOne(props) {
    //just textinput and asks user to enter their phone number
    // when the user setStep(2) it will show ScreenTwo where the error occurs
}

function ScreenTwo(props) {
  const colorScheme = useColorScheme();
  const {... , phone, setCode, setStep,  } = props;

  useEffect(() => {
    return () => {
      Keyboard.dismiss();
    };
  }, []);


return (
    <View style={{flex: 1, margin: 10, justifyContent: 'center'}}>
      <Text
        h3
        style={{
          marginBottom: 20,
          ...(colorScheme == 'dark' ? dark.text : light.text),
        }}>
        Verification Code
      </Text>
      <Text style={colorScheme == 'dark' ? dark.text : light.text}>
        Please enter the verification code we just sent to your phone number{' '}
        {phone}
      </Text>
      <VerificationCode value={code} setValue={setCode} />
      {error != '' && <Text style={{color: 'red'}}>{error}</Text>}

      <View style={{flexDirection: 'row'}}>
        <Button
          type="clear"
          title="Resend Code"
          titleStyle={{color: 'green'}}
          onPress={resend}
          containerStyle={{flex: 1}}
        />

        <Button
          type="solid"
          title="Verify phone"
          onPress={verifyPhone}
          buttonStyle={{backgroundColor: 'green'}}
          containerStyle={{flex: 1}}
        />
      </View>
      {!isTimeUp && (
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            marginTop: 10,
          }}>
          <View>
            <Text style={colorScheme == 'dark' ? dark.text : light.text}>
              Time left
            </Text>
            <CountdownCircleTimer
              onComplete={timeUp}
              isPlaying
              duration={300}
              colors="#008000"
              size={60}
              strokeWidth={6}>
              {
                ({remainingTime, animatedColor}) => (
                  <Text style={colorScheme == 'dark' ? dark.text : light.text}>
                    0{Math.floor(remainingTime / 60)} :{' '}
                    {remainingTime % 60 > 10
                      ? remainingTime % 60
                      : '0' + (remainingTime % 60)}
                  </Text>
                )
              }
            </CountdownCircleTimer>
          </View>
        </View>
      )}
    </View>
  );
}

[babyrusa]

Update. The issue still happens without using react-native-confirmation-code-field

[WoLewicki]

@babyrusa thanks for updating on the issue! Could you group the code you provided into a repository so everyone can work on the exact same code when trying to resolve it? Having only parts of code makes it very hard to draw specific conclusions and reproduce the issue consistently.

[babyrusa]

@wkozyra95 hi. Do you need me to provide the full "react-native" framework or just the components?

[WoLewicki]

I am not sure what you mean by those. The best would be a simple react-native project repository with the structure and components crucial in the context of crash.

[babyrusa]

Ye didn't know if I have to make an actual react-native project that you could install and run on your phone/simulator or just structured the code I gave above into a folder so you know where the mentioned components are

[babyrusa]

I'm making a snack so hopefully that will help

[babyrusa]

@WoLewicki Can you try this https://snack.expo.io/@babyrusa/screen-slide-error ? The issue happened on IOS and on the "Verification Code" screen (like in the short video I attached) .Thank you

[babyrusa]

I continued to remove different elements and asked my user to help me test and it was determined to be because of KeyboardAvoidingView
I'm really unsure why this library would cause this problem. I was googling and Maybe KeyboardAvoidingView should be in the outermost layer, outside of SafeAreaView

[babyrusa]

It's likely to be caused by this bug facebook/react-native#29974 . I was able to reproduce the issue with the iPhone setting in the mentioned issue