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:
- Use View for styling the Layout of any component
- Doesn't support style inheritance
- 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:
- Use Text for displaying text anywhere in your app.
- 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:
- 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
Discussion