DEV Community: Frank James

Using Camera in React Native

Frank James — Tue, 07 Mar 2023 04:35:41 +0000

React Native Camera is the go-to component when creating React Native apps that require the functionality of using the device’s camera. Maintained by the React Native community, this module has support for:

Videos
Photographs
Face Detection
Text Recognition
Barcode Scanning

It also helps your React Native app to communicate with the native operating system using the device's hardware by implementing some helper methods.

In this tutorial, let us build a simple QR code scanner app in React Native by implementing one of the functionalities this module supports, called Barcode scanning.

For more information on RNCamera, please refer to its official documentation here.

Installing Dependencies

To begin, let us generate a React Native project by using the command below from a terminal window:

npx react-native init qrCodeScannerApp

# navigate inside the directory once it is generated
cd qrCodeScannerApp

Next, you have to install some dependencies to use the RNCamera module. If you are on the latest React Native version, that is, a version above 60.x.x, run the following command from a terminal window.

yarn add react-native-camera
For iOS devices, you have to install the pods as shown below:

# after dependency installation
cd ios/

pod install

cd ..

For Android users, there is no extra installation requirement at this point.

Setting Camera Permissions

To access the device's hardware camera, a set of permissions have to be added. For iOS, please open the file ios/qrCodeScannerApp/Info.plist and add the following permissions:

<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Required with iOS 11 and higher: include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Next, to add permissions so that the app works correctly on an Android device, open the file android/app/src/main/AndroidManifest.xml and add the following:

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

<!-- Include this only if you are planning to use the camera roll -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Then, open another file android/app/build.gradle and add the following:

android {
 ...
 defaultConfig {
 ...
 // insert this line
 missingDimensionStrategy 'react-native-camera', 'general'
 }
}

That's it for the installation process for the OS platforms. From the next section, let us continue to build the app.

Setting up the Camera in a React Native App

In this section, let us first try and test the RNCamera module. Open the App.js file and start by adding the following import statements. Nothing fancy here. You just have to import the core React Native components such as View and Alert as well as RNCamera from react-native-camera.

import React, { Component } from 'react'
import { StyleSheet, View, Alert } from 'react-native'
import { RNCamera } from 'react-native-camera'
Then, create a class component App that is going to render the JSX that uses a hardware camera on the device's screen. This going to be done by wrapping the RNCamera component inside a View.

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          style={{ flex: 1, alignItems: 'center' }}
          ref={ref => {
            this.camera = ref
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  }
})

export default App

After adding the above snippet, make sure you build the app for the OS you are using to test it. I am going to use a real Android device for testing.


# for iOS
react-native run-ios

# for Android
react-native run-android

When testing on an Android device, please make sure that the device is connected via USB, and make sure that USB debugging is enabled as well before you run the previous build command from a terminal window.

After the app has finished building and this process triggers the metro bundler, you are going to get a prompt asking for permission when the app runs for the first time.

This means that the camera is working as expected and now you can leverage this to scan QR codes.

Reading a QR Code Information

To read the QR code information, you will have to make use of the prop onGoogleVisionBarcodesDetected. This prop, with the help of a helper method, can be used to evaluate the value of the scanned QR code.

In the App.js file, start by modifying the RNCamera component as below.

<RNCamera
  ref={ref => {
    this.camera = ref
  }}
  style={styles.scanner}
  onGoogleVisionBarcodesDetected={this.barcodeRecognized}
/>
Add the corresponding styles for the Camera component in the previously defined StyleSheet object.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  // add the following
  scanner: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  }
})
Then, before the render method, add the helper method barcodeRecognized as well the state variable barcodes whose initial value is going to be an array.

state = {
  barcodes: []
}

barcodeRecognized = ({ barcodes }) => {
  barcodes.forEach(barcode => console.log(barcode.data))
  this.setState({ barcodes })
}

The above helper method is going to update the state variable barcodes that can be used to render the value of the QR code scanned using the RNCamera. Let us add two helper methods following the barcodeRecognized method. These helper methods are going to be responsible for displaying the information of the QR code.

renderBarcodes = () => (
  <View>{this.state.barcodes.map(this.renderBarcode)}</View>
)

renderBarcode = ({ data }) =>
  Alert.alert(
    'Scanned Data',
    data,
    [
      {
        text: 'Okay',
        onPress: () => console.log('Okay Pressed'),
        style: 'cancel'
      }
    ],
    { cancelable: false }
  )

Lastly, to render the Alert box, make sure you add the code below to modify the RNCamera component as below.

<RNCamera
  ref={ref => {
    this.camera = ref
  }}
  style={styles.scanner}
  onGoogleVisionBarcodesDetected={this.barcodeRecognized}>
  {this.renderBarcodes}
</RNCamera>

That's it! Now, let us go back to the app and test it out.

How to use useMemo() in React JS?

Frank James — Sun, 05 Mar 2023 20:20:34 +0000

What is useMemo, and How It Works in React?

useMemo in React is essential react hook for improving the performance and speed of your application by caching the output in the computer memory and returning it when the same input is given again.

So how does this hook works in ReactJs? Let’s use a real-life example to explain this concept. Assuming that your high school teacher asked you for the total number of students in your class, you counted the students and told him that it was 50. You wouldn’t need to do the counting again when he asks you the next day. All you need is to give him the same answer as yesterday unless some new students were added to your class; now you have to count or calculate again. This is how the React memo hook works.

The React useMemo hook performs some calculations when requested and caches the result in the computer memory. Whenever the React memo hooks are asked to perform another operation with the same value, the old result will be returned without needing to waste computer resources calculating all over again.

The Syntax

The React hooks useMemo take two arguments in its parameter. These arguments are an array of dependencies and some functions whose output you want to cache. By default, the useMemo hook will execute the function you passed as an argument after the initial render.

How to Use the useMemo() React Hook 

You can start using the useMemo hook in your next React project by following the steps below:

useMemo() Hook

Step 1: Import the hook from the React library:

import { useMemo } from "react";

Step 2: Compute with the useMemo hook:

const memodVal = useMemo(() => {/* function */}, [/* Dependencies */]);

Step 3: Render the useMemo result on screen:

<div className="App">{memodVal}</div>

useMemo() — an Example

import "./styles.css";
import { useState, useMemo } from "react";


export default function App() {
  const [grade, setGrade] = useState(5);
  const countPopulation = ((grade) => {
    return grade ** 2;
  });


  const memoizedVal = useMemo(() => countPopulation(grade), []);

  return (
    <div className="App">
      <p>Current Grade: {grade}</p>
      <p>Current Population: {memoizedVal}</p>
    </div>
  );
}

useMemo() vs useCallback()

 
The useMemo hook and the react useCallback hook are very similar. Both use memoization caching techniques; however, the main difference between these two hooks is that, while the useCallback hook allows you to memoize the entire function, the useMemo hook only will enable you to memoize the output of functions.

Enroll in the best Web Development courses to strengthen your career in web development.

For instance, this is how closely related useMemo is to useCallback…

import "./styles.css";
import { useState, useMemo } from "react";
export default function App() {
  const [grade, setGrade] = useState(3);
  const countPopulation = (grade) => grade ** 2;
  const memoizedVal = useMemo(() => countPopulation(grade), [grade]);

  
  return (
    <div className="App">
      <RenderVal grade={grade} val={memoizedVal} />
    </div>
  );
}
const RenderVal = ({ grade, val }) => {
  return (
    <>
      <p>Current Grade: {grade}</p>
      <p>
        Current Population: {' '}
        {typeof val === 'function' ? val() : val}
      </p>
    </>
  );
};

Now, let’s see how to use it along with the react useCallback hook…

import "./styles.css";
import { useState, useCallback  } from "react";
export default function App() {
  const [grade, setGrade] = useState(3);
  const countPopulation = countPopulation(grade), [grade]);
  const memoizedCallback = useCallback (() => countPopulation(grade), [grade]);

  return (
    <div className="App">
      <RenderVal grade={grade} val={memoizedCallback} />
    </div>
  );
}
const RenderVal = ({ grade, val }) => {
  return (
    <>
      <p>Current Grade: {grade}</p>
      <p>
        Current Population: {' '}
        {typeof val === 'function' ? val() : val}
      </p>
    </>
  );
};

Use Memoization with Care 

While the useMemo hook can improve your app's performance, you should also run some scans on your codebase to determine which operations must be memoized. Only after the scan should you decide if memoization is worthwhile. When memoization is used inappropriately, it can lead to other performance issues.

Check out  the App development course online by KnowledgeHut and get training in various fields of App development.

When to Run the useMemo() React Hook 

There are three conditions where useMemo can be the best option for you, and they are discussed below:

Only After Initial Render 

Going by this first option, the hook will run once and never again after the initial render. The function will not be executed again even if something causes the component to re-render. Instead, it will return the function's memoized output. This will be repeated for each subsequent re-render.

If this option is what you want to do, then the dependency array must be left empty. This means that the useMemo hook should not be watching any values. It should always return the previously memorized or cached output.

See the implementation below…

import "./styles.css";
import { useState, useMemo, useEffect  } from "react";
export default function App() {
  const [grade, setGrade] = useState(3);
  const countPopulation = (grade) => {
    return grade ** 2;
  };
  const memoizedVal = useMemo (
    () => countPopulation(grade),
    [/* Nothing to watch for */]
  );


  useEffect(() => {
    console.log(`Initial Memoized Value is: ${memoizedVal}`);
  }, [memoizedVal])
  
  return (
    <div className="App">
      <RenderVal grade={grade} val={memoizedVal} />
      <button 
        onClick={
          () => setGrade(prevGrade => prevGrade += 1)
        }>Increase Grade</button>
    </div>
  );
}
const RenderVal = ({ grade, val }) => {
  return (
    <>
      <p>Current Grade: {grade}</p>
      <p>Current Population: {val}</p>
    </>
  );
};

Only When Dependency Changes 

When the specific value changes, the second option is to run useMemo and execute the function you passed. This will come in handy if the function you passed as an argument accepts a value from the outside world. If this outside value changes, you would want to recalculate the output to ensure it is correct.

You must specify the value you want to "watch" as one of the dependencies to accomplish this. useMemo will then monitor this value and execute the function you specified whenever the monitored value changes. If it does not change, useMemo will return the memoized value, which is the value from the most recent execution.

See the code block below…

import "./styles.css";
import { useState, useMemo, useEffect } from "react";
export default function App() {
  const [grade, setGrade] = useState(3);
  const countPopulation = (grade) => {
    return grade ** 2;
  };
  const memoizedVal = useMemo(() => countPopulation(grade), [grade]);
  useEffect(() => {
    console.log(`Initial Memoized Value is: ${memoizedVal}`);
  }, [memoizedVal]);
  return (
    <div className="App">
      <RenderVal grade={grade} val={memoizedVal} />
      <button onClick={() => setGrade((prevGrade) => (prevGrade += 1))}>
        Increase Grade
      </button>
    </div>
  );
}
const RenderVal = ({ grade, val }) => {
  return (
    <>
      <p>Current Grade: {grade}</p>
      <p>Current Population: {val}</p>
    </>
  );
};

How To Use React useMemo() Hook API Reference In React Native

From the image above, you can see that for every click of the increase grade button, the useMemo hook does some recalculation because it has a watch value.

After Every Re-render

The final option is to instruct useMemo to re-run the function you specified on each re-render. Doing this will nullify the sole purpose of using a useMemo hook. It is meaningless to use a useMemo to memoize something only to clear it out. Nevertheless, because this is an option, we must showcase it. A little warning to you, this option is a complete waste of time and is not recommended for use.

Let's say this is your only option, which is not true. You must remove the dependency array to persuade the useMemo hook to run on every render. The only argument required this time is the function.

Let’s see the code snippet below…

import "./styles.css";
import { useState, useMemo, useEffect } from "react";
export default function App() {
  const [grade, setGrade] = useState(3);
  const countPopulation = (grade) => {
    return grade ** 2;
  };
  const memoizedVal = useMemo(() => countPopulation(grade));
  useEffect(() => {
    console.log(`Initial Memoized Value is: ${memoizedVal}`);
  }, [memoizedVal]);
  return (
    <div className="App">
      <RenderVal grade={grade} val={memoizedVal} />
      <button onClick={() => setGrade((prevGrade) => (prevGrade += 1))}>
        Increase Grade
      </button>
    </div>
  );
}
const RenderVal = ({ grade, val }) => {
  return (
    <>
      <p>Current Grade: {grade}</p>
      <p>Current Population: {val}</p>
    </>
  );
};

How To Use React useMemo() Hook API Reference In React Native

From the example above, the useMemo kept re-computing on every re-render aborting the real purpose of using the useMemo hook since we removed the dependency array.

Use useMemo Hook with Caution 

Optimization and performance are vital ingredients for developing a scalable and production-ready application. But by pursuing performance and optimization too much, you could end up introducing more problems than solutions in your code. You can easily overuse the React useMemo hook, that is why you must consider your options carefully before deciding to use the useMemo hook. Keep in mind that using the hook often adds some overhead, that is, the hook introduces new complex logic that must be considered.

It can also cause new performance issues that you didn't expect. When you memoize something, it is saved in your computer memory. This provides more room for the CPU to process data faster. However, resources are still being used, for instance, memory is used more for caching your data. The only difference is the type of resource it consumes.

Finally, do not create side-effects with functions passed to the useMemo hook. Side effects should be implemented within the useEffect hook. Additionally, do not use useMemo to update React state values. This is also a side effect, but it is worth mentioning. Use useMemo only for what was designed for memoizing and caching output values. To stay abreast of the latest react dev tools, visit top 12 react developer tools - extensions.

Conclusion 

That's much important information to take in in one tutorial. I hope this tutorial has helped you better understand performance optimization in ReactJs.

The React useMemo hook can be helpful when looking for ways to improve the performance of your React applications. It can help you optimize costly computations by memorizing their output and re-running them only when necessary.

If you enjoyed this tutorial, consider learning from our ecosystem; check out the KnowledgeHut React Native training.

How to build Web3 in Algorand Blockchain

Frank James — Sun, 05 Mar 2023 20:06:11 +0000

While using the Web3Auth Web SDK for a non EVM chain like Algorand you get a standard provider from which you can get the private key of the user. Using this private key, you can use the corresponding libraries of the blockchain to make blockchain calls like getting user's account, fetch balance, sign transaction, send transaction, read from and write to the smart contract, etc. We have highlighted a few methods here for getting you started quickly on that.

Initializing Provider

import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

const web3auth = new Web3Auth({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID", // get it from Web3Auth Dashboard
  web3AuthNetwork: "cyan",
  chainConfig: {
    chainNamespace: "other", // for all non EVM and SOLANA chains, use "other"
  },
});

// "other" is supported through @web3auth/openlogin-adapter package.
const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    uxMode: "popup",
  },
});
web3auth.configureAdapter(openloginAdapter);

await web3auth.initModal();

const web3authProvider = web3auth.connect(); // web3auth.provider

Get User Info

Once logged in, Web3Auth instance returns you some information about your logged in user. This is fetched directly from the JWT token and Web3Auth doesn't store this info anywhere. Hence, this information in available in social logins only after the user has logged into your application.

const user = await web3auth.getUserInfo(); // web3auth instance

Get Account and KeyPair

Once a user logs in, the Web3Auth SDK returns a provider. Since Web3Auth doesn't have a native provider for Algorand, we need to directly use the private key to make the RPC calls.

Using the function, web3auth.provider.request({method: "private_key"}) from Web3Auth provider, the application can have access to the user's private key. However, we cannot use this key with Algorand specific signing functions, hence, we first derive the Algorand Key using the getAlgorandKeyPair() function.

On the underhood, it uses the algosdk.secretKeyToMnemonic() function, where we need to pass the Buffer.from(privateKey, "hex"), ie. the hexadecimal to Uint8Array converted private key. We get a mnemonic seed phrase which can be used to derive the keypair using the algosdk.mnemonicToSecretKey(), this returns a keypair. We can use the returned private key pair from this and use on Algorand transactions.

import { SafeEventEmitterProvider } from "@web3auth/base";
import algosdk from "algosdk";


/*
  Use code from the above Initializing Provider here
*/

// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });

// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);

// keyPair.addr is the account address.
const account = keyPair.addr;

Get Balance

import { SafeEventEmitterProvider } from "@web3auth/base";
import algosdk from "algosdk";

/*
  Use code from the above Initializing Provider here
*/

// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });

// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);

// keyPair.addr is the account address.
const account = keyPair.addr;

// Making a connection to the Algorand TestNet
const algodToken = {
  "x-api-key": "YOUR_ALGOD_API_KEY",
};
const algodServer = "https://testnet-algorand.api.purestake.io/ps2"; // for testnet
const algodPort = "";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);
const balance = await client.accountInformation(keyPair.addr).do();

Send Transaction

import { SafeEventEmitterProvider } from "@web3auth/base";
import algosdk from "algosdk";

/*
  Use code from the above Initializing Provider here
*/

// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });

// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);

// keyPair.addr is the account address.
const account = keyPair.addr;

// Making a connection to the Algorand TestNet
const algodToken = {
  "x-api-key": "YOUR_ALGOD_API_KEY",
};
const algodServer = "https://testnet-algorand.api.purestake.io/ps2"; // for testnet
const algodPort = "";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);

// Creating the transaction

const params = await client.getTransactionParams().do();
const enc = new TextEncoder();
const message = enc.encode("Web3Auth says hello!");

// You need to have some funds in your account to send a transaction
// You can get some testnet funds here: https://bank.testnet.algorand.network/

const txn = algosdk.makePaymentTxnWithSuggestedParams(
  keyPair.addr, // sender
  keyPair.addr, // receiver
  1000,
  undefined,
  message,
  params
);
let signedTxn = algosdk.signTransaction(txn, keyPair.sk);

const txHash = await client.sendRawTransaction(signedTxn.blob).do();

Sign Message

import { SafeEventEmitterProvider } from "@web3auth/base";
import algosdk from "algosdk";

/*
  Use code from the above Initializing Provider here
*/

// web3authProvider is web3auth.provider from above
const privateKey = await web3authProvider.request({ method: "private_key" });

// derive the Algorand Key Pair from the private key
var passphrase = algosdk.secretKeyToMnemonic(Buffer.from(privateKey, "hex"));
var keyPair = algosdk.mnemonicToSecretKey(passphrase);

// keyPair.addr is the account address.
const account = keyPair.addr;

// Making a connection to the Algorand TestNet

const algodToken = {
  "x-api-key": "YOUR_ALGOD_API_KEY",
};
const algodServer = "https://testnet-algorand.api.purestake.io/ps2"; // for testnet
const algodPort = "";
const algodClient = new algosdk.Algodv2(algodToken, algodServer, algodPort);

// Generating the message to sign

const params = await client.getTransactionParams().do();
const enc = new TextEncoder();
const message = enc.encode("Web3Auth says hello!");
const txn = algosdk.makePaymentTxnWithSuggestedParams(keyPair.addr, keyPair.addr, 0, undefined, message, params);
let signedTxn = algosdk.signTransaction(txn, keyPair.sk);
let txId = signedTxn.txID;

The Differences between React and Angular

Frank James — Sun, 05 Mar 2023 19:43:33 +0000

What is React JS?

React is a JavaScript library developed by Facebook which allows you to build UI components. It facilitates the creation of interactive User Interfaces. It also makes the code easier to understand and launch. React Java Script framework uses server-side rendering to provide a flexible, performance-oriented solution.

What is Angular?

Angular is a structural framework for developing dynamic web apps. It allows developers to use HTML as a template language and allows HTML’s syntax to express the application’s components briefly and clearly.

It is a fully featured JavaScript framework that helps developing dynamic, single page web apps. It also supports the (MVC) programming structure.

Key Features of React

Allows you to use 3rd party libraries
Time-Saving
Simplicity and Composable
Fully supported by Facebook.
Better user experience and very fast performance.
Faster Development
Code Stability with One-directional data binding
React Components

Key Features of Angular

Built-in support for AJAX, HTTP, and Observables
Large community support
Consistent with technology
Typescript offers efficiency
Cleaner and crisp Coding
Enhanced support for error handling
Seamless updates using Angular CLI
Forms and validation
Shadow DOM / local CSS
UI and Business Logic Separation

Advantages of React

Here, are pros/benefits of using React:

Easy to learn because of its simple Design
The HTML-like syntax for which allows templating, and highly detailed documentation.
Developers can spend more time writing modern JavaScript, and less time worrying about the framework-specific code.
Enhance support for server-side rendering, making it a robust framework for content-focused applications.
Migrating between versions is in React.
Facebook offers “codemod” feature to automate much of the process.
Skills learned in React can be applied to Native development.
When you combine with ES6/7, ReactJS is perfect for managing heavy loads with relative ease.

Advantages of Angular

Here, are pros/benefits of using Angular:

Offers clean code development
Higher Performance
Material Design-like Interface
An angular framework can take care of routing which means moving from one view to another is easy
Seamless Updates using Angular CLI

Disadvantages of React

Here, are cons/problems of using React:

Integrating Reacts in the traditional MVC framework like Rail requires complex configuration.
ReactJS would require the users to have in-depth knowledge with respect to the integration of user interface into M VC framework.

Disadvantages of Angular

Here, are cons/problems of using Angular:

An angular feature can be confusing for newcomers.
The documentation on the official Angular site is difficult to understand
Steep learning curve
Scopes are hard to debug Limited Routing.
There are so many versions of Angular
SEO capabilities are limited

Which is Better?

Both React and AngularJS are great options with respect to single page applications. However, both of them are also entirely different instruments. There might be statements like React is better than Angular or also vice versa.

Whatever may be your perception of the discussion about React Vs. AngularJS, you need to make choices based on your, requirement of functionality and usability.