setPage blurs keyboard from TextInput autofocus:True on ios

[kaszubab]

Bug

SetPage immediately closes keyboard after switching to the view when autofocus is set to True on TextInput. This happens only after going to the view for the first time.

I found some issues regarding this happening on Android devices, however none of them described this behavoiur on ios device.

https://user-images.githubusercontent.com/49063746/218099900-59f28c36-b476-4f87-8b08-93f219d91116.mov

Environment

react-native info

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 98.20 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /var/folders/ym/mmr4x1nx33g4fp3gvwkzn40m0000gn/T/yarn--1676033792606-0.9378847980286762/node
    Yarn: 1.22.19 - /var/folders/ym/mmr4x1nx33g4fp3gvwkzn40m0000gn/T/yarn--1676033792606-0.9378847980286762/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
    Watchman: 2022.10.31.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0 
    react-native: 0.69.5 => 0.69.5 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

  "react": "18.0.0",
  "react-native": "0.69.5",
  "react-native-pager-view": "5.4.25"
   DeviceOS: iOS 15.5

Description

1. Create a sequence of views embedded into react-native-pager-view
2. Insert TextInput component inside second view with prop autofocus:true
3. Navigate to the second view using setPage
4. Keyboard flickers - opens for a moment and then immediately closes

Describe what you expected to happen:

Keyboard should stay open without flickering.

Reproducible Demo

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useRef} from 'react';
import {Button, TextInput, View, StyleSheet} from 'react-native';
import PagerView from 'react-native-pager-view';

const Home = ({goToPage}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <Button
        title="Go to details"
        onPress={() => {
          goToPage(1);
        }}
      />
    </View>
  );
};

const Details = ({goToPage}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <Button
        title="Go to details"
        onPress={() => {
          goToPage(0);
        }}
      />
      <TextInput
        style={{backgroundColor: 'lime', height: 40}}
        autoFocus={true}
      />
    </View>
  );
};

const MyPager = () => {
  const ref = useRef(null);

  return (
    <PagerView style={styles.pagerView} initialPage={0} ref={ref}>
      <Home key="0" goToPage={page => ref.current?.setPage(page)} />
      <Details key="1" goToPage={page => ref.current?.setPage(page)} />
    </PagerView>
  );
};

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
});

export default MyPager;

Expo snack link

[BitPhinix]

Experiencing the same issue

[corasan]

This is suddenly happening to me on Android, it started happening just today and yesterday was working fine, iOS still works as expected.