Replace Text Component with TextInput Component - React Native

Question

I want to display the fill in the blanks type component in the application.

For Example: Hi, my name is _______. Some more fill in _______ blanks.

I've a response something like this: {text: Hi, my name is insert_input. Some more fill in insert_input blanks.} {text: Hi, my name is insert_input. Some more fill in insert_input blanks.}

<Text>{item.text}<TextInput/></Text>

I'm little bit of confused, how we can achieve that.

Answer 1

This should be sufficient. Here is the working code

split the sentence based on the string and add them back to back by keeping text input in between them. Don't add it for the last item.

import * as React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {

  const string =
    "Hi, my name is insert_input. Some more fill in insert_input blanks.";
  const splitString = string.split("insert_input");

  const modifiedString = () => {
    var newStr = "";
    splitString.map((subStr, i) => {
      newStr =  <Text>
                  <Text>{newStr}</Text> 
                  <Text>{subStr}</Text> 
                  {splitString.length - 1 === i ? null : <TextInput placeholder="________________________"/>}
                </Text>;
    });
    console.log(newStr);
    return newStr;
  };

  
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
       {modifiedString()}
      </Text>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});