React Native Text component Inside TextInput component Issue on iOS: Losing Focus When Typing Text Inside TextInput Component

Question

<Text
  style={{
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
    textAlign: "left",
    textAlignVertical: "center",
    lineHeight: 40,
    width: screenWidth - 32,
  }}
>
  {textwithinput.map((item: any, index: number) => {
    return (
      <Text
        key={index}
        style={{
          color: themeColor.headertextColor,
          fontSize: getFontSize(16),
          // lineHeight: 40,
          fontFamily: fonts.openSansRegular4,
          justifyContent: "center",
          alignItems: "center",
          textAlign: "left",
          textAlignVertical: "center",
          alignSelf: "center",
        }}
      >
        {item.startsWith("TEXT_INPUT_") ? "" : item}
        {item.startsWith("TEXT_INPUT_") && (
          <TouchableOpacity
            style={{
              padding: 0,
              // marginTop: Platform.OS == 'ios' ? 0 :10,
              backgroundColor: "red",
            }}
          >
            <TextInputPaper
              value={inputValue}
              ref={null}
              style={{
                height: 26,
                width: 80,
                padding: 0,
                borderRadius: 5,
                paddingRight: 5,
                paddingLeft: 5,
                backgroundColor: colors.transparent,
                fontSize: getFontSize(16),
                fontFamily: fonts.openSansMedium5,
                color: themeColor.textColor,
                borderWidth: 1,
                borderColor: themeColor.selectedBG,
              }}
              keyboardType="default"
              autoCorrect={false}
              autoCapitalize="none"
              // contentStyle={{
              //   paddingLeft: 5,
              //   height: 26,
              //   paddingRight: 5,
              //   paddingTop: 0,
              //   paddingBottom: 0,
              // }}
              // mode={'outlined'}
              onChangeText={setInputValue}
            />
          </TouchableOpacity>
        )}
      </Text>
    );
  })}
</Text>

I'm encountering a problem with the TextInput component in React Native specifically on iOS devices. Whenever I try to input text inside the TextInput, I notice that the focus is lost after typing just one character. This issue is not present on Android devices where the TextInput behaves as expected.

I've tried investigating potential causes such as keyboard configurations, focus management, or TextInput properties, but I haven't been able to find a solution.

Has anyone else encountered a similar problem? If so, could you please provide insights or potential solutions to resolve this issue? Any help would be greatly appreciated. Thank you.

Answer 1

I have try another way to resolve this issue check below code

    const paragraph='The heart functions as a pump at the centre of the circulatory system. In humans it TEXTINPUT_0 located in the chest cavity, between the lungs, a bit to the left. The heart consists of four chambers surrounded by a very strong muscular wall, the myocardium. The upper chambers, the right and left atria, TEXTINPUT_1 blood entering the heart, and the lower chambers, the right and left ventricles pump the blood out of the heart, via the pulmonary and the systemic circulatory systems. The two systems work as TEXTINPUT_2'
    
    // created component 
    const ParagraphWithInputs = ({ paragraph }) => {
      // Split the paragraph into words
      const words = paragraph.split(' ');
    
      // State to store input values
      const [inputValues, setInputValues] = useState({});
    
      // Function to handle text change in TextInput components
      const handleTextChange = (index, value) => {
        setInputValues({ ...inputValues, [index]: value });
      };
      console.log('sdhgfhdsfgud',inputValues);
      return (
        <View style={{ flexDirection: 'row', flexWrap: 'wrap',width:screenWidth-32,alignSelf:'center' }}>
          {words.map((word, index) => {
            if (word.startsWith('TEXTINPUT_')) {
              // If the word is a TEXTINPUT placeholder, render a TextInput component
              const inputKey = word;
              return (
                <View key={index} style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <TextInput
                    style={{ borderWidth: 1, width: 100,height:26,borderRadius:5,marginEnd:5,padding:0 ,paddingHorizontal:3,}} // Fixed width for TextInput
                    value={inputValues[word] || ''}
                    onChangeText={(text) => handleTextChange(word, text)}
                  />
                </View>
              );
            } else {
              // If the word is regular text, render it within a Text component
              return <Text style={{lineHeight:40}} key={index}>{word} </Text>; // Add space after each word
            }
          })}
        </View>
      );
    };
// use component in your code
  <ParagraphWithInputs paragraph={paragraph} />