In our third video on React Native: The Beginners Guide to React-Native Fundamental Concepts Part 2, continues our discussion of fundamental components. In addition to the design and layout concepts we covered last time, in this presentation we will be looking the most commonly used component, the text component.

Just in case you missed the last video you can find it here or you need a refresher you can find the first video Started Using React Native For Your Mobile Applications here.

Recap

React Native is an open-source mobile application framework brought to us by Facebook, Inc. We can use to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use React’s framework along with native platform capabilities.

React-Native Fundamental Concepts Part 2 focuses on:

  • Text Component

For a full list of components and APIs goto https://reactnative.dev/docs/accessibilityinfo

Text

A Text component in React Native is a component we use for displaying text. For example it supports nesting, styling, and touch handling. Furthermore is it probably one of the most widely useful components next to Views in React Native. In addition the text component also comes with the attribute numberOfLines,  that we can use to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.

Nested text

Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text. In practice, this is very tedious. In React Native, they decided to use a web paradigm for this where you can nest text to achieve the same effect.

Containers

The <Text> element is unique relative to layout: everything inside is no longer using the Flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line.

Limited Style Inheritance

On the web, the usual way to set a font family and size for the entire document is to take advantage of inherited CSS properties like so:

html {
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    color: #141823;
}

In this example, all elements in the document will inherit this font unless they or one of their
parents specifies a new rule. Because of this rule, React Native requires you must wrap all the text nodes inside of a <Text> component. However, React Native still support sthe concept of style inheritance, but it only applies to text subtrees. While the new way is a bit more constrained way to styling text, it will however lead to better apps.

From a developers perspective:

React components are designed with strong isolation in mind. You can drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.

From an implementors perspective:

The implementation of React Native is also simplified. We do not need to have a fontFamily field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only inside of the native Text component and doesn’t leak to other components or the system itself.

React-Native Fundamental Concepts Part 2

Additional Resources

  • React is an open-source, front end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. React can be useful as a base in the development of single-page or mobile applications.
  • Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on Chrome V8 engine and executes JavaScript code outside a web browser.
  • Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. In addition it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
  • Android software development is the process by which applications are created for devices running the Android operating system.
  • Xcode is Apple’s integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS.

This series comes from our mentoring/mastermind classes.  These classes are virtual meetings that focus on how to improve our technical skills and build our businesses.  After all the goals of each member vary.  However, this diversity makes for great discussions and a ton of educational value every time we meet.  We hope you enjoy viewing this series as much as we enjoy creating it.  As always, this may not be all new to you, but we hope it helps you be a better developer.

Other Classes, You Might Consider:

Leave a Reply