React-Native

 React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities. An incomplete port for Qt also exists.

 

React Native Environment Setups 

 Developing app using React Native framework requires Node, React Native command line interface, Python2, JDK, and Android Studio.

Installing Node

The first steps in using Node.js is the installation of the Node.js libraries on the client system. To perform the installation of Node.js, Go to the site https://nodejs.org/en/download/ and download the necessary binary files. 

The other way to install Node.js on any client machine is to use a "package manager."On windows, the node package manager is known as Chocolatey. It was designed to be a decentralized framework for quickly installing applications and tools that you need. To install Node.js via Chocolatey.

Steps to create React Native application

1. First, you have to start your emulator (Android Emulator) and make it live.

2. Create a directory (ReactNative) in your any drive.

3. Open "Command Prompt" and go to your ReactNative directory.

4. Write a command react-native init FirstApp to initialize your app "FirstApp".

5. Go to your directory location "FirstApp" and run the command react-native run-android. It will start Node server and launch your application in virtual device emulator.

How to Run React Native application

• Install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer.
• This provide smoother testing of App.

Report of summer Internship(Coursera)

Week-1

React Native Components:

In React there are multiple library available for components, but I used built-in React Native components from the React Native Elements library to design my app.

React Native Navigation:

• In React there are many navigations are available like Tab ,Drawer, Stack, etc.
• Configure my React Native application with navigation support.
• I used stack navigator for combine all the activities into one stack and then use drawer navigation to provide good UI for App.  
• All information are pass through all activities in Drawer based Navigations.

Week-2

Icon Fonts and Buttons:

• In this section, I came to know about how to use Icon and Buttons in Reactnative and also learn about how to customize icon and button.
• Different library in react provide different style of buttons and icon.
• In this I also created two Buttons for User.

               1. Add to Favorite

               2.  Add to comment

• And the comments are shown below that icon.   

Forms and Modals:

I learn about how to create modal and forms in React App and also learn that how to show and hide modal using toggle modal.

Week-3

Swipe Option Buttons and Alerts:

In this Part I add a new Favourites component and add a way of revealing option buttons for a list item. I also examine how to use the Alerts. And also done following things.

·        Add option buttons to list items that will be revealed on swiping

·        Add alerts to the app

 

Animations:

I have examined about animations and their use in a React Native application. At the end of this part I done these things:

• Add animations in applications using Animate
• Add animations to applications using Animatable

Gestures:

In this lesson i have explore the support for gestures using PanResponder in a React Native app. And learn about panresponder. And done following,

• Make use of PanResponder to respond to various user gestures on the screen.

Week-4

The Expo SDK:

Expo sdk is essential tool provided by expo.I this lesson I got a brief introduction to the Expo SDK and how it enables us to access the native capabilities of mobile devices. And also learn about the facilities provided by Expo.

Secure Store:

In this Part I have explore the key-value based storage that is supported in React Native. The AsyncStorage provides a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app.

The Secure store i the Expo SDK provides a way to encrypt and securely store key–value pairs locally on the device. And done following things.

•         Configure  app to take advantage of the secure store provided by Expo SDK
•       Store and retrieve key-value pairs in the secure store.

Local Notifications:

I learn about notifications and how we can generate local notifications in our app using the Expo SDK support for notifications. And done following things.

• Configure  app to make use of notifications support from Expo SDK
• Generate local notifications within your app.

Snapshots:

                                                          

                                        

                                                                                    Drawer Navigation

 

                                        

                                                                     Menu Component

 

                                              

                                                                            Dish detail and Comments

                                             

                                                                                Reservation component

 

                                           

                                                                                Alert for favourite

                                          

                                                                                Contact Us page

 

                                  

                                                                 Home Component