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 React from 'react';
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.

import { StyleSheet, Text, View } from ‘react-native’

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.

export default function App() {
   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.

const styles = StyleSheet.create({
   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.

import { StyleSheet, Text, View, Button } from ‘react-native’

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”.

<Button title=”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’

import React, {useState} 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.

const [outputText, setOutputText] = useState(‘Open up App.js to start working on your app!’)

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}.

<Text>{outputText}</Text>

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

onPress={() => setOutputText(‘The text changed’)}

we add this to our button.

<Button title=”Change text” onPress={() => setOutputText(‘The text changed’)} />

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 React, {useState} from ‘react’;
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…!!!