React Native allows us to create mobile apps using JavaScript, which is compatible with both Android and iOS platforms.
This framework not only saves development time by enabling us to code once for both platforms, but it also enhances the overall efficiency of the development process.
Moreover, React Native utilizes native components instead of web components, which leads to improved performance and a more seamless user experience.
In this context, it’s important to note that components serve as the basic building blocks of any application.
In this post, we’ll explore fundamental React Native components. Understanding these will provide you with a solid foundation for effectively building your mobile applications.
So, let’s delve into the key components we are going to study.
1. View
2. Text
3. Image
4. TextInput
5. ScrollView
Before we dive into these fundamental components, make sure you have React Native set up on your machine. If you haven’t done so yet, follow the official setup guide here to get started.
1. View in React Native
In React Native, View is a container and most fundamental component. The view is just like a <div> element in HTML.
It can have nested views inside it and can also have 0 to many children of any type.
- Usage of View :
1. View can be used to divide the page and set different styles.
2. It supports touch events and also has many other useful properties.
3. View can be used where you need to wrap content in a container. - What we can’t do in view :
We can’t wrap any text or any other data directly in view.
for ex:
|
1 |
<View>this is view</View> // we can't write text here. |
Let’s take an example of view.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import React from "react"; import { View, Text } from "react-native"; const exampleOfView = () => { return ( <View//==>this view is main/Parent container style={{//you can change style accordingly flexDirection: "column",//you can change this to "row" height: 150, padding: 15 }} > <View style={{ backgroundColor: "green", flex: 0.4 }} /> <View style={{ backgroundColor: "yellow", flex: 0.6 }} /> <Text>Example of view</Text> </View> ); }; export default exampleOfView; |
2. Text in React Native
The Text component is used to display text on the page, wrapping the content appropriately. This component <Text> is similar to the <p /> tag in HTML.
Additionally, we can apply various styles to the text using the style prop, allowing for customization and enhanced visual appeal.
Here’s an example of the Text component:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import React from "react"; import { View, Text } from "react-native"; export default class App extends React.Component { render() { return ( <View> <Text>This is the example of the Text </Text> </View> ); } } |
Output for Text and View:
Text and View Component-
The Text component is allows you to display text on the page whereas View is essentially a container that can hold other components, such as Text, Image, Button, or other Views.
3. Image view in React Native
In React Native, we can display images from various sources, including local disks, network images, static resources, and temporary local files.
This flexibility allows us to effectively showcase images within our app.
The Image component in React Native is similar to the <img /> tag in HTML, making it easy to implement. Furthermore, we can use the BackgroundImage component to set background images on any page.
This component allows us to place any child elements, such as text or additional images, inside it, thereby enhancing the visual design and functionality of our application.
Overall, these image components provide robust options for integrating visuals, contributing significantly to the user experience.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import React from 'react'; import { View, Image, Text, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, // Allow the container to take full height justifyContent: 'center', // Center content vertically alignItems: 'center', // Center content horizontally paddingTop: 40, }, staticSource: { width: 240, height: 220, }, networkSource: { margin: 20, width: 66, height: 58, }, text: { marginTop: 10, fontSize: 16, textAlign: 'center', }, }); const ImageExample = () => { return ( <View style={styles.container}> {/* Static source or image from folder example */} <View style={{ alignItems: 'center' }}> <Image style={styles.staticSource} source={require('./assets/react.png')} // Update the path here /> <Text style={styles.text}>Example of Image View</Text> </View> {/* Image from network or URI example */} <View style={{ alignItems: 'center' }}> <Image style={styles.networkSource} source={{ uri: 'https://example.images/react.png', }} /> </View> </View> ); }; export default ImageExample; |
Output for Image view:
Image view Component-
In React Native, an Image component is used to display images in your app. An Image View typically refers to displaying an image within a View component (or another container).
4. Text Input in React Native
Text input from users is the most important part of any application. In React native we can achieve this by using the Text input component.
This is similar to the <input> tag in HTML.
We can use onChangeText to detect the change in input. There are also other events, such as onSubmitEditing and onFocus that can also be used.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React, { useState } from 'react'; import { StyleSheet, Text, TextInput, View, Button, Alert } from 'react-native'; const InputTextExample = () => { const [text, setText] = useState(''); const handleSubmit = () => { if (text.trim() === '') { Alert.alert('Validation', 'Please enter some text!'); } else { Alert.alert('Submitted', `You entered: ${text}`); setText(''); // Clear input after submission } }; return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="Input you text here!!" placeholderTextColor="white" onChangeText={setText} value={text} returnKeyType="done" // Shows "Done" on keyboard onSubmitEditing={handleSubmit} // Submit on pressing "Done" blurOnSubmit // Dismiss keyboard after submission /> <Button title="Submit" onPress={handleSubmit} /> <Text style={styles.output}> {text} </Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 16, backgroundColor: '#f9f9f9', }, input: { height: 50, backgroundColor: 'gray', fontSize: 18, paddingHorizontal: 10, marginBottom: 16, borderRadius: 5, // Rounded corners borderWidth: 1, borderColor: '#ccc', // Light border color }, output: { padding: 16, fontSize: 20, color: 'red', }, }); export default InputTextExample; |
Output for Text-Input view:
Text Input Component-
In React Native, the TextInput component is used to capture user input as text.
It is a versatile component that can be used for various types of inputs, such as forms, search bars, login screens, and more
5. Scroll View in React Native
As we are all aware, the ScrollView component provides the functionality to scroll through multiple child components and views.
Essentially, the ScrollView establishes scrolling boundaries for the nested children and views on our page.
In React Native, it acts as a container that wraps our nested views, allowing for better organization and usability. Additionally, we can set the scrolling direction to either horizontal or vertical.
By default, the ScrollView scrolls vertically; however, we can easily change this to horizontal by using the horizontal: true prop.
Overall, the ScrollView is a powerful component that enhances the user experience by allowing smooth navigation through content.
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import { Image, ScrollView, Text } from 'react-native'; export default App = () => ( <ScrollView> // add your view or content here. </ScrollView> ); |
One Code for all basic components-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React, { useState } from 'react'; import { View, Text, Image, TextInput, ScrollView, StyleSheet } from 'react-native'; const App = () => { const [inputText, setInputText] = useState(''); return ( <ScrollView style={styles.container}> <View style={styles.section}> <Text style={styles.title}>React Native Components</Text> </View> <View style={styles.section}> <Text style={styles.subtitle}>Text Component</Text> <Text style={styles.textContent}>This is a simple example of displaying text in React Native.</Text> </View> <View style={styles.section}> <Text style={styles.subtitle}>Image Component</Text> <Image style={styles.image} source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} // Example image URL /> </View> <View style={styles.section}> <Text style={styles.subtitle}>TextInput Component</Text> <TextInput style={styles.textInput} value={inputText} onChangeText={(text) => setInputText(text)} placeholder="Type something here" /> <Text style={styles.textContent}>You typed: {inputText}</Text> </View> </ScrollView> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, section: { marginBottom: 20, }, title: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', }, subtitle: { fontSize: 18, marginBottom: 10, color: '#333', }, textContent: { fontSize: 16, color: '#666', }, image: { width: 100, height: 100, resizeMode: 'contain', alignSelf: 'center', }, textInput: { borderWidth: 1, padding: 10, borderRadius: 5, borderColor: '#ccc', marginBottom: 10, }, }); export default App; |
Output for all basic components:
All basic components output-
This React Native app demonstrates the use of basic components: Text, Image, and TextInput.
It displays a title, a description, an image from a URL, and allows users to input text. The app showcases layout with ScrollView.
References
https://reactnative.dev/docs/components-and-apis
Conclusion
In this blog, we explored several basic components in React Native, including View, Text, Image, TextInput, and ScrollView.
Each of these components plays a crucial role in building a user-friendly mobile application.
By understanding how to utilize these components effectively, we can create engaging and responsive user interfaces that enhance the overall user experience.
The code snippets provided throughout the blog illustrate how to implement these components in real-world scenarios, showcasing their versatility and functionality.
You can also check other blogs from here.
Thank you for reading! ❤️
I hope this blog has helped you gain a solid understanding of these essential React Native components and inspired you to leverage their capabilities in your own projects.
Be the first to comment.