React Native — Nested Text and Text Input

Photo by Landon Martin on Unsplash

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…