Loading...

Follow SKPTRICKS - Programmer Hub on Feedspot

Continue with Google
Continue with Facebook
or

Valid
This tutorial explains how to perform copy text to clipboard in react native application with simple example. Reading and writing from the Clipboard is incredibly easy in React Native by using the Clipboard API. It will work on both Android and IOS platform. Clipboard is a clean slate temporary storage area in computers & mobile phones used to perform cut, copy and paste text functionality. By default the cut, copy and paste functionality works automatically in TextInput component in react native. Sometimes developer needs to manually push and pop the values of Clipboard. We would use the react native’s Clipboard component API to manually insert and get value of Clipboard.



React Native Copy to Clipboard :Use of Clipboard :Copy the value using :
const clipboardContent = await Clipboard.getString();

Paste the value using :
await Clipboard.setString(this.state.text);

Lets see the below steps that helps to perform copy text to clipboard in react native application with simple example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { Text, StyleSheet, View, TextInput, TouchableOpacity, Clipboard } from 'react-native';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created two state variables named as clipboardText and textInputText
clipboardText : Used to hold the Clipboard copy and cut text.
textInputText : Used to store the TextInput component entered text.
 constructor(props) {
super(props);
this.state = {
clipboardText: "",
textInputText: ""
}
}

Step 5: Lets create setTextIntoClipboard and getTextFromClipboard function in your App component.
setTextIntoClipboard : Used to get the current clipboard text.
getTextFromClipboard : Setting up any text manually in Clipboard.
setTextIntoClipboard = async () => {
await Clipboard.setString(this.state.textInputText);
}

getTextFromClipboard = async () => {
var textHolder = await Clipboard.getString();
this.setState({
clipboardText: textHolder
})
}

Step 6: Implement render method inside the App class and wrapped the below layout design inside the root View component.  
render() {
return (
<View style={styles.container} >
<TextInput
placeholder="Enter Text Here"
style={styles.textInputStyle}
underlineColorAndroid='transparent'
onChangeText={value => this.setState({ textInputText: value })}
/>

<TouchableOpacity onPress={this.getTextFromClipboard} activeOpacity={0.7} style={styles.touchableButton} >
<Text style={styles.TextStyle}> PASTE THE COPIED TEXT </Text>
</TouchableOpacity>

<TouchableOpacity onPress={this.setTextIntoClipboard} activeOpacity={0.7} style={styles.touchableButton} >
<Text style={styles.TextStyle}> COPY TEXTINPUT TEXT INTO CLIPBOARD </Text>
</TouchableOpacity>

<Text style={{ fontSize: 20 }}>Display Text : {this.state.clipboardText}</Text>
</View>
);
}

Step 7 : Apply the below style sheet design.  
const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 20
},
textInputStyle: {
textAlign: 'center',
height: 41,
width: '92%',
borderWidth: 1,
borderColor: '#009688',
borderRadius: 8,
marginBottom: 20
},
touchableButton: {
width: '80%',
padding: 10,
backgroundColor: '#009688',
marginBottom: 10,
},
TextStyle: {
color: '#fff',
fontSize: 18,
textAlign: 'center',
}
});

Complete Source Code for App.js 
Lets see the complete source code that helps to perform copy text to clipboard in react native application in android and iOS application.

import React, { Component } from 'react';
import { Text, StyleSheet, View, TextInput, TouchableOpacity, Clipboard } from 'react-native';


export default class App extends Component {

constructor(props) {
super(props);
this.state = {
clipboardText: "",
textInputText: ""
}
}

setTextIntoClipboard = async () => {
await Clipboard.setString(this.state.textInputText);
}

getTextFromClipboard = async () => {
var textHolder = await Clipboard.getString();
this.setState({
clipboardText: textHolder
})
}

render() {
return (
<View style={styles.container} >
<TextInput
placeholder="Enter Text Here"
style={styles.textInputStyle}
underlineColorAndroid='transparent'
onChangeText={value => this.setState({ textInputText: value })}
/>

<TouchableOpacity onPress={this.getTextFromClipboard} activeOpacity={0.7} style={styles.touchableButton} >
<Text style={styles.TextStyle}> PASTE THE COPIED TEXT </Text>
</TouchableOpacity>

<TouchableOpacity onPress={this.setTextIntoClipboard} activeOpacity={0.7} style={styles.touchableButton} >
<Text style={styles.TextStyle}> COPY TEXTINPUT TEXT INTO CLIPBOARD </Text>
</TouchableOpacity>

<Text style={{ fontSize: 20 }}>Display Text : {this.state.clipboardText}</Text>
</View>
);
}
}

const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 20
},
textInputStyle: {
textAlign: 'center',
height: 41,
width: '92%',
borderWidth: 1,
borderColor: '#009688',
borderRadius: 8,
marginBottom: 20
},
touchableButton: {
width: '80%',
padding: 10,
backgroundColor: '#009688',
marginBottom: 10,
},
TextStyle: {
color: '#fff',
fontSize: 18,
textAlign: 'center',
}
});

Screenshot :



This is all about React Native Copy Text to Clipboard Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to make a phone call in react native application using Linking component in react native applicationLinking gives you a general interface to interact with both incoming and outgoing app links. In mobile applications you may have seen many times there is a calling button present and when you press the call button it would open the phone numbers on mobile dial pad screen. This functionality would give you more easiness in our application and helps to make a call from application.



Example to Make a Phone Call in React Native App :Lets see the below steps that helps to make a phone call in react native application using Linking component in React Native.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { Text, StyleSheet, View, Linking, Platform, TouchableOpacity } from 'react-native';

Step 4: Create a function named as makeCall() in your App class. This Function first use the platform component to check the device is android or ios then if device is android then store the number value in phoneNumber variable. At last we would pass the phoneNumber variable in Lining component which would open this in our dial pad screen.
tel : Open the given number in android.
telprompt : Open the given number in iOS devices.
makeCall = () => {

let phoneNumber = '';

if (Platform.OS === 'android') {
phoneNumber = 'tel:${1234567890}';
} else {
phoneNumber = 'telprompt:${1234567890}';
}

Linking.openURL(phoneNumber);
};

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component.
 render() {
return (
<View style={styles.container} >
<TouchableOpacity onPress={this.makeCall} activeOpacity={0.7} style={styles.touchableButton} >
<Text style={styles.TextStyle}> Click Here To Dial In Dial Screen</Text>
</TouchableOpacity>
</View>
);
}

Step 6 : Apply the below style sheet design. 
const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 20
},
touchableButton: {
width: '80%',
padding: 10,
backgroundColor: '#9c27b0',
},
TextStyle: {
color: '#fff',
fontSize: 18,
textAlign: 'center',
}

});

Complete Source Code for App.js Lets see the complete source code that helps to make a phone call in react native application using Linking component in React Native.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Linking, Platform, TouchableOpacity } from 'react-native';


export default class App extends Component {

makeCall = () => {

let phoneNumber = '';

if (Platform.OS === 'android') {
phoneNumber = 'tel:${1234567890}';
} else {
phoneNumber = 'telprompt:${1234567890}';
}

Linking.openURL(phoneNumber);
};

render() {
return (
<View style={styles.container} >
<TouchableOpacity onPress={this.makeCall} activeOpacity={0.7} style={styles.touchableButton} >
<Text style={styles.TextStyle}> Click Here To Dial In Dial Screen</Text>
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 20
},
touchableButton: {
width: '80%',
padding: 10,
backgroundColor: '#9c27b0',
},
TextStyle: {
color: '#fff',
fontSize: 18,
textAlign: 'center',
}

});

Screenshot : 


This is all about make a phone call in react native application using Linking component in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to add permissions for android application in AndroidManifest.xml File in react native application. Permissions is designed to maintain the security between application and application user. The purpose of a permission is to protect the privacy of an Android user. Android apps must request permission to access sensitive user data (such as contacts and SMS), as well as certain system features (such as camera and internet). Depending on the feature, the system might grant the permission automatically or might prompt the user to approve the request. The AndroidManifest.xml file contain all the important information about application like Application Icon details, Application name and all about activities. AndroidManifest.xml file is used to set normal permissions inside it.



NOTE: Permission requests protect sensitive information available from a device and should only be used when access to information is necessary for the functioning of your app.

How  to Add Permissions for Android in AndroidManifest.xml in React Native:Lets see the below steps that helps to add Permissions for Android in AndroidManifest.xml in React Native.

Step 1: To add any permission in AndroidManifest.xml file first we have to open it. The AndroidManifest.xml is located in following path :
 <Android project>/app/src/AndroidManifest.xml file.

Step 2 : Open your AndroidManifest.xml file in Any text editor and then you will see below data present in AndroidManifest.xml file.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnv59">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

Step 3 : An app must publicize the permissions it requires by including <uses-permission> tags in the app manifest. For example here we have added internet, location and camera permission.
    <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

List of All Normal and Dangerous Permissions in Android :
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY"/>
<uses-permission android:name="android.permission.ACCESS_SURFACE_FLINGER"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCOUNT_MANAGER"/>
<uses-permission android:name="android.permission.ADD_VOICEMAIL"/>
<uses-permission android:name="android.permission.ANSWER_PHONE_CALLS"/>
<uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS"/>
<uses-permission android:name="android.permission.BATTERY_STATS"/>
<uses-permission android:name="android.permission.BIND_ACCESSIBILITY_SERVICE"/>
<uses-permission android:name="android.permission.BIND_APPWIDGET"/>
<uses-permission android:name="android.permission.BIND_AUTOFILL_SERVICE"/>
<uses-permission android:name="android.permission.BIND_CARRIER_MESSAGING_SERVICE"/>
<uses-permission android:name="android.permission.BIND_CARRIER_SERVICES"/>
<uses-permission android:name="android.permission.BIND_CHOOSER_TARGET_SERVICE"/>
<uses-permission android:name="android.permission.BIND_CONDITION_PROVIDER_SERVICE."/>
<uses-permission android:name="android.permission.BIND_DEVICE_ADMIN"/>
<uses-permission android:name="android.permission.BIND_DREAM_SERVICE"/>
<uses-permission android:name="android.permission.BIND_INCALL_SERVICE"/>
<uses-permission android:name="android.permission.BIND_INPUT_METHOD"/>
<uses-permission android:name="android.permission.BIND_NFC_SERVICE"/>
<uses-permission android:name="android.permission.BIND_MIDI_DEVICE_SERVICE"/>
<uses-permission android:name="android.permission.BIND_NOTIFICATION_LISTENER_SERVICE"/>
<uses-permission android:name="android.permission.BIND_PRINT_SERVICE"/>
<uses-permission android:name="android.permission.BIND_QUICK_SETTINGS_TILE"/>
<uses-permission android:name="android.permission.BIND_REMOTEVIEWS"/>
<uses-permission android:name="android.permission.BIND_SCREENING_SERVICE"/>
<uses-permission android:name="android.permission.BIND_TELECOM_CONNECTION_SERVICE"/>
<uses-permission android:name="android.permission.BIND_TEXT_SERVICE"/>
<uses-permission android:name="android.permission.BIND_TV_INPUT"/>
<uses-permission android:name="android.permission.BIND_VISUAL_VOICEMAIL_SERVICE"/>
<uses-permission android:name="android.permission.BIND_VOICE_INTERACTION"/>
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BIND_WALLPAPER"/>
<uses-permission android:name="android.permission.BLUETOOTH_PRIVILEGED"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-permission android:name="android.permission.BIND_VR_LISTENER_SERVICE"/>
<uses-permission android:name="android.permission.BIND_VPN_SERVICE"/>
<uses-permission android:name="android.permission.BODY_SENSORS"/>
<uses-permission android:name="android.permission.BRICK"/>
<uses-permission android:name="android.permission.BROADCAST_PACKAGE_REMOVED"/>
<uses-permission android:name="android.permission.BROADCAST_SMS"/>
<uses-permission android:name="android.permission.BROADCAST_STICKY"/>
<uses-permission android:name="android.permission.BROADCAST_WAP_PUSH"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.CALL_PRIVILEGED"/>
<uses-permission android:name="android.permission.CAPTURE_AUDIO_OUTPUT"/>
<uses-permission android:name="android.permission.CAPTURE_SECURE_VIDEO_OUTPUT"/>
<uses-permission android:name="android.permission.CAPTURE_VIDEO_OUTPUT"/>
<uses-permission android:name="android.permission.CHANGE_COMPONENT_ENABLED_STATE"/>
<uses-permission android:name="android.permission.CHANGE_CONFIGURATION"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.CLEAR_APP_CACHE"/>
<uses-permission android:name="android.permission.CLEAR_APP_USER_DATA"/>
<uses-permission android:name="android.permission.CONTROL_LOCATION_UPDATES"/>
<uses-permission android:name="android.permission.DELETE_CACHE_FILES"/>
<uses-permission android:name="android.permission.DELETE_PACKAGES"/>
<uses-permission android:name="android.permission.DEVICE_POWER"/>
<uses-permission android:name="android.permission.DIAGNOSTIC"/>
<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>
<uses-permission android:name="android.permission.DUMP"/>
<uses-permission android:name="android.permission.EXPAND_STATUS_BAR"/>
<uses-permission android:name="android.permission.FACTORY_TEST"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>
<uses-permission android:name="android.permission.FORCE_BACK"/>
<uses-permission android:name="android.permission.GET_ACCOUNTS"/>
<uses-permission android:name="android.permission.GET_ACCOUNTS_PRIVILEGED"/>
<uses-permission android:name="android.permission.GET_PACKAGE_SIZE"/>
<uses-permission android:name="android.permission.GET_TASKS"/>
<uses-permission android:name="android.permission.GET_TOP_ACTIVITY_INFO"/>
<uses-permission android:name="android.permission.GLOBAL_SEARCH"/>
<uses-permission android:name="android.permission.HARDWARE_TEST"/>
<uses-permission android:name="android.permission.INJECT_EVENTS"/>
<uses-permission android:name="android.permission.INSTALL_LOCATION_PROVIDER"/>
<uses-permission android:name="android.permission.INSTALL_PACKAGES"/>
<uses-permission android:name="android.permission.INSTALL_SHORTCUT"/>
<uses-permission android:name="android.permission.INSTANT_APP_FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.INTERNAL_SYSTEM_WINDOW"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.KILL_BACKGROUND_PROCESSES"/>
<uses-permission android:name="android.permission.LOCATION_HARDWARE"/>
<uses-permission android:name="android.permission.MANAGE_ACCOUNTS"/>
<uses-permission android:name="android.permission.MANAGE_APP_TOKENS"/>
<uses-permission android:name="android.permission.MANAGE_DOCUMENTS"/>
<uses-permission android:name="android.permission.MANAGE_OWN_CALLS"/>
<uses-permission android:name="android.permission.MASTER_CLEAR"/>
<uses-permission android:name="android.permission.MEDIA_CONTENT_CONTROL"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.MOUNT_FORMAT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.MODIFY_PHONE_STATE"/>
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permission android:name="android.permission.NFC"/>
<uses-permission android:name="android.permission.PACKAGE_USAGE_STATS"/>
<uses-permission android:name="android.permission.PERSISTENT_ACTIVITY"/>
<uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS"/>
<uses-permission android:name="android.permission.READ_CALENDAR"/>
<uses-permission android:name="android.permission.READ_CALL_LOG"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_FRAME_BUFFER"/>
<uses-permission android:name="android.permission.READ_HISTORY_BOOKMARKS"/>
<uses-permission android:name="android.permission.READ_INPUT_STATE"/>
<uses-permission android:name="android.permission.READ_LOGS"/>
<uses-permission android:name="android.permission.READ_PHONE_NUMBERS"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.READ_PROFILE"/>
<uses-permission android:name="android.permission.READ_SMS"/>
<uses-permission android:name="android.permission.READ_SOCIAL_STREAM"/>
<uses-permission android:name="android.permission.READ_CALL_LOG"/>
<uses-permission android:name="android.permission.READ_SYNC_SETTINGS"/>
<uses-permission android:name="android.permission.READ_USER_DICTIONARY"/>
<uses-permission android:name="android.permission.READ_VOICEMAIL"/>
<uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS"/>
<uses-permission android:name="android.permission.REBOOT"/>
<uses-permission android:name="android.permission.SEND_RESPOND_VIA_MESSAGE"/>
<uses-permission android:name="android.permission.SEND_SMS"/>
<uses-permission android:name="android.permission.SET_ACTIVITY_WATCHER"/>
<uses-permission android:name="android.permission.SET_ALARM"/>
<uses-permission android:name="android.permission.SET_ALWAYS_FINISH"/>
<uses-permission android:name="android.permission.SET_ANIMATION_SCALE"/>
<uses-permission android:name="android.permission.SET_DEBUG_APP"/>
<uses-permission android:name="android.permission.SET_ORIENTATION"/>
<uses-permission android:name="android.permission.SET_POINTER_SPEED"/>
<uses-permission android:name="android.permission.SET_PREFERRED_APPLICATIONS"/>
<uses-permission android:name="android.permission.SET_PROCESS_LIMIT"/>
<uses-permission android:name="android.permission.SET_TIME"/>
<uses-permission android:name="android.permission.SET_TIME_ZONE"/>
<uses-permission android:name="android.permission.SET_WALLPAPER"/>
<uses-permission android:name="android.permission.SET_WALLPAPER_HINTS"/>
<uses-permission android:name="android.permission.TRANSMIT_IR"/>
<uses-permission android:name="android.permission.UNINSTALL_SHORTCUT"/>
<uses-permission android:name="android.permission.UPDATE_DEVICE_STATS"/>
<uses-permission android:name="android.permission.USE_CREDENTIALS"/>
<uses-permission android:name="android.permission.USE_FINGERPRINT"/>
<uses-permission android:name="android.permission.USE_SIP"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.WRITE_APN_SETTINGS"/>
<uses-permission android:name="android.permission.WRITE_CALENDAR"/>
<uses-permission android:name="android.permission.WRITE_CALL_LOG"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_GSERVICES"/>
<uses-permission android:name="android.permission.WRITE_HISTORY_BOOKMARKS"/>
<uses-permission android:name="android.permission.WRITE_PROFILE"/>
<uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS"/>
<uses-permission android:name="android.permission.WRITE_SMS"/>
<uses-permission android:name="android.permission.WRITE_SOCIAL_STREAM"/>
<uses-permission android:name="android.permission.WRITE_SYNC_SETTINGS"/>
<uses-permission android:name="android.permission.WRITE_USER_DICTIONARY"/>
<uses-permission android:name="android.permission.WRITE_VOICEMAIL"/>

Best Practices For Android Permission :Tenets of working with Android permissions. We recommend following these tenets when working with Android permissions:

#1: Only use the permissions necessary for your app to work. Depending on how you are using the permissions, there may be another way to do what you need (system intents, identifiers, backgrounding for phone calls) without relying on access to sensitive information.

#2: Pay attention to permissions required by libraries. When you include a library, you also inherit its permission requirements. You should be aware of what you're including, the permissions they require, and what those permissions are used for.

#3: Be transparent. When you make a permissions request, be clear about what you’re accessing, and why, so users can make informed decisions. Make this information available alongside the permission request including install, runtime, or update permission dialogues.

#4: Make system accesses explicit. Providing continuous indications when you access sensitive capabilities (for example, the camera or microphone) makes it clear to users when you’re collecting data and avoids the perception that you're collecting data surreptitiously.

This is all about Add Permissions for Android in AndroidManifest.xml in React Native.  Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to implement runtime permissions request in android device in react native application. The purpose of a permission is to protect the privacy of an Android user. Android apps must request permission to access sensitive user data (such as contacts and SMS), as well as certain system features (such as camera and internet). Depending on the feature, the system might grant the permission automatically or might prompt the user to approve the request. Android application has its own secure infrastructure to make application user feel that he is completely secure from any threat and also he can manage to give some of his own data as his own permissions. Application developer directly ask the application user for his permission before accessing his personal data like Device Location, Access Camera, Access device storage, Access device Contacts etc.

What is Android Permission?According to Google’s privacy policy, a user should know which application is trying to access sensitive data such as contacts and SMS, as well as certain system features such as camera and internet. So in Android, they have introduced an Android permission modal in which applications have to ask for the permissions if they want to use user sensitive data or some certain features. The purpose of permission is to protect the privacy of an Android user.

Why We have to Ask for Permission?Android applies the permission modal because some of the applications were tracking the user’s location in the background and accessing the private data like contacts, call history and messages without informing the App user which is the violation of googles privacy policy. So to solve this sensitive issue we have to ask for permission.

How to Ask for Permission in Android?Now if you have an idea about the Android permission then have a look at how to ask for permission in Android.

To ask for permission in Android you have to follow two steps:

Step 1:  To ask for the permission you have to add those permissions requests in
 <Android project>/app/src/AndroidManifest.xml file.

For Example, if we want to ask for the Camera Permission we have to add the following permission request in AndroidManifest.xml

For example here is one line statement, that is require for camera permission.
<uses-permission android:name="android.permission.CAMERA">



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.

NOTE: 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 normal permissions are granted but for some permissions, you have to ask the user in runtime.

Step 2: After Google’s new permission modal they have introduced the run time permission mechanism. According to that, you have to include all the permissions in AndroidManiifest.xml but you have to ask for the dangerous permissions in run time.

NOTE : 
  • According to the official docs, dangerous permissions require a dialog prompt.
  • So whenever you are working with this dangerous permissions you need to check whether the permission is granted by the user or not and that can be done with the help of PermissionsAndroid in React Native.

For example, we have to ask for the INTERNET permission and CAMERA permission both but according to Android only CAMERA permission comes under the dangerous permission so we have to ask only for the CAMERA permission in run time. Hope you have understood the run time permission now.

How to Ask Run Time Android Permission using React Native PermissionsAndroid?In React Native PermissionsAndroid component provides access to Android M (Over API level 23) new permissions model. You always need to check the permission before using native APIs which needs dangerous permissions.

You can check the permission granted or not using PermissionsAndroid.RESULTS.GRANTED

To ask for the permission you can use
PermissionsAndroid.request(permission name, {Permission dialog headng, body})

Run Time Permissions that Requires Confirmation from the User

Available as constants under PermissionsAndroid.PERMISSIONS

READ_CALENDARandroid.permission.READ_CALENDAR
WRITE_CALENDARandroid.permission.WRITE_CALENDAR
CAMERAandroid.permission.CAMERA
READ_CONTACTSandroid.permission.READ_CONTACTS
WRITE_CONTACTSandroid.permission.WRITE_CONTACTS
GET_ACCOUNTSandroid.permission.GET_ACCOUNTS
ACCESS_FINE_LOCATIONandroid.permission.ACCESS_FINE_LOCATION
ACCESS_COARSE_LOCATIONandroid.permission.ACCESS_COARSE_LOCATION
RECORD_AUDIOandroid.permission.RECORD_AUDIO
READ_PHONE_STATEandroid.permission.READ_PHONE_STATE
CALL_PHONEandroid.permission.CALL_PHONE
READ_CALL_LOGandroid.permission.READ_CALL_LOG
WRITE_CALL_LOGandroid.permission.WRITE_CALL_LOG
ADD_VOICEMAILcom.android.voicemail
USE_SIPandroid.permission.USE_SIP
PROCESS_OUTGOING_CALLSandroid.permission.PROCESS_OUTGOING_CALLS
BODY_SENSORSandroid.permission.BODY_SENSORS
SEND_SMSandroid.permission.SEND_SMS
RECEIVE_SMSandroid.permission.RECEIVE_SMS
READ_SMSandroid.permission.READ_SMS
RECEIVE_WAP_PUSHandroid.permission.RECEIVE_WAP_PUSH
RECEIVE_MMSandroid.permission.RECEIVE_MMS
READ_EXTERNAL_STORAGEandroid.permission.READ_EXTERNAL_STORAGE
WRITE_EXTERNAL_STORAGEandroid.permission.WRITE_EXTERNAL_STORAGE
Result Strings for Requesting Permissions

Available as constants under PermissionsAndroid.RESULTS:

ResponseResult
GRANTEDPermission granted successfully by the user
DENIEDPermission denied by the user
NEVER_ASK_AGAINPermission denied by the user with never ask again.
Note: These permissions would only work in device which has android operating system grater than Marshmallow or has Marshmallow 6.0 API Level 23. Below API Level 23 it will automatically grant all the permissions.

Lets see the below example to add runtime Permissions Request in react native example.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2:  Add the permission in AndroidManifest.xml file. We are creating this example with device location permission so we are adding the device location permission known as ACCESS_FINE_LOCATION in AndroidManifest.xml file. You have to add your own permission here.

Goto ReactNativeProject ->android ->app->src->main->AndroidManifest.xml file.

Add the below location permission in it.
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Once you add the permission in AndroidManifest.xml file, then file structure would look like this :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnv59">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { PermissionsAndroid, Text, Alert, StyleSheet, View } from 'react-native';

Step 5: Create a ASYNC function named as request_location_runtime_permission(). This function is used to request the location runtime permission in android mobile phones.
export async function request_location_runtime_permission() {

try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
'title': 'ReactNativeCode Location Permission',
'message': 'ReactNativeCode App needs access to your location '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert("Location Permission Granted.");
}
else {
Alert.alert("Location Permission Not Granted");
}
} catch (err) {
console.warn(err)
}
}

Step 6: Create the ASYNC componentDidMount() method inside the App component. This method will call request_location_runtime_permission() method and helps to set the permission.
async componentDidMount() {
await request_location_runtime_permission()
}

Step 7: Implement render method inside the App class and wrapped the below layout design inside the root View component.
render() {
return (
<View style={styles.container} >
<Text>React Native Runtime Permission Request</Text>
</View>
);
}

Step 8 : Apply the below style sheet design. 
const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
margin: 20
},
});

Complete Source Code for App.js 
Lets see the complete source code that helps to add runtime permission request in react native application.

import React, { Component } from 'react';
import { PermissionsAndroid, Text, Alert, StyleSheet, View } from 'react-native';


export async function request_location_runtime_permission() {

try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
'title': 'ReactNativeCode Location Permission',
'message': 'ReactNativeCode App needs access to your location '
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert("Location Permission Granted.");
}
else {
Alert.alert("Location Permission Not Granted");
}
} catch (err) {
console.warn(err)
}
}


export default class App extends Component {

async componentDidMount() {
await request_location_runtime_permission()
}

render() {
return (
<View style={styles.container} >
<Text>React Native Runtime Permission Request</Text>
</View>
);
}
}

const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
margin: 20
},
});

Screenshot :




This is all about React Native Runtime Permissions Request Android Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to create torch flashlight application in react native application. Flashlight is a important part of every mobile phone in current arena. It comes build in with each multimedia smartphone that comes with camera. Flashlight is basically used as camera flash in mobile phones but it can be also used as individual flashlight at night. In react naive there is no direct build in component available to control the flashlight manually but using the react-native-torch NPM library we can easily control both android and iOS mobile phones flashlight and make them turn on and off.



In this example, we will make a simple screen with a button to turn on/off the flashlight in react native application.

Turn On the Flashlight using :
Torch.switchState(true);

Turn Off the Flashlight using :
Torch.switchState(false);

Turn on/off Flashlight to Make a Torch App in React Native :
Lets see the complete source code App.js component that helps to create torch flashlight application in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the React Native Torch library.
npm install --save react-native-torch

Step 3: After done installing the library we need to execute the link command in order to index the newly installed library in our current react native project.
react-native link react-native-torch

Step 4: To access the Flashlight we need to first access the camera and authorize the CAMERA runtime permission in react native android app. 

Goto ReactNativeProject ->android ->app->src->main->AndroidManifest.xml file.

Add the below camera permission in it.
<uses-permission android:name="android.permission.CAMERA"/>

Once you add the permission in AndroidManifest.xml file, then file structure would look like this :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.rnv59">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA"/>

<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

Step 5: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 6: Through react , react-native, react-native-torch  packages import all required components.
import React, { Component } from 'react';
import { AppRegistry, TouchableOpacity, PermissionsAndroid, Text, Alert, StyleSheet, View } from 'react-native';
import Torch from 'react-native-torch';

Step 7: Create a ASYNC function named as request_camera_runtime_permission(). This function is used to request the camera runtime permission in android mobile phones.
export async function request_camera_runtime_permission() {

try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
'title': 'ReactNativeCode Camera Permission',
'message': 'ReactNativeCode App needs access to your Camera.'
}
)

if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert("Camera Permission Granted.");
}
else {
Alert.alert("Camera Permission Not Granted");
}
} catch (err) {
console.warn(err)
}
}

Step 8: Create the ASYNC componentDidMount() method inside the App component. This method will call request_camera_runtime_permission() method and helps to set the permission.
  async componentDidMount() {
await request_camera_runtime_permission()
}

Step 9: Create turnONTorch and turnOFFTorch methods, which helps to provide flashlight turn on/off functionality.
  turnONTorch() {
Torch.switchState(true); // Turn ON the Torch.
}

turnOFFTorch() {
Torch.switchState(false); // Turn OFF the Torch.
}

Step 10: Implement render method inside the App class and wrapped the below layout design inside the root View component.
 render() {
return (
<View style={styles.container} >
<TouchableOpacity onPress={this.turnONTorch.bind(this)} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> TURN ON TORCH </Text>
</TouchableOpacity>

<TouchableOpacity onPress={this.turnOFFTorch.bind(this)} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> TURN OFF TORCH </Text>
</TouchableOpacity>
</View>
);
}

Step 11 : Apply the below style sheet design. 
const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
margin: 20
},
button: {
width: '100%',
paddingTop: 12,
paddingBottom: 12,
backgroundColor: '#2196f3',
borderRadius: 7,
marginTop: 10
},
TextStyle: {
color: '#fff',
textAlign: 'center',
}
});

Complete Source Code for App.js 
Lets see the complete source code that helps to create torch flashlight application in react native application.

import React, { Component } from 'react';
import { AppRegistry, TouchableOpacity, PermissionsAndroid, Text, Alert, StyleSheet, View } from 'react-native';
import Torch from 'react-native-torch';

export async function request_camera_runtime_permission() {

try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
'title': 'ReactNativeCode Camera Permission',
'message': 'ReactNativeCode App needs access to your Camera.'
}
)

if (granted === PermissionsAndroid.RESULTS.GRANTED) {
Alert.alert("Camera Permission Granted.");
}
else {
Alert.alert("Camera Permission Not Granted");
}
} catch (err) {
console.warn(err)
}
}


export default class App extends Component {

async componentDidMount() {
await request_camera_runtime_permission()
}

turnONTorch() {
Torch.switchState(true); // Turn ON the Torch.
}

turnOFFTorch() {
Torch.switchState(false); // Turn OFF the Torch.
}

render() {
return (
<View style={styles.container} >
<TouchableOpacity onPress={this.turnONTorch.bind(this)} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> TURN ON TORCH </Text>
</TouchableOpacity>

<TouchableOpacity onPress={this.turnOFFTorch.bind(this)} activeOpacity={0.6} style={styles.button} >
<Text style={styles.TextStyle}> TURN OFF TORCH </Text>
</TouchableOpacity>
</View>
);
}
}

const styles = StyleSheet.create(
{
container: {
flex: 1,
justifyContent: 'center',
margin: 20
},
button: {
width: '100%',
paddingTop: 12,
paddingBottom: 12,
backgroundColor: '#2196f3',
borderRadius: 7,
marginTop: 10
},
TextStyle: {
color: '#fff',
textAlign: 'center',
}
});

Screenshot : 





This is all about React Native Create Torch Flashlight Application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
After months of hard work from hundreds of contributors, the React Native Core team is proud to announce the release of version 0.60. This release handles significant migrations for both Android and iOS platforms, and many issues are resolved too.



Full changelog: https://github.com/react-native-community/releases/blob/master/CHANGELOG.md
Release blog post: https://facebook.github.io/react-native/blog/2019/07/03/version-60

Highlights of changes:
  1. AndroidX support (this will be a Breaking Change!)
  2. Full removal of WebView & Geolocation, you now need to rely on the extracted versions
  3. CocoaPods integration by default
  4. Autolinking of packages

A Fresh Start
React Native's start screen has been updated! Thank you to the many contributors who helped create the new UI. This new "Hello World" will welcome users to the ecosystem in a more friendly, engaging way.



This is all about React Native version 0.60. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to Prevent System from Locking of the Workstation Using Registry. This example provides you very effective way to disable locking of the Workstation and lets see the below steps :

Open up regedit.exe through the start menu search box, and then browse down to the following key, creating it if it doesn’t exist:

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\System



On the right-hand side, create a new DWORD 32-bit value named DisableLockWorkstation and give it one of these values:

1 – Disable Lock Workstation.
0 – Enable Lock Workstation.
The changes should be immediate, no need to restart anything.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to keep your windows machine unlock using vbscript .This is common problem that we encounter that we have automate our suite and run the same at any given time.


However we can schedule the scripts using windows scheduler or other alternative but problem arises when we need to run the scripts unattended. There are times we want to keep our windows machine unlock when not in use or system is left idle for some duration.

dont_lock.vbs
set wsc = CreateObject("WScript.Shell")
Do
WScript.Sleep (60*1000)
wsc.SendKeys ("{SCROLLLOCK 2}")
Loop

Step 1: Copy the above code into notepad file as it is.

Step 2: Save the file with any logical name you want but with .vbs extension to convert the notepad file into vb script executable file.

Step 3: Double click the the file it will start running.

Note: keep in mind what keys you are sending, this might effect if any automation scripts are running or any task on desktop running.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to find iPhone, iPod touch or iPad’s Unique ID (UDID) for iOS Development. Every iPhone, iPod touch and iPad has a unique identifier number associated with it, known as a UDID (Unique Device ID). Your UDID is a 40-digit sequence of letters and numbers that looks like this: 0e83ff56a12a9cf0c7290cbb08ab6752181fb54b. It’s common for developers to ask for your UDID as they require it to give you beta copies of iOS apps.


What is unique ID or UDID?Every iPhone, iPod touch and iPad has a unique identifier number associated with it, known as a UDID (Unique Device ID).

How is looks like?UDID is a 40-digit sequence of letters and numbers that looks like this: 0e83ff56a12a9cf0c7290cbb08ab6752181fb54b.

Why we need UDID?Either you are a client or a developer you need UDID to test your iOS app in your device. Unlike Android iOS has strong security protocols and the devices do not allow to install the ipa (App package same as APK in Android) from unknown source so when you make an iOS app you need to test it on real device. For that you have two options either go for debugging mode by connecting your device with XCode (iOS development IDE) and run the app directly into the device or get a UDID of your device and make an ipa to install the app in the device. Remember if you  want to distribute the ipa then you need to provide the UDID so that it can install in the device.

Finding your UDID using iTunes ?You are a developer or a normal person, needs to follow the steps to get the UDID of your iOS device using iTunes:
  1. Open iTunes (the Mac or PC app, not iTunes on your iPhone).
  2. Plug in your iPhone, iPod touch or iPad.
  3. Click its name under the devices list.
  4. Ensure you’re on the Summary tab.
  5. Click on the text that says Serial Number. It should change to say Identifier (UDID).
  6. Select Copy from the Edit menu.
  7. Your UDID is now in the clipboard, so you can paste it into an email or message.

Sample screenshot :



This is all about Finding iPhone, iPod touch or iPad’s Unique ID (UDID) for iOS Development. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 
This tutorial explains how to generate release APK file through window command prompt in react native application. Full form of APK is Android Package Kit. The APK file is a generated package file containing all the important files which is recommended to run android app on android mobile device. By default when we create react native project app and install that app on our device – Emulator then the app install as Debug Mode. But we cannot get the Signed Release Android APK and without the original APK file we cannot upload this file on Google Play Store.



If you want to submit your app on Google Play Store or want to run your final app on other android devices or want to generate release APK or run your app without development server on all android devices then your app must be digitally signed with a certificate. There is also a problem that all the react native beginners is facing that the Un-Signed APK cannot run without the JS server. So using the Singed APK we can run our react native android app to any android mobile device without running the JS Server and upload .APK file to Google Play Store. So in this tutorial we would going to Generate signed release android APK that run without JS Server in React Native in Windows PC using Key Store and lets follow the below steps one by one :

Summary in short : 
  • First of all, we have to generate a Signing key through command prompt.
Note: The command prompt must be run with administrator permission.
  • Place generated Signing key in android/app  ( under your React native project ) folder.
  • Make required entries in android/gradle.properties  file and android/app/build.gradle  file.
  • Run this command to switch directory to android.
  • Command to use : 
    cd android
    • Then run the below command to generate signed version of APK file.
    • Command to use :  
       gradlew assembleRelease 

      Generate signed release android APK that run without JS Server in React Native :
      Lets follow the below steps to generate signed version APK file in react native application :

      Step 1 : Generate Signing key through command prompt.

      • Run command prompt with administrator permission:


      • Just change your PWD( Present Working Directory ) to jdk<version>/bin directory through command prompt.

      • Apply the following command in command prompt and hit ENTER:
      keytool -genkey -v -keystore release-key.keystore -alias key-alias -keyalg RSA -keysize 2048 -validity 10000

      Note: release-key , key-alias  is the custom name, alias of your keystore file. In my case, I am using release-key , key-alias  as the name, alias of my keystore file. You can use your own custom name, alias of your keystore file according to your requirement.
      • After hit ENTER, the command prompt asks following information:
      Enter keystore password:
      Re-enter new password:
      What is your first and last name?
      What is the name of your organizational unit?
      What is the name of your organization?
      What is the name of your City or Locality?
      What is the name of your State or Province?
      What is the two-letter country code for this unit?
      • You need to provide mandatory information to proceed further. In our tutorial we have provided below information for reference you can check screenshot and command prompt asks password for key-alias. It allows you to set same password for key-alias as you provide previously or you can set different password for key-alias. we are setting same password for my key-alias.
      Note: If you also want to set same password just press ENTER and after hit ENTER your keystore file would be saved under jdk<version>/bin  directory.

      • Once you complete the above steps, then You will get the [Storing release-key.keystore] message If you have done everything correct. You can find this release-key.keystore file under jdk<version>/bin directory.
      • Now you need to cut this keystore file from here and paste into <your-react-native-project-directory>/android/app directory.

      Step 2: Open gradle.properties ( <your-react-native-project-directory>/android ) file and make these following required entries.

      ...
      MYAPP_RELEASE_STORE_FILE=release-key.keystore
      MYAPP_RELEASE_KEY_ALIAS=key-alias
      MYAPP_RELEASE_STORE_PASSWORD=123456
      MYAPP_RELEASE_KEY_PASSWORD=123456


      Step 3: Open build.gradle ( <your-react-native-project-directory>/android/app ) file and make these following required entries. Make sure below code highlighted in red color should be present in build.gradle file

      /**
      * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
      * and bundleReleaseJsAndAssets).
      * These basically call `react-native bundle` with the correct arguments during the Android build
      * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
      * bundle directly from the development server. Below you can see all the possible configurations
      * and their defaults. If you decide to add a configuration block, make sure to add it before the
      * `apply from: "../../node_modules/react-native/react.gradle"` line.
      *
      * project.ext.react = [
      * // the name of the generated asset file containing your JS bundle
      * bundleAssetName: "index.android.bundle",
      *
      * // the entry file for bundle generation
      * entryFile: "index.android.js",
      *
      * // whether to bundle JS and assets in debug mode
      * bundleInDebug: false,
      *
      * // whether to bundle JS and assets in release mode
      * bundleInRelease: true,
      *
      * // whether to bundle JS and assets in another build variant (if configured).
      * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
      * // The configuration property can be in the following formats
      * // 'bundleIn${productFlavor}${buildType}'
      * // 'bundleIn${buildType}'
      * // bundleInFreeDebug: true,
      * // bundleInPaidRelease: true,
      * // bundleInBeta: true,
      *
      * // whether to disable dev mode in custom build variants (by default only disabled in release)
      * // for example: to disable dev mode in the staging build type (if configured)
      * devDisabledInStaging: true,
      * // The configuration property can be in the following formats
      * // 'devDisabledIn${productFlavor}${buildType}'
      * // 'devDisabledIn${buildType}'
      *
      * // the root of your project, i.e. where "package.json" lives
      * root: "../../",
      *
      * // where to put the JS bundle asset in debug mode
      * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
      *
      * // where to put the JS bundle asset in release mode
      * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
      *
      * // where to put drawable resources / React Native assets, e.g. the ones you use via
      * // require('./image.png')), in debug mode
      * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
      *
      * // where to put drawable resources / React Native assets, e.g. the ones you use via
      * // require('./image.png')), in release mode
      * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
      *
      * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
      * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
      * // date; if you have any other folders that you want to ignore for performance reasons (gradle
      * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
      * // for example, you might want to remove it from here.
      * inputExcludes: ["android/**", "ios/**"],
      *
      * // override which node gets called and with what additional arguments
      * nodeExecutableAndArgs: ["node"],
      *
      * // supply additional arguments to the packager
      * extraPackagerArgs: []
      * ]
      */

      project.ext.react = [
      entryFile: "index.js"
      ]

      apply from: "../../node_modules/react-native/react.gradle"

      /**
      * Set this to true to create two separate APKs instead of one:
      * - An APK that only works on ARM devices
      * - An APK that only works on x86 devices
      * The advantage is the size of the APK is reduced by about 4MB.
      * Upload all the APKs to the Play Store and people will download
      * the correct one based on the CPU architecture of their device.
      */
      def enableSeparateBuildPerCPUArchitecture = false

      /**
      * Run Proguard to shrink the Java bytecode in release builds.
      */
      def enableProguardInReleaseBuilds = false

      android {
      compileSdkVersion rootProject.ext.compileSdkVersion

      compileOptions {
      sourceCompatibility JavaVersion.VERSION_1_8
      targetCompatibility JavaVersion.VERSION_1_8
      }

      defaultConfig {
      applicationId "com.rnv59"
      minSdkVersion rootProject.ext.minSdkVersion
      targetSdkVersion rootProject.ext.targetSdkVersion
      versionCode 1
      versionName "1.0"
      }

      signingConfigs {
      release {
      if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
      storeFile file(MYAPP_RELEASE_STORE_FILE)
      storePassword MYAPP_RELEASE_STORE_PASSWORD
      keyAlias MYAPP_RELEASE_KEY_ALIAS
      keyPassword MYAPP_RELEASE_KEY_PASSWORD
      }
      }
      }


      splits {
      abi {
      reset()
      enable enableSeparateBuildPerCPUArchitecture
      universalApk false // If true, also generate a universal APK
      include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
      }
      }
      buildTypes {
      release {
      signingConfig signingConfigs.release
      minifyEnabled enableProguardInReleaseBuilds
      proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
      }
      }
      // applicationVariants are e.g. debug, release
      applicationVariants.all { variant ->
      variant.outputs.each { output ->
      // For each separate APK per architecture, set a unique version code as described here:
      // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
      def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3, "x86_64": 4]
      def abi = output.getFilter(OutputFile.ABI)
      if (abi != null) { // null for the universal-debug, universal-release variants
      output.versionCodeOverride =
      versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
      }
      }
      }
      }

      dependencies {
      implementation project(':@react-native-community_slider')

      implementation fileTree(dir: "libs", include: ["*.jar"])
      implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
      implementation "com.facebook.react:react-native:+" // From node_modules
      }

      // Run this once to be able to run the application with BUCK
      // puts all compile dependencies into folder libs for BUCK to use
      task copyDownloadableDepsToLibs(type: Copy) {
      from configurations.compile
      into 'libs'
      }


      Step 4: Change your PWD( Present Working Directory ) to your react native project directory and apply the below command in command prompt to switch to android directory.
      cd android

      Step 5: Apply the below command to generate signed version of APK file. 
      gradlew assembleRelease

      Note: Must close the node js server before applying the above command.

      • After successfully completed the process of generating the release version of your APK, you will get the following output.

      • Build generated successfully :

      • You will get your released signed APK under <your-react-native-project-directory>/android/app/build/outputs/apk/release directory.


      Now, you can run this app-release.apk file into any android mobile device and submit this app-release.apk file on Google Play Store.

      You can test the signed apk on your android device connected with your system, by simply running the code below.
      react-native run-android --variant=release

      Also you can create debug APK :
      cd android
      gradlew assembleDebug

      This is all about React Native Generate Release APK through Windows Command Prompt Android. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


      Read for later

      Articles marked as Favorite are saved for later viewing.
      close
      • Show original
      • .
      • Share
      • .
      • Favorite
      • .
      • Email
      • .
      • Add Tags 

      Separate tags by commas
      To access this feature, please upgrade your account.
      Start your free month
      Free Preview