Error in Textinput when only Android builds with release

[SEunNGHYun]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

If you enter a value in TextInput, the value is being entered. However, there is an error that is not visible on the screen.

This error does not occur when building in debug mode.

This happens only when you run the app with the real native run-android --variant=release command. It happens when you first run the app, and then it doesn't happen unless you turn it off.

It only happens in android and it doesn't happen in IOS.

React Native version:

System: OS: macOS 10.15.7 CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz Memory: 120.48 MB / 8.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.5.0 - ~/.nvm/versions/node/v13.5.0/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.8 - ~/.nvm/versions/node/v13.5.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.0. - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0 Android SDK: Not Found IDEs: Android Studio: 3.6 AI-192.7142.36.36.6241897 Xcode: 12.1/12A7403 - /usr/bin/xcodebuild Languages: Java: 11.0.7 - /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.2 => 0.63.2 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

import React, { useState } from 'react';
import {
  Text, Keyboard, Alert, TextInput, StyleSheet, View, ScrollView
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import styled from 'styled-components/native';
import Icons from 'react-native-vector-icons/FontAwesome5';
import axios from 'axios';
import { connect } from 'react-redux';
import analytics from '@react-native-firebase/analytics';
import { SvgCss } from 'react-native-svg';
import backAction from '../../utils/backAction';
import {
  wp, height, isIOS,
} from '../../utils/constants';
import RestsType from '../TabNavigations/nearRests/RestsType';
import styles from '../../utils/styles';
import withLoader from '../../components/withLoader';
import config from '../../../config.json';
import svg from '../../assets/svg';

const SearchView = styled.View`
  flex-direction: row;
  align-items : center;
`;

const Button = styled.TouchableOpacity`
  position: absolute;
`;

const style = StyleSheet.create({
  container: {
    paddingTop: 8,
    paddingRight: 16,
    paddingLeft: 16,
    height,
    backgroundColor: 'white'
  },
  textInput: {
    width: wp(80),
    fontSize: 12,
    height: 40,
    backgroundColor: '#efefef',
    lineHeight: 18,
    paddingTop: 8,
    paddingRight: 15.5,
    marginLeft: 16,
    paddingLeft: 12,
    paddingBottom: 10,
    borderRadius: 4
  },
  searchButt: {
    right: 15,
    // top: isIOS ? 9 : 11
  },

});
const Search = ({
  setLoading, navigation, location, jwt
}) => {
  const [term, setTerm] = useState('');
  const [color, setColor] = useState('#cccccc');
  const [searchIcon, setSearchIcon] = useState(true);
  const [cleanButt, setCleanButt] = useState(false);
  const [searchedResult, setSearchedResult] = useState(null);
  const [nomatchText, setNoMatchText] = useState(false);

  const onChangeInput = (text) => {
    setTerm(text);
    if (text.length > 0) {
      setCleanButt(true);
    } else {
      setCleanButt(false);
    }
  };

  backAction(null, 'SearchPage');

  const onSubmit = async () => {
    setSearchedResult(null);
    setLoading(true);
    const { latitude, longitude } = location;
    if (!term) {
      setNoMatchText(true);
      setLoading(false);
      return;
    }
    try {
      let res = null;
      if (jwt) {
        res = await axios.get(`${config.localhost}/rests/search?query=${term}&lat=${latitude}&lng=${longitude}`, { headers: { authorization: jwt } });
      } else {
        res = await axios.get(`${config.localhost}/rests/search?query=${term}&lat=${latitude}&lng=${longitude}`);
      }
      if (res.status === 201) {
        if (res.data.length > 0) {
          setSearchedResult(res.data);
          setNoMatchText(false);
          analytics().logEvent('sikju_action_click_search_exist', {
            click_search_value: term,
          });
        } else {
          setNoMatchText(true);
        }
        Keyboard.dismiss();
        setLoading(false);
      } else {
        setNoMatchText(true);
        Keyboard.dismiss();
        setLoading(false);
        analytics().logEvent('sikju_action_click_search_none', {
          click_search_value: term,
        });
      }
    } catch (err) {
      console.log('err', err);
      Alert.alert('네트워크 에러', '네트워크 연결을 확인해주세요');
    }
  };

  return (
    <SafeAreaView style={style.container}>
      <SearchView style={{ width: wp(90) }}>
        <SvgCss
          onPress={() => navigation.goBack()}
          fill="black"
          xml={svg.arrow_back}
          size={24}
        />
        <TextInput
          style={style.textInput}
          onFocus={() => {
            setNoMatchText(false);
            setSearchIcon(false);
          }}
          returnKeyType="search"
          onChangeText={onChangeInput}
          value={term}
          placeholder="검색어를 입력하세요."
          onSubmitEditing={onSubmit}
          placeholderTextColor={styles.darkGreyColor}
        />
        <Button
          style={[style.searchButt, { top: searchIcon ? 8 : 11 }]}
          onPress={() => {
            if (cleanButt) {
              setTerm('');
            }
          }}
        >
          {searchIcon
            ? <SvgCss xml={svg.search} width={24} height={24} fill="#acacac" />
            : cleanButt && <SvgCss xml={svg.cleanButt} width={18} height={18} fill="#acacac" />}
        </Button>
      </SearchView>
      <View style={{
        backgroundColor: 'white', marginLeft: -16, marginRight: -16, height: isIOS ? '90%' : '85%'
      }}
      >
        {!!searchedResult && searchedResult.length > 0 && <RestsType navigation={navigation} searchedResult={searchedResult} isNear={false} />}
        {nomatchText
          && (
          <Text style={{
            marginLeft: 24, fontSize: 12, color: 'black', marginTop: 16
          }}
          >
            일치하는 검색 결과가 없습니다.
          </Text>
          ) }
      </View>
    </SafeAreaView>
  );
};

const mapStateToProps = (state) => {
  return {
    location: state.region.region,
    rests: state.region.restsInfo,
    jwt: state.jwt.jwt
  };
};

export default connect(mapStateToProps)(withLoader(Search));

Expected Results

Describe what you expected to happen.

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

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. You may provide a screenshot of the application if you think it is relevant to your bug report. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions[bot]]

This issue is stale because it has been open 365 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot