
## Why use react.js {#Why-use-react.js}

React is a popular JavaScript library for building user interfaces, particularly for web applications. It was developed by Facebook, and is often used for building single-page applications and mobile applications.

There are several reasons why developers might choose to use React:

1.  `Declarative:` React makes it easy to build interactive user interfaces by creating declarative components that describe the desired output. This makes it easy to reason about the application and debug issues.

1.  `Reusable components:` React allows you to build reusable components that can be shared across your application, which can help to reduce code duplication and make it easier to maintain your codebase.

1.  `Virtual DOM:` React uses a virtual DOM (a lightweight in-memory representation of the actual DOM) to optimize updates to the actual DOM. This means that only the components that have changed are updated, rather than the entire page, which can improve performance.

1.  `Server-side rendering:` React can be rendered on the server side, which can improve the performance of your application and improve SEO.

1.  `Strong community:` React has a strong and active community, which means that there is a wealth of resources available (such as tutorials, libraries, and tools) to help you get up and running with React quickly.

## What is JSX? {#What-is-JSX}

JSX stands for JavaScript XML.
It allows us to write HTML inside JavaScript and place them in the DOM without using functions like `appendChild( )` or `createElement( )`.

- Without using JSX, we would have to create an element by the following process:

```
const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div','{}',text );
ReactDOM.render(container,document.getElementById('app'));
```

- Using JSX, the above code can be simplified:

````
const container = (

 <div>
   <p>This is a text</p>
 </div>
);
ReactDOM.render(container,document.getElementById('app'));```
````

As one can see in the code above, we are directly using HTML inside JavaScript\*

## What is the virtual DOM? How does react use the virtual DOM to render the UI? {#What-is-the-virtual-DOM-How-does-react-use-the-virtual-DOM-to-render-the-UI}

_DOM stands for 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. DOM represents the entire UI of your application_

Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the real DOM by a library such as ReactDOM.

![Virtual Dom](/BL-1003/vdom.png)

**Why was virtual DOM introduced?**

DOM manipulation is an integral part of any web application, but DOM manipulation is quite slow when compared to other operations in JavaScript.

The efficiency of the application gets affected when several DOM manipulations are being done. Most JavaScript frameworks update the entire DOM even when a small part of the DOM changes.

For example, consider a list that is being rendered inside the DOM. If one of the items in the list changes, the entire list gets rendered again instead of just rendering the item that was changed/updated. This is called inefficient updating.
To address the problem of inefficient updating, the react team introduced the concept of virtual DOM.

**How does it work?**

![Virtual Dom](/BL-1003/real-virtual.png)

For every DOM object, there is a corresponding virtual DOM object(copy), which has the same properties.

The main difference between the real DOM object and the virtual DOM object is that any changes in the virtual DOM object will not reflect on the screen directly. Consider a virtual DOM object as a blueprint of the real DOM object.
Whenever a JSX element gets rendered, every virtual DOM object gets updated.

React uses two virtual DOMs to render the user interface. One of them is used to store the current state of the objects and the other to store the previous state of the objects.

Whenever the virtual DOM gets updated, react compares the two virtual DOMs and gets to know about which virtual DOM objects were updated.

After knowing which objects were updated, react renders only those objects inside the real DOM instead of rendering the complete real DOM.This way, with the use of virtual DOM, react solves the problem of inefficient updating

## Explain React state and props? {#Explain-React-state-and-props}

A React component can access dynamic information in two ways: props and state.

### React State {#React-State}

Every component in react has a built-in state object, which contains all the property values that belong to that component.

In other words, the state object controls the behaviour of a component. Any change in the property values of the state object leads to re-rendering of the component.

_Note- State object is not available in functional components but, we can use React Hooks to add state to a functional component._

How to declare a state object?

```
Example:
class Car extends React.Component{
 constructor(props){
   super(props);
   this.state = {
     brand: "BMW",
     color: "black"
   }
 }
}
```

How to use and update the state object?

```
class Car extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     brand: "BMW",
     color: "Black"
   };
 }

 changeColor() {
   this.setState(prevState => {
     return { color: "Red" };
   });
 }

 render() {
   return (
     <div>
       <button onClick={() => this.changeColor()}>Change Color</button>
       <p>{this.state.color}</p>
     </div>
   );
 }
}

```

As one can see in the code above, we can use the state by calling this.state.propertyName and we can change the state object property using setState method.

### React Props {#React-Props}

Every react component, accepts a single object argument called props (which stands for “properties”).

These props can be passed to a component using HTML attributes.

Using props, we can pass data from one component to another.

- While rendering a component, we can pass the props as a HTML attribute:

```
<Car brand="Mercedes"/>
```

The component receives the props:

- In Class component:

```
class Car extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     brand: this.props.brand,
     color: "Black"
   };
 }
}
```

- In Functional component:

```
function Car(props) {
  render() {
      return <h1>Name is {props.name}!</h1>;
   }
}
```

**Note- Props are read-only. They cannot be manipulated or changed inside a component**

## Explain React Hooks? {#Explain-React-Hooks}

Hooks are functions that let us “hook into” React state and lifecycle features from a `functional component.`
React Hooks cannot be used in class components.

Why were Hooks introduced in React?
React hooks were introduced in the 16.8 version of React.
Previously, functional components were called stateless components. Only class components were used for state management and lifecycle methods.

The need to change a functional component to a class component, whenever state management or lifecycle methods were to be used, led to the development of Hooks.

**Example of a hook:**

`useState hook:`
In functional components, useState hook lets us define state for a component:

```
function Person(props) {
 // We are declaring a state variable called name.
 // setName is a function to update/change the value of name
 let [name, setName] = useState('');
}
```

## What are the different lifecycle methods in React? {#What-are-the-different-lifecycle-methods-in-React}

Each component in react goes through three phases: `Mounting`, `Updating`, and `Unmounting`.

- **Mounting** :- Birth of your component
- **Update** :- Growth of your component
- **Unmount** :- Death of your component

![React Life Cycle Methods](/BL-1003/ReactLifeCycle.png)

### Common React Lifecycle Methods {#Common-React-Lifecycle-Methods}

- **constructor()**

This is used only if you have a class-based Component and it serves the purpose of initializing the state of a Component. In case of functional Components, the useState() hook is used to do the same.

- **render()**

This is the method that is `responsible for inserting a Component into the DOM`.

The render() method is the most used lifecycle method. This is because render() is the only required method within a class component in React.

It happens during the `mounting` and `updating` of your component.

```
Below is an example of a simple render() in React.

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

```

**A render() can also return a null if there is nothing to render for that component.**

- **componentDidMount()**

This is invoked `after a Component is inserted into the DOM for the first time`.

When component has been mounted and ready, that’s when the next React lifecycle method componentDidMount() comes in play.

componentDidMount() is called as soon as the component is mounted and ready. This is a good place to initiate API calls, if you need to load data from a remote endpoint.

`componentDidMount() allows the use of setState()`.

- **componentDidUpdate()**

This is the method invoked after `re-rendering an updated Component`. This method can give you the information about a Component’s previous state and previous props. This lifecycle method is invoked as soon as the updating happens. The most common use case for the componentDidUpdate() method is updating the DOM in response to prop or state changes.

You can call setState() in this lifecycle, but keep in mind that you will need to wrap it in a condition to check for state or prop changes from previous state. Incorrect usage of setState() can lead to an infinite loop.

```
Take a look at the example below that shows a typical usage example of this lifecycle method.

componentDidUpdate(prevProps) {
//Typical usage, don't forget to compare the props
if (this.props.userName !== prevProps.userName) {
this.fetchData(this.props.userName);
}
}

```

Notice in the above example that we are comparing the current props to the previous props. This is to check if there has been a change in props from what it currently is. In this case, there won’t be a need to make the API call if the props did not change.

- **componentWillUnmount()**

As the name suggests this lifecycle method is called just `before the component is unmounted and destroyed`.

You cannot modify the component state in componentWillUnmount lifecycle.

This is where you can perform any cleanups that need to be done such as invalidating timers, canceling network requests, removing event listeners, and so on.

```
componentWillUnmount() {
window.removeEventListener('resize', this.resizeListener)
}
```

## What are keys in React? {#What-are-keys-in-React}

A key is a special string attribute that needs to be included when using lists of elements.

Example of a list using key:

```
const ids = [1,2,3,4,5];
const listElements = ids.map((id)=>{
return(
 <li key={id.toString()}>
   {id}
 </li>
 )
})
```

**Importance of keys:-**

- Keys help react identify which elements were added, changed or removed.
- Keys should be given to array elements for providing a unique identity for each element.
- Without keys, React does not understand the order or uniqueness of each element.
- With keys, React has an idea of which particular element was deleted,edited, and added.


In this blog post, we will provide you with a comprehensive list of the top React interview questions and answers to help you prepare for your upcoming React interview. The blog post covers a range of topics, from basic React concepts to advanced topics such as React Redux and React Router. We have also included coding exercises and examples to help you understand each concept better. Whether you are a beginner or an experienced React developer, this blog post will help you improve your React interview preparation and increase your chances of acing your next React interview.

Exploring the Fundamentals of React Native.

## React Native and Stripe {#React-Native-and-Stripe}

**_Strpe:_**

Stripe is an online payment processing and credit card processing platform for businesses.

When a customer buys a product online, the funds need to be delivered to the seller; Insert Stripe. Stripe allows safe and efficient processing of funds via credit card or bank and transfers those funds to the sellers account.

Stripes software includes both a payment processing platform, as well as a credit card payment gateway, and both are required in each successful online transaction-- making it the most efficient and simple software to choose for online payments.

## How does Stripe work? {#How-does-Stripe-work-?}

Stripe has simplified the process of their service for business owners so it's easy to understand and navigate.

Stripe Payment Process:

This diagram will help to understand the basic flow of stripe, and how its works. Stipe works with basic `4 steps` which are in diagram,

![Stripe Working Img](/BL-1003/StripeWorks.jpeg)

- When you create an account for your business, Stripe software will connect to the purchasing page of your shop platform. `ONLY IN STRIPE CONNECT.`

- Once a customer is ready to purchase an item or service and ‘checkout’, they will `input their financial information` in the purchase page.

- The information will then be sent from your platform, through the Stripe software that will verify that the funds are available (payment gateway) and process the payment before sending it to the merchant account.

- Merchant receives funds, and a confirmation of sale is sent to both the buyer and the seller.

## Steps to implement {#Steps-to-implement}

**_Here is a few steps to understand flow properly_**

> Step 1 — Stripe Developer account and API keys

> Step 2 — Create a basic React Native app for Stripe integration

> Step 3— Integrate Stripe library for token generation

1. **Stripe Developer Account**<br /><br />
   You can visit [Stripe Website](https://stripe.com) and create an account. Stripe payment services are currently available in limited countries as shown on [this page](https://stripe.com/global).

Make sure if you are working on Test Environment then **Test mode is ON**

![TestMOde Tab](/BL-1003/Testmode.png)

Once you do successful registration you will be redirected to Stripe Dashboard. To get your publishable key and secret key you need to click on <br /> **Developer Tab -> API keys**

![DashBoard Tab](/BL-1003/Apikeys.png)

Publishable Key is used for connecting library to your React Native app. A publishable key generates a token.

Secret key is used in your backend code where your server connects with Stripe’s server for actual payment.

2. **Create a basic React Native app**
3. **Integrate Stripe library for Token**

To include Stripe functionality in your React Native app, we have two most famous packages :-

- [tipsi-stripe](https://www.npmjs.com/package/tipsi-stripe)

  ```node
   npm install --save tipsi-stripe
   OR
   yarn add tipsi-stripe
  ```

  in podfile

  ```
  # Stripe
  pod 'Stripe', '~> 21.3.1'

  ```

- [Stripe-react-native](https://www.npmjs.com/package/@stripe/stripe-react-native)

  ```node
  npm install --save @stripe/stripe-react-native
  OR
  yarn add @stripe/stripe-react-native
  ```

- if you have IOS device then :

  ```node
  npx pod-install
  OR
  cd ios
  pod install
  ```

In this blog post, we will show you how to integrate Stripe payments into your React Native app. Stripe is a popular payment processing platform that provides a seamless payment experience for your users. We will guide you through the steps involved in integrating Stripe into your React Native app, including setting up a Stripe account, adding the Stripe library to your app, and processing payments with Stripe. We will also provide code examples and best practices to ensure a smooth and secure payment experience for your users. Whether you are a beginner or an experienced React Native developer, this blog post will help you integrate Stripe payments into your app with ease.

A Beginner's Guide to Stripe Payment Integration in React Native Apps


### Just want to check you Push Notification Code? Try [testfcm.in](https://www.testfcm.in/) For better output.

Push Notifications are a significant part of Mobile development. We can go through a pop informing medium that makes application clients aware of what's happening in the application. They are likewise a significant method for enhancing client commitment in your application. For instance, a client disregards the application whenever they have introduced it. Then you can involve pop-up messages as a system to recover and hold their advantage. Push Notifications additionally assist with directing people to your application.

## structure Info {#structure-Info}

1. [**Create a Firebase project**](testfcm.in) <br/>
1. **Install dependencies for Push notification** <br/>
1. **Request Notification permissions** <br/>
1. **Generate FCM Token** <br/>
1. **handle the push notification on the foreground and backgroung** <br/>
1. **Send Push Notifications from FCM** <br/>

- ### Create a Firebase project

To integrate push notification, we need to create a firebase project first. Click on add project to create a project.

We already Write an article on [How to create Firebase account]().Please have a look for better understanding.

- ### Install dependencies for Push notification

#### Installation {#Installation}

This module requires that the `@react-native-firebase/app` and `@react-native-firebase/messaging` module is already set up and installed. To install the “app” module,

```
# Install & setup the app module
yarn add @react-native-firebase/app

# Install the messaging module
yarn add @react-native-firebase/messaging

# If you're developing your app using iOS, run this command
cd ios/ && pod install
```

- ### Request notification permission
  For Notification we required to permission from device. on success we generate notification listener and Generate FCM token.

```
import messaging from '@react-native-firebase/messaging';

export async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
  // Success Code goes Here.
  }
}
```

- ### Generate FCM Token
  Generate FCM token is easy but its little hard to maintain and store in our local storage.

```
import firebase from "@react-native-firebase/app";
import messaging from "@react-native-firebase/messaging";

///FCM Generate Code
const GetFcmToken = await messaging()
.getToken(firebase.app().options.messagingSenderId)
.then(async (token) => {
console.log("Notification Token ---->>>>>>>",token);
return token;
}).catch((e) => console.log("ERR", e));
```

We already create detailed article on [how to create FCM token?](), please have a look for batter understanding.

- ### handle the push notification on the foreground and background

#### Foreground Notification

By default, Cloud Messaging does not support notification popups when the application is in the foreground So, the push notification popup is only displayed when the app is in the background state or closed.

you can use a on Screen `Alert` each time when notification delivered.

```

import React, { useEffect } from 'react';
import { Alert } from 'react-native';
import messaging from '@react-native-firebase/messaging';

function App() {
useEffect(() => {
const unsubscribe = messaging().onMessage(async remoteMessage => {
Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
});

    return unsubscribe;

}, []);
}

```

- #### Background Notification

When the application is in a background , the `onMessage` handler will not be called on receiving messages. for that you need to setup a background callback via setBackgroundMessageHandler method.

To setup a background handler, call setBackgroundMessageHandler outside of your application as early as possible:

```

// index.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';

// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
console.log('Message handled in the background!', remoteMessage);
});

AppRegistry.registerComponent('app', () => App);

```

- ### Send Push Notifications from FCM([Firebase console](https://console.firebase.google.com/))

Go to the FCM dashboard to send messages. In the `Engage>Cloud Messaging` section, click on compose notification. and select `Send your first message`
![Engage](/BL-1004/Engage.png)

Enter Required Value to send notification. Click on `Send test Message`.
![Engage](/BL-1004/Notificationvalue.png)

In pop-up Add your device token which is generated on your application.
![Engage](/BL-1004/Tokenpopup.png)

Don't know [how to create FCM token?]() We alredy Write an artical on on it, please have a look for better idea.

huuff, Too lengthy process for just testing whether notification is working or not... you can try [Test Mobile Notification](https://www.testfcm.in/). it is too easy and helpfull.

## Conclusion {#Conclusion}

- As we can see there are many ways to organize your code from the simplest to the most complex. It all depends on the codebase size and the team that manages it.

- This is just one way I found to be productive and better organized your code among the team, I hope it helps you too.
  Happy Programming!

- If you found this article helpful, don’t forget to `like, comment, share` and clap! 👏

```

```


PIn this blog post, we will explore the world of push notifications on React Native apps. Push notifications are an essential tool for engaging users and retaining them on your app. We will start by introducing you to the concept of push notifications, their benefits, and their implementation in React Native apps. Next, we will walk you through the process of setting up push notifications using Firebase Cloud Messaging (FCM) and integrating them into your React Native app. We will also discuss best practices for push notification scheduling, personalization, and user engagement. By the end of this blog post, you will have a comprehensive understanding of how to implement push notifications in your React Native app to maximize user engagement and retention.

Push Notification Integration in React Native


## Basic Step Info {#Basic-Step-Info}

Here are basic but most easy way to implement Firebase and create account.

1. **Open Firebase Console** <br/>
1. **Create a Firebase Application** <br/>
1. **Add Android Details** <br/>
1. **Download and Place google-service.json** <br/>
1. **Android Files Changes** <br/>
1. **Add iOS App Details in Firebase App** <br/>
1. **Download and Place GoogleService-info.plist** <br/>
1. **Make some changes in a pod file** <br/>
1. **Install the pod** <br/>
1. **Make some changes in AppDelegate.m file** <br/>
1. **Run iOS App to connect with Firebase** <br/>

Okay i know these steps list make you little bit confuse but those are all step which we are performing now.
Let's Start with Every Step details,

### Open Firebase Console {#Open-Firebase-Console}

- visit [Firebase console](https://console.firebase.google.com/u/0/) to log in from your Google account. if you already have an account then its directly show all your projects. By clicking on `Add project` you can create new project. it id few step process to create new project.

![Google_signin_1](/BL-1005/google_signin_1.png)

### Create a Firebase Application {#Create-a-Firebase-Application}

- Now you are on Project dashboard and you can see option to add firebase in multiple plateform like `Android`, `IOS` and `Web`. For React Native we will create project in IOS and Android. Let's start with Android Project option.
  ![google_signin_example2](/BL-1005/google_signin_example2.png)

### Adding Android Details {#Adding-Android-Details}

- On clicking Android button you will required to fill three(3) field.

1. Your Application Package Name `(required)`
2. Your Application Nick Name `(required)`
3. You application Debug signing Certificate SHA-1 `(optional)`
   ![google_signin_example3](/BL-1005/google_signin_example3.png)

- By clicking on "Register app" you new firebase Project is ready for android.

### Download and Place google-service.json {#Download-and-Place-google-service.json}

- To work witih firebase we need to link our application with firebase and for that we are adding `google-service.json` file in out android folder structure.
  ![google_signin_example4](/BL-1005/google_signin_example4.png)

### Android Files Changes {#Android-Files-Changes}

- In next step we are going to add single lines in `project/build.gradle` and `app/build.gradle`. those line are already shown.
  ![google_signin_android2](/BL-1005/google_signin_android2.png)

Okay now Android related changes are done, now we are moving for IOS related changes

### Add iOS App Details in Firebase App {#Add-iOS-App-Details-in-Firebase-App}

- for IOS registering process is same as Android we need to add same details for IOS too

1. Your Application Apple bundle ID `(required)`
2. Your Application nickname `(optional)`
3. You application App Store ID `(optional)`
   ![google_signin_ios1](/BL-1005/google_signin_ios1.png)

### Download and Place GoogleService-info.plist {#Download-and-Place-GoogleService-info.plist}

- You will see the instruction to download and add `GoogleService-info.plist` into your project
  ![google_signin_ios2](/BL-1005/google_signin_ios2.png)

  We can add .plist file in two ways

  1. add file using Xcode

  - open project and click on `main project dir` for options to add file.
    ![google_signin_ios3](/BL-1005/google_signin_ios3.png)

  - now select the downloaded file, also check copy items if needed and click `Add`.
    ![google_signin_ios4](/BL-1005/google_signin_ios4.png)
  - now you can see `googleService-info.plist` file in list.
    ![google_signin_ios5](/BL-1005/google_signin_ios5.png)

  2. directly move to folder

  - Go to `project_folder -> ios -> move`, now clean you project and rebuild it.

### Make some changes in a pod file {#Make-some-changes-in-a-pod-file}

- we required to add this two lines in `podfile`.

```
pod 'FirebaseAuth'
pod 'FirebaseFirestore'
```

### Install the pod {#Install-the-pod}

As we have added a new pod for firebase in the pod file we required to install the pod file and run the following command in your terminal from your project’s main directory, This will install the added pod into our project

```
// INSTALL POD
cd ios
pod install --repo-update
------ npx ----
npx pod-install
```

### Make some changes in AppDelegate.m file {#Make-some-changes-in-AppDelegate.m-file}

In the next step in Firebase console and you need to add some additional lines in `AppDelegate.m`. Please note we have to add `Objective-C` code but with some changes for React Native. Please see the screenshot below.

![google_signin_ios6](/BL-1005/google_signin_ios6.png)

okay so we are making some custom change in AppDelegate.m file

- we need to add dependency in top of the code and few configuration code in that file

```
#import <Firebase.h>
```

inside`didFinishLaunchingWithOptions` we required to add

```
if([FIRApp defaultApp] == nil){
 [FIRApp configure];
}
```

If you have done everything correctly then you will see a green message to notify successful connection
![google_signin_ios7](/BL-1005/google_signin_ios7.png)

## Conclusion {#Conclusion}

- To add firebase in our application we required a firebase account and inside that account we need to create project for our application.
- As we want to run in ReactNative we required Android, IOS project
- For register application we required a package name for both application.
- All required change are show on creating project time.

Happy Programming!

- If you found this article helpful, don’t forget to `like, comment, share` and clap! 👏


In this blog post, we will guide you through the process of creating a Firebase project. Firebase is a popular backend platform that provides various features and services for mobile and web app development. We will start by introducing you to the benefits of Firebase and the various services it offers. Next, we will walk you through the process of creating a Firebase project using the Firebase console and the Google Cloud Platform. We will also discuss best practices for Firebase project creation and highlight some essential features, including Firebase database, authentication, and hosting. Whether you are a beginner or an experienced app developer, this blog post will provide you with a comprehensive guide to creating your first Firebase project and utilizing its features to streamline your app development process.

A Step-by-Step Guide to Creating a Firebase Project


## Error Detail Info {#Error-Detail-Info}

To give some background: Our project is currently on react native 0.63.2 and previous compileSdkVersion was 30. We were successfully building android app till a few days back but suddenly it started to fail with the following error:

```
AAPT: error: resource android:attr/lStar not found
```

![AAPT ERROR](/BL-1006/Error_main.png)

After some searching online, we followed some solutions here: Resource linking fails on lStar

```
Force use this androidx-core version in your app module file build.gradle:

configurations.all {
  resolutionStrategy {
    force 'androidx.core:core:1.6.0'
    force 'androidx.core:core-ktx:1.6.0'
  }
}
```

We upgraded to compileSdkVersion and targetSdkVersion to 31, did some other related changes and were able to compile successfully. But the app is now crashing immediately on startup when I run it on Android 13 device.

## Error Log Info {#Error-Log-Info}

The following are the error logs from logcat:

```
2022-11-06 16:54:44.438 15842-15842/com.flyfinapp E/SoLoader: couldn't find DSO to load: libjscexecutor.so caused by: dlopen failed: library "libjsc.so" not found: needed by /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64/libjscexecutor.so in namespace classloader-namespace result: 0
2022-11-06 16:54:44.480 15842-15842/com.flyfinapp E/SoLoader: couldn't find DSO to load: libhermes-executor-debug.so caused by: dlopen failed: cannot locate symbol "_ZTVN6hermes2vm12CrashManagerE" referenced by "/data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64/libhermes-executor-debug.so"... result: 0
2022-11-06 16:54:44.482 15842-15842/com.flyfinapp E/SoLoader: couldn't find DSO to load: libhermes-executor-release.so
        SoSource 0: com.facebook.soloader.ApkSoSource[root = /data/data/com.flyfinapp/lib-main flags = 1]
        SoSource 1: com.facebook.soloader.DirectorySoSource[root = /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64 flags = 0]
        SoSource 2: com.facebook.soloader.DirectorySoSource[root = /system/lib64 flags = 2]
        SoSource 3: com.facebook.soloader.DirectorySoSource[root = /vendor/lib64 flags = 2]
        Native lib dir: /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64
     result: 0
2022-11-06 16:54:44.483 15842-15842/com.flyfinapp E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.flyfinapp, PID: 15842
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes-executor-release.so
        SoSource 0: com.facebook.soloader.ApkSoSource[root = /data/data/com.flyfinapp/lib-main flags = 1]
        SoSource 1: com.facebook.soloader.DirectorySoSource[root = /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64 flags = 0]
        SoSource 2: com.facebook.soloader.DirectorySoSource[root = /system/lib64 flags = 2]
        SoSource 3: com.facebook.soloader.DirectorySoSource[root = /vendor/lib64 flags = 2]
        Native lib dir: /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64
     result: 0
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:1127)
        at com.facebook.soloader.SoLoader.loadLibraryBySoNameImpl(SoLoader.java:943)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:855)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:802)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:772)
        at com.facebook.hermes.reactexecutor.HermesExecutor.loadLibrary(HermesExecutor.java:30)
        at com.facebook.hermes.reactexecutor.HermesExecutor.<clinit>(HermesExecutor.java:19)
        at com.facebook.hermes.reactexecutor.HermesExecutor.loadLibrary(HermesExecutor.java:23)
        at com.facebook.react.ReactInstanceManagerBuilder.getDefaultJSExecutorFactory(ReactInstanceManagerBuilder.java:369)
        at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:316)
        at com.facebook.react.ReactNativeHost.createReactInstanceManager(ReactNativeHost.java:94)
        at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:41)
        at com.flyfinapp.MainApplication.onCreate(MainApplication.java:77)
        at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1266)
        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6785)
        at android.app.ActivityThread.-$$Nest$mhandleBindApplication(Unknown Source:0)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2134)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7898)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
2022-11-06 16:54:44.483 15842-15842/com.flyfinapp E/WebEngage: App has crashed
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes-executor-release.so
        SoSource 0: com.facebook.soloader.ApkSoSource[root = /data/data/com.flyfinapp/lib-main flags = 1]
        SoSource 1: com.facebook.soloader.DirectorySoSource[root = /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64 flags = 0]
        SoSource 2: com.facebook.soloader.DirectorySoSource[root = /system/lib64 flags = 2]
        SoSource 3: com.facebook.soloader.DirectorySoSource[root = /vendor/lib64 flags = 2]
        Native lib dir: /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64
     result: 0
2022-11-06 16:54:47.669 15942-15942/com.flyfinapp E/SoLoader: couldn't find DSO to load: libjscexecutor.so caused by: dlopen failed: library "libjsc.so" not found: needed by /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64/libjscexecutor.so in namespace classloader-namespace result: 0
2022-11-06 16:54:47.676 15942-15942/com.flyfinapp E/SoLoader: couldn't find DSO to load: libhermes-executor-debug.so caused by: dlopen failed: cannot locate symbol "_ZTVN6hermes2vm12CrashManagerE" referenced by "/data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64/libhermes-executor-debug.so"... result: 0
2022-11-06 16:54:47.678 15942-15942/com.flyfinapp E/SoLoader: couldn't find DSO to load: libhermes-executor-release.so
        SoSource 0: com.facebook.soloader.ApkSoSource[root = /data/data/com.flyfinapp/lib-main flags = 1]
        SoSource 1: com.facebook.soloader.DirectorySoSource[root = /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64 flags = 0]
        SoSource 2: com.facebook.soloader.DirectorySoSource[root = /system/lib64 flags = 2]
        SoSource 3: com.facebook.soloader.DirectorySoSource[root = /vendor/lib64 flags = 2]
        Native lib dir: /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64
     result: 0
2022-11-06 16:54:47.679 15942-15942/com.flyfinapp E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.flyfinapp, PID: 15942
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes-executor-release.so
        SoSource 0: com.facebook.soloader.ApkSoSource[root = /data/data/com.flyfinapp/lib-main flags = 1]
        SoSource 1: com.facebook.soloader.DirectorySoSource[root = /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64 flags = 0]
        SoSource 2: com.facebook.soloader.DirectorySoSource[root = /system/lib64 flags = 2]
        SoSource 3: com.facebook.soloader.DirectorySoSource[root = /vendor/lib64 flags = 2]
        Native lib dir: /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64
     result: 0
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:1127)
        at com.facebook.soloader.SoLoader.loadLibraryBySoNameImpl(SoLoader.java:943)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:855)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:802)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:772)
        at com.facebook.hermes.reactexecutor.HermesExecutor.loadLibrary(HermesExecutor.java:30)
        at com.facebook.hermes.reactexecutor.HermesExecutor.<clinit>(HermesExecutor.java:19)
        at com.facebook.hermes.reactexecutor.HermesExecutor.loadLibrary(HermesExecutor.java:23)
        at com.facebook.react.ReactInstanceManagerBuilder.getDefaultJSExecutorFactory(ReactInstanceManagerBuilder.java:369)
        at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:316)
        at com.facebook.react.ReactNativeHost.createReactInstanceManager(ReactNativeHost.java:94)
        at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:41)
        at com.flyfinapp.MainApplication.onCreate(MainApplication.java:77)
        at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1266)
        at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6785)
        at android.app.ActivityThread.-$$Nest$mhandleBindApplication(Unknown Source:0)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2134)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7898)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:936)
2022-11-06 16:54:47.679 15942-15942/com.flyfinapp E/WebEngage: App has crashed
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes-executor-release.so
        SoSource 0: com.facebook.soloader.ApkSoSource[root = /data/data/com.flyfinapp/lib-main flags = 1]
        SoSource 1: com.facebook.soloader.DirectorySoSource[root = /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64 flags = 0]
        SoSource 2: com.facebook.soloader.DirectorySoSource[root = /system/lib64 flags = 2]
        SoSource 3: com.facebook.soloader.DirectorySoSource[root = /vendor/lib64 flags = 2]
        Native lib dir: /data/app/~~xPxviTwL84s3LS8L8OTgAA==/com.flyfinapp-EZ0vekCsB5BzvVwFLbm-GQ==/lib/arm64
     result: 0
```

## lStar Solution {#lStar-Solution}

I recommend using fixed stable version of react native library if you are not using one, like below:

- Optionally, you may consider using dynamic value of `REACT_NATIVE_VERSION` from your `package.json` file with the following script:

```
def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
```

```
allprojects {
    configurations.all {
        resolutionStrategy {
            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
        }
    }
    repositories {
        google()
        ...
    }
}
```

![Solution](/BL-1006/Solution.png)

This will prevent your app from unexpected behaviours due to unstable versions, however, downside of this is you have to check for latest updates from react native library manually and update time to time.

## Soloader Solution {#Soloader-Solution}

if you still facing Error of `**/**.so` plesase add below code in your project `build.gradle`.

```
packagingOptions {
        pickFirst "lib/armeabi-v7a/libc++_shared.so"
        pickFirst "lib/arm64-v8a/libc++_shared.so"
        pickFirst "lib/x86/libc++_shared.so"
        pickFirst "lib/x86_64/libc++_shared.so"
    }
```

![soloder_solution](/BL-1006/subSolution.png)

## Conclusion {#Conclusion}

Happy Programming!

- If you found this article helpful, don’t forget to `like, comment, share` and clap! 👏


Are you encountering resource linking failures on Lstart while developing your Android app in Android Studio? In this tutorial, we provide a comprehensive guide on how to fix this issue. We'll begin by discussing the causes of resource linking errors and the importance of debugging tools. Next, we'll provide step-by-step instructions on how to troubleshoot Lstart errors in Android Studio. We'll also cover the role of the Android build system and Gradle build files in resource linking. By following our best practices, both beginners and experienced developers can solve Android resource linking issues on Lstart and continue building successful apps. Don't let resource linking failures hinder your app development progress - start resolving Lstart errors with our developer's guide today.

Solving Android Resource Linking Errors on Lstart A Developer's Guide


## Introduction {#Introduction}

As a Node.js developer, you may find yourself needing to switch between different versions of Node.js for different projects. This can be time-consuming and frustrating without the right tools. Node Version Manager (NVM) is a tool that allows you to easily manage multiple versions of Node.js on your computer. In this comprehensive guide, we will walk you through the installation and usage of NVM on both Windows and Mac OS. We will also cover common issues and troubleshooting tips to help you get the most out of this powerful tool.

## What is NVM {#What-is-NVM}

Node Version Manager (NVM) is a tool that allows you to easily manage multiple versions of Node.js on your computer. NVM makes it easy to switch between different versions of Node.js for different projects, and it also provides a way to quickly switch back to a previous version if you encounter issues with a newer version. NVM is available for both Windows and Mac OS, and it is a popular tool among Node.js developers.

### Installation on Windows {#Installation-on-Windows}

1. Download the NVM installation package from the NVM for Windows GitHub page.

1. Run the installation package and follow the prompts to complete the installation.

1. Open a new command prompt or terminal window and run the command `nvm` to ensure that NVM was installed correctly.

1. To install a specific version of Node.js, run the command `nvm install [version]`. For example, to install Node.js version 14.16.0, run the command `nvm install 14.16.0`.

1. To switch to a specific version of Node.js, run the command `nvm use [version]`. For example, to switch to Node.js version 14.16.0, run the command `nvm use 14.16.0`.

### Installation on Mac OS: {#Installation-on-Mac-OS}

1. Open the Terminal application.

1. Install Homebrew by running the command `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`.

1. Install NVM by running the command `brew install nvm`.

1. To enable NVM, add the following line to your .bash_profile or .zshrc file: `export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm`.

1. Close and reopen the terminal window, or run the command `source ~/.bash_profile` or `source ~/.zshrc`.

1. To install a specific version of Node.js, run the command `nvm install [version]`. For example, to install Node.js version 14.16.0, run the command `nvm install 14.16.0`.

1. To switch to a specific version of Node.js, run the command `nvm use [version]`. For example, to switch to Node.js version 14.16.0, run the command `nvm use 14.16.0`.

### Usage: {#Usage}

Once you have NVM installed, using it is easy. Here are some common commands that you will use with NVM:

- `nvm install [version]`: Installs a specific version of Node.js.
- `nvm use [version]`: Switches to a specific version of Node.js.
- `nvm list`: Lists all installed versions of Node.js.
- `nvm alias default [version]`: Sets
  A Comprehensive Guide to Using NVM in Windows and Mac OS

## Conclusion {#Conclusion}

- In conclusion, NVM is an essential tool for developers who need to manage multiple versions of Node.js on their machines. It provides an easy and efficient way to switch between different versions of Node.js, without having to uninstall and reinstall each version.

- In this article, we have covered how to install and use NVM on both Windows and Mac OS, as well as some common commands and use cases for NVM. With NVM, you can easily manage multiple versions of Node.js on your machine and ensure that your projects are using the correct version of Node.js.

Happy Programming!

- If you found this article helpful, don’t forget to `like, comment, share` and clap! 👏


If you are a developer who works with Node.js, you may find yourself needing to switch between different versions of Node.js for different projects. NVM (Node Version Manager) is a tool that allows you to easily manage multiple versions of Node.js on your computer. In this tutorial, we will guide you through the installation and usage of NVM on both Windows and Mac OS. We'll also cover common issues and troubleshooting tips to help you get the most out of this powerful tool.

A Comprehensive Guide to Using NVM in Windows and Mac OS


When using Redux Thunk in a React Native project, you can organize your code using a folder structure that separates concerns and follows best practices. Here's an example of a common folder structure for a React Native project with Redux Thunk:

```
- src
  - actions
    - types.js
    - authActions.js
    - cartActions.js
      ...
  - reducers
    - index.js
    - authReducer.js
    - cartReducer.js
      ...
  - middleware
    - thunk.js
  - store
    - configureStore.js
  - components
    - screens
      - HomeScreen.js
      - ProfileScreen.js
        ...
    - components
      - Button.js
      - Input.js
        ...
        ...
  - services
    - api.js
    - authService.js
      ...
  - utils
    - helpers.js
    - validation.js
      ...
  - navigation
    - AppNavigator.js
    - NavigationService.js
      ...
  - assets
    - images
      - logo.png
      - background.jpg
    - fonts
      - Roboto-Regular.ttf
      - OpenSans-Bold.ttf
    ...
```

## Explanation of the folder structure: {#Explanation-of-the-folder-structure}

### actions: {#actions}

- Contains action files that define the different types of actions and action creators for your app. For example, authActions.js can contain actions related to user authentication, while cartActions.js can handle actions related to the shopping cart.

### reducers: {#reducers}

- Holds the reducers for the different parts of your app's state. The index.js file combines all the reducers into a single root reducer.

### middleware: {#middleware}

- Contains middleware files, such as thunk.js, where you can set up and configure Redux Thunk middleware.

### Store: {#Store}

- Houses the configureStore.js file, where you can create and configure your Redux store.

### components: {#components}

- Contains the reusable components and screens of your app. The screens directory can hold individual screen components like HomeScreen.js and ProfileScreen.js, while the components directory can hold reusable UI components like buttons, inputs, etc.
  services: Contains files for services, such as API service (api.js) and authentication service (authService.js), which handle the communication with external APIs or services.

### utils: {#utils}

- Contains utility files that provide helper functions and reusable code snippets, such as helpers.js and validation.js.

### navigation: {#navigation}

- Holds files related to app navigation, including the main AppNavigator.js file that defines the navigation structure, and NavigationService.js, which provides a centralized way to navigate between screens.

### assets: {#assets}

- Contains static assets like images and fonts that are used in your app.
  This folder structure is just an example, and you can modify it based on the specific needs of your project. It's important to keep your code organized and follow best practices to ensure scalability and maintainability.

## Conclusion {#Conclusion}

- In summary, the folder structure outlined above provides a well-organized approach to developing React Native applications. The `actions` directory holds action files that define different types of actions and their creators, allowing for a modular approach to managing app actions. The `reducers` directory houses reducers for different parts of the app's state, with the `index.js` file combining them into a single root reducer.

* The `middleware` directory contains middleware files, such as `thunk.js,` for setting up Redux Thunk middleware. The `store` directory is responsible for creating and configuring the Redux store. The `components` directory contains reusable components and screens, organized into `screens` and `components` subdirectories.

* The `services` directory handles external API communication, while the `utils` directory provides utility functions and code snippets. The `navigation` directory handles app navigation, and the `assets` directory stores static assets like images and fonts. Overall, this folder structure promotes code maintainability, modularity, and scalability in React Native development.

Happy Programming!

- If you found this article helpful, don’t forget to `like, comment, share` and clap! 👏


In this comprehensive guide, we delve into the world of Redux Thunk in React Native, equipping you with the knowledge and skills to efficiently manage state in your mobile applications. From understanding the fundamentals of Redux Thunk to implementing asynchronous actions and configuring middleware, we cover it all. Discover how to structure your code, organize actions and reducers, and handle complex async operations with ease. By the end of this guide, you'll have a deep understanding of Redux Thunk and the ability to streamline your React Native app's state management for optimal performance and scalability.

Explore, Improve Development 🚀