In this post I will discuss about the basic React Native tags like,
- View
- Text
- TextInput
- StyleSheet to style our react-native components.
This post is a part of my React Native series.
Before we use these above mentioned React Native tags we need to import them first.
import React from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';
Now lets learn about these tags.
1. View:
View is just like div in react.js where we use it to wrap the parent components in the return statements.
The comparison can be visualised like below,
// React.js 'div'
return(
<div>
<span>Text</span>
</div>
)
// React Native 'View'
return(
<View>
<Text> Text </Text>
</View>
As clearly said in the documentation,
View is the most fundamental component for building UI in a react native mobile app.
Each and every file in a react native must have View wrapped around it's return statement.
2. Text:
can be used to display text a message or any normal text to the frontend screen in react native.
It's analogous(comparable to) many html elements like
- p tag
- h1- h6 tags
- span, div tags which are used to display text messages.
return(
<View>
<Text> My name is Gautham</Text>
</View>
3. TextInput:
It is used to get the input values from the user in React Native.
The same concept of onChange applies here as well.
import React,{useState} from 'react'
const app = () =>{
const [inputValue,setinputValue] = useState('')
return(
<View>
<TextInput onChange={value =>setinputValue(value)} value={inputValue}> My name is Gautham</TextInput>
</View>
}
4. StyleSheet:
We can add styles in our react native app by using StyleSheet .
We create a variable and input all our CSS properties we need here.
It must be made in an object format so that each react native tags can have different styles when we pass the object's keys as props in style={}
The very big advantage for frontend developers who are good at CSS is, there is no need to learn any new properties to style React Native tags and we can use regular CSS properties but the only difference is we must use camelCase .
Example,
- font-size must be used as fontSize.
- background-color --> backgroundColor.
return(
<View>
<Text style = {styles.textstyle}>
</Text>
</View>
)
const styles = StyleSheet.create({
textstyle: {
color: 'red',
fontSize : '30px'
},
});
The text message will be displayed in red color with a font-size of 30px.
And these are the basic React Native Tags you need to know as a beginner.
Play around with the styleSheet concepts with your own CSS properties.
You can refer the react-native docs as it explains these concepts really well and I learnt from it.
In my next post I will be covering some more react native tags like,
- TouchableOpacity
- Button
- Image
- Flatlist and more.
Stay tuned.
Thank you for reading!!
Check out my portfolio: Gautham's portfolio
Check out my blog: coding-magnified.tech
If you want to appreciate my or support me, you can buy me a coffee with the link below,
Top comments (0)