Begin with the react-native project

Hi guys!!! Welcome back for my article series on React Native for Beginners. In the previous article named Format and Files in the first react native project, we looked at what are the files we have in our first react native project and what are the purpose of them. Let’s start to customize our react native app.

As we talked in the previous article for the moment the most important file is App.js because it is the file responsible for rendering what we saw on the screen. This is the root file of the project. This is the file that we are going to edit to change what we are seeing on the mobile screen.

The App.js file in the project we previously created looks like follows.

import { StyleSheet, Text, View } from 'react-native';export default function App() {   return (      <View style={styles.container}>         <Text>Open up App.js to start working on your app!</Text>      </View>   );}const styles = StyleSheet.create({   container: {      flex: 1,      backgroundColor: '#fff',      alignItems: 'center',      justifyContent: 'center',   },});
Current view of the app

Here we do import React (import React from ‘react’;) just as we do in the react web app because we are using JSX which is special JavaScript syntaxes which look likes Html but in the end it’s just JavaScript. I do expect that you now how React generally works.

Then we have another import here. That’s the react-native import.

These are the special components and features provided by react-native. View and Text are compound components react native platform widgets. StyleSheet is an extra feature provided by react-native that helps to style. There are more components provided by react-native. You can know about them by referring to react-native documentation ( https://reactnative.dev/docs/components-and-apis)

Then we are having a functional component in the with behalf of react hooks. This functional component returns some JSX code to the render on to the screen and here we use View and Text components.

   return (      <View style={styles.container}>         <Text>Open up App.js to start working on your app!</Text>      </View>   );}

The View component is like a div in Html. It’s a good wrapper also good for applying some styles for some containers. The Text component is used for outputting some text between the opening and closing tag. Without this tag, we can’t render text in to screen. In Html, we can render text to the screen without using any tag but in react native <Text> tag is compulsory for rendering the text.

Ex: <Text>Open up App.js to start working on your app!</Text>

Then we are having some styles define.

   container: {      flex: 1,      backgroundColor: ‘#fff’,      alignItems: ‘center’,      justifyContent: ‘center’,   },});

React Native does not use CSS but it using styling syntaxes that based on CSS or similar naming. Just to be clear styling is done via JavaScript here. React native just offers CSS like property names.

Let’s change what we see on the screen. For that let’s add a button here. We can import a button from React-native. That’s another co component provided by react-native. First, add a button to our react-native import.

in button, we don’t use opening and closing tags. It’s a self-closing element. We can add the title prop which sets the text we see in the button. Here I going to change the text display on the screen when the button press. So for the title lets use “Change text”.

For changing that text we need to manage state here. For that, we can use react hooks. Here we need to use the useState hook which allows us to manage state in the functional component. Lets import useState hook from ‘react’

with that, we can use that hook by calling useState and add some default value into it. Here I add the text within the text element we have as the default value (useState(‘Open up App.js to start working on your app!’)). Then we can use array destructuring to get our output text (outputText) and get a function (setOutputText) to change our reset or override this output text.

That’s how useState works. It gives you an array with exactly two elements where the first element (outputText) is your current state snapshot and second (setOutputText) is a function that allows you to set state into new value. Calling that function will rerender the entire component and outputText will then refer to the latest useState.

In the screen, I going to output that outputText . for that between the Text element use {outputText}.

On the button we can use onPress which is similar to onClick on the web then we need to bind this to a function. Here I use an anonymous inline function to call setOutputText with the new value of outputText state. The syntax of this as follows

we add this to our button.

Now when we click the button setOutputText function will call and override our state and then rerender the app component and change the text display on the screen.

Now the full code of our app.js file looks like follow.

import { StyleSheet, Text, View, Button } from ‘react-native’;
export
default function App() {
const [outputText, setOutputText] = useState(‘Open up App.js to start working on your app!’)
return
(
<View style={styles.container}> <Text>{outputText}</Text> <Button title=”Change text” onPress={() => setOutputText(‘The text changed’)} /> </View> );}
const
styles = StyleSheet.create({
container: { flex: 1, backgroundColor: ‘#fff’, alignItems: ‘center’, justifyContent: ‘center’, },});
Before Press the Button
After Press the Button

Well, our button now works perfectly. Now you know a little bit more about customizing your app. Practice these with coding by using react-native components provided by react-native. You can study those components by referring to react-native documentation.

Thank you for reading. I hope you learned something. In my next article, let’s talk more about components. Hope to see you with the next article in the near future.

Happy coding…!!!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Reshaka Weerasinghe

Undergraduate at faculty of Information Technology, University of Moratuwa | Co-founder of Kannys Lab