React Native allow us to create mobile apps with the help of JavaScript which is supportable for android and ios platform. It save development time as we can code once and our app is available for both platform.
React native uses native components instead of web components.Component is the basic building block of any application.
In this post we are going to study some basic component of React Native.
Below are the basic component of react native we are going to study.
1. View
2. Text
3. Image
4. TextInput
5. ScrollView
- View :
In React native View is a container and most fundamental component. 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 use to dividing the page and set different style.
2. It supports touch events and also have 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:
Text is the component to display text on page. It wrap the text of the page.
The component <text> is similar to <p/> tag in html.
We can set any style on text with the help of style prop.
Example of 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> ); } } |
3. Image:
In react native we can show image from resources like local disc, network images,static resources, temporary local files. It use to display image on app page.
Image component is similar to <img/> tag in html.
We can use background image to any page by using BackgoundImage component and put any child inside it like text, image etc.
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 |
import React from 'react'; import { View, Image, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { paddingTop: 40, }, staticSource: { width: 100, height: 80, }, networkSource: { margin: 20, width: 66, height: 58, }, }); const ImageExample = () => { return ( <View style={styles.container}> // static source or image from folder example <Image style={styles.staticSource} source={require('put your directory path here')} /> // image from network or from uri example <Image style={styles.networkSource} source={{ uri: 'https://homepages.cae.wisc.edu/~ece533/images/boat.png', }} /> </View> ); } export default ImageExample; |
5. Text Input:
Taking input from user is most import part of any application. In React native we can achieve this by using Text input component.
This is similar to <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 |
import React, { Component } from 'react'; import { AppRegistry, Text, TextInput, View } from 'react-native'; export default class InputTextExample extends Component { constructor(props) { super(props); this.state = {text: ''}; } render() { return ( <View> <TextInput style={{height: 50,backgroundColor: 'yellow', fontSize: 18}} placeholder="Type here to translate!" onChangeText={(text) => this.setState({text})} /> <Text style={{padding: 16, fontSize: 20,color: 'red'}}> {this.state.text} </Text>* </View> ); } } |
5. Scroll View :
As we all aware from scroll View, it provide functionality to scroll multiple child and view to scroll.
Basically scroll view provides scrolling boundaries to nested child and views on our page.
In react native it behave as a container to wrap our nested view inside it.
We can set scrolling direction as horizontal and vertical. By default scroll View direction is Vertical and we can set it to horizontal by using prop horizontal: true.
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> ); |
Conclusion:
In this post you have learn about some basic component of react native.
Thanks for reading.