[V3] [iOS] TextInput dismisses keyboard automatically on focus

[PeterFred]

Current behavior

After upgrading from v2.15.2 -> x3.1.1 TextInput box in iOS automatically dismisses the keyboard when focused. (Clicking in the TextInput box shows the keyboard only momentarily, before being automatically dismissed)

Works fine in Android, and previous version.

I created a quick snack, but does not seem to be an issue there. (Perhaps as this is a native project and snack uses expo)

Code to reproduce:

import {TextInput, useWindowDimensions, View} from 'react-native';
import {SceneMap, TabView} from 'react-native-tab-view';

const ListScreen = () => {
  const [text, onChangeText] = useState('Input Box text');

  const FirstRoute = () => (
    <View style={{flex: 1, backgroundColor: '#ff4081'}}>
      <TextInput
        style={{
          margin: 12,
          borderWidth: 1,
          padding: 10,
        }}
        onChangeText={onChangeText}
        value={text}
      />
    </View>
  );

  const SecondRoute = () => (
    <View style={{flex: 1, backgroundColor: '#673ab7'}} />
  );

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'First'},
    {key: 'second', title: 'Second'},
  ]);

  const layout = useWindowDimensions();

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{width: layout.width}}
    />
  );
};

export default ListScreen;

Expected behavior

Keyboard should display when using a TextInput

Reproduction

https://snack.expo.dev/AVquvlCsS

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.0
react-native	0.64.2
expo	N/A
node	16.3.0
npm or yarn	yarn

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[PeterFred]

Not using expo, vanilla react-native project

[sufyan297]

Same issue happening with me, working fine for Android

[PeterFred]

First noticed with react-native-paper Searchbar, but narrowed it down to this issue

[achuinard]

It looks like the tab-view is re-calling renderScene when the TextInput is clicked. I have no idea why. This is a killer for me too.

[achuinard]

This might be related - https://github.com/callstack/react-native-pager-view/issues/382

[HuyCNTT97]

Hi, i have same issue, have anyone solved the problem? is the problem from the native-tab-view?

[achuinard]

Don’t wrap your whole pager in a KeyboardAvoidingView.

On Fri, Aug 27, 2021 at 9:54 AM HuyCNTT97 @.***> wrote:

Hi, i have same issue, have anyone solved the problem? is the problem from the native-tab-view?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/satya164/react-native-tab-view/issues/1244#issuecomment-907221006, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADSVDYZBNM5KIRHVLRGQFLT66KJXANCNFSM5CGVPTWA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[HuyCNTT97]

Don’t wrap your whole pager in a KeyboardAvoidingView. … On Fri, Aug 27, 2021 at 9:54 AM HuyCNTT97 @.***> wrote: Hi, i have same issue, have anyone solved the problem? is the problem from the native-tab-view? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1244 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADSVDYZBNM5KIRHVLRGQFLT66KJXANCNFSM5CGVPTWA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Thanks for your reply. I don't use paperview, i create one Scene following code: <View> <Input > </Input> </View>

[HuyCNTT97]

Hi, Any solutions please? it works fine in Android

[PeterFred]

Not as yet, removing KeyboardAvoidingView from our app also did not resolve this. As this package upgrade is a dependency for the upgrade to RN Navigation v6 it is holding up our upgrade for Nav. https://reactnavigation.org/docs/upgrading-from-5.x/#minimum-requirements

[GaylordP]

Hello,

I have the same very, very annoying problem : https://github.com/react-navigation/react-navigation/issues/9902

Have you solved the problem @PeterFred ?

[GaylordP]

In addition, I think that it is the use of two components simultaneously that is problematic, even with basic examples :

• https://snack.expo.dev/FsiQ3p0zo : not work on iOS
• https://snack.expo.dev/fydHSeOJi : work on iOS
• https://snack.expo.dev/ydn-i4P8G : work on iOS

In the first example I am using react-navigation/material-top-tabs AND react-navigation/material-bottom-tabs. In the second, I only use react-navigation/material-top-tabs In the third, I only use react-navigation/material-bottom-tabs

[PeterFred]

@GaylordP unfortunately not, we have delayed upgrading this package and navigation for now.

[iqbalhusen]

Facing same issue. Any temporary workaround?

[iqbalhusen]

A very ugly temporary workaround:

let t;

const Component = () => {
  const textInputRef = useRef();

  return (
    <TextInput
      value={'test'}
      ref={textInputRef}
      onFocus={() => {
        t = +new Date(); // get unix-timestamp in milliseconds
      }}
      onBlur={() => {
        if (+new Date() - t < 500) {
          textInputRef.current.focus();
        }
      }}
    />
  );
};

[sangolariel]

same issue anyone resolved?

[matthieunelmes]

Same problem here, the only way I could solve it was to downgrade to 2.16.0

[TfADrama]

I have the same problem on version 4.2.0, but not in another project that uses the same version... weird.

[satya164]

https://github.com/callstack/react-native-pager-view/issues/382

[PeterFred]

@satya164 https://github.com/callstack/react-native-pager-view/issues/382 https://github.com/callstack/react-native-pager-view/pull/462 Have upgraded react-native-pager-view to 5.4.7 but still persists

[sangolariel]

Hi, It seems still an issue now. you need to downgrade to "react-native-tab-view": "^2.15.2". It will work but it is not the best solution. Hope the new release will resolve it.

[imranssuetian]

Don’t wrap your whole pager in a KeyboardAvoidingView. … On Fri, Aug 27, 2021 at 9:54 AM HuyCNTT97 @.***> wrote: Hi, i have same issue, have anyone solved the problem? is the problem from the native-tab-view? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1244 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADSVDYZBNM5KIRHVLRGQFLT66KJXANCNFSM5CGVPTWA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Perfect answer

[divyesh-puri]

@satya164 callstack/react-native-pager-view#382 callstack/react-native-pager-view#462 Have upgraded react-native-pager-view to 5.4.7 but still persists

@satya164 ping

[hungvu193]

any updates?

[willmorim]

same problem here :(

[gamingumar]

This resolves the issue, there is also pending PR for it. But it adds padding after the keyboard appears. Downgrading to react-native-tab-view to v2.16.0 seems to be best option for now.

react-native-pager-view

[Oguntoye]

This resolves the issue, there is also pending PR for it. But it adds padding after the keyboard appears. Downgrading to react-native-tab-view to v2.16.0 seems to be best option for now.

react-native-pager-view

Downgraded to 2.16.0.. The TextInput still loosing focus

[Off2Race]

Hi, @gamingumar – I tried the react-native-pager-view change you referenced but it caused other issues with scene rendering when I switched tabs. The keyboard issue was gone (for me) but the side effects were unfortunately worse.

[zxymgl]

Hi, i have same issue, have anyone solved the problem? is the problem from the native-tab-view?