Categories
React Native

React Native: Bottom Tabs Navigator

Bottom Tabs Navigator is simple tab bar on the bottom of the screen, you switch between different screen or routes. Routes are initialized all tab screen components, they are not mounted until first focused.

Bottom Tabs Navigator

Installation Bottom Tabs Navigator

To use this tab navigator, you want to ensure that you have @react-navigation/native and its dependencies.

Install vector icons library

React Native Bottom Tabs Navigation Example:
Now create new “screens” directory in application root directory.


Then you need to create some screen files like HomeScreen.js, LoginScreen.js, RegisterScreen.js, AboutScreen.js and ProfileScreen.js in screens directory. Or If you have already some screens than skip new screen creations.

Now, open App.tsx file form React Native application directory and add following code in your App file.

Done, now run your app using following command:

Your app is ready with bottom tabs navigation. More details Bottom Tabs Navigator click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Categories
React Native

React Native: Top Tabs Navigator

Top Tabs Navigator is material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Routes tab screen components for each route are mounted immediately.

Top Tabs Navigator

Installation Top Tabs Navigator

To use this tab navigator, you want to ensure that you have @react-navigation/native and its dependencies.

Installing dependencies into a bare React Native project

React Native Top Tabs Navigation Example:
Now create new “screens” directory in application root directory.


Then you need to create some screen files like HomeScreen.js, LoginScreen.js, RegisterScreen.js, AboutScreen.js and ProfileScreen.js etc. in your screens directory. Or If you have already some screens than skip new screen creation.

Example HomeScreen:

Now, open App.tsx file form React Native application directory and add following code in your App file.

Done, now run your app using following command:

Your app is ready with top tabs navigation. More details Material Top Tab Navigator click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Categories
React Native

React Native: How to configure reactnavigation?

React Navigation is one of the most well-known navigation libraries available for React Native. In this article, I will discuse how to get started using React Navigation in a React Native application.

React Native Navigation

Installation ReactNavigation

Install the required packages vai (npm or yarn) in your React Native project:

Install Stack Navigator

Installing dependencies into a bare React Native project

React Native navigation example:
Now create new “screens” directory in application root directory.
Then you need to create some screen files like HomeScreen.js and LoginScreen.js in screens directory. Or If you have already some screens than skip new screen creation

HomeScreen.js.

LoginScreen.js

Now, open App.tsx file form React Native application directory and you need to wrap the whole app in NavigationContainer.

Done, now run your app using following command:

Your app is ready with two screens and move between screen by click button (Go to Login and Go to Home). More details Stack Navigator click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.

Categories
React Native

React Native: Setup development environment on Windows

Mobile application development by using React Native CLI. It’s requires Android Studio to get started new app. If you already have this tools installed, you should be able to get up and running within a few minutes. If Android Studio are not installed, you should expect to spend about an hour installing and configuring it.

Installing dependencies

You will need to install NodeJs and JDK, the React Native command line interface, a JDK, and Android Studio. Open windows Command Prompt (right click and select “Run as Administrator”), then run the following command:

1. Install Android Studio

Now download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:

Android SDK
Android SDK Platform
Android Virtual Device

  1. Install the Android SDK
    Android Studio installs the latest Android SDK by default. Building a React Native app with native it’s requires the Android 10 (Q) SDK. Also additional Android SDKs can installed through the SDK Manager in Android Studio. Make sure checked Android 10 (Q) entry than click on Apply and Ok button.

    Appearance & Behavior=>System Settings=>Android SDK

3. Configure the ANDROID_HOME environment variable

Step 1. Right-click on My Computer and select Properties. Go to Advanced system settings and select Environmental Variables option.

Step 2. Under the User variables section, click New to open New User Variable dialog.

Step 3. Enter ANDROID_HOME as Variable name and provide the path of the SDK folder next to Variable value.

The SDK is installed, by default, at the following location:
%LOCALAPPDATA%\Android\Sdk

  1. Add platform-tools to Path

Step 1. Right-click on My Computer and select Properties. Go to Advanced system settings and select Environmental Variables option.

Step 2. Go to System Variables section and locate the “Path” variable and click on Edit… button.

Step 3. Copy the folder path inside the SDK folder look for tools and platform-tools folder path.

Step 4. Add full folders path for tools and platform-tools and close dialog box.

The default location for this folder is:
%LOCALAPPDATA%\Android\Sdk\platform-tools

Creating new React Native application

Using a specific version (Optional)
You can use the –version argument when creating new React Native application.

Using a specific template (Optional)
You can use the –template argument when creating new React Native application with TypeScript template.

Running your React Native application by following command.

Step 1: Start Metro
First you need to start Metro, Metro is the JavaScript bundler that ships with React Native. Metro “takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies.

Step 2: Start your application
Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder.

If everything is set up correctly, you should see your new app running in your Android emulator like below. More details Setting up React Native development environment click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.