Hello Readers, CoolMonkTechie heartily welcomes you in this article ( How To Apply Run Time Android Permission In React Native ).
In this article, we will learn how to apply Run Time Android Permission In React Native. Android Permission feature helps a user to know which application is trying to access sensitive data such as files, contacts and SMS, and system-specific features such as camera and internet. This article shows to apply the run time permission with the authentic example.
To understand the Run Time Android Permission In React Native, we cover the below topics as below :
What is Android Permission?
Why we need permission?
How to apply Permission in Android?
How to apply run time Permission in React Native?
Example to apply the run time permission.
A famous quote about learning is :
” The great aim of education is not knowledge, but action. “
So Let’s begin.
What is Android Permission ?
According to Google’s privacy policy, a user should know which application is trying to access sensitive data such as files, contacts and SMS, and system-specific features such as camera and internet. So they introduced the Android Permission feature.
In Android permission modal, every application which is using sensitive data or some certain system features has to ask the permissions from the user.
The purpose of permission is to protect the privacy of an Android user.
Why We need Permission ?
Android applies the permission modal because some applications were tracking the user’s location in the background and accessing the private data like contacts, call history and messages without informing the user which is the violation of googles privacy policy.
So solving this sensitive issue application has to ask for permission to access those sensitive data.
How to Apply Permission in Android ?
Now we get an idea about the Android permission, let’s see how to apply the permission in Android.
To apply permission in Android, we have to follow two steps:
We have to add those permissions requests in project -> app -> src -> AndroidManifest.xml file.
For Example, if we want to ask for the device location Permission, we have to add the following permission request in AndroidManifest.xml :
After adding the permission in AndroidManifest file, this permission will be automatically asked by the play store when they install the app and this permission will be granted to the applications.
On devices before SDK version 23, the permissions are automatically granted if we add those permissions in our AndroidManifest.xml file, but after SDK version 23 we have to ask runtime permission as well.
2. After Google’s new permission modal, they have introduced the run time permission mechanism in Android version 23. According to that, we have to include all the permissions in AndroidManifest.xml and also have to apply some dangerouspermissions in run time.
According to the official docs, dangerouspermissions require a dialog prompt.
So whenever we are working with this dangerouspermissions, we need to check whether the permission is granted by the user, and that can be done with the help of PermissionsAndroid in React Native.
For example, If we need INTERNET permission and CAMERA permission then we have to add both the permission in AndroidManifest.xml file but have to ask only for the CAMERA permission in run time because CAMERA permission comes under the dangerous permission not INTERNET permission.
Run Time Permissions that requires Confirmation from the User. Here is the list of dangerous permissions.
READ_CALENDAR
android.permission.READ_CALENDAR
WRITE_CALENDAR
android.permission.WRITE_CALENDAR
CAMERA
android.permission.CAMERA
READ_CONTACTS
android.permission.READ_CONTACTS
WRITE_CONTACTS
android.permission.WRITE_CONTACTS
GET_ACCOUNTS
android.permission.GET_ACCOUNTS
ACCESS_FINE_LOCATION
android.permission.ACCESS_FINE_LOCATION
ACCESS_COARSE_LOCATION
android.permission.ACCESS_COARSE_LOCATION
RECORD_AUDIO
android.permission.RECORD_AUDIO
READ_PHONE_STATE
android.permission.READ_PHONE_STATE
CALL_PHONE
android.permission.CALL_PHONE
READ_CALL_LOG
android.permission.READ_CALL_LOG
WRITE_CALL_LOG
android.permission.WRITE_CALL_LOG
ADD_VOICEMAIL
com.android.voicemail
USE_SIP
android.permission.USE_SIP
PROCESS_OUTGOING_CALLS
android.permission.PROCESS_OUTGOING_CALLS
BODY_SENSORS
android.permission.BODY_SENSORS
SEND_SMS
android.permission.SEND_SMS
RECEIVE_SMS
android.permission.RECEIVE_SMS
READ_SMS
android.permission.READ_SMS
RECEIVE_WAP_PUSH
android.permission.RECEIVE_WAP_PUSH
RECEIVE_MMS
android.permission.RECEIVE_MMS
READ_EXTERNAL_STORAGE
android.permission.READ_EXTERNAL_STORAGE
WRITE_EXTERNAL_STORAGE
android.permission.WRITE_EXTERNAL_STORAGE
Run Time Permissions
How to apply Run Time Android Permission using React Native PermissionsAndroid ?
In React Native, PermissionsAndroid component provides access to Android M’s (Over API level 23) new permissions model. We always need to check the permission before using native APIs which comes under dangerous permissions.
Above mentioned all the dangerous permissions comes under PermissionsAndroid.PERMISSIONS as constants.
We can check the permission granted or not using PermissionsAndroid.RESULTS.GRANTED.
Permission denied by the user with never ask again.
Result Strings for Requesting Permissions
Now we get an idea about Android permissions and components. Let’s move towards the Example which can help us apply permission in our application.
Example to Apply the Run Time Permission
In this example, we will apply the device location permission, which needs run time permission. We are making a button on the centre of the screen and on a click of button we will apply the run time permission for device location known as ACCESS_FINE_LOCATION. So let’s get started.
Example Project Setup
To demonstration of apply the Run Time Permission, we have to follow the below steps:
Create a new React Native project
Adding device location permission in AndroidManifest.xml
1. Create a new React Native project
Assuming that we have node installed, we can use npm to install the react-native-clicommand line utility. Open the terminal and go to the workspace and run the following commands to create a new React Native project.
npx react-native init ProjectName
This will make a project structure with an index file named App.js in our project directory.
2. Adding device location permission in AndroidManifest.xml
If we are using any features in our app that needs permission, we need to add it in AndroidManifest.xml. For this example, we are adding device location permission in AndroidManifest.xml.
Here PermissionsAndroid.request has two arguments:
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION to generate a dialog to ask for Device Location Permission.
A JSON {‘title’:”,’message’:”}, which will help us to communicate or to show the dialog about the permission if the user denied the permission. They will generate it like this.
Android Permission Dialog Box
To Run the React Native Example Code
Open the terminal again, and jump into our project using
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
npx react-native run-android
or on the iOS Simulator by running (macOS only)
npx react-native run-ios (macOS only).
The output of example code is as below:
Android Permission Grant Example Output Screenshot
That’s all about in this article.
Conclusion
In this article, we understood how to apply Run Time Android Permission in React Native. This article showed the example code to apply the RunTime Android Permission in React Native.
Thanks for reading! I hope you enjoyed and learned about RunTime Android Permission Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (The most popular best ways to make REST API Calls in React Native ).
In this article, we will learn about different best ways to make REST API Calls in React Native. Many mobile apps need to load resources from a remote URL. We may want to make a POST request to a REST API, or we may need to fetch a chunk of static content from another server.
Applications on the web and mobile devices often cannot store all the information that they need. Therefore, they have to reach out to the web to update data, retrieve data, or request a service from a third-party. The transaction that takes place between two devices (client and server) is called an API call. An API (application programming interface) typically will use the REST design paradigm to manage all how it can be accessed (called).
This article shows the fetch function and the axios library. Both methods achieve the same task, making an HTTP call, but they go about it in slightly different ways.
A famous quote about learning is :
” The expert in anything was once a beginner. “
So Let’s begin.
Using Fetch
React Native provides the Fetch API for our networking needs. Fetch will seem familiar if we have used XMLHttpRequest or other networking APIs before. The Fetch API is a built-in Javascript function. We can use fetch by providing the URL for the location of our content. This will send a GET request to that URL.
Making Requests
In order to fetch content from an arbitrary URL, we can pass the URL to fetch:
fetch('https://mywebsite.com/mydata.json');
Fetch also takes an optional second argument that allows us to customize the HTTP request. We may want to specify additional headers, or make a POST request:
The above examples show how we can make a request. Most times, we will want to do something with the response.
Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works asynchronously:
By default, iOS will block any request that’s not encrypted using SSL. If we need to fetch from a cleartext URL (one that begins with http), then App Transport Security exception will first need to add.
It is more secure to add exceptions only for those domains, If we know ahead of time to need to access the domains; if we do not know the domains until runtime, ATS can completely disable.
This is a simple way to send HTTP requests as soon as possible. However, another popular method for sending HTTP requests is with third-party libraries.
Using XMLHttpRequest API
The XMLHttpRequest API is built into React Native. This means that we can use third-party libraries such as frisbee or axios that depend on it, or we can use the XMLHttpRequest API directly if we prefer.
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
if (request.readyState !== 4) {
return;
}
if (request.status === 200) {
console.log('success', request.responseText);
} else {
console.warn('error');
}
};
request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();
The security model for XMLHttpRequest differs from on web, as there is no concept of CORS in native apps.
Using WebSocket Protocal
React Native also supports WebSockets , a protocol which provides full-duplex communication channels over a single TCP connection.
var ws = new WebSocket('ws://host.com/path');
ws.onopen = () => {
// connection opened
ws.send('something'); // send a message
};
ws.onmessage = (e) => {
// a message was received
console.log(e.data);
};
ws.onerror = (e) => {
// an error occurred
console.log(e.message);
};
ws.onclose = (e) => {
// connection closed
console.log(e.code, e.reason);
};
Using Axios Library
The Axios is a Javascript library used to make HTTP requests, and it supports the Promise API that is native to JS ES6. The Axios library has grown in popularity alongside the increase in apps that exchange information using JSON. Three things that make the Axios library so useful are the ability to;
Intercept requests and responses
Transform request and response data
Automatically transform data for JSON
Axios Library Example
import Axios from 'axios'
Axios({
url: '/data',
method: 'get',
baseURL: 'https://example.com',
transformRequest: [function (data, headers) {
// Do whatever you want to transform the data
return data;
}],
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
headers: {'X-Requested-With': 'XMLHttpRequest'},
data: {
name: 'Some Name'
},
})
In the above example, we have passed a configuration object that calls an example URL with a GET request. We’ll notice that some parameter names are common between fetch and Axios.
We are calling the same URL as we did with the fetch API, but we don’t have to manually transform the response object into JSON. Axios has more features that can be useful with bigger applications.
That’s all about in this article.
Conclusion
In this article, we understood about different best ways to make REST API Calls in React Native. This article showed the fetch and axios library usage with code snippets in React Native .
Thanks for reading! I hope you enjoyed and learned about REST API Calls concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article.
In this article, we will learn how to use Redux with React Hooks by building a real React Native Application. Redux is a popular React and React Native state management library, meant to be used in complex React and React Native apps where sharing state between multi-level components can get extremely difficult to manage. React Hooks provide us the ability to use functional components in React or React Native apps. Their ability to provide support to manage a component’s state and handle side-effects offers an alternative to class components.
In this article, let us look at some hooks provided by the react-redux library that provides a way to avoid writing boilerplate code when using the connect() High Order Component.
To understand the use of Redux with React Hooks in React Native application, We will cover the below steps as below :
Configure a New React Native Application
Create Mock Screens
Set Up a Stack Navigator
Create an Overlay Modal With Transparent Background
Navigate to the Modal Screen
Add a Custom Modal With a Transparent Background
Adding a Text Input in the Custom Modal Screen
Add a Custom Header to the List Screen
Change the StatusBar Appearance
Add a List view
Creating a Root Reducer
Configuring a Store
Implement the useSelector Hook
Adding Items to the List by Dispatching an Action Creator
Adding FlatList to Display the Items in the List
Updating the Header
Removing an Item
The final code of the demo application
The final output of the demo application
A famous quote about learning is :
” The purpose of learning is growth, and our minds, unlike our bodies, can continue growing as we continue to live. “
So Let’s begin.
Step 1 – Configure a New React Native Application
To configure a new React Native app, we are going to use expo-cli with a blank template to generate a new app.
expo init projectname
Firstly, we have generated the project, Then we navigate inside the directory and install the following dependencies.
We are going to use Stack Navigator from the react-navigation library for two different screens in this demo app. For expo-cli, we run the following command to install required dependencies for the navigator to work.
In this section, let us create two screens that the app is going to use to display a list of items and allow the user to add to each item. We create a new directory called src/screens and then create two new ListScreen.js and ModalScreen.js files.
Each of these screen files is going to have some random data to display until the stack navigator is set up.
A Stack Navigator allows the app to transit between different or multiple screens and manages the navigation history. We create a new file called AppNavigator.js inside the src/navigation directory. This file is going to contain all the configurations required to set up a Stack Navigator.
With the recent release of react-navigationversion 5, the way to configure a stack navigator has changed. The major highlight of these new changes is the component-based configuration. Navigation patterns are now more component-based, common use cases can now be handled with pre-defined Hooks, the new architecture allowing us to configure and update a screen from within the component itself.
import * as React from "react";import { NavigationContainer } from "@react-navigation/native";import { createStackNavigator } from "@react-navigation/stack";import ListScreen from "../screens/ListScreen";import ModalScreen from "../screens/ModalScreen";
The NavigationContainer is a component provided by the react-navigation library that manages the navigation tree. It contains the navigation state and wraps all the navigator’s structure.
The createStackNavigator is a function that implements a stack navigation pattern. This function returns two React components: Screen and Navigator, that are going to allow us to configure each component screen.
Open the App.js file and import the MainStackNavigator in the root of the app as shown below:
import React from "react";import MainStackNavigator from "./src/navigation/AppNavigator";export default function App() {return <MainStackNavigator />;}
Now, we go the terminal window and execute the command expo start. In the simulator or the real device we are running the Expo client, we are going to notice similar results as shown below:
The first screen in the Stack Navigator is ListScreen, which is shown as above.
Step 4 – Create an Overlay Modal With Transparent Background
The modal can be easily configured with a stack navigator with an overlay of transparent background on the screen as they display it. Since the ListScreen is going to be the first screen and display a list of items, the ModalScreen is going to be a dialog. This dialog appears by clicking a button from the ListScreen in the current application and adds a transparent layer on the screen behind it when opened. The previous screen will be visible underneath this dialog.
This can be done by configuring screenOptions on a Stack Navigator. The react-navigation library provides a way to enable the overlay with a property called cardOverlayEnabled.
We have to configure the styles of both the screens and add a way for the modal dialog to open from the ListScreen.
Step 5 – Navigate to the Modal Screen
To navigate to the modal screen, let’s add a floating action button with an icon to the ListScreen.js screen component.
This button is going to be touchable and on a single touch is going to navigate to the ModalScreen. The navigation is going to be handled by the navigation prop that can be passed as an argument to the functional component ListScreen. This is only possible because the ListScreen is part of the Stack navigator.
Any screen in a React Native app that utilizes a react-navigation library is a route or a part of a navigation pattern that has access to navigation prop.
We go back to the simulator device, and we are going to notice the changes. The first thing to notice is the action button floating at the bottom right corner.
On pressing this button, a full-screen modal will open.
Step 6 – Add a Custom Modal With a Transparent Background
In this section, let’s change the behavior of how the modal appears on the ListScreen right now and how we want it to be. As an overlay, we also want it to take the only 1/3rd of the current screen.
This modal is going to have an input field in the future to let the user add items to the list. However, for now, it is going to display a text and a close button.
The close button is going to dismiss the modal when the user wants to go back to the List screen without taking any other action. The close button is going to be placed using position:absolute property and is going to use navigation.goBack() pre-defined method to go back to the List screen.
Here is the complete code for the modal screen at this point. Open ModalScreen.js and modify it.
Here is the output you are going to get in the device after this step:
Step 7 – Adding a Text Input in the Custom Modal Screen
In this section, let’s add a text input component from the react-native core. This is going to allow the user to enter the name of the item they want to add to the list. For now, since we haven’t configured the Redux to manage the app state, let us use the hook useState to manage the component state locally.
Open ModalScreen.js and import TextInput from react-native core.
import {StyleSheet,TouchableOpacity,Text,View,TextInput,} from "react-native";
Next, inside the View that has the style of modalContainer add the following TextInput component as well as a touchable submit button. This touchable button is going to navigate back to the list screen when the user has entered a value in the input field.
Create a new file called Header.js inside the directory src/components. This functional component is going to display the header title in the List screen.
Add the following code snippet to the file. We have just created:
We will now notice that the Status bar has a white appearance.
Step 10 –Add a List view
In this section, let’s implement the main view that is going to display a list of items. In ListScreen.js, add the following functional component called ListView.
function ListView() {return (<Viewstyle={{backgroundColor: "white",flex: 1,borderTopLeftRadius: 20,borderTopRightRadius: 20,paddingHorizontal: 20,paddingVertical: 20,}}><Text>Here goes list items</Text></View>);}
Then, modify the ListScreen to display it below the Header.
<View style={styles.container}><Header title={"List"} /><ListView />{/* rest of the code remains same */}</View>;
Go to the device, we are running the app, and we are going to notice a major difference in its appearance.
Step 11 –Creating a Root Reducer
In this section, we create a new directory called src/redux/ and inside it, a new file called reducer.js. This file is going to have the definition of action types, action creators and the only reducer we are going to create in this app. This reducer is going to be called rootReducer.
Redux is used to manage the state of the whole application. Therefore, it represents this state by one JavaScript object. Think of this object as read-only (immutable), since we cannot change this state or the object because they represent it in the form of a tree. It requires an action to do so.
Actions are similar to events in Redux. And, they can be triggered in the button press, timers or network requests.
Start by defining an action type as below.
export const ADD_ITEM = 'ADD_ITEM'
Then we define the action creator called addItem that is going to take an item from the user’s input and add it to the list. This is the action creator function that we are going to trigger later.
Define an initial state which is going to have an empty array called itemList. Whenever an action is triggered, the state of the application changes. The handling of the application’s state is done by the reducers.
This initial state is going to be passed as a parameter to the rootReducer. Calling the create action is going to invoke the logic defined for the same action type in the reducer.
Using a reducer, we either want to initiate the current app state or update it, without modifying the whole state on each action trigger. The spread operator returned in the action type ADD_ITEM indicates that.
To update the state, in our case, to add an item object to the itemList array, let us use the contact() that is going to return a new array whenever an item is added to the list. This also satisfies the redux philosophy of not mutating the state directly.
In this section, we create a new file src/redux/store.js. A store is an object that brings the actions and reducers together. This file is going to implement that.
The store provides and holds the state at the application level instead of individual components. Add the following code snippet to it:
import { createStore } from "redux";import rootReducer from "./reducer";const store = createStore(rootReducer);export default store;
Now, we connect this store to the app, we open App.js file and import the store from this file as well as the High Order Component Provider from react-redux npm package. This HOC helps us to pass the store down to the rest of the components of the current app.
import React from "react";import { Provider as StateProvider } from "react-redux";import store from "./src/redux/store";import MainStackNavigator from "./src/navigation/AppNavigator";export default function App() {return (<StateProvider store={store}><MainStackNavigator /></StateProvider>);}
Step 13 – Implement the useSelector Hook
To access state when managing it with Redux, the useSelector hook is provided in the library. It is similar to mapStateToProps argument that is passed inside the connect(). It allows us to extract data from the Redux store state using a selector function.
The major difference between the hook and the argument (the older way) is that the hook may return any value as a result, not just an object.
Inside ListScreen.js add the following import statement.
import { useSelector } from 'react-redux'
Then, we fetch the listItems array using the hook useSelector inside the ListView component. Also, modify its return statement by displaying a message if the list is empty or not.
function ListView() {const listItems = useSelector((state) => state.itemList);return (<Viewstyle={{backgroundColor: "white",flex: 1,borderTopLeftRadius: 20,borderTopRightRadius: 20,paddingHorizontal: 20,paddingVertical: 20,}}>{listItems.length !== 0 ? (<Text>Contains List items</Text>) : (<Text style={{ fontSize: 30 }}>You list is empty :'(</Text>)}</View>);}
Step 14 –Adding Items to the List by Dispatching an Action Creator
The useDispatch() hook completely refers to the dispatch function from the Redux store. This hook is used only when there is a need to dispatch an action. In the ModalScreen.js to add an item based on the value of TextInput, the state has to be updated. This can be done by triggering the action creator method called addItemdefined when creating actions inside redux/reducer.js file.
Start by importing the following statements:
import { useDispatch } from 'react-redux'import { addItem } from '../redux/reducer'
Next, inside the ModalScreencomponent, we create a helper method called onSaveNote which when triggered on submission of the text input, is going to trigger the action creator as well as take the user back to the List screen.
function ModalScreen({ navigation }) {const [value, setValue] = useState("");const dispatch = useDispatch();const onSaveNote = (value) => {dispatch(addItem(value));navigation.navigate("List");};/* rest of the code remains same */}
Lastly, add this helper method as the value of onPress on the submission button.
In this section, using the current app’s state, let us display the number of items in the list to be shown in the header as well. This can be done by using useSelector hook from react-redux.
Modify the file components/Header.js as the following:
Here is the updated header bar when there is one item on the list.
Step 17 –Removing an Item
Since we have gone through the process of understanding how redux hooks work with React Native apps, we try adding a remove item button that is going to delete an item from the list as shown below.
Here is the updated redux/reducer file that has action type REMOVE_ITEM.
import React from "react";import { Provider as StateProvider } from "react-redux";import store from "./src/redux/store";import MainStackNavigator from "./src/navigation/AppNavigator";export default function App() {return (<StateProvider store={store}><MainStackNavigator /></StateProvider>);}
19. The final output of the demo application
Here is the final output of the demo app:
That’s all about in this article.
Conclusion
In this article, we understood how to use Redux with React Hooks by building a real React Native application. This article showed the demo code step by step to use Redux with React Hooks by building a real React Native application. The addition to hooks in react-redux such as useSelector and useDispatch reduces the need to write plentiful boilerplate code and also provides the advantage to use functional components. We also discussed better understanding of the basics of react navigation in real React native application.
Thanks for reading! I hope you enjoyed and learned about Redux and React Hooks practical usage in React Native application. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Handle Deep Linking in React Native ?).
In this article, We will learn how to handle deep linking in react native. Mobile apps have a unique vulnerability that is non-existent in the web: Deep Linking. Deep Linking is a technique in which a given URL or resource is used to open a specific page or screen on mobile. So, instead of just launching the app on mobile, a deep link can lead a user to a specific page within the app, providing a better experience. This specific page or screen may reside under a series of hierarchical pages, hence the term “deep” in deep linking.
Deep linking is a way of sending data directly to a native application from an outside source. A deep link looks like app:// where app is our app scheme and anything following the // could be used internally to handle the request. As a user, we probably have experienced deep linking when opening a link to a product in a browser. If we have the app of that shop installed, it may use a deep link to open the app on that product’s page.
For example, if we were building an e-commerce app, we could use app://products/1 to deep link to our app and open the product detail page for a product with id 1. We can think of these kind of like URLs on the web.
” Deep linking consists of using a uniform resource identifier (URI) that links to a specific location within a mobile app rather than simply launching the app. Deferred deep linking allows users to deep link to content even if the app is not already installed. “
In this article, we will discuss a React Native app that opens a specific page based on the URI provided from an external source.
A famous quote about learning is :
” The beautiful thing about learning is nobody can take it away from you. “
So Let’s begin.
Why Deep Linking?
Deep Link has many use cases where it can come very handy. Think of marketing strategies, referral links, sharing a certain product, etc. The greatest benefit of mobile deep linking is the ability for marketers and app developers to bring users directly into the specific location within their app with a dedicated link. Just as deep links made the web more usable, mobile deep links do the same for mobile apps.
Example
Let’s try to mimic a React Native demo app that opens a specific page based on the URI provided from an external source. To handle deep links, we are going to use an optimum solution provided by the react-navigation library.
Configure react-navigation in a React Native App
To start, we create a new React Native project by running the following command:
react-native init rnDeepLinkingDemo
cd rnDeepLinkingDemo
To be able to support deep linking via the navigation, we add the required npm dependencies. Once the project directory has been generated from the above command, navigate inside the project folder from our terminal and install the following dependencies.
The next step is to link all the libraries we just installed. From React Native 0.60 and higher, linking is automatic. So we don’t need to runreact-native link.
On iOS devices, we just have to run the following set of commands.
cd ios
pod install
cd ..
For Android devices, we add the following lines to the android/app/build.gradle file under the dependencies section:
Then, open the android/app/src/main/java/com/rndeeplinkdemo/MainActivity.java file and add the following snippet:
package com.rndeeplinkingdemo;
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "RNDeepLinkingDemo";
}
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
Create a Home & Details Screen
We are going to create all the screens for this example inside the directory src/screens. To start with the home screen, create a new file Home.js inside the aforementioned path.
This screen is going to render a list of users from an array of mock data from a placeholder API using a FlatList component. Each user is going to be wrapped inside a TouchableOpacity. The reason being, when an end-user presses a username from the list, this is going to contain the logic for navigating from the Home screen to the Details screen (which we will add later).
For the details screen, for now, let us display user list details. We create a new file called Details.js. To display information for each user when visiting the Details screen, we have to pass the value of each item using navigation parameters. Next, To fetch the data from the placeholder API on initial render, let us use the useEffect hook from React. This hook is going to behave like a good old lifecycle method componentDidMount(). It also allows that if the full item object is passed or not. If not, just grab the userId and request the API. Then, define a state variable data to store the incoming user information. Also, modify the contents of return in this component screen.
To navigate from Home to Details screen, we need Stack Navigator from react-navigation. We create a new file called index.js inside the src/navigation directory and import the following statements.
import React from 'react'
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import Home from '../screens/Home'
import Details from '../screens/Details'
Create a stack navigator with Home as the initial screen. To enable deep linking, the current app requires an identifier to recognize the URI path from the external source to the screen of the app. The library react-navigation provides a path attribute for this. It tells the router relative path to match against the URL. We configure both the routes as follows:
In the above snippet, the dynamic variable specified by :userId is passed to details/. This is going to allow the app to accept a dynamic value such as details/1234.
Next, we add the configuration to the navigation to extract the path from the incoming URL from the external resource. This is done by uriPrefix. Add the following code snippet at the end of the file:
To make this work, we have to configure the native iOS and Android app to open URLs based on the prefix myapp://.
For iOS devices, open the ios/rnDeepLinkDemo/AppDelegate.m file and add the following.
// Add the header at the top of the file:
#import <React/RCTLinkingManager.h>
// Add this above the `@end`:
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:app openURL:url options:options];
}
Open ios/rnDeepLinkingDemo.xcodeproj in the Xcode app and select the app from the left navigation bar.
Open the Info tab.
Next, go to the URL Types.
Click the + button and in identifier as well as URL schemes add myapp.
Rebuild the React Native binaries by running react-native run-ios.
For Android users, we have to configure the external linking as well. Open /android/app/src/main/AndroidManifest.xml and set the value of launchMode to singleTask. Also, add a new intent-filter:
Let’s understand the intent-filter a little better.
” An intent filter is an expression in an app’s manifest file that specifies the type of intents that the component would like to receive.“
Get a closer look on <data> tag inside <intent-filter>. There are two properties that we have to care about. Consider scheme as a type of incoming link and host as the URL.
” Our Deep Link will look something like this: myapp://home .
Testing The App
Before we run the app on our platform of choice, make sure to re-build it using the specific command for the mobile OS as below:
To test deep link in iOS, we open a web browser in our iOS simulator device and run the URL myapp://home. It is going to ask us to whether open the external URI in the app . Next, try entering the URL myapp://details/1 and see what happens.
To test deep link in Android, we make sure our android app is in background and run this command:
adb shell am start -W -a android.intent.action.VIEW -d myapp://home com.rndeeplinkingdemo
adb shell am start -W -a android.intent.action.VIEW -d myapp://details/1 com.rndeeplinkingdemo
If our package has a different name then edit command as follows:
$ adb shell am start -W -a android.intent.action.VIEW -d <URI> <PACKAGE>
If our App opened successfully then our Deep Linking is working as expected.
That’s all about in this article.
Conclusion
In this article, We understood how to handle Deep Linking in React Native. We also discussed about a complete demo of a React Native app that handles deep linking using react-navigation. Deep linking can bring significant improvements to the user experience of our mobile apps and enable search engines to provide context-sensitive searches and results.
Thanks for reading ! I hope you enjoyed and learned about the Deep Linking Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Manage The Lifecycle of Gestures In React Native ?).
In this article, We will learn how to manage the lifecycle of gestures in react native. The gesture responder system manages the lifecycle of gestures in react native application. A touch can go through several phases as the app determines what the user’s intention is. For example, the app needs to determine if the touch is scrolling, sliding on a widget, or tapping. This can even change during the duration of a touch. There can also be multiple simultaneous touches.
The touch responder system is needed to allow components to negotiate these touch interactions without any additional knowledge about their parent or child components.
A famous quote about learning is :
” Change is the end result of all true learning. “
So Let’s begin.
Best Practices
To make our app feel great, every action should have the following attributes:
Feedback/highlighting – show the user what is handling their touch, and what will happen when they release the gesture
Cancel-ability – when making an action, the user should be able to abort it mid-touch by dragging their finger away
These features make users more comfortable while using an app, because it allows people to experiment and interact without fear of making mistakes.
TouchableHighlight and Touchable
The responder system can be complicated to use. So we have provided an abstract Touchable implementation for things that should be “tappable“. This uses the responder system and allows us to configure tap interactions declaratively. Use TouchableHighlight anywhere where we would use a button or link on web.
Gesture Responder System Lifecycle
A view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:
View.props.onStartShouldSetResponder: (evt) => true, – Does this view want to become responder on the start of a touch?
View.props.onMoveShouldSetResponder: (evt) => true, – Called for every touch move on the View when it is not the responder: does this view want to “claim” touch responsiveness?
If the View returns true and attempts to become the responder, one of the following will happen:
View.props.onResponderGrant: (evt) => {} – The View is now responding for touch events. This is the time to highlight and show the user what is happening.
View.props.onResponderReject: (evt) => {} – Something else is the responder right now and will not release it.
If the view is responding, the following handlers can be called:
View.props.onResponderMove: (evt) => {} – The user is moving their finger.
View.props.onResponderRelease: (evt) => {} – Fired at the end of the touch, ie “touchUp”.
View.props.onResponderTerminationRequest: (evt) => true – Something else wants to become responder. Should this view release the responder? Returning true allows release.
View.props.onResponderTerminate: (evt) => {} – The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS).
evt is a synthetic touch event with the following nativeEvent form:
changedTouches – Array of all touch events that have changed since the last event
identifier – The ID of the touch
locationX – The X position of the touch, relative to the element
locationY – The Y position of the touch, relative to the element
pageX – The X position of the touch, relative to the root element
pageY – The Y position of the touch, relative to the root element
target – The node id of the element receiving the touch event
timestamp – A time identifier for the touch, useful for velocity calculation
touches – Array of all current touches on the screen
Capture ShouldSet Handlers
onStartShouldSetResponderand onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for ShouldSetResponderhandlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.
However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.
PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.
By default, PanResponder holds an InteractionManager handle to block long-running JS events from interrupting active gestures.
It provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new gestureState object alongside the native event object:
onPanResponderMove: (event, gestureState) => {}
A native event is a synthetic touch event with form of PressEvent.
A gestureState object has the following:
stateID – ID of the gestureState- persisted as long as there at least one touch on screen
moveX – the latest screen coordinates of the recently-moved touch
moveY – the latest screen coordinates of the recently-moved touch
x0 – the screen coordinates of the responder grant
y0 – the screen coordinates of the responder grant
dx – accumulated distance of the gesture since the touch started
dy – accumulated distance of the gesture since the touch started
vx – current velocity of the gesture
vy – current velocity of the gesture
numberActiveTouches – Number of touches currently on screen
API
Only a single component can respond to touch events at one time – the component responding to events owns a global “interaction lock”. The PanResponder API helps us manage what component owns this lock through a set of callbacks. Each of these callbacks is also passed an event and gestureStateobject containing info about the touch events (e.g. position and velocity).
To create a PanResponder, we call PanResponder.create(callbacksObject). The result is a set of props that can be passed to View as props (these are the lower-level touch event handling props). We’ll typically wrap the result with useRef, since we only want to create a single PanResponder for the lifecycle of the component.
const ExampleComponent = () => {
const panResponder = React.useRef(
PanResponder.create({
// Ask to be the responder:
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) =>
true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) =>
true,
onPanResponderGrant: (evt, gestureState) => {
// The gesture has started. Show visual feedback so the user knows
// what is happening!
// gestureState.d{x,y} will be set to zero now
},
onPanResponderMove: (evt, gestureState) => {
// The most recent move distance is gestureState.move{X,Y}
// The accumulated gesture distance since becoming responder is
// gestureState.d{x,y}
},
onPanResponderTerminationRequest: (evt, gestureState) =>
true,
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
},
onPanResponderTerminate: (evt, gestureState) => {
// Another component has become the responder, so this gesture
// should be cancelled
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// Returns whether this component should block native components from becoming the JS
// responder. Returns true by default. Is currently only supported on android.
return true;
}
})
).current;
return <View {...panResponder.panHandlers} />;
};
Example
PanResponder works with Animated API to help build complex gestures in the UI. The following example contains an animated View component which can be dragged freely across the screen.
In this article, We understood how to manage the lifecycle of gestures in react native. We also discussed about Best Practices and PanResponser usage in React Native platform.
Thanks for reading ! I hope you enjoyed and learned about the Gestures Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Navigate Between Screens In React Native ?).
In this article, We will learn how to navigate between screens in react native. Mobile apps are rarely made up of a single screen. Managing the presentation of, and transition between, multiple screens is typically handled by what is known as a navigator. This article covers the various navigation components available in React Native. If we are getting started with navigation, we will probably want to use React Navigation. React Navigation provides a straightforward navigation solution, with the ability to present common stack navigation and tabbed navigation patterns on both Android and iOS.
If we’d like to achieve a native look and feel on both Android and iOS, or we’re integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.
A famous quote about learning is :
” Study hard what interests you the most in the most undisciplined, irreverent and original manner possible. “
So Let’s begin.
Overview
The community solution to navigation is a standalone library that allows developers to set up the screens of an app with a few lines of code.
React Navigation is the most popular navigation library. It handles most of the challenges described above nicely, and is sufficiently configurable for most apps.
React Navigation provides all the different type of navigator like
Stack Navigator : For the simple screen switching
Drawer Navigator : To create Navigation Drawer/ Sidebar
Bottom Tab Navigator : For the bottom navigation
Top Tab Navigator : To create the tab navigation
Navigation Challenges
There are a few aspects of navigation which make it challenging in React Native:
Navigation works differently on each native platform. iOS uses view controllers, while android uses activities. These platform-specific APIs work differently technically and appear differently to the user. React Native navigation libraries try to support the look-and-feel of each platform, while still providing a single consistent JavaScript API.
Native navigation APIs don’t correspond with “views”. React Native components like View, Text, and Image, roughly map to an underlying native “view”, but there isn’t really an equivalent for some of the navigation APIs. There isn’t always a clear way to expose these APIs to JavaScript.
Navigation on mobile is stateful. On the web, navigation is typically stateless, where a url (i.e. route) takes a user to a single screen/page. On mobile, the history of the user’s navigation state is persisted in the application so that the user can go back to previous screens – a stack of screens can even include the same screen multiple times.
Due to these challenges, there isn’t a single best way to implement navigation, so it was removed from the core React Native package.
Next, we install the required peer dependencies. We need to run different commands depending on whether our project is an Expo managed project or a bare React Native project.
If we have an Expo managed project, install the dependencies with expo:
For iOS with bare React Native project, make sure we have Cocoapods installed. Then we install the pods to complete the installation:
cd ios
pod install
cd ..
We might get warnings related to peer dependencies after installation. They are usually caused by incorrect version ranges specified in some packages. We can safely ignore most warnings as long as our app builds.
To finalize installation of react-native-gesture-handler, add the following at the top (make sure it’s at the top and there’s nothing else before it) of our entry file, such as index.js or App.js:
import 'react-native-gesture-handler';
Now, we need to wrap the whole app in NavigationContainer. Usually we’d do this in our entry file, such as index.js or App.js :
import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
const App = () => {
return (
<NavigationContainer>
{/* Rest of app code */}
</NavigationContainer>
);
};
export default App;
Now we are ready to build and run our app on the device/simulator.
Steps For Adding React Navigation To The App
In this section, we’ll walk through adding react-navigation to an app.
After install the required dependencies, we need to do 3 things:
Set up a <NavigationContainer> from @react-navigation/native
Create a navigator:
createStackNavigator from @react-navigation/stack
createBottomTabNavigator from @react-navigation/bottom-tabs
createDrawerNavigator from @react-navigation/drawer
Define the screens in our app
1. Create a navigator
We first choose one of the available navigators, e.g. stack, which will act as our root navigator. Navigators may be nested later.
import { createStackNavigator } from '@react-navigation/stack'
const Root = createStackNavigator()
2. Create screen components
Next, we create a component for each screen.
Screens are regular React components. They’ll be passed navigation-specific props when instantiated.
Lastly, we render a NavigationContainer with our navigator within it.
Each Screen component defines a route in our app. If we want nested navigators, e.g. a tab navigator within a stack navigator, we can use another navigator as a screen’s component. We only need a single NavigationContainer, even if we have nested navigators.
For components which aren’t screens (direct descendants of a navigator), we can access the navigation and route objects using hooks. Some developers prefer using these hooks instead of props, even in screen components.
In this example, there are 2 screens (Home and Profile) defined using the Stack.Screen component. Similarly, we can define as many screens as we like.
We can set options such as the screen title for each screen in the options prop of Stack.Screen.
Each screen takes a component prop that is a React component. Those components receive a prop called navigation which has various methods to link to other screens. For example, we can use navigation.navigate to go to the Profile screen:
The views in the stack navigator use native components and the Animated library to deliver 60fps animations that are run on the native thread. Plus, the animations and gestures can be customized.
React Navigation also has packages for different kind of navigators such as tabs and drawer. We can use them to implement various patterns in our app.
That’s all about in this article.
Conclusion
In this article, We understood how to navigate between screens in react native. We also discussed about navigation challenges, dependencies and navigation usage in React Native platform.
Thanks for reading ! I hope you enjoyed and learned about the Navigation Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Implement Animations Using The Animated API In React Native ?).
In this article, We will learn how to implement animations using the animated api in react native platform. Animation is an important part of user experience design. It serves as feedback on user actions, informs users of system status, and guides them on how to interact with the interface. This article demonstrates the practical implementation of Animations in React native application. The recommended way to animate in React Native for most cases is by using the Animated API.
A famous quote about learning is :
” He who laughs most, learns best. “
So Let’s begin.
Animation Methods
There are three main Animated methods that we can use to create animations:
Animated.timing() — Maps time range to easing value.
Animated.decay() — starts with an initial velocity and gradually slows to a stop.
Animated.spring() — Simple single-spring physics model (Based on Rebound and Origami). Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.
Along with these three Animated methods, there are three ways to call these animations along with calling them individually. We will be covering all three of these as well:
Animated.parallel() — Starts an array of animations all at the same time.
Animated.sequence() — Starts an array of animations in order, waiting for each to complete before starting the next. If the current running animation is stopped, no following animations will be started.
Animated.stagger() — Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Very similar to Animated.parallel() but allows us to add delays to the animations.
1. Animated.timing()
1.1 Animated.timing Basic Example
The first animation we will be creating is this spinning animation using Animated.timing().
// Example implementation:
Animated.timing(
someValue,
{
toValue: number,
duration: number,
easing: easingFunction,
delay: number
}
)
This type of infinite animation can be useful to use when creating loading indicators, and is one of the more useful animations that we’ve used in many of React Native projects. This concept can also be used to create infinite animations of other types such as scaling up and down or some other type to indicate loading.
To get started, we need to either start with a new React Native project or with a blank existing React Native project. To get started with a new project, type react-native init and the name of the project in the folder in which we will be working in and then cd into that directory:
react-native init animations
cd animations
Now that we are in this folder, open the index.js file. Now that we have a new project created, the first thing we will need to do is import Animated, Image, and Easing from react-native below View that is already being imported:
Animated is the library we will be using to create the animations, and ships with React Native.
Image is needed so we can create an image in our UI.
Easing is a module that also ships with React Native. It allows us to use various predefined easing methods such as linear, ease, quad, cubic, sin, elastic, bounce, back, bezier, in, out, inout, and others. We will be using linear as to have a consistent linear motion. We will have a better idea of how to implement them after this section is finished.
Next, we need to set an initial animated value for our spinning value. To do this, we will set the value in our constructor:
constructor () {
super()
this.spinValue = new Animated.Value(0)
}
We declare spinValue as a new Animated.Value and pass in 0 (zero). Next, we need to create a spin method and call this method on componentDidMount to get it going when the app loads:
Here, this spin() method does the following steps:
Sets this.spinValue back to zero
Calls the Animated.timing method and animates this.spinValue to a value of 1 with a duration of 4000 milliseconds and an easing of Easing.linear. Animated.timing takes two arguments, a value (this.spinValue) and a config object. This config object can take a toValue, a duration, an easing method, and a delay.
We call start() on this Animated.timing method, and pass in a callback of this.spin which will be called when the animation is completed, basically creating an infinite animation. start() takes a completion callback that will be called when the animation is done. If the animation is done because it finished running normally, the completion callback will be invoked with {finished: true}, but if the animation is done because stop was called on it before it could finish (e.g. because it was interrupted by a gesture or another animation), then it will receive {finished: false}.
Now that our methods are set up, we need to render the animation in our UI. To do so, we need to update our render method:
Here, the render() method does the following steps:
We create a variable named spin. In this variable we call interpolate()on this.spinValue. interpolate() is a method that is available to be called on any Animated.Value. interpolate is a method that interpolates the value before updating the property, e.g. mapping 0–1 to 0–10. So in our example, we need to map 0 (zero) degrees to 360 degrees numerically, using the numbers zero to one, and this method easily allows us to do this. We pass in an inputRange and outputRange array, and pass in [0,1] as the inputRange and [‘0deg’, ‘360deg’] as the outputRange.
We return a View with a style of container, and an Animated.Image (React logo) with a height, width, and a transform property in which we attach our spin value to the rotate property, which is where the animation takes place:
transform: [{rotate: spin}]
Finally, we have the container style to center everything:
Note that – Use own image url for example code testing.
The output of the above example is :
1.2 Animated.timing multiple animation Example
Now that we know the basics of Animated.timing, let’s take a look at a few more examples of how to use Animated.timing along with interpolate and declare some other animations.
In the next example, we will declare a single animation value, this.animatedValue, and use the single animated value along with interpolate to create multiple animations, animating the following style properties:
marginLeft
opacity
fontSize
rotateX
To get started, either begin with a new branch or clear out our old code from the last project.
The first thing we will do is create the animated value that we will be using for these animations in the constructor:
constructor () {
super()
this.animatedValue = new Animated.Value(0)
}
Next, we create the animate method and call it in componentDidMount() :
interpolate is a very powerful method, allowing us to use this.animatedValue , a single animated value, in many ways. Because the value simply changes from zero to one, we are able to interpolate this property for styling opacity, margins, text sizes, and rotation properties.
We then return Animated.View and Animated.Text components implementing these new variables:
Decay used to animate the value from its initial velocity down to zero using the deceleration option.
state = {
animation: new Animated.Value(-150)
}
componentDidMount() {
Animated.decay(
this.state.animation,
{
toValue: 200,
duration: 2000,
velocity: 0.95,
deceleration: 0.998 // By default equals to 0.997
}
).start();
}
To demonstrate that we are going to use Motion example. In this example, we are moving the box down the screen. Once the box reaches the finishing line at 200 points below the center, the decay effect applies. The box keeps moving, but its speed is slowing down until it stops.
The final code for this animation with a working example is :
Next, we will be creating an animation using the Animated.spring() method.
// Example implementation:
Animated.spring(
someValue,
{
toValue: number,
friction: number
}
)
We can keep going from the same project, we just need to update a few things. In our constructor, let’s create a value called springValue and set it’s value to .3:
constructor () {
super()
this.springValue = new Animated.Value(0.3)
}
Next, let’s delete the animate() method and componentDidMount() method and create a new method called spring():
Here, this spring() method does the following steps:
We set the springValue to .3 if it’s not already set to .3
We call Animated.spring, passing in two arguments: a value to animate and a config object. The config object can take any of the following arguments: toValue (number), overshootClamping (boolean), restDisplacementThreshold (number), restSpeedThreshold (number), velocity (number), bounciness (number), speed (number), tension (number), and friction (number). The only required value is toValue, but friction and tension can help us get more control over the spring animation.
We call start() to start the animation.
Now that the animation is set up, let’s attach the animation to a click event in our view, and the animation itself to the same React logo we used before:
In the animate method, we set the values of all three animated values back to zero. We then create a function called createAnimation() which returns a new animation , taking in the value, duration, easing, and delay as arguments. If no delay is passed in, we set it to zero.
We then call Animated.parallel() passing in the three animations we want to create using createAnimation().
In our render method, we next need to set up our interpolated values:
Let’s take a look at the api and see how this animation works:
// API
Animated.sequence(arrayOfAnimations)
// In use
Animated.sequence([
Animated.timing(
animatedValue,
{
//config options
}
),
Animated.spring(
animatedValue2,
{
//config options
}
)
])
Like Animated.parallel(), Animated.sequence() takes an array of animations. Animated.sequence() runs an array of animations in order, waiting for each to complete before starting the next.
Because the apis for Animated.sequence() and Animated.parallel() are so similar, taking an array of animations, we are not going to repeat the walkthrough of each method.
The main thing to notice here that is different is that we are creating our Animated.Values with a loop since we are animating so many values. We are also rendering our Animated.Views with a map function returning a new Animated.View for each item in the array.
The sequence of animations should be working now! The output of the above example is :
6. Animated.stagger()
Let’s take a look at the api and see how this animation works:
Like Animated.parallel() and Animated.sequence(), Animated.Stagger also takes an array of animations, but these animations are started in sequence with successive delays.
The main difference here is the first argument, the delay that will be applied to each animation.
The staggered animations should be working now! The output of above example is :
That’s all about in this article.
Conclusion
In this article, We understood about Animation Animation Animated API in React Native. Animation is an important part of user experience design. It serves as feedback on user actions, informs users of system status, and guides them on how to interact with the interface. We discussed how to implement Animations using Animated Api in React native with some example.
Thanks for reading ! I hope you enjoyed and learned about the Animation Animated API Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (Understanding Animations In React Native).
In this article, We will learn about Animations in React Native. Animations are very important to create a great user experience. Stationary objects must overcome inertia as they start moving. Objects in motion have momentum and rarely come to a stop immediately. Animations allow us to convey physically believable motion in our interface.
A famous quote about learning is :
” Develop a passion for learning. If you do, you will never cease to grow.”
So Let’s begin.
Animation Systems
React Native provides two complementary animation systems:
Animatedfor granular and interactive control of specific values. It is a built-in API for animating component styles.
LayoutAnimation for animated global layout transactions. It is a built-in API for animating between 2 component hierarchies (think “magic move”), although still considered experimental.
Most animations will use Animated.
1. Animated
The Animated API is designed to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. Animated focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and start/stop methods to control time-based animation execution.
Animated exports six animatable component types: View, Text, Image, ScrollView, FlatList and SectionList, but we can also create own using Animated.createAnimatedComponent().
The Animated API lets us animate component styles.
For example, a container view that fades in when it is mounted may look like this:
import React, { useRef, useEffect } from 'react';
import { Animated, Text, View } from 'react-native';
const FadeInView = (props) => {
const fadeAnim = useRef(new Animated.Value(0)).current // Initial value for opacity: 0
React.useEffect(() => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 10000,
}
).start();
}, [fadeAnim])
return (
<Animated.View // Special animatable View
style={{
...props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{props.children}
</Animated.View>
);
}
// You can then use your `FadeInView` in place of a `View` in your components:
export default () => {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeInView>
</View>
)
}
Let’s break down what’s happening here. In the FadeInView constructor, a new Animated.Value called fadeAnim is initialized as part of state. The opacity property on the View is mapped to this animated value. Behind the scenes, the numeric value is extracted and used to set opacity.
When the component mounts, the opacity is set to 0. Then, an easing animation is started on the fadeAnim animated value, which will update all of its dependent mappings (in this case, only the opacity) on each frame as the value animates to the final value of 1.
This is done in an optimized way that is faster than calling setState and re-rendering. Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread.
Configuring animations
Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.
Animated provides several animation types, the most commonly used one being Animated.timing(). It supports animating a value over time using one of various predefined easing functions, or we can use own. Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects.
By default, timing will use an easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. We can specify a different easing function by passing an easing parameter. Custom duration or even a delay before the animation starts is also supported.
For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position:
Animations can be combined and played in sequence or in parallel. Sequential animations can play immediately after the previous animation has finished, or they can start after a specified delay. The Animated API provides several methods, such as sequence() and delay(), each of which take an array of animations to execute and automatically calls start()/stop() as needed.
For example, the following animation coasts to a stop, then it springs back while twirling in parallel:
Animated.sequence([
// decay, then spring to start and twirl
Animated.decay(position, {
// coast to a stop
velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release
deceleration: 0.997
}),
Animated.parallel([
// after decay, in parallel:
Animated.spring(position, {
toValue: { x: 0, y: 0 } // return to start
}),
Animated.timing(twirl, {
// and twirl
toValue: 360
})
])
]).start(); // start the sequence group
If one animation is stopped or interrupted, then all other animations in the group are also stopped. Animated.parallel has a stopTogether option that can be set to false to disable this.
Combining animated values
We can combine two animated values via addition, multiplication, division, or modulo to make a new animated value.
There are some cases where an animated value needs to invert another animated value for calculation. An example is inverting a scale (2x –> 0.5x):
const a = new Animated.Value(1);
const b = Animated.divide(1, a);
Animated.spring(a, {
toValue: 2
}).start();
Interpolation
Each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but we can also have it clamp the output value.
A basic mapping to convert a 0-1 range to a 0-100 range would be:
For example, we may want to think about our Animated.Value as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to 1. This can be done by modifying style from the example above like so:
interpolate()supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. For example, to get a negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, we could do:
interpolate() also supports mapping to strings, allowing us to animate colors as well as values with units. For example, if we wanted to animate a rotation we could do:
interpolate() also supports arbitrary easing functions, many of which are already implemented in the Easing module. interpolate() also has configurable behavior for extrapolating the outputRange. We can set the extrapolation by setting the extrapolate, extrapolateLeft, or extrapolateRight options. The default value is extend but we can use clamp to prevent the output value from exceeding outputRange.
Tracking dynamic values
Animated values can also track other values by setting the toValue of an animation to another animated value instead of a plain number. For example, a “Chat Heads” animation like the one used by Messenger on Android could be implemented with a spring() pinned on another animated value, or with timing() and a duration of 0 for rigid tracking. They can also be composed with interpolations:
The leader and follower animated values would be implemented using Animated.ValueXY(). ValueXY is a handy way to deal with 2D interactions, such as panning or dragging. It is a basic wrapper that contains two Animated.Value instances and some helper functions that call through to them, making ValueXY a drop-in replacement for Value in many cases. It allows us to track both x and y values in the example above.
Tracking gestures
Gestures, like panning or scrolling, and other events can map directly to animated values using Animated.event. This is done with a structured map syntax so that values can be extracted from complex event objects. The first level is an array to allow mapping across multiple args, and that array contains nested objects.
For example, when working with horizontal scrolling gestures, we would do the following in order to map event.nativeEvent.contentOffset.x to scrollX (an Animated.Value):
The following example implements a horizontal scrolling carousel where the scroll position indicators are animated using the Animated.event used in the ScrollView.
When using PanResponder, we could use the following code to extract the x and y positions from gestureState.dx and gestureState.dy. We use a null in the first position of the array, as we are only interested in the second argument passed to the PanResponder handler, which is the gestureState.
onPanResponderMove={Animated.event(
[null, // ignore the native event
// extract dx and dy from gestureState
// like 'pan.x = gestureState.dx, pan.y = gestureState.dy'
{dx: pan.x, dy: pan.y}
])}
Responding to the current animation value
We may notice that there is no clear way to read the current value while animating. This is because the value may only be known in the native runtime due to optimizations. If we need to run JavaScript in response to the current value, there are two approaches:
spring.stopAnimation(callback) will stop the animation and invoke callback with the final value. This is useful when making gesture transitions.
spring.addListener(callback) will invoke callback asynchronously while the animation is running, providing a recent value. This is useful for triggering state changes, for example snapping a bobble to a new option as the user drags it closer, because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps.
Animated is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. We need to check out Animated.Value.addListener as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.
Using the native driver
The Animated API is designed to be serializable. By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.
Using the native driver for normal animations is straightforward. We can add useNativeDriver: true to the animation config when starting it.
Animated values are only compatible with one driver so if we use native driver when starting an animation on a value, make sure every animation on that value also uses the native driver.
The native driver also works with Animated.event. This is especially useful for animations that follow the scroll position as without the native driver, the animation will always run a frame behind the gesture due to the async nature of React Native.
<Animated.ScrollView // <-- Use the Animated ScrollView wrapper
scrollEventThrottle={1} // <-- Use 1 here to make sure no events are ever missed
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: { y: this.state.animatedValue }
}
}
],
{ useNativeDriver: true } // <-- Add this
)}>
{content}
</Animated.ScrollView>
Not everything we can do with Animated is currently supported by the native driver. The main limitation is that we can only animate non- layout properties: things like transform and opacitywill work, but Flexbox and position properties will not. When using Animated.event, it will only work with direct events and not bubbling events. This means it does not work with PanResponder but does work with things like ScrollView#onScroll.
When an animation is running, it can prevent VirtualizedList components from rendering more rows. If we need to run a long or looping animation while the user is scrolling through a list, we can use isInteraction: false in our animation’s config to prevent this issue.
2. LayoutAnimation API
LayoutAnimation allows us to globally configure create and update animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a “see more” expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.
Note that although LayoutAnimation is very powerful and can be quite useful, it provides much less control than Animated and other animation libraries, so we may need to use another approach if we can’t get LayoutAnimation to do what you want.
Note that in order to get this to work on Android, we need to set the following flags via UIManager:
In this article, We understood about Animations in React Native. Animation is an important part of user experience design. It serves as feedback on user actions, informs users of system status, and guides them on how to interact with the interface.
Thanks for reading ! I hope you enjoyed and learned about the Animations Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (React Native – How To Use Touchable Components In React Native?).
In this article, we will understand about how to use Touchable Components in React Native. Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component we will most likely be interested in is the basic Button. This article demonstrates the kinds of touchable with examples in React Native.
A famous quote about learning is :
” Anyone who stops learning is old, whether at twenty or eighty. Anyone who keeps learning stays young. The greatest thing in life is to keep your mind young. “
So Let’s begin.
Displaying a basic button
Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:
<Button
onPress={() => {
alert('You tapped the button!');
}}
title="Press Me"
/>
This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the “onPress” function, which in this case displays an alert popup. If we like, we can specify a “color” prop to change the color of our button.
We can see the Button component using the example below. We can select which platform our app is previewed in by clicking on the toggle in the bottom right, then click on “Tap to Play” to preview the app.
In React Native, most “buttons” are actually implemented using Touchable components. Like Button, these components support an onPress prop. However, unlike Button, these components support custom styling – essentially a Touchable is a View that can be pressed.
Touchables have a variety of other props, like onPressIn and onPressOut, which give us more control over the behavior of the button. We can use these props to run custom animations.
Kinds of Touchable
Although we can run custom animations, most of the time, we use one of 2 built-in animations: a fade in opacity, or a change of color. There are preconfigured touchable components for each of these: TouchableOpacity and TouchableHighlight.
Which “Touchable” component we use will depend on what kind of feedback we want to provide:
Generally, we can use TouchableHighlight anywhere we would use a button or link on web. The view’s background will be darkened when the user presses down on the button.
We may consider using TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user’s touch.
TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.
If we need to handle a tap gesture but we don’t want any feedback to be displayed, use TouchableWithoutFeedback.
In some cases, we may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the onLongPress props of any of the “Touchable” components.
Gestures commonly used on devices with touchable screens include swipes and pans. These allow the user to scroll through a list of items, or swipe through pages of content.
That’s all about in this article.
Conclusion
In this article, We understood about how to use Touchable Components in React Native.
Thanks for reading ! I hope you enjoyed and learned about the Touchable Components Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Use Hooks In React Native ?).
In this article, we will understand about how to use Hooks in react native. Hooks are specially-implemented functions that let us add functionality to React components beyond just creating and returning React elements. This article demonstrates the built-in hooks usage in react native application.
A famous quote about learning is :
” Develop a passion for learning. If you do, you will never cease to grow. “
So Let’s begin.
React Hooks
” React Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class component. In other words, Hooks are functions that let you “hook into” React state and lifecycle features from function components. (They do not work inside class components.)”
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. It mainly uses to handle the state and side effects in react functional component. React Hooks are a way to use stateful functions inside a functional component. Hooks don’t work inside classes — they let you use React without classesReact provides a few built-in Hooks like useState and useEffect. The React hooks do :
Best practices
Easy to under understand
Easy to test
Increases the performance and so on.
Rules and Linting
Hooks aren’t regular functions; they have to be written in a certain way. To dive deeper into this topic, check out:
ReactJS – How to Effectively Think In React Hooks ?
When using hooks, we typically want to use eslint and the react-hooks plugin. Hooks are powerful, but can be unintuitive at first, and this tool catches a lot of mistakes before we ever run our code.
In-built React Hooks APIs
We’ll look at the following built-in hooks in more detail:
useState – Persist state within a component function
useReducer – Similar to useState, but for state that involves multiple sub-values
useEffect – Perform side effects within our component functions
useRef – Wrap a mutable value
1. useState
The useState hook lets us “remember” a value within a component function. Since our component function may be called many times throughout the lifecycle of the component, any variable we declare normally (i.e. with let myVar = ...) will get reset. With useState, React can remember a state variable for us, making sure it gets passed into our component instance correctly.
API
The useState hook takes a single argument, our initial state, and returns an array containing two elements:
Note how when we call setDiceRoll, we’re not pushing the integer returned from randomDiceRoll() into the diceRolls array. Instead, we return a new array containing the destructured diceRolls array and the newly randomized dice roll. Why?
Hooks can tell React to re-run our component function and update the UI. The useState hook tells React to re-run our component function whenever we call setDiceRolls with a different value. Internally, useState then compares the current value of diceRolls with the value we passed to setDiceRolls using ===. If we’re using a mutable value like an array, and we only change its contents, useState won’t detect that change and won’t tell React to re-run our component function. This will result in our UI displaying old/stale data. To avoid this problem we need to create a new array, so that useState will detect that our data changed and display the newest data.
2. useReducer
The useReducer hook is similar to useState, but gives us a more structured approach for updating complex values.
We typically use useReducer when our state has multiple sub-values, e.g. an object containing keys that we want to update independently.
API
The useReducer hook requires 2 arguments, and has an optional 3rd argument:
reducer – a pure function that takes a state and an action, and returns a new state value based on the action
initialState – any initial state value, just like useState
initializer (optional) – a function called to lazily instantiate the initialState (this is uncommon)
The useReducer hook returns the current state, and a dispatch function to update the state.
Example
In this example, we store both a first and last name in a single state object with useReducer.
When we type a new first name, dispatch is called with { type: 'first', value: text } as its argument. This argument gets passed to the reducer as action. Then the reducer follows the switch case logic case 'first' and returns the new state: the current last name (from ...state) and the new first name contained in the action as action.value.
We use the useEffect hook to call functions with side effects within our components.
API
The useEffect hook takes 2 arguments:
callback – a function with side effects
dependencies – an optional array containing dependency values
When our component function runs, the callback will be called if any dependencies have changed since the last time the component function ran.
Example
In this example, we’ll log to the console any time the count is a multiple of 3. The callback is called every time the countEvery3 changes, since countEvery3 is listed as a dependency.
If the dependency array is empty or undefined, useEffect will have a different behavior:
[] – the callback is called only once, right after the component renders for the first time.
undefined – the callback is called on every component render (every time the component function runs).
undefined dependencies
Here the dependency array is undefined, so our callback will run every time our component function runs, e.g. any time we click the button and useState tells our component to re-run.
We can compose built-in hooks to create new ones. We should still use the use prefix for our function name.
Example
import React, { useState, useEffect, useRef } from 'react'
import { Text } from 'react-native'
function useInterval(callback, delay) {
const savedCallback = useRef()
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback
}, [callback])
// Set up the interval.
useEffect(() => {
if (delay !== null) {
let id = setInterval(() => {
savedCallback.current()
}, delay)
return () => clearInterval(id)
}
}, [delay])
}
export default function App() {
const [count, setCount] = useState(0)
useInterval(() => {
setCount(count + 1)
}, 1000)
return <Text style={{ fontSize: 120 }}>{count}</Text>
}
That’s all about in this article.
Conclusion
In this article, We understood about how to use Hooks in React Native. This article demonstrated In-built Hooks APIs Usage with examples in React Native application.
Thanks for reading ! I hope you enjoyed and learned about the Hook Concepts in React Native. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
