DEV Community: Ritesh Shukla

Building React Native In-App Modules bypassing the JS bridge.

Ritesh Shukla — Tue, 29 Oct 2024 18:56:31 +0000

Turbo Modules in React Native enhance JavaScript interactions with native code, offering faster, more efficient communication than the traditional bridge model. By leveraging Turbo Modules, developers can seamlessly integrate performance-critical native features directly into their apps, ensuring high speed without relying on external libraries. This guide will show you how to build a native in-app module with Turbo Modules, optimizing your React Native app for a smoother, faster user experience.

In this guide, we will create a basic in-app native module that enables app restarts, utilizing Java for Android and Objective-C++ for iOS.

Step 1: Create spec file

Start by creating folder name specs at the root level. Inside the specs folder create a fileNamed NativeRestartPackage.ts .
Note that the TurboModules requires the prefix Native to work.

Add the following code

import { TurboModule, TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
    restartApp(): void;
}

export default TurboModuleRegistry.get<Spec>("NativeRestartApp") as Spec | null;

Step 2: Codgen Configuration

Add the below configuration to your package.json

 "codegenConfig": {
    "name": "NativeRestartPackageSpec",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "com.restartApp"
    }
  }

Step 3: Native Android Code

Create a folder named restartApp at android/app/src/main/java/com.

Create NativeRestartApp.java and add the code with all your native logic.

package com.restartApp;

import android.content.Context;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.jakewharton.processphoenix.ProcessPhoenix;
import com.restartApp.NativeRestartPackageSpec;
import android.util.Log;



public class NativeRestartApp extends NativeRestartPackageSpec{
    private final Context mContext;
    public static final String NAME = "NativeRestartApp";

    public NativeRestartApp(ReactApplicationContext reactContext) {
        super(reactContext);
        this.mContext= reactContext.getApplicationContext();
    }

    @Override
    public String getName() {
        return NAME;
    }
    public void restartApp(){
        Log.d("NativeRestartApp", "Restarting app");
        ProcessPhoenix.triggerRebirth(mContext);
    }

}

Create NativeRestartPackage.java and add the following code.

package com.restartApp;

import com.facebook.react.TurboReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;


import java.util.HashMap;
import java.util.Map;

public class NativeRestartPackage extends TurboReactPackage {
    @Override
    public NativeModule getModule(String name, ReactApplicationContext reactContext){
        if (name.equals(NativeRestartApp.NAME)) {
            return new NativeRestartApp(reactContext);
        } else {
            return null;
        }
    }
    @Override
    public ReactModuleInfoProvider getReactModuleInfoProvider() {
        return new ReactModuleInfoProvider() {
            @Override
                public Map<String, ReactModuleInfo> getReactModuleInfos() {
                    Map<String, ReactModuleInfo> moduleInfoMap = new HashMap<>();
                    moduleInfoMap.put(
                        NativeRestartApp.NAME,
                        new ReactModuleInfo(
                            NativeRestartApp.NAME,
                            NativeRestartApp.NAME,
                            false, // canOverrideExistingModule
                            false, // needsEagerInit
                            false, // isCxxModule
                            true   // isTurboModule
                        )
                    );
                    return moduleInfoMap;
                }
        };

    }

}

Now its time to add the code into MainApplication(Since this is an in-app-module and wont be autolinked).

import com.restartApp.NativeRestartPackage

//Rest of code
override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              add(NativeRestartPackage())
            }

//Rest of code

Step 4: Native iOS Code

Create a new group(using Xcode) in your app named NativeRestartApp.

Create RCTRestartApp.h

#import <Foundation/Foundation.h>
#import <NativeRestartPackageSpec/NativeRestartPackageSpec.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTRootView.h>
#import <React/RCTReloadCommand.h>

NS_ASSUME_NONNULL_BEGIN

@interface RCTRestartApp : NSObject<NativeRestartPackageSpec>

@end

NS_ASSUME_NONNULL_END

Create RCTRestartApp.mm and add all your native logic here

#import "RCTRestartApp.h"

@implementation RCTRestartApp

RCT_EXPORT_MODULE(NativeRestartApp)
- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeRestartPackageSpecJSI>(params);
}
- (void)restartApp{
  void (^loadBundle)(void) = ^{
     RCTTriggerReloadCommandListeners(@"restart");
   };

   if ([NSThread isMainThread]) {
     loadBundle();
   } else {
     dispatch_sync(dispatch_get_main_queue(), loadBundle);
   }

}
@end

Step 5: Finally the Javascript code

import React from 'react';
import type { PropsWithChildren } from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'
import NativeRestartPackage from './specs/NativeRestartPackage'

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({ children, title }: SectionProps): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <View style={styles.sectionContainer}>

    </View>
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Button title="Click me" onPress={() => {
            NativeRestartPackage.restartApp()
          }} />
          {/* <LearnMoreLinks /> */}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Finally Run the app . You should be able to access native functionality bridgeless

Eg Video:-
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbbdyisp25wkq3kbpxow.gif

Conclusion

There is no conclusion , it just works like a charm .

Do like(at least for the cover meme XD)

PyScript :- The JS Killer?

Ritesh Shukla — Sat, 07 May 2022 22:06:19 +0000

We all have been hopping towards different programming languages for different purposes. Most of us prefer Python for Machine Learning and Data Analytics while JavaScript for Web development.
The ability of JavaScript to run in the browser gives it an upper hand in web development. Adding ML and Data Analytics projects to a website has always been a pain for developers. We need to create and manage various APIs to get the task done.
However, this is not the case anymore. Now you can write and run Python in the browser using PyScript just like JavaScript.

PyScript: -

PyScript is developed by Anaconda. With the Help of py-script tag, you can directly write python programs in an HTML file just like you write JavaScript code under the script tag. PyScript also supports various python modules including scikit -learn, matplotlib. Modules can be installed using py-env.

Installation: -

There is absolutely no installation needed to run PyScript. Just add proper CSS and script import statement to the HTML file and you are good to go. The import statement to be added is given below

<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>

Note: - You need to wait for some time as it takes time to create the proper environment to run python files.

How to use Pyscript: -

1)Directly in HTML file (Embedded code).

<py-script>
        print("Hello, I am written in Python")
</py-script>

2)Use external file

<py-script src="./1.py" output="plot"></py-script>

Latter is preferred because code editors like VS code still doesn’t identify python code in HTML files. This can cause lots of indentation errors in complex codes and also you won’t be able to use features like auto-complete and suggestions.

Examples: -

Getting started

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

</head>

<body>

    <py-script>
        print("Hello, I am written in Python")
    </py-script>

</body>

</html>

Creating Linear Regression in PyScript

For this, we need to install libraries scikit-learn, matplotlib, NumPy, and pandas. It can be done by adding the library's name under the tag.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> 
        - pandas 
        - scikit-learn 
        - matplotlib 
        - numpy 
    </py-env>
  </head>

  <body>
    <div id="plot"></div>
    <py-script src="./1.py" output="plot"></py-script>
  </body>
</html>

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LinearRegression
data={'Hours': [2.5, 5.1, 3.2, 8.5, 3.5, 1.5, 9.2, 5.5, 8.3, 2.7, 7.7, 5.9, 4.5, 3.3, 1.1, 8.9, 2.5, 1.9, 6.1, 7.4, 2.7, 4.8, 3.8, 6.9, 7.8], 'Scores': [21, 47, 27, 75, 30, 20, 88, 60, 81, 25, 85, 62, 41, 42, 17, 95, 30, 24, 67, 69, 30, 54, 35,76, 86]}
s=pd.DataFrame(data)
X=np.array(s['Hours']).reshape(-1,1)
Y=np.array(s['Scores']).reshape(-1,1)
X_train, X_test, y_train, y_test = train_test_split(X, Y, test_size=0.2, random_state=0)
regressor = LinearRegression()
regressor.fit(X_train, y_train)
y_pred = regressor.predict(X_test)
fig, plot = plt.subplots()
print(y_pred)
plot.scatter(X_test, y_test, color ='b')
plot.plot(X_test, y_pred, color ='k')
fig

Graph and prediction are displayed on the browser

Conclusion: -

Since PyScript is relatively new. Quite a few numbers of problems are associated with it.

a)Code editors are still not adapted to identify python code inside HTML files. So, features like auto-indent, auto-complete simply won’t work.
b)You can’t read APIs because the SSL module is still not available.
c)You can’t read CSV files from local storage.
d)It is relatively slow.

You can also create interactive experience using PyRepl which is part of PyScript project.PyScript has great potential. It would be interesting to see how things go in the future for PyScript.

For more information visit https://anaconda.cloud/pyscript-python-in-the-browser

Reduce APK size in React Native

Ritesh Shukla — Wed, 23 Feb 2022 05:57:32 +0000

Reduce App Size in React Native:

We all have faced problems related to the size of the built apk in React-Native. The size of the apk is usually very high . This eats up a lot of space in the phone's storage. Let's look at a few methods to avoid large apk size in the final bundle.

Remove Codes and assets.

One simple method is to use light-weight assets. Use jpg instead of a high quality png image (if not required). Use vector icons(Prefer React Native Vector icons). Optimize your image files using some tools like tinypng.com. Also, remove unused codes and JS files.

Prefer light-weight node modules

You can use alternate node modules to reduce the size of APK by finding the weight of your current node modules by the use of cost-of-modules(npm install -g cost-of-modules).If any module is of high cost, replace it with less cost alternatives.

Compress Java Bytecode

Navigate to android/app/build.gradle .Set the def enableProguardInReleaseBuilds to true.This would enable Proguard to compress the Java ByteCode leading to reduction in the apk size.

Separate APK for separate CPU architecture

Navigate to android/app/build.gradle .Set the def enableSeperateBuildPerCPUArchitecture to true.This would build different apks for different CPU architecture(x86 and arm).Upon publishing on playstore, playstore will automatically deliver required apks according to the phone's CPU Architecture.

Redux VS React Context

Ritesh Shukla — Thu, 25 Nov 2021 10:02:16 +0000

So, we all have worked on React or React Native for developing web and mobile applications. There are times we are stuck on which state management library to use. There are two very popular approaches in React
1)Redux
2)Context API
Let’s See in Detail how they differ and which one to prefer.

1)Redux

a) Introduction: -

Redux is an open-source JavaScript library for managing and centralizing the application state. It is the most popular way for state management. It was released in the year 2015. It is highly inspired by Facebook’s flux and functional programming language Elm.
Redux uses Actions, Reducers, and store to work.
Actions can be considered as an event. Actions carry the information that sends data from the application to the Store
Reducers are the event handlers. This is responsible for updating a slice of the store. These reducers are pure functions.
Store are single JavaScript objects which are used to store the application state. It can be arrays, objects, numbers anything. It is accessible by every part of the UI.

b) Installation:

The installation of Redux is pretty simple. Head over to your project directory and type npm install --save redux if you are using npm as package manager or type yarn add redux in case of yarn package manager. You also need React-redux (npm install react-redux). React – redux provides a set of hooks you can use to get data from the stores and dispatch actions.

c)Advantages: -

Redux helps to manage the state of the app from a single place.
The changes in the app are more predictable and are highly trackable.
The code structure is very strict in Redux. This makes it easier for developers to understand. This also makes Redux highly maintainable.
There are great dev tools for debugging Redux applications. One such tool is Redux Dev tools chrome extensions.
Redux has huge community support. So, even if you are stuck somewhere, you would easily find the solution online.

d)Disadvantages: -

There is a lot of boilerplate code in Redux.
It is not beginner-friendly.
Since every component can access the store. Security is a major concern.
Since Redux is not built in React. It increases the size of the final bundle when built.
It consumes a lot of memory as it creates a new state whenever the state is updated. This is because states are immutable in Redux.

2)React Context

a) Introduction: -

React Context is a method to pass props from parents to children to grandchildren components. This is done by storing the props in context (Similar to store in Redux) and reusing it in children components without passing them at each level. Context API came out with React 16.3.0 on 29th March 2018.
Context API uses create, provider, and consume approach to handle the UI states.
The createContext() hook is used to pass the initial state as the argument.The useReducer() hook is used to update the state.
The provider makes sure that context is accessible to every component. This is done by wrapping the components inside the Provider component.
The accessing for the context by the children is called consuming. The useContext() hook is used by child components to consume the context.

b) Installation:

React Context comes with React bundle. So, if you have React installed in your project, you are good to go.

c)Advantages: -

Since React context is a core part of React JS Library. Dependency on external packages is highly reduced.
React Context is highly scalable. It can be used to develop from small to large applications.
It is very beginner-friendly. The code is far less complex than Redux.

d)Disadvantages: -

Context API re-renders all the components once the state is updated.
It is harder to track bugs.
The community is comparatively small.

Which one to use?

There is no absolute answer for this. Both approaches have their advantages and disadvantages. Redux is an absolute gem for medium to high-level applications whereas context API is better for small applications. If your application state changes very frequently, Redux is the answer for you. This is because only the updated components re-render whenever the state is updated. Features like language/dark mode which requires less frequent updates can be done using context API.

Hybrid Approach

Context API can be easily integrated with Redux. Modern applications use a hybrid of both Redux and context APIs. The applications built are highly scalable and maintainable. All the states can be managed and changed by Redux, passing props to change the working of the low-level component can be done by context API.

DEV Community: Ritesh Shukla

Building React Native In-App Modules bypassing the JS bridge.

Step 1: Create spec file

Step 2: Codgen Configuration

Step 3: Native Android Code

Step 4: Native iOS Code

Step 5: Finally the Javascript code

Finally Run the app . You should be able to access native functionality bridgeless

Conclusion

PyScript :- The JS Killer?

PyScript: -

Installation: -

How to use Pyscript: -

1)Directly in HTML file (Embedded code).

2)Use external file

Examples: -

Getting started

Creating Linear Regression in PyScript

Conclusion: -

Reduce APK size in React Native

Reduce App Size in React Native:

Remove Codes and assets.

Prefer light-weight node modules

Compress Java Bytecode

Separate APK for separate CPU architecture

Redux VS React Context

1)Redux

a) Introduction: -

b) Installation:

c)Advantages: -

d)Disadvantages: -

2)React Context

a) Introduction: -

b) Installation:

c)Advantages: -

d)Disadvantages: -

Which one to use?

Hybrid Approach

So, which approach would you prefer in your next Application?