React-Native views&text🚀

February 12, 2021

views&text

There is no DOM on mobile. Where we previously used <div />, we need to use <View /> and where we used <span />, the component we need here is <Text />.

The View is the fundamental component of React Native for building a user interface. It is a container that supports layout with flexbox, style, touch handling, and accessibility controls. It maps directly to the native view similar to whatever platform on React Native app is running on. It displays the components regardless with UIView, <div>, android.view, etc.

🛑 <Text> and <View> are the most important most-used components built in to React Native <View> is your #1 component if you need to group and structure content ( provide a layout) or if you want to style something like a container, <View>uses Flexbox to organize its children A <View>can hold as many child components as you need and it also works with any kind of child component - it can hold <Text> components, other <View>s (for nested containers/ layouts),** <Image>s, custom components etc.

If you need scrolling, you should consider using a <ScrollView> - you could wrap your <View> with it or replace your <View> (that depends on your layout and styling). Please note, that due to its scrollable nature, Flexbox works a bit differently on a

<Text> is also important. As its name suggests, you can use it for outputting text (of any length). You can also nest other components into a . You can also have nested s inside of a but that comes with certain caveats you should watch out for

👉 <Text> does NOT use Flexbox for organizing its content (i.e. the text or nested components). Instead, text inside of automatically fills a line as you would expect it and wraps into a new line if the text is too long for the available width. You can avoid wrapping by setting the numberOfLines prop, possibly combined with ellipsizeMode.

<Text numberOfLines={1} ellipsizeMode="tail">
  This text will never wrap into a new line, instead it will be cut off like this if it is too lon...
</Text>

🛑 When adding styles to a <Text> (no matter if that happens via inline styles or a StyleSheet object), the styles will be shared with any nested components.

This differs from the behaviour of <View> (or any other component - is the exception). Styles are only applied to the component to which you add them. Styles are never shared with any child component!

The App.js file contains the code for the main React component which gets bootstrapped in the index.js file using the AppRegistry.registerComponent() method:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

This will be considered as the root component of our application.

Open the App.js file, and remove all the existing (slightly advanced) code then replace it with this simple code instead:

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


const App = () => {
  return (
    <View style=>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default App;

Save the file, open your emulator and press R twice in the keyboard.

Up next