Tag: React Native

Error: [Reanimated] failed to create a worklet. – React Native

To fix this error, initially check your package.json file to find “react-native-reanimated”. if it is not installed, install it something like to “react-native-reanimated”: “^3.X.X”.

Now update your babel.config.js as follows

 module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
}

Now search for metro.config.js and update config as follows

const config = {
    resetCache: true
};

Now run the following command

npm start -- --reset-cache

Now it will work without that error.

Connect Android App to Real Device using Android Studio over Wi-Fi – React Native

If we are using Android Studio, it is very simple to connect to Real Device.

First we need to enable “Developer Options” in our Phone. We need to follow the following steps to enable Developer Options.

  • Go to Settings ==> About Phone
  • Navigate to Software information or Build number.
  • Tap Build Number 7 times. (This will enable Developer Mode)
  • Now search for Developer options in settings.
  • it should be turned on
  • Now turn on Wireless debugging.
  • Now we need to pair out phone with Android Studo.
  • tap Wireless debugging and click on Pair device with QR code.
  • In Android Studio, open Device Manager and click on Wi-Fi icon to pair devices using Wi-Fi. It will open QR code.
  • Now From your mobile Scan that QR code to connect your device.
  • Finally your phone will show up as connected in Android Studio.

Now run the App directly over Wi-Fi, by using the following command.

npx react-native run-android

Steps to run basic android app in MacBook .

STEP 1 : Install Android Studio

Android apps require Android Studio to run the app. We can download Android studio from here : https://developer.android.com/studio.

During installation, make sure to install Android SDK, Android Virtual Device (AVD) and Android Emulator. (accept all SDK licenses).

To add Android SDK to PATH, run the following command

nano ~/.zprofile

After that add the following lines.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH

Now save it by using the following command

source ~/.zprofile

STEP 2 : Install Node.js (If it is not installed)

We can use Homebrew (Package manager for mac os) to install node. Run the following command in terminal to install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After that run the following command

brew update

Now install Node.js using Homebrew using the following command

brew install node

the above command will install node, npm and npx. We can check their versions with the following commands

node -v // v24.4.1
npm -v // 11.4.2
npx -v //11.4.2

STEP 3 : Install Java Development Kit (JDK)

React Native for Android needs Java Development Kit. We can install it using Homebrew. Run the following command to install JDK (java 17)

brew install openjdk@17

After installation, link it with the following command

sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk

Add JDK to shell command using the following command.

nano ~/.zshrc

Now add these lines

export JAVA_HOME="/opt/homebrew/opt/openjdk@17"
export PATH="$JAVA_HOME/bin:$PATH"

Save it and Exit. after that run the following command to apply the changes.

source ~/.zshrc

Verify Java is setup correctly or not by using the following command

java -version

STEP 4 : Create a New React Native App :

Run the following command to create a new React Native App

npx @react-native-community/cli init SampleApp

Now navigate ‘SampleApp’ using the following command

cd SampleApp

Finally run the App using the following command

npx react-native run-android

Steps to Build Offline APK for Real Device – React Native

To test our React Native App in our phone, we can follow the following steps.

STEP 1 : Generate JS Bundle

npx react-native bundle \
--platform android \
--dev false \
--entry-file index.js \
--bundle-output android/app/src/main/assets/index.android.bundle \
--assets-dest android/app/src/main/res

Run the above command in your project root folder. This will pack your code into a static file.

STEP 2: Build the APK

navigate to android folder using this command in terminal.

cd android

Now build a debug APK using gradle

./gradlew assembleDebug

Now you can find the APK file in the following path

android/app/build/outputs/apk/debug/app-debug.apk

Now we can install this APK in our Android phone to test our App.

TypeError: cli.init is not a function – React Native

This error will come while running the following command.

  npm install -g react-native-cli

This happens because react-native-cli is deprecated and not compatible with recent versions of node js. Especially from Node 18 + it throws this error.

To fix this issue first Uninstall react-native-cli using the following command.

npm uninstall -g react-native-cli

use the official CLI as follows

npx @react-native-community/cli init MyApp

Now it will install all the required packages to run the App.