Bad sizing calculations when navigation to a screen with a TextInput with autoFocus enabled

[danieljvdm]

When using KeyboardAvoidingView with a textinput that has autoFocus set to true, the sizing calculations are bad when pushing a screen. Using React Native's version works fine. First video is the component from this library, second is from RN.

My component looks like:

 <SafeAreaView
      className="flex-1"
      edges={['bottom']}
    >
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        keyboardVerticalOffset={headerHeight}
        className="flex-1 px-4"
      >
      ...
            <Input
              variant="rounded"
              size="xl"
            >
              <InputField
                autoFocus
                keyboardType="email-address"
                autoCapitalize="none"
                placeholder="kenji@lopez.alt"
                type="text"
                value={emailValue}
                onChangeText={setEmailValue}
              />
            </Input>
      ....
      </KeyboardAvoidingView>
    </SafeAreaView>

notworking.mp4

working.MP4

[kirillzyusko]

@danieljvdm is it possible to provide a minimal reproduction example? 👀 In my example project it's not reproducible...

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-01-15.at.20.15.05.mp4

[tibbe]

Here's a complete repro using react-navigation that shows that if you use autoFocus={true} the calculation is off but if you use autoFocus={false} (and manually open the keyboard by selecting the field) the calculation is correct: https://github.com/tibbe/AutoFocusRepro (latest commit, as of this comment b3ccec351fb7b6b0d96d91a77e126d7ea4df61ef)

autoFocus={true}:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-03-24.at.16.38.18.mp4

autoFocus={false}:

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-03-24.at.16.38.41.mp4

[kirillzyusko]

Thank you @tibbe

Looking into it! 👀 (it's reproducible on my machine)

[kirillzyusko]

The problem here is that onLayout get triggered two times (with 852 and 722 values). The correct value is 722 (because view doesn't occupy all screen, the header above takes ~80px).

The problem is that when onLayout with 722 gets triggered, then keyboard is already shown and we don't take this event into consideration, because that event may come from the fact, that layout of the view was changed because of KeyboardAvoidingView transformation 🤔

[kirillzyusko]

@tibbe may I kindly ask you to check if #880 fixes the problem and doesn't introduce new issues?

[tibbe]

@tibbe may I kindly ask you to check if #880 fixes the problem and doesn't introduce new issues?

Sorry for the radio silence. Have been dealing with some spam attacks lately that has taken up my attention at work. Will test this soonish.