Cloning the Nubank interface with React Native using Animated

Cloning the Nubank interface with React Native using Animated

Cloning the Nubank interface with React Native using Animated This project aims to create a template that can be used when creating projects using React Native, since the process of installing and configuring libs at the beginning of a project can generate some complexity and often even errors that delay the process , thus hindering the development flow.

About the project

This project aims to create a template that can be used when creating projects using React Native, since the process of installing and configuring libs at the beginning of a project can generate some complexity and often even errors that delay the process , thus hindering the development flow.

Done with

Below is what was used in the creation of this template:

  • React Native - React Native is a framework that allows the development of mobile applications using Javascript and React;
  • React Navigation - React Navigation arose from the React Native community's need for easy-to-use navigation, written entirely in Javascript;
  • React Native Gesture Handler - Declarative API that allows the manipulation of touches and gestures in React Native;
  • Axios - Axios is an HTTP client based on Promises for Browser and NodeJS;
  • Prop Types - Runtime type checking for React properties (props) and similar objects;
  • Reactotron - Reactotron is a Desktop app for inspecting projects in React or React Native. It is available for macOS, Linux and Windows;
  • reactotron-react-native - Plugin to configure Reactotron to connect to the React Native project;
  • Babel - Babel is a free and open source JavaScript compiler and configurable transpiler used in the development of Javascript applications;
  • babel-eslint - This package is a wrapper of the Babel parser for ESLint;
  • babel-plugin-root-import - This Babel plugin allows imports to be made and requires paths based on a root (root);
  • Eslint - ESLint is a pluggable lint tool for JavaScript and JSX;
  • eslint-config-airbnb - This package provides Airbnb .eslintrc as an extensible shared configuration;
  • eslint-plugin-import - ESLint plugin with rules to help with import validation;
  • eslint-plugin-jsx-a11y - AST static checker of a11y rules in JSX elements;
  • eslint-plugin-react - React specific ESLint linting rules;
  • eslint-plugin-react-native - ESLint linting rules specific to React Native;
  • eslint-import-resolver-babel-plugin-root-import - A resolver from lib babel-root-import to lib eslint-plugin-import ;
  • EditorConfig - EditorConfig is a file and collection formatter in the form of a plugin for code / text editors with the aim of maintaining a consistent code standard between different editors, IDE's or environments;

Starting

To be able to use the template, either through the React Native CLI or with a local copy of the files, follow the steps below.

Prerequisites

Before we go on to the settings and use of the template, it is ideal that you have the environment set up to create and test applications in React Native, for that you can follow the guide of the link below:

React Native Environment (Android / iOS)

File Structure

The file structure is as follows:

rocketseat-basic
├── src /
│ ├── config /
│ │ └── ReactotronConfig.js
│ ├── images /
│ │ ├── rocketseat_logo_roxa.png
│ │ └── rocketseat_logo.png
│ ├── pages /
│ │ └── Main /
│ │ └── index.js
│ ├── services /
│ │ └── api.js
│ ├── index.js
│ └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md

The files and directories will be explained in the Editing section .

Installation

  1. To install and use this template the process is very simple, just create a new project using the command:
react-native init AwesomeExample --template rocketseat-basic
  1. After the created project you can delete the file App.jsfrom the root, as the file index.jsnow points to the src folder .

With this the project will be created with all the template dependencies properly installed and linked, as well as the configuration files that are copied to the project.


Additional Step on Android

For gestures to be enabled on Android, it is necessary to take one more step, which is very simple, open the file android/app/src/main/java/<pacote_do_projeto>/MainActivity.java, and start importing the packages as below:

// ... 
import  com.facebook.react.ReactActivity ;
// Imports added 
import  com.facebook.react.ReactActivityDelegate ;
import  com.facebook.react.ReactRootView ;
import  com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView ;

After the import, we will create a new method, just below the getMainComponentName(), being:

public  class  MainActivity  extends  ReactActivity {
   @Override 
  protected  String  getMainComponentName () { ... }
   // added Method 
  @Override 
  protected  ReactActivityDelegate  createReactActivityDelegate () {
     return  new  ReactActivityDelegate ( this , getMainComponentName ()) {
       @Override 
      protected  ReactRootView  createRootView () {
         return  new  RNGestureHandlerEnabledRootView ( MainActivity. this );
      }
    };
  }
}

Edition

In this section there will be instructions if you want to edit the template, explaining what the directories are used for and also the configuration files.

  • src - Directory containing all the application files, a directory is created srcso that the application code can be isolated in a directory and easily ported to other projects, if necessary;
  • config - Directory to store the application configuration files, for example, the configuration for using Reactotron and the Firebase startup configuration;
  • ReactotronConfig.js - File containing the Reactotron configuration to be used in the application;
  • images - Directory for storing images in general that can be used in the application, this directory can be renamed to assetsand within assetscreating a new directory to store only the images, so it is possible to have a directory to store all types of files, and not just images;
  • pages - Directory where the pages (screens) of the application are located, as a way of standardization and good practices every page is inside a directory with its name;
  • Main - Example directory of a page whose name is Main , by default it was adopted to always use the name of the page in camelCase as the directory name, within that directory it is necessary to create at least the file index.js;
  • index.js - File with all the logic of the page, as well as the visual components to be rendered;
  • services - Directory where files related to services used in the application will be created, for example, HTTP requests, authentication with Firebase or any other service that is used;
  • api.js - File with the Axios library configuration for sending HTTP requests, the address that is configured by default is for the Github API;
  • index.js - File responsible for centralizing the code of the directory src, in it the routes are called just like any other configuration that needs to be executed at the application's initialization, it is like an Entry Point of the directory src;
  • routes.js - File with the navigation settings of the application, in it are created the Navigator available in the library React Navigation;
  • .editorconfig - File for configuring the Plugin Editor Config, which standardizes some settings for the editor in different environments;
  • .eslintrc.json - ESLint configuration file, this is where the Linting rules and settings of the project are inserted, such as the Resolver configuration for the Babel Plugin Root Import and the global variable configuration __DEV__;
  • babel.config.js - Babel configuration file, it is there that the Babel Plugin Root Import is configured to accept absolute imports in the application using the directory srcas root;
  • dependencies.json - File containing only one object with the list of dependencies that must be installed in the application, it is worth remembering that the dependencies that come by default in the project as reactand react-nativedo not need to be in that list, unless you want to manage the version of these libs;
  • devDependencies.json - file containing only one object to the list of development dependencies that must be installed in the application, please note that the development of dependencies that already comes standard on how to design @babel/coreeslintamong others, do not need to be on that list, the unless you want to manage the version of these libs;
  • index.js - Root file of the application, also called Entry Point , is the first file called at the time of build and execution of the application, it is called the file src/index.jsthat in turn calls the application's routes;
  • jsconfig.json - Javascript configuration file in the Editor, he is responsible for activating the Auto Complete of Javascript codes in the application;
  • package.json - Unlike common projects, this file has the necessary settings for the publication of the Template in NPM, to learn more about this see the section below.

Publication

To publish a template like this the process is very simple and fast.

  1. Create an account on the NPM website ;

  2. With the account created, execute the command below and enter your credentials;

npm login
  1. Just open the file package.jsonand modify the information according to your template, but the most important information is two, o nameand o version, which are the only ones that have restrictions, below are the restrictions:
  2. The namemust always start with the prefix react-native-template-followed by the name of your template;
  3. The template must be published in a personal account, because when published in an Organization the prefix is ​​added to the @<nome_da_organization>package name;
  4. The namemust be unique, and cannot be the same as a template already published;
  5. The versionmust be updated with each publication, if the template is in version 0.0.1 and it is necessary to publish an update in it, the versionmust be different and higher than the current version, for example, 0.0.2 ;
  6. After configuring correctly, package.jsonjust execute the command at the terminal / prompt npm publish;
  7. With the publication completed, the template should be available through the link https://www.npmjs.com/package/react-native-template-<nome_do_template>.

Contribution

Contributions are what make the open source community an incredible place to learn, inspire and create. Any contribution you make will be highly appreciated .

  1. Fork the project
  2. Create a Branch for your Feature ( git checkout -b feature/FeatureIncrivel)
  3. Add your changes ( git add .)
  4. Commit your changes ( git commit -m 'Adicionando uma Feature incrível!)
  5. Push the Branch ( git push origin feature/FeatureIncrivel)
  6. Open a Pull Request

Download Details:

Author: Andr3sAmaral

Source Code: https://github.com/Andr3sAmaral/Nubank-mobile-app

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.