How to use Textinput or Input inside Text in React Native with Native Base

Question

I'm trying to develop an application by React Native with Native Base. And I'd like to implement filling in the blank questions like this.

So I tried to use Textinput component of React Native or Input component of Native Base in Text component of Native Base as below. But it doesn't work well on Android. (There is no input part in the rendered sentence.)

How can I use Textinput or Input inside Text?

<View>
  <Text>
    <TextInput width={40}></TextInput>
    <Text>is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.</Text>
  </Text>
</View>

<View>
  <Text>
    <Input width={40}></Input>
    <Text>is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.</Text>
  </Text>
</View>

This is rendered images. There is no input part.

And this is my package.json.

{
  "name": "AwesomeProject",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.9.0",
    "jest-expo": "23.0.0",
    "react-test-renderer": "16.0.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^23.0.4",
    "react": "16.0.0",
    "react-native": "0.50.3"
  }
}

score 2 · Answer 1 · answered Feb 04 '18 at 07:26

I found one solution to my question. But I think this is not straightforward way, so please tell me simpler solution if it's possible.

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

export default class App extends React.Component {
  separateText = (text) => {
    return text.split("").map((_val, _index, _arr) => {
      return (
        <Text key={_index}>{_val}</Text>
      );
    });
  }

  render() {
      return (
        <View style={{marginTop: 100, flexDirection: 'row', flexWrap: 'wrap'}}>
           <TextInput style={{width: 40}}></TextInput>
           {this.separateText(`is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.`)}
        </View>
    );
  }
}

And this is the result.

RESULT

This must be a Lyf Hax – Thanh Chương Aug 12 '21 at 02:26 — Thanh Chương, Aug 12 '21 at 02:26

score 0 · Answer 2 · answered Jan 29 '18 at 09:59

0

TextInput inside a text needs to have a height and width. This will work.

<View style={{marginTop: 100}} >
    <Text>
      <TextInput style={{height: 20, width: 100 }} />
      is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.
    </Text>
</View>

answered Jan 29 '18 at 09:59

Tirth Shah

614
4
7

Thank you for your answer, but it doesn't work well. I will post my code and the rendered image below. If it's possible, please check those and tell me why it doesn't work well. – pon11 Jan 30 '18 at 14:28
I tried your exact code and it is working fluently. If you have used flex somewhere, try giving {flex: 1} to textInput. It should work properly. – Tirth Shah Jan 31 '18 at 08:32
Thank you for checking my code. I gave {flex: 1} to textInput, but it doesn't work well yet. I'm using Expo to test my code, I think it might be the reason why there is a difference between your result and mine. I'm sorry for being too late to share this information. I added my `package.json` to my question. If it's possible, please give me another advice. Thank you. – pon11 Feb 01 '18 at 10:27
I found one solution to my question (I post it as an answer). But it is not straightforward way, so please tell me a simpler way if you find it. – pon11 Feb 04 '18 at 07:29

pon11 · Answer 3 · 2018-02-01T10:04:51.887

I fixed my App.js referring to Tirth Shah's answer as below.

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

export default class App extends React.Component {
  render() {
      return (
        <View style={{marginTop: 100}} >
            <Text>
                 <TextInput style={{height: 20, width: 100 }} />
                 is a knowledge community in which we can ask programming questions and we can answer others’ programming questions.
           </Text>
        </View>
    );
  }
}

But it doesn't work well yet. The result is below.

This is the result.

How to use Textinput or Input inside Text in React Native with Native Base

3 Answers3