React-native-tab-view: TextInput in Tab bug

[stepanchenko26]

Hi 2 all y'all. Sorry for my poor english. I got a trouble with TextInputs inside the Tab. When i press a key on keyboard when i enter the value in field, i got a bug: when i press the button, i got one symbol in field and keyboard got close. If i place TextInput outside the Tab everything works fine.

"expo": "~38.0.8",
"react-native-gesture-handler": "1.6.0",
"react-native-tab-view": "2.15.0",
"react-native-reanimated": "1.9.0"

[github-actions[bot]]

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

• react-native-reanimated
• ``

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

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-gesture-handler (found: 1.6.0, latest: 1.6.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[stepanchenko26]

I had to update versions of packeges, but i still got trouble

[Sanjay1416]

i have "react-native-gesture-handler": "^1.7.0", but having same issue

[Sanjay1416]

i have "react-native-gesture-handler": "^1.7.0", when i type in text input one letter keyboard disappeared

[Sanjay1416]

There is any solution for this problem or not plz tell me

[Sanjay1416]

@satya164 plz tell me so that i can use this in my project i searched online but not found solution

[Sanjay1416]

@satya164 anyone here to help or not

[stepanchenko26]

@satya164 anyone here to help or not

I had migrated to Swiper solution, all working fine

[monk-lee]

same issue +1
anyone have solution?

If put value and onChangeText props in TextInput the keyboard disappears whenever type.
If not put in props, there's no problem.

[hogrid]

Same issue here =(

[nicolak]

Same issue here =(

[monk-lee]

It work for me.

I'm using

• react-native-tab-view: 2.15.2
• react-native-reanimated: 1.13.2
• react-native-gesture-handler: 1.9.0

const [index, setIndex] = useState(0);
const [routes] = useState([
  {key: 'one', title: 'tabOne'},
  {key: 'two', title: 'tabTwo'},
  {key: 'three', title: 'tabThree'},
]);

const [inputA, setInputA] = useState('');
const [inputB, setInputB] = useState('');
const [inputC, setInputC] = useState('');

// ~~~~
// ~~~~

const _renderTabs = ({route}) => {
  switch (route.key) {
    case 'one':
      return (
        <View><TextInput value={inputA} onChangeText={setInputA} /></View>
      )

    case 'two':
      return (
        <View><TextInput value={inputB} onChangeText={setInputB} /></View>
      )

    case 'three':
      return (
        <View><TextInput value={inputC} onChangeText={setInputC} /></View>
      )
  }
});

<TabView
  swipeEnabled={true}
  renderTabBar={() => null}
  navigationState={{index, routes}}
  renderScene={_renderTabs}
  onIndexChange={setIndex}
/>