So, This blog is all about getting started with React Native I am planning to write while series about building with react native and expo so this blog is the first part of that series.
In case you don't know what react native is?
Also, If you want to try out React Native, Expo is the best tool, it provides the best react native developer experience.
You can install expo on your pc or use it online in the browser.
Now, let's start with the basics...
What is Hook in react?
Hooks were first introduced by the React community in 2018(I started coding in 2020, what a year to start code), Hooks allow us to use state state and other react features without writing class, with functional components.
What is the 'state'?
well, you might get this question in mind what is a state in React. A state is a built-in object in react that is used to contain data or information about the component. The component's state can change with time and if the state of the component changes react re-renders that Component. We can easily set how the state will change according to the user's response or any other event we set. The state component can store multiple properties.
you can use this.setState() to change the state, and setState()function merges the new and the previous state.
Well Well, I Know state it a little more complicated and make code a little bit bigger... That's why Hooks we introduced in React.. They make our work easy and makes code more readable.
useState Hook allows us to use state easily.
I think that is enough for the theory part and let's open snack in our Browser,
In This example, we would be building a simple app with a Random Background color, In case You are a beginner Here is the boilerplate code for the expo.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
});
we would be using StyleSheet, Text, View, TouchableOpacity in this project so let's have an overview of them.
Text => Well you can't write text directly in React Native,In case if you want to render text in react native you need to wrap it inside
text tag.
have you use p or h1 tags in HTML, we can say Text is a similar component for Text in react native.
View=>The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. The view is Just like
element in Html.
StyleSheet=> A StyleSheet is an abstraction similar to CSS StyleSheets. You can also Inline styling to define the style of an object but Stylesheet make it easy for us to manage the style of whole pages in React Native
TouchableOpacity=>A wrapper for making views respond properly to touches. Well, we can say it is similar to buttons that respond to touches.
now since I have given a brief of these components remember to give import them into your code.
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
also, we would be using the useState hook so.. import if as well
import React , {useState} from 'react';
now we can use our hook here in our function but remember to use it before the return statement in our App function.
const [randomColor, setRandomColor] = useState("rgb(0,0,0)");
now this hook will set the random color to "rgb(0,0,0)" as will keep a watch on it. if it changes react native will re-render it.
well, I am trying to make a random background generator so, I would be using RGB values it would be easy for me to edit string value.
now we will set but little bit styling and views in out code.
return (
<>
<View style={[styles.container,{backgroundColor: randomColor} ]}>
<TouchableOpacity >
<Text style={styles.text}>{randomColor}</Text>
</TouchableOpacity>
</View>
</>
);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text:{
fontSize:30,
backgroundColor:"#0078d7",
paddingVertical:10,
paddingHorizontal:40,
color:"#FFFFFF",
borderRadius:15,
}
});
ahh now our app looks great and but its background does now change.. to make that works we have to make some changes...
well now since we are using Touchable Opacity it has a property onPress .. so we would use onPress to call a function change background will change the background of our app.
In the change background function, we would a random function of javascript to generate a random number.. also the set random color will help us to change the state of our color, and react native will re-render that background of our app..
const changeBackground = () => {
let color = "rgb("+
Math.floor(Math.random() * 256) +
" , " +
Math.floor(Math.random() * 256)+
","+ Math.floor(Math.random() * 256) +")";
setRandomColor(color);
};
In case You want the whole code here is the link Snack in expo
