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>{item.text}<TextInput/></Text>

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

Glitch_Znab · Accepted Answer · 2020-09-11 06:25:58Z

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',
  },
});

answered Sep 11, 2020 at 6:25

Glitch_Znab

5864 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vishal Sawai Over a year ago

The TextInput is not rendering with the Text, I think we can't render the TextInput Component inside the Text Component. I think we need to try something else.

Glitch_Znab Over a year ago

can you explain a little more? The snack above is working fine though.

Vishal Sawai Over a year ago

Your solution was working fine on the snack above but when we shift from web to android in the snack - TextInput was not showing on the device. I've figured it out why it was not working as we've not set the width & height for the TextInput.

Vishal Sawai Over a year ago

Really appreciate your efforts @Glitch_Znab

Collectives™ on Stack Overflow

Replace Text Component with TextInput Component - React Native

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related