Keyboard dismisses in react-native-tab-view with useState - iOS

[kyrstencarlson]

Environment

    "react-native-pager-view": "^6.0.1",
    "react-native-tab-view": "^2.16.0",
    "react-native": "^0.67.2"

Description

I am using react-native-tab-view for scrollable tabs that wrap a timer application. Each tab is a different type of timer, count up, down, rounds, etc. The Text Inputs update a useState variable. Each time you enter the input, whether you are typing or deleting, the keyboard is dismissed and focus is lost on the input after one character.

Reproducible Demo

import React from 'react';
import { View, Input } from 'native-base';
import { View, Text} from 'react-native';
import { TabView, SceneMap, TabBar, SceneRendererProps } from 'react-native-tab-view';


const Timer = () => {
    const [minutesValue, setMinutesValue] = React.useState('');
    const [secondsValue, setSecondsValue] = React.useState('');

    const handleChangeTime = (text: string, opts: Params) => {
        // validates input are numbers and total > 0s and sets state
    };

    const Input = () => (
        <View>
            <Text>Timer</Text>
            <Input
                label='minutes'
                keyboardType='numeric'
                value={minutesValue}
                onChangeText={handleChangeTime}
                placeholder='00'
                maxLength={2}
            />
            <Text>Minutes</Text>
            <Input
                label='seconds'
                keyboardType='numeric'
                value={secondsValue}
                onChangeText={handleChangeTime}
                placeholder='00'
                maxLength={2}
            />
            <Text >Seconds</Text>
        </View>
    );

    return (
        <Tabs tabs={[{
            title: 'Timer',
            key: 'timer',
            component: <Input />
        }]} />
    );
};

export default Timer;


const Tabs = (props: TabProps) => {

    const {
        tabs,
        tabWidth = '100%',
        backgroundColor = 'transparent',
        fontWeight = 'regular'
    } = props;
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState(tabs);

    const Routes = (route: string) => {
        const routeIndex = tabs.findIndex(tab => tab.key === route);
        const display = index === routeIndex ? 'flex' : 'none';

        return (
            <View style={[styles.container, { display }]}>
                {tabs.find(tab => tab.key === route)?.component}
            </View>
        );
    };

    const routeMap = tabs.reduce((acc, tab) => {
        acc[tab.key] = () => Routes(tab.key);

        return acc;
    }, {} as { [key: string]: () => JSX.Element });

    const renderScene = SceneMap(routeMap);

    const renderTabBar = (tabBarProps: SceneRendererProps) => (
        <TabBar
            {...tabBarProps}
            navigationState={{
                index,
                routes
            }}
            pressOpacity={0.8}
            style={tabHeaderStyle}
            onTabPress={({ route }) => setIndex(tabs.findIndex(tab => tab.key === route.key))}
        />
    );

    return (
        <TabView
            navigationState={{
                index,
                routes
            }}
            renderTabBar={renderTabBar}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{
                width: deviceWidth
            }}
            sceneContainerStyle={styles.sceneContainer}
        />
    );
};

[troZee]

Were you able to reproduce it inside the pager view ?

[ice-cap0]

Experiencing this issue as well, on both iOS and Android.

TextInput with value={state} and onChangeText={setState}. Keyboard is dismissed after each change.

[KiranVinola-S]

Experiencing this issue as well, on both iOS and Android.

TextInput with value={state} and onChangeText={setState}. Keyboard is dismissed after each change.

did you find any solution?

[cdcharlebois]

also still having this issue on iOS.. Would love a fix

[vinesh4Real]

Hi @kyrstencarlson . Saw you closed this. How did you fix this?