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
Top comments (0)