You Are Here
admin

React Native – Debug and Deploy

React, ReactNative

How to generate .apk file with React Native Cli | React Native | Android App using React Native

React Native Debugger v.0.9.14
react-native-debugger – windows
https://github.com/jhen0409/react-native-debugger/releases

Install location for react-native-debugger
%HOMEPATH%\AppData\Local\react_native_debugger\react-native-debugger.exe
—

d: – To go to d drive
mkdir – To creating directory
cd – To change directory
npx react-native init appname – To build react native project
npx react-native run-android – To run our emulator
code . – To open VS code

2. Generate “.keystore” file: copy following command: 

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

3. Setting up Gradle variables: copy following command

File Path -> C:\****\***-customer-app\android\gradle.properties

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

4. Adding signing config:

File Path -> C:\****\***-customer-app\android\app\build.gradle

step1:

signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }

step2:

signingConfig signingConfigs.release

buildTypes {
         debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
}

step 3 : cd .\android
step 4 : gradlew assembleRelease
step 5 : apk file will be created in the path
C:\***\**-customer-app\android\app\build\outputs\apk\release
——–
Other Notes

C:\***\***-customer-app\android\gradle\wrapper\gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip

C:\***\***-customer-app\android\app\src\main\java\com\***_1\MainApplication.java

+ import com.facebook.react.ReactInstanceManager;

C:\***\***-customer-app\android\app\src\main\AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.****.***"
+ android:versionCode="1000"
+ android:versionName="1.0.0">

—–
To Run React Native app in Windows
%appData%
cd %ANDROID_HOME%/tools

emulator -list-avds
emulator -avd
emulator -avd Nexus_5X_API_27

react-native run-android
—–
Fixed: React Native new Android project Build Issue

npx react-native init TestProject
npm run start
1. open new terminal : npx react-native run-android
2. proect failed
3. open android folder into android studio
4. wait for gradle build to be finised bottom status bar
5. sync project file, by file-> sync project with gradle files, let it finished
6. build->clean project
7. build->rebuild project
8. go back to terminal and run npx react-native run-android
9. wait in react terminal until build complete

—

how to run apk file in android mobile
how to debug react-native
how to create & run react expo
how to publish to google play store
udemy app ready to play store

====

Expo-cli

Expo CLI is the set of commands that you use to interact with the Expo ecosystem to build, run and deploy your app. For ex: expo init, expo install, expo start, expo eject etc., commands are all part of the CLI.

Expo SDK is the set of packages that you ‘import’ for building your app. For eg: expo-location, expo-calendar are all packages that are part of SDK

1. npm install expo-cli — global
2. expo init my-expo
3. choose template
4. Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

– cd my-expo
– yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
– yarn android
– yarn ios # requires an iOS device or macOS for access to an iOS simulator
– yarn web

5. To run by expo : expo start (or) expo start -c
To run by npm : npm run start (package.json , the start cmd also going to have the expo start)

Developer tools running on http://localhost:19002
Opening developer tools in the browser…
Starting Metro Bundler

-> From metro bundler browser screen, select android to open App in Emulator
Opening exp://192.168.43.68:19000 on Nexus_5X_API_27

7. Run the android emulator
8. Select option Android/web/app/menu => select android
8. http://localhost:19002/ (d- open developer tools)
(here 19002 will swtich to (http://localhost:19000/debugger-ui/))
9. to debug the android browse http://192.168.43.68:19000
10. http://localhost:19000/debugger-ui/
11. press F12 and find the file to debug
—-
Success
1. npm run start
2. select a-android
3. properly open app into emulator, and (Opening exp://192.168.43.68:19000 on Nexus_5X_API_27)
4. debugger open in browser
5. press F12 and debugging
—–
expo start – cause issue
—-
Metro bundler not starting automatically with expo start
Command to find issue : expo diagnostics
npm cache clean — force and run expo start -c or expo start

npm –reset-cache start
adb reverse –list
host-10 tcp:8081 tcp:8081
host-10 tcp:9090 tcp:9090

npm list -g

npm install react-native-debugger
npm install –save redux-devtools-extension

adb reverse tcp:9090 tcp:9090

cd easy-shop
npm start
npm run android
npm run ios
npm run web

To get the Expo SDK version used in your React Native project, you can access the expo object and retrieve the SDK version programmatically.

# npm install expo-constants

# import Constants from ‘expo-constants’;

#
const sdkVersion = Constants?.manifest?.sdkVersion;
console.log(‘Expo SDK version:’, sdkVersion);

Reactotron

What is Reactotron?

Installing Reactotron.app – Quick Start for React Native

infinitered/reactotron – Download Release

Intro to Reactotron — setup – Medium

Reactotron – Setting up the environment. (Electron, JavaScript, React Native) – Youtube

Install and Use Reactotron for Debugging –
https://www.reactnativeschool.com/install-and-use-reactotron-for-debugging
https://github.com/ReactNativeSchool/react-native-reactotron-demo
https://www.reactnativeschool.com/classes
https://infinite.red/reactotron

Quick Start for React Native – Reactron

Reactotron Setup In React Native Redux Applications

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

reactotron-redux

Reactnativebyexample

“@react-native-async-storage/async-storage”: “^1.17.7”,

“react-devtools”: “4.22.0”,
“react-devtools-core”: “4.22.0”,

Post Views: 12

Leave a Reply

Your email address will not be published. Required fields are marked *