Sunday , January 16 2022

React Native Tutorial – Project Structure, IDE and Basic UI Elements – Android Coding by DMTechnolab

Hello folks! This is the second post on React Native Tutorial. In this post, we are going to learn about the project structure of a react native project, what IDE we should use and using some basic layout elements such as Text (to display certain text), Button (you know it) and View (to encapsulate the layout) and so on.

If you are an absolute newbie then you should start from the first post of our React Native Tutorial. Follow the link below to go through to first post of this React Native Tutorial Series.

React Native Tutorial – Getting Started 

To  begin with, let us create a new react native project. If you don’t know how to create a new project in react native and haven’t set up the work environment for react native then, do read the previous post on react native  for which link is given below.

Creating a New React Native Project

Assuming that you have the work environment setup for react native, to create a new project, do the following:-

  • Open command prompt and navigate to the directory where you’d like to store you react native project.
  • Once you’re into the directory, type the command react-native init basicuiapp. Here, basicuiapp is the name of the app
  • Sit back and relax as the project is being built as it’s gonna take a while.
  • Wait for the screen  similar to the one shown below to appear

React Native TutorialReact Native Tutorial

  • Once you spot the screen above, it means that your project has been successfully built.

Now, it’s time to explore the contents of the project. To do so, you could use any text editor such as notepad++ or sublime but I personally recommend to use WEBSTORM as it makes things quite easy.

React Native Project Structure

Go ahead and open the project and you shall see bunch of folders and files similar to the image shown below:-

React Native TutorialReact Native Tutorial

If you are new to react native, I know exactly how it feels coz I have been through that stage. But  don’t worry, I ‘ve got your back and we shall learn what this project structure is all about.

  • We have two folders by the names android and ios. These folders contain project files related
    to the development of android and ios applications. Talking of the android folder, it’s contents
    are pretty similar to what we see in a normal android studio project. It has some xml files and some java
    classes and so on. The thing which we need to keep in mind  here is that for most of  our works in developing
    a react native application, we won’t be dealing with these folders called android and ios.
    In rarest of the cases we are going to face that situation.
  • Next, we have a folder by the name node-modules. It contains all the dependencies of react-native.
    Again, we don’t have to deal with it while working on apps. It already has the dependencies setup which would be required.
  • Next, we have two files by the names index.android.js and indes.ios.js. 99% of the work as we develop
    apps would be done on these two files on the basis of platform. Like for configuring an app for
    android, we’d configure index.android.js and vice-versa.

Ah, I can see that smile on your face now that you have learnt what’s all this fuss is about.

Building a Simple Screen

  • To learn the UI widgets, we shall build a simple screen in our app as shown below.

React Native TutorialReact Native Tutorial

  • To begin coding the screen, we need to make some imports of classes just as we do in usual coding.
  • To do so, open the index.android.js  file, clear it completely and write the code shown below:-
  • In the above code, we import the classes we’re going to use in the further codes. For example AppRegistry is used to register a component to the app, Component class is used to define a component of an app and the rest you’ll learn as we go further.
  • Next, we need to define a component for the app. To do so,  below the imports, write the code as shown below:-
  • In the above code, we have a class defined by the name basicuiapp which inherits to Component class. It also has two functions namely render and return. The render function is supposed to render the contents of the what is returned  by the return function. The return function encapsulates all the ui stuff which is later passed onto the render function.
  • Now, we shall begin with designing  UI of the screen. To do so, copy the code shown below and paste it into the parenthesis of the return function

 

  • In the above code, we have View as the parent layout which is equivalent to the linear layout in android whose orientation is vertical by default. Then we have an Image at the top in which an image is being loaded using  a URL. Below the image, we have the Text element simply to display some information and below the text widget we have the Button widget with some attributes mentioned.
  • Now, we need to do some styling with the above UI widgets regarding their orientation, position, fontsize etcetra.
  • To configure such properties in react-native, we do it in a manner similar to css used in web development. Don’t worry if you have no clue of css. You shall learn it easily. Just keep moving ahead.

In the above code, I’d like to throw some light on certain properties such as  flex, justifyContent and alignItems.

  • Flex  is a property equivalent to weight in android. When added to a layout with some numeric value, it decides the scale of that layout. The greater the value, the lesser is the scale.
  • In that layout, once the scale is set by the value of flex, justifyContent and alignItems decide the position of the content of the layout vertically and horizontally respectively. Like for justifyContent, we have possible values as flex-start, center, flex-end, space-around, and space-between. These will position the contents of the layout vertically.
  • Similarly, alignItems has certain possible values some of which are flex-start, center, flex-end, and stretch. It would align the layout horizontally within the layout.

Now update the content of the return function in the basicuiapp component as shown below:-

 

If you can spot in the above code then you’ll find that styles have been added to the respective widgets which we defined earlier.

Now, we need to define the onClick of the Button Widget. To do so, we need to define  function which would be called when the button is pressed. We have already called that function if you can see it in the button widget as a value to the onPress attribute by the name onPresseed. To define this function, copy the code below and paste it in the basicuiapp class above the render method as shown below:-

In the above code,  a toast has been set up and it’ll show up once the button is clicked.

We’re almost done coding this screen.

Finally, we just need to register this component to the App using the AppRegistry class. To do so,  copy the code below and paste it outside the basicuiapp class. This code will register the component basicuiapp to the app.

Coding is complete and here is the final code.

 

  • Go ahead and run the app. To run the app, open command prompt in your project folder and type the command

react-native run-android

  • On a sucessful run, you shall see an output as shown below:-

React Native TutorialReact Native TutorialReact Native TutorialReact Native Tutorial

  • Yay! You have successfully developed your first react native app.

So thats all for this post of React Native Tutorial friends, In the next post, we shall learn taking inputs and storing data locally in react native. So, stay tuned. And also feel free to give your feedbacks, and ask queries in the comment section.

Hello, I am Manish Kumar. I am a B.Tech Student at NIT Jamshedpur. Fortunately, I find myself quite passionate about Computers and Technology. Android is my most recent Crush.


Source link

About dmtechnolab

Check Also

Simplified Coding

Android Espresso Tutorial – Testing Fragment in Isolation – Android Coding by DMTechnolab

Welcome to another tutorial in the Android test series. And this post is called Android …

Leave a Reply

Your email address will not be published. Required fields are marked *