Welcome!

Liked my blog?
You would definitely love my newsletters.
Do sign up, it’s FREE.

React Native 101

React Native 101

#reactnative#javascript#tech#mobiledev
January 01 2021

View

Container or Layout component.

View component is like the HTML div tag. The main aim of this component is to act as a container around another components.

You can nest a View inside another, and it is pretty much a general practice to wrap every component with a View component if you need to apply layout styling

In a nutshell:

  1. Use View for styling the Layout of any component
  2. Doesn't support style inheritance
  3. Uses flexbox with default main axis being "column"

Example

import React from "react"; import { View, Text, StyleSheet } from "react-native"; const TestComponent = () => { return ( <View style={styles.container}> <View style={styles.textContainer}> <Text style={styles.text}>Hi, What's up</Text> </View> </View> ); }; export default TestComponent; const styles = StyleSheet.create({ container: { padding: 50, }, textContainer: { backgroundColor: "#000", borderRadius: 50, alignItems: "center", }, text: { color: "#fff", fontSize: 24, }, });

More on: https://reactnative.dev/docs/view

Text

This is probably the second most used component in react-native. It is used to display text pretty much anywhere.

In a nutshell:

  1. Use Text for displaying text anywhere in your app.
  2. Support nesting with style inheritance
import React, { useState } from "react"; import { Text, StyleSheet } from "react-native"; const App = () => { return ( <Text style={styles.baseText}> <Text style={styles.titleText} onPress={onPressTitle}> "Title of the App" </Text> <Text numberOfLines={5}> "Body of the App" </Text> </Text> ); }; const styles = StyleSheet.create({ baseText: { color: "#CCA7B1" }, titleText: { fontSize: 20, color: "#000" } }); export default App;

More on: https://reactnative.dev/docs/text

TextInput

This component used for inputting text into the app via a keyboard.

It comes with a lot of configuration props for auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad and whatnot.

In a nutshell:

  1. Use it to take text input
import React, { useState } from "react"; import { StyleSheet, View, TextInput, Button, Modal } from "react-native"; const GoalInput = ({ addGoalHandler, modalVisible }) => { const [enteredText, setEnteredText] = useState(); const goalChangeHandler = (enteredText) => { setEnteredText(enteredText); }; const addGoalClearBufferHandler = () => { addGoalHandler(enteredText); setEnteredText(""); }; return ( <Modal visible={modalVisible} animationType="slide"> <View style={styles.inputBox}> <TextInput placeholder="Course Goal" placeholderTextColor="#D1D5DB" style={styles.textInput} onChangeText={goalChangeHandler} value={enteredText} /> <Button title="Add" onPress={addGoalClearBufferHandler} /> </View> </Modal> ); }; const styles = StyleSheet.create({ inputBox: { flex: 1, justifyContent: "center", alignItems: "center", }, textInput: { padding: 10, }, }); export default GoalInput;

More on: https://reactnative.dev/docs/textinput

StyleSheet

This API is the go-to way to write styles to style and structure react-native components. A StyleSheet is an abstraction similar to CSS StyleSheet, but it is essentially JavaScript.

The most common use case of StyleSheet is to write styles using the create method.

For eg:

const styles = StyleSheet.create({ container: { padding: 50, }, textContainer: { backgroundColor: "#000", borderRadius: 50, alignItems: "center", }, text: { color: "#fff", fontSize: 24, }, });

"StyleSheet.create()" method takes in an object that further contains objects defining the styles. To use these styles, use the style prop on any component and pass in a particular style object.

import React from "react"; import { View, Text, StyleSheet } from "react-native"; const TestComponent = () => { return ( <View style={styles.container}> <View style={styles.textContainer}> <Text style={styles.text}>Hi, What's up</Text> </View> </View> ); }; export default TestComponent; const styles = StyleSheet.create({ container: { padding: 50, }, textContainer: { backgroundColor: "#000", borderRadius: 50, alignItems: "center", }, text: { color: "#fff", fontSize: 24, }, });

More on: https://cutt.ly/sjoZXtn #Thank you so much for reading

Would love to hear your thoughts!

Discussion