[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?

[jawadkhan653]

same issue , anyone found this solution ?

[ig4ever]

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

@zxymgl @jawadkhan653 i think the loop render cause these problems, i found the solution by adding React.memo inside the Tab Component to prevent the loop render

[CCB-cerivera]

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

@zxymgl @jawadkhan653 i think the loop render cause these problems, i found the solution by adding React.memo inside the Tab Component to prevent the loop render

Don´t working, other solution ?

[jawadkhan653]

Downgrading to react-native-tab-view to v2.16.0 worked for me !!!

[CCB-cerivera]

Downgrading to react-native-tab-view to v2.16.0 worked for me !!!

Downgrading to react-native-tab-view to v2.16.0 worked for me !!!

Correct, I tried the following versions and it doesn't work, only from version 2.16.0 backwards.

[rashonwill]

Having this issue as well. Any other solutions? Downgrading did not resolve.

[Oguntoye]

@rashonwill and @CCB-cerivera .

You can try it as follow

1. declare a const for the scenes ` const renderScene = ({ route }) => { switch (route.key) { case 'first': return (

         );
     case 'second':
       return (
             <View> </View>  
       );
     default:
       return null;
   }

   }`

2. Inside your component return function

   `<TabView navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={{ width: layout.width }} renderTabBar={props => ( <TabBar {...props} renderLabel={({ route, color }) => (

   {route.title}

                       )}
                       style={{backgroundColor:'transparent'}}
                       indicatorStyle = {{backgroundColor:PRIMARY}}
                   />
               )}
           />`

[rashonwill]

@Oguntoye unfortunately, that did not resolve things either.

[Oguntoye]

@Oguntoye unfortunately, that did not resolve things either.

Can you share your code snippet

[rashonwill]

@Oguntoye unfortunately, that did not resolve things either.

Can you share your code snippet

const renderScene = ({route}) => { switch (route.key) { case 'synopsis' : return ; case 'comments': return ; case 'recommended': return ; default: return null; } }

const [index, setIndex] = React.useState(0); const [routes] = React.useState([ { key: 'synopsis', title: 'Synopsis' }, { key: 'comments', title: 'Comments' }, { key: 'recommended', title: 'Recommeded' }, ]);

const renderTabBar = (props) => ( <TabBar {...props} indicatorStyle={{ backgroundColor: '#fdfbf9', color: '#fdfbf9' }} style={{ backgroundColor: '#171717' }} renderLabel={({ route, focused, color }) => ( <Text style={{ color, margin: 5, fontSize: 15, fontFamily: 'Teko_700Bold', }}> {route.title} )} /> );

[rashonwill]

[rashonwill]

.

[Oguntoye]

@rashonwill .Instead of having your synopsis component in a different file.. define it inside Avoid having the component in separate files

Like so

1. 

2. 

3. Inside your return render function

[rashonwill]

Oh the functions are all in the same js file, but trying to do it this way causes other errors with navigation route params, etc for me

[rashonwill]

I was able to resolve the issue, by removing the Render Scenes to their own separate js file and using React.memo to wrap the function upon export to avoid the re-rendering as per documentation.

https://github.com/satya164/react-native-tab-view

[jeyjeycodes]

PING!! I am having the exact same issue! Any progress

[Devenom1]

PING!! I am having the exact same issue! Any progress

@jeylanicodes Same here. Is it only on iOS 15.4 and 15.4.1?

[jeyjeycodes]

PING!! I am having the exact same issue! Any progress

@jeylanicodes Same here. Is it only on iOS 15.4 and 15.4.1?

@Devenom1. I am not to sure but putting it back to version 2.16.0 works but if you are using react-navigations and material-top-tabs V6 you will get type errors which is soooo annoying. The whole is built on V6 and downgrading the whole of react navigation to V5 is A HEADACHE!!

@rashonwill Could you give an example of your code. Because this does not work for me.

@CCB-cerivera and @jawadkhan653 how did you guys resolve the type issues if you had any!

THIS NEEDS TO BE PRIORITISED! Who can I contact to actually attempt to fix this at a High level urgency??

[jeyjeycodes]

I stand corrected. You MAY be able to just downgrade react-native-tab-view to 2.16.0 and react native navigation top tabs to V5

[CCB-cerivera]

@jeylanicodes

Hi!, I tried the following versions and it doesn't work, only from version 2.16.0 backwards it worked for me.

The issue is still open so the component developer has not fixed it.

I suppose that using the latest version of the component and the latest version of react and expo, maybe it will work, however, many like me do not have all the updates fully installed.

The only thing that works at the moment is to downgrade to version 2.16.0