React Native Tutorial
Core Concepts
Components and APIs
React Native Useful Resources
Selected Reading
Core Concepts
- React Native - Running Android
- React Native - Running IOS
- React Native - Router
- React Native - Debugging
- React Native - Animations
- React Native - Buttons
- React Native - HTTP
- React Native - Images
- React Native - ScrollView
- React Native - Text Input
- React Native - ListView
- React Native - Flexbox
- React Native - Styling
- React Native - Props
- React Native - State
- React Native - App
- React Native - Environment Setup
- React Native - Overview
Components and APIs
- React Native - AsyncStorage
- React Native - Geolocation
- React Native - Alert
- React Native - Text
- React Native - Switch
- React Native - Status Bar
- React Native - Picker
- React Native - ActivityIndicator
- React Native - Modal
- React Native - WebView
- React Native - View
React Native Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
React Native - Text
React Native - Text
In this chapter, we will talk about Text component in React Native.
This component can be nested and it can inherit properties from parent to child. This can be useful in many ways. We will show you example of capitapzing the first letter, stypng words or parts of the text, etc.
Step 1: Create File
The file we are going to create is text_example.js
Step 2: App.js
In this step, we will just create a simple container.
App.js
import React, { Component } from react import TextExample from ./text_example.js const App = () => { return ( <TextExample/> ) } export default App
Step 3: Text
In this step, we will use the inheritance pattern. styles.text will be appped to all Text components.
You can also notice how we set other stypng properties to some parts of the text. It is important to know that all child elements have parent styles passed to them.
text_example.js
import React, { Component } from react ; import { View, Text, Image, StyleSheet } from react-native const TextExample = () => { return ( <View style = {styles.container}> <Text style = {styles.text}> <Text style = {styles.capitalLetter}> L </Text> <Text> orem ipsum dolor sit amet, sed do eiusmod. </Text> <Text> Ut enim ad <Text style = {styles.wordBold}>minim </Text> veniam, quis apquip ex ea commodo consequat. </Text> <Text style = {styles.itapcText}> Duis aute irure dolor in reprehenderit in voluptate vept esse cillum. </Text> <Text style = {styles.textShadow}> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt molpt anim id est laborum. </Text> </Text> </View> ) } export default TextExample const styles = StyleSheet.create ({ container: { apgnItems: center , marginTop: 100, padding: 20 }, text: { color: #41cdf4 , }, capitalLetter: { color: red , fontSize: 20 }, wordBold: { fontWeight: bold , color: black }, itapcText: { color: #37859b , fontStyle: itapc }, textShadow: { textShadowColor: red , textShadowOffset: { width: 2, height: 2 }, textShadowRadius : 5 } })
You will receive the following output −
![React Native Text](/react_native/images/react_native_text.jpg)