React Native — Nested Text and Text Input

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Nested Text

We can add nested Text components.

For instance, we can write:

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

export default function App() {
  return (
    <View
      style={{
        flexDirection: "row",
        height: 100,
        padding: 20
      }}
    >
      <Text style={styles.baseText}>
        I am bold
      <Text style={styles.innerText}> and red</Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold'
  },
  innerText: {
    color: 'red'
  }
});

We add the Text component within another Text component.

Then we styled them with the styles created with the StyleSheet.create method.

Containers

Everything inside the Text element isn’t using flexbox layout.

They’re using text layout.

For example, if we have:

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

export default function App() {
  return (
    <Text>
      <Text>First part and </Text>
      <Text>second part</Text>
    </Text>
  );
}

then we see everything inline.

If we have:

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

export default function App() {
  return (
    <View>
      <Text>First part and </Text>
      <Text>second part</Text>
    </View>
  );
}

then we see:

First part and
second part

Text must be wrapped in a Text component.

The Text component lets us inherit styles.

For example, if we have:

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

export default function App() {
  return (
    <View>
      <Text style={{ fontWeight: 'bold' }}>
        I am bold
        <Text style={{ color: 'red' }}>and red</Text>
      </Text>
    </View>
  );
}

Then we have all the text inside the outer Text component being bold.

And the ‘and red’ text is red and bold.

TextInput

We can add text input into our app with the TextInput component.

For example, we can write:

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

export default function App() {
  const [value, onChangeText] = React.useState('hello world');

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
      />
      <Text>{value}</Text>
    </View>
  );
}

to add an text input with the TextInput component.

We listen to input value changes by passing in a function to the onChangeText prop.

Then the value ‘s value will have the latest inputted text.

We can the max number of characters in the input with the maxLength prop:

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

export default function App() {
  const [value, onChangeText] = React.useState('hello world');

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
        editable
        maxLength={40}
      />
      <Text>{value}</Text>
    </View>
  );
}

Now we can only enter 40 characters into the input max.

Conclusion

We can add nested Text components.

Also, we can add text inputs with the TextInput component.