[Android] First TextInput focus automatically blurred

Description

Hey, I’ve a little problem with the TextInput of React-Native library on Android. When I want to focus an input for the 1st time, he’s automatically blurred. Then when I focus a second time an input, it’s working well. I don’t know if it’s due to the navigation or the TextInput. I’m also a little bit disappointed because it’s working well on IOS, so I really don’t know where I’ve to search for resolve this problem.

React Native version:

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 25.53 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28
      Build Tools: 28.0.3
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:

Steps To Reproduce

You can see here a video of this issue.

Expected Results

I expect the input to be focused directly when I first click on it, and not to be blurred.

Snack, code example, screenshot, or link to a repository:

It’s actually hard for me to provide you some code example because it’s for a professional use, I will do my possible to give access to the repo for some people if someone want to help me to fix this, otherwise here is the component I’m using for my inputs

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

import colors from 'Resources/Colors/colors';
import fonts from 'Resources/Fonts/fonts';

class MyInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: colors.textInputTransparentBackground,
        };
    }

    onFocus() {
        console.log('I focus yea');
        this.setState({ backgroundColor: colors.focusedColor });
    }

    onBlur() {
        console.log('I blur noo');
        this.setState({ backgroundColor: colors.textInputTransparentBackground });
    }

    render() {
        const {
            width = '100%',
            mode = 'outlined',
            textAlign = 'left',
            autoFocus = false,
            keyboardType = 'default',
            name,
            placeholder,
            style = null,
            color = colors.primary,
            placeholderTextColor = '#aaaaaa',
            innerRef,
            testID = null,
            onChangeText,
            onSubmitEditing = function() {
                return;
            },
        } = this.props;
        const { backgroundColor } = this.state;
        let value = this.props.value;
        if (value !== undefined && value !== null) {
            value = value.toString();
        }
        return (
            <View style={{ ...styles.container, width }}>
                <TextInput
                    textAlign={textAlign}
                    autoFocus={autoFocus}
                    keyboardType={keyboardType}
                    placeholder={placeholder}
                    selectTextOnFocus={true}
                    value={value}
                    onFocus={() => this.onFocus()}
                    onBlur={() => this.onBlur()}
                    style={[
                        style,
                        styles.input,
                        mode === 'outlined' ? styles.outlined : styles.flat,
                        {
                            borderColor: color,
                            color: colors.black,
                            backgroundColor: backgroundColor,
                        },
                    ]}
                    placeholderTextColor={placeholderTextColor}
                    ref={innerRef}
                    testID={testID}
                    onChangeText={value => {
                        onChangeText(name, value);
                    }}
                    onSubmitEditing={() => onSubmitEditing()}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    outlined: {
        borderWidth: 1,
        borderRadius: 7,
    },
    flat: {
        borderBottomWidth: 3,
        borderRadius: 5,
    },
    input: {
        padding: 5,
        height: 40,
        ...fonts.mediumBoldItalic,
        flex: 1,
        width: '100%',
    },
});

const Input = React.forwardRef((props, ref) => <MyInput {...props} innerRef={ref} />);

export default Input;

Thanks for the time you will take for helping me. Lucas

[jaytxng]

seeing a similar issue where autofocus prop set to true isn’t focused on load. currently using a workaround with ref hook and setTimeout

[vitexikora]

I’m facing this issue on android with these versions. However, my issue is every time I tap on the input keyboard automatically closes after opening for a second. “react”: “17.0.1”, “react-native”: “0.64.2”,

I had the same problem on RN 0.64. Fixed it by upgrading to 0.66.