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 - Stypng
There are a couple of ways to style your elements in React Native.
You can use the style property to add the styles inpne. However, this is not the best practice because it can be hard to read the code.
In this chapter, we will use the Stylesheet for stypng.
Container Component
In this section, we will simppfy our container component from our previous chapter.
App.js
import React from react ; import { StyleSheet, Text, View } from react-native ; import PresentationalComponent from ./PresentationalComponent export default class App extends React.Component { state = { myState: This is my state } render() { return ( <View> <PresentationalComponent myState = {this.state.myState}/> </View> ); } }
Presentational Component
In the following example, we will import the StyleSheet. At the bottom of the file, we will create our stylesheet and assign it to the styles constant. Note that our styles are in camelCase and we do not use px or % for stypng.
To apply styles to our text, we need to add style = {styles.myText} property to the Text element.
PresentationalComponent.js
import React, { Component } from react import { Text, View, StyleSheet } from react-native const PresentationalComponent = (props) => { return ( <View> <Text style = {styles.myState}> {props.myState} </Text> </View> ) } export default PresentationalComponent const styles = StyleSheet.create ({ myState: { marginTop: 20, textApgn: center , color: blue , fontWeight: bold , fontSize: 20 } })
When we run the app, we will receive the following output.
![React Native Stypng](/react_native/images/reactnative_stypng.jpg)