Categories
React Native

React Native – Deep linking example for Android and IOS

In this article I will discuses how to configure Deep Link on React Native application. React Native provides a Linking to get notified of incoming links. React Navigation can integrate with the Linking module to automatically handle deep links. Deep linking and universal links are gateway into your mobile application.

Configure Deep Link on React Native Application:

Very first, you want to specify a scheme URL for your app. If your app scheme is appname then a link to your app would be appname://

URL scheme for your app:

Open your Android app manifest android/app/src/main/AndroidManifest.xml you need to add following code between tag section.

Now configure the native iOS app to open based on the appname:// URI scheme. You need to add the following lines to ios/AppName/AppDelegate.m file.

After this change you need to re-build app “react-native run-android” or “react-native run-ios”

App Links Configure:

Here is configure app initial route and others screens with query params.

Configure App Linking:

Here is full example code for setup on App screen.

Test Deep Linking on IOS and Android:

Categories
React Native

React Native: Download or Save View Content as Image in gallery

In this article, I will show you how we can download or save loop view content as image in React Native. For download or save view inner content, you want to ensure that you have react-native-view-shot and @react-native-community/cameraroll its dependencies.

Install npm package for view-shot and cameraroll

Make sure view-shot and cameraroll linked with Xcode

Configure Download View Inner Content

Now we write a const variable viewRefs to set each view ref for each loop view item. Also I have used userDataList loop data object.
Now we write a const method const downloadImage = async (index) => {} to download and save loop view, each item.
Now we write a const method const getPermissionAndroid = async () => {} for Permissions storage, to save and download image. On my previous article I have explain how to Share View Content in loop each item.
Permission is required to read and write to the external storage. Open android/app/src/main/AndroidManifest.xml file and add those permissions to save or download image.
React Native Download and Save View Content full Example code:

Here is full code for Download and Save view content loop items using React Native. You can move the code on your own created screen.

Done, now run your app using following command:

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: Share view content in loop or Share list each item

In this article, I will show you how we can share view content with other apps in React Native. To use this share view inner content, you want to ensure that you have react-native-view-shot and react-native-share its dependencies.

Share view content in loop

Installation Sharing View Inner Content

Now we write a const variable viewRefs to set each view ref for each loop view item. Also I have used userDataList loop data object.

Now we write a const method const shareImage = async (index) => {} to share loop view, eache item.

React Native Sharing View Content full Example code:

Here is full code for sharing view content with other apps using React Native. You can move the code on your own created screen.

Done, now run your app using following command:

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: Form Validation Multiple Input Fields

In this article, I will show you how we can validate multiple input fields. On my previous article I have discus how to implement Multiple Input Fields with add more rows with React Native. In this article I will make first row inputs are require of multiple rows.

Validate Multiple Input Fields

If you don’t know how to validate React Native multiple input fields before submit form data. I hope this article can help you to validate multiple input fields.

Validate Multiple Input Fields

Now we write a function function validateFormMultipleFields() to validate multiple input fields.

Now we write another form submit handle method const handlePressSubmitButton = () => {} to validate multiple input fields when a user submit form data to API end point.

Validate Multiple Input full Example code:

Here is full code for validate multiple input fields with React Native. You can move the code on your own created screen.

Done, now run your app using following command:

Categories
React Native

React Native: Dynamic multiple input fields and add more field

In this article, I will show you how we can implement multiple input fields dynamically with add more rows on click on Add More button with React Native.

Dynamic Multiple Input Multiple Row

If you don’t know how to create this React Native dynamic multiple input fields, then hope this article can help you. In this example initially screen came with two row with 6 input fileds such as (UserId, StartAmount and EndAmount). We can added multiple row by click on add more rows. I have write another article to validate multiple inputs.

Here we defined first two rows with 6 input fileds with (userId, startAmount and endAmount) and each fields error key.

Here we added method for Add More form inputs lines.

Dynamic Multiple Input full Example code:

Here is full code with dynamic multiple input field example. You can move the code on your own created screen.

Done, now run your app using following command:

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