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

PeterFred · 2021-08-15T23:52:13Z

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

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

The text was updated successfully, but these errors were encountered:

github-actions · 2021-08-15T23:52:27Z

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 · 2021-08-16T01:11:53Z

Not using expo, vanilla react-native project

sufyan297 · 2021-08-16T14:45:52Z

Same issue happening with me, working fine for Android

PeterFred · 2021-08-16T18:02:14Z

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

achuinard · 2021-08-26T22:00:49Z

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 · 2021-08-26T22:28:57Z

This might be related - callstack/react-native-pager-view#382

HuyCNTT97 · 2021-08-27T13:54:23Z

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

achuinard · 2021-08-27T13:55:36Z

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>.

HuyCNTT97 · 2021-08-27T14:01:06Z

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 · 2021-08-29T09:35:55Z

Hi, Any solutions please? it works fine in Android

PeterFred · 2021-08-31T20:17:41Z

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 · 2021-09-03T15:18:05Z

Hello,

I have the same very, very annoying problem : react-navigation/react-navigation#9902

Have you solved the problem @PeterFred ?

GaylordP · 2021-09-03T16:12:17Z

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 · 2021-09-03T20:37:14Z

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

iqbalhusen · 2021-09-05T15:39:38Z

Facing same issue. Any temporary workaround?

iqbalhusen · 2021-09-05T17:14:18Z

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 · 2021-09-13T10:32:57Z

same issue anyone resolved?

matthieunelmes · 2021-09-21T20:06:14Z

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

TfADrama · 2021-09-26T22:37:31Z

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

satya164 · 2021-10-01T14:22:26Z

callstack/react-native-pager-view#382

PeterFred · 2021-10-12T19:44:08Z

@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

sangolariel · 2021-10-13T09:12:24Z

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 · 2021-10-21T08:57:42Z

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 · 2021-11-09T18:28:00Z

@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 · 2021-11-12T10:04:28Z

any updates?

willmorim · 2021-11-12T23:35:09Z

same problem here :(

Oguntoye · 2021-12-14T03:41:04Z

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 · 2022-01-03T20:17:08Z

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 · 2022-02-28T08:33:39Z

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

jawadkhan653 · 2022-03-03T13:48:53Z

same issue , anyone found this solution ?

ig4ever · 2022-03-07T10:13:42Z

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 · 2022-03-10T23:11:35Z

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 · 2022-03-10T23:29:14Z

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

CCB-cerivera · 2022-03-11T22:30:17Z

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 · 2022-04-13T20:17:09Z

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

Oguntoye · 2022-04-13T20:37:02Z

@rashonwill and @CCB-cerivera .

You can try it as follow

declare a const for the scenes
const renderScene = ({ route }) => { switch (route.key) { case 'first': return ( <View> </View> ); case 'second': return ( <View> </View> ); default: return null; } }
Inside your component return function

<TabView navigationState={{ index, routes }} renderScene={renderScene} onIndexChange={setIndex} initialLayout={{ width: layout.width }} renderTabBar={props => ( <TabBar {...props} renderLabel={({ route, color }) => ( <Text> {route.title} </Text> )} style={{backgroundColor:'transparent'}} indicatorStyle = {{backgroundColor:PRIMARY}} /> )} />

rashonwill · 2022-04-13T20:46:55Z

@Oguntoye unfortunately, that did not resolve things either.

Oguntoye · 2022-04-13T20:48:16Z

@Oguntoye unfortunately, that did not resolve things either.

Can you share your code snippet

rashonwill · 2022-04-13T20:48:54Z

@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 · 2022-04-13T20:50:21Z

rashonwill · 2022-04-13T20:51:20Z

.

Oguntoye · 2022-04-13T20:56:00Z

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

Like so
1.

Inside your return render function

rashonwill · 2022-04-13T21:01:37Z

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 · 2022-04-14T15:48:54Z

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 · 2022-04-19T20:41:45Z

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

Devenom1 · 2022-04-22T00:00:18Z

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 · 2022-04-22T02:19:04Z

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 · 2022-04-22T02:38:26Z

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 · 2022-04-22T14:30:08Z

@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

Adam-Schlichtmann · 2022-05-05T22:45:57Z

I also have been experiencing this using with an App using Expo v44 and decided to downgrade to 2.16.0 as mentioned here.
When I downgraded remote debugging no longer was working so I went searching for another solution.

I am using @react-navigation/material-top-tabs inside of @react-navigation/material-bottom-tabs. I found that switching to @react-navigation/bottom-tabs fixed the issue for me.

Hope this helps someone else out.

andreialecu · 2022-05-23T14:25:22Z

Opened a PR at callstack/react-native-pager-view#567 to fix this.

See callstack/react-native-pager-view#566 for more context.

Stefanats · 2022-05-27T12:50:35Z

windowSoftInputMode="adjustPan"
instead of
windowSoftInputMode="adjustResize";
in your AndroidManifest.xml
worked for me!

jeyjeycodes · 2022-06-18T15:14:47Z

@andreialecu It looks like it is working after upgrading react-native-pager-view!! You are a legend!!!

jeyjeycodes · 2022-06-18T16:13:57Z

@achuinard it looks like this did fix it, however there is another issue now whereby a block appears at the bottom of the screen where the keyboard was

PeterFred added the bug label Aug 15, 2021

github-actions bot added platform:ios repro provided labels Aug 15, 2021

GaylordP mentioned this issue Sep 3, 2021

Keyboard close automatically upon opening with iOS react-navigation/react-navigation#9902

Open

11 tasks

PeterFred mentioned this issue Jan 6, 2022

V3 Keyboard dismisses automatically #1289

Open

5 tasks

andreialecu mentioned this issue May 23, 2022

fix(ios): keyboard auto dismisses callstack/react-native-pager-view#567

Merged

3 tasks

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

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

Comments

PeterFred commented Aug 15, 2021

Current behavior

Expected behavior

Reproduction

Platform

Environment

github-actions bot commented Aug 15, 2021

PeterFred commented Aug 16, 2021

sufyan297 commented Aug 16, 2021

PeterFred commented Aug 16, 2021

achuinard commented Aug 26, 2021

achuinard commented Aug 26, 2021

HuyCNTT97 commented Aug 27, 2021

achuinard commented Aug 27, 2021 via email

HuyCNTT97 commented Aug 27, 2021 • edited Loading

HuyCNTT97 commented Aug 29, 2021 • edited Loading

PeterFred commented Aug 31, 2021

GaylordP commented Sep 3, 2021 • edited Loading

GaylordP commented Sep 3, 2021

PeterFred commented Sep 3, 2021

iqbalhusen commented Sep 5, 2021

iqbalhusen commented Sep 5, 2021 • edited Loading

sangolariel commented Sep 13, 2021 • edited Loading

matthieunelmes commented Sep 21, 2021

TfADrama commented Sep 26, 2021

satya164 commented Oct 1, 2021

PeterFred commented Oct 12, 2021 • edited Loading

sangolariel commented Oct 13, 2021

imranssuetian commented Oct 21, 2021

divyesh-puri commented Nov 9, 2021 • edited Loading

hungvu193 commented Nov 12, 2021

willmorim commented Nov 12, 2021

Oguntoye commented Dec 14, 2021 • edited Loading

Off2Race commented Jan 3, 2022 • edited Loading

zxymgl commented Feb 28, 2022

jawadkhan653 commented Mar 3, 2022

ig4ever commented Mar 7, 2022 • edited Loading

CCB-cerivera commented Mar 10, 2022

jawadkhan653 commented Mar 10, 2022

CCB-cerivera commented Mar 11, 2022

rashonwill commented Apr 13, 2022 • edited Loading

Oguntoye commented Apr 13, 2022

rashonwill commented Apr 13, 2022 • edited Loading

Oguntoye commented Apr 13, 2022

rashonwill commented Apr 13, 2022 • edited Loading

rashonwill commented Apr 13, 2022

rashonwill commented Apr 13, 2022

Oguntoye commented Apr 13, 2022

rashonwill commented Apr 13, 2022

rashonwill commented Apr 14, 2022 • edited Loading

jeyjeycodes commented Apr 19, 2022

Devenom1 commented Apr 22, 2022

jeyjeycodes commented Apr 22, 2022 • edited Loading

jeyjeycodes commented Apr 22, 2022 • edited Loading

CCB-cerivera commented Apr 22, 2022

Adam-Schlichtmann commented May 5, 2022

andreialecu commented May 23, 2022

Stefanats commented May 27, 2022

jeyjeycodes commented Jun 18, 2022 • edited Loading

jeyjeycodes commented Jun 18, 2022

HuyCNTT97 commented Aug 27, 2021 •

edited

Loading

HuyCNTT97 commented Aug 29, 2021 •

edited

Loading

GaylordP commented Sep 3, 2021 •

edited

Loading

iqbalhusen commented Sep 5, 2021 •

edited

Loading

sangolariel commented Sep 13, 2021 •

edited

Loading

PeterFred commented Oct 12, 2021 •

edited

Loading

divyesh-puri commented Nov 9, 2021 •

edited

Loading

Oguntoye commented Dec 14, 2021 •

edited

Loading

Off2Race commented Jan 3, 2022 •

edited

Loading

ig4ever commented Mar 7, 2022 •

edited

Loading

rashonwill commented Apr 13, 2022 •

edited

Loading

rashonwill commented Apr 13, 2022 •

edited

Loading

rashonwill commented Apr 13, 2022 •

edited

Loading

rashonwill commented Apr 14, 2022 •

edited

Loading

jeyjeycodes commented Apr 22, 2022 •

edited

Loading

jeyjeycodes commented Apr 22, 2022 •

edited

Loading

jeyjeycodes commented Jun 18, 2022 •

edited

Loading