View
Container or Layout component.
View component is like the HTML div tag. The main aim of this component is to act like 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 View component if you need to apply layout styling
In a nut shell:
- Use View for styling the Layout of any component
- Doesn’t support style inheritance
- Uses flex box 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 nut shell:
- 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 nut shell:
- 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 react native component. 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 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 the particular style.
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