DEV Community: Ajo Alex

Picture in Picture in React Native (Android)

Ajo Alex — Fri, 31 Jan 2025 12:56:45 +0000

Nowadays, React Native is becoming increasingly popular in the world of mobile development. Many enterprise-level applications are migrating to React Native due to the numerous changes introduced in a short period of time. We need to experiment with new methods and practices in the world of React Native development.

This blog discusses how to create a video player and implement PiP (picture in picture) functionality in React Native for Android.

Create a React Native Application

npx react-native init AwesomeProject

This command creates a bare React Native project in the AwesomeProject folder.

Install dependencies

For the video player we need a package called react-native-video

npm i react-native-video

To create the Picture-in-Picture (PiP) functionality, we are not using any npm packages. Instead, we are writing a native module in Java. However, before doing so, we need to create the video player.

Creating Video Player

In the app.tsx write some code for video player.

import {SafeAreaView} from 'react-native';
import React, {useEffect} from 'react';
import Video from 'react-native-video';
import {style} from './Home.style';

const Home = () => {
  return (
    <SafeAreaView>
      <Video
        source={{
          uri: 'https://player.vimeo.com/external/538571502.sd.mp4?s=931e8b30977433ba260a9e08678ac56e13b73aa0&profile_id=165&oauth2_token_id=57447761',
        }}
        style={style.videoBox}
        pictureInPicture={true}
        fullscreen
        posterResizeMode="cover"
        resizeMode="cover"
        repeat={true}
        playInBackground
        poster="https://images.pexels.com/photos/1546035/pexels-photo-1546035.jpeg?auto=compress&cs=tinysrgb&w=1600"
      />
    </SafeAreaView>
  );
};

export default Home;

Its all done about the video player, now the video player is working.

Native Module for PiP

If you have no idea how to write a native module in React Native, you can refer to the official documentation: https://reactnative.dev/docs/native-modules-android.
Now, we have to create a file named pipModule.java in android/app/src/main/java/com/rnchallenge/pipModule.java and add some code.

package com.package;

import android.app.PictureInPictureParams;
import android.os.Build;
import android.util.Rational;
import android.widget.Toast;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class PipModule extends ReactContextBaseJavaModule {
    private Rational aspectRatio;
    PipModule(ReactApplicationContext context){
        super(context);
        aspectRatio = new Rational(3,4);
    }

    @Override
    public String getName(){
        return "PipModule";
    }

    @ReactMethod
    public void EnterPipMode(){
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            PictureInPictureParams params = new PictureInPictureParams.Builder().setAspectRatio(this.aspectRatio).build();
            getCurrentActivity().enterPictureInPictureMode(params);
        }
    }
}

The aspectRatio refers to the measurement of the PiP window, which will be displayed in a 3:4 ratio.

The getName() function returns the module name.

The EnterPipMode() function builds a PiP window with the given aspect ratio when triggered.

Its all done from the module side now we have to include it in the mainapplication.java for that we have to create a new file named pipPackage.java in android/app/src/main/java/com/rnchallenge/pipModule.java.

package com.package; // replace your-app-name with your app’s name
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class PipPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new PipModule(reactContext));

        return modules;
    }

}

Then go to mainApplication.java and add this module in packages list

protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          packages.add(new ReactVideoPackage());
          packages.add(new PipPackage()); <---- add here
          return packages;
        }

Export this method to Javascript

Now that we have completed the native side, we need to write a condition to trigger the Picture-in-Picture (PiP) functionality. This means that if the app is running in the background, the PiP window should be displayed. If the app is in the foreground, the PiP should be removed.

To achieve this, we use AppState, which is provided by React Native. It returns the app's current state (either active or background).
To import the PiPModule from the NativeModule, follow this syntax:

const {PipModule} = NativeModules;

After all this, write a condition to trigger the PiPModule

useEffect(() => {
    const appstatus = AppState.addEventListener('change', e => {
      if (e === 'background') {
        PipModule.EnterPipMode();
      }
    });
    return () => {
      appstatus.remove();
    };
  }, []);

The final file looks like this

import {SafeAreaView, NativeModules, AppState} from 'react-native';
import React, {useEffect} from 'react';
import Video from 'react-native-video';
import {style} from './Home.style';

const Home = () => {
  const {PipModule} = NativeModules;
  useEffect(() => {
    const appstatus = AppState.addEventListener('change', e => {
      if (e === 'background') {
        PipModule.EnterPipMode();
      }
    });
    return () => {
      appstatus.remove();
    };
  }, []);

  return (
    <SafeAreaView>
      <Video
        source={{
          uri: 'https://player.vimeo.com/external/538571502.sd.mp4?s=931e8b30977433ba260a9e08678ac56e13b73aa0&profile_id=165&oauth2_token_id=57447761',
        }}
        style={style.videoBox}
        pictureInPicture={true}
        fullscreen
        posterResizeMode="cover"
        resizeMode="cover"
        repeat={true}
        playInBackground
        poster="https://images.pexels.com/photos/1546035/pexels-photo-1546035.jpeg?auto=compress&cs=tinysrgb&w=1600"
      />
    </SafeAreaView>
  );
};

export default Home;

Conclusion

Congratulations! You have successfully implemented PiP functionality in your app. There are many other features and customization options available. Refer to the following documentation for more information:
https://developer.android.com/develop/ui/views/picture-in-picture

Host Your Fastapi server on Heroku for Free...

Ajo Alex — Thu, 30 Dec 2021 10:17:17 +0000

Create a Fastapi project

for that install some pip packages

pip install fastapi

and you need a ASGI server for production
here we use uvicorn

pip install uvicron

and you need an another package named gunicorn

pip install gunicorn

write some code

Here we have to create a file for our python code. so create a file named main.py and write some code like this

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
def read_root():
    return {"Hello": "World"}


@app.get("/items/{item_id}")
def read_item(item_id: int, q: Optional[str] = None):
    return {"item_id": item_id, "q": q}

Run the code

uvicorn main:app --reload

this will run your app in localhost and the default port will be 8000. Here main is the filename and app is the fastapi object.

Next is adding some stuffs for hosting.

Create requirements.txt

for creating the file just run:

pip freeze > requirements.txt

it will create the file and contents like be this

anyio==3.4.0
asgiref==3.4.1
certifi==2021.10.8
charset-normalizer==2.0.9
click==8.0.3
fastapi==0.70.1
gunicorn==20.1.0
h11==0.12.0
idna==3.3
pydantic==1.8.2
requests==2.26.0
sniffio==1.2.0
starlette==0.16.0
typing-extensions==4.0.1
urllib3==1.26.7
uvicorn==0.16.0

Its the list of packages need to run your app.

Create Procfile

create a file named Procfile without any extensions and paste the below code

web: gunicorn -w 3 -k uvicorn.workers.UvicornWorker main:app

this contain the running script for execute your app
here main is the python file name and app is the fastapi object. so it can be changed..

Now the app is ready for deploy.

Create a Github Repo and push the code to it
and create a new heroku app linked with the respective github repo in heroku dashboard.

After bulid finished in heroku just go to your-app-url/docs for get your api documentation

RPA - A Brief Review

Ajo Alex — Tue, 05 Oct 2021 11:49:57 +0000

Nowadays, there are many myths about RPA. Some of them are:-

RPA will destroy jobs
RPA == Machines
RPA costs too much
RPA is only good for cost deduction
RPA is just for simple tasks

So, what exactly is RPA? What is its use?

In simple words, RPA (Robotic Process Automation) is the process of automating repetitive tasks in an organisation using AI-powered software robots.

Nowadays, in a large organisation, the large amount of data and tasks will be handled and managed by humans. It takes much more time to complete the tasks such as updating users data, queries evaluation, and maintaining databases.

When an organisation adopts RPA, all the tasks are managed through RPA bots/software robots, and the time and expense will be reduced on a large scale. Some people believe that RPA is like establishing humanoid robots in offices.

As I mentioned above, RPA bots are not physical robots; they’re just software robots. In another way, we can say that software with thinking capabilities.

It is a fact that there are some unemployment issues in the aftermath of the RPA establishment. But by the way, there is a positive side too.. RPA does not replace all the jobs. It covers only 20% of the work inside an organisation, which is repetitive and time-consuming.

And the RPA robots work only under the control of the respective person or developer. The job issues only met the low scale employees of an organisation such as clerical posts, data entries etc., and the high scale jobs remain in the position. After two years, our industry sector needs a lot of RPA developers for their companies. Upskilling to RPA technologies is an excellent opportunity in the future.

Tasks performed by RPA

Checking mails and attachments
Logging into web or enterprise application
Reading and writing to the database
Copying and pasting
Filling forms
Moving files and folders
Following "if/then" decision/rules
Collecting social media statistics
Extracting structured data from documents
Making calculations
Connecting to system APIs
Scraping data from the web

Some RPA service providers

UI Path
Blue Prism
Automation Anywhere
Contus
Accenture
Capgemini
Mphasis
Hexaware
Atos
Mindfield Global

How to Establish RPA in an Organization

Some people believe that implementing RPA in their organisation is a nightmare. Firstly, remember that all jobs in an organisation cannot be managed with RPA. It can only help you manage repetitive and routine appointments.
For example, let’s take checking emails as a repetitive task. So, we can automate the email checking.

The primary process of establishing RPA is to build a better team. First, we have to list out all the tasks that can be easily automated by using RPA. All the rest is the duty of the team. They will analyse the task and build RPA bots for the task. Then it has to be tested and installed.
Establishing RPA for an organisation is as easy as hiring a person to do the task, and cost-effective.

4 Crucial phases of RPA

Planning phase

In this phase, the team finds out the problem and designs the RPA bot. All the Bot overview and planning completed in this phase. Business team and RPA Architect work together to understand a business process for RPA development. They use a developmental methodology and develop a strategy to automate tasks in order to eradicate manual work as much as they can. After finishing the paperworks they handover the project to the development team.

Development Phase

In this phase, the team develops the bot as per the requirements. RPA developer/team starts his/their work on the requirement in their environment, possibly a distinct development environment. They create a Process Definition Document (PDD) which explains each step in every process. Depending on the kind of automation required, the development process might or might not be coding involved. Usually, there is no coding, But there can be exceptions.

Deployment & Testing Phase

This is the most complicated phase in RPA. Here the bot was implemented in the organisation infrastructure and tested on various scales. In this phase the team performs a dedicated QA (Quality assurance) like normal SDLC (Software development life cycle) flow.
Some companies conduct testing by separate testing teams other than the development team. Once testing is completed, the bot is deployed in production and runs as configured in the RPA tool’s orchestrator.

Support and Management Phase

This is not a single process, it's a through out process in RPA. It includes all the maintenance and update of the RPA bot. The bot is continuously monitored to assess performance and ensure it runs without any errors. Because bots have so many dependencies and interact with different systems, they are impacted by any change to those systems. So maintenance is a major phase of RPA.

Props

Time-saving
Cost-saving
Accuracy
Reliability
Cross-industry
Scalability
Audit trail
Productivity
Consistency

Cons

Lack of RPA aligned team structure
Improper selection of processes for automation
Shortage of skilled resources
Challenges in automating the process - End to End
Potential job losses
Not suitable for dynamically changing tasks
100% process automation impractical
Employee resistance

Conclusion

Some people still believe that RPA will cause massive unemployment in the future. Others say that it's just a booming industry that will get destroyed within a few years.
The fact is, “RPA is an emerging technology that is used on a set of problems to minimise errors and improve efficiency. And also, we have to realise that RPA is not a problem. It’s a method to solve a problem.
So, my opinion about this is, we have to be open to new technologies instead of fearing them and upskill our skills for the future.

Create react app without CRA (using vite)

Ajo Alex — Mon, 09 Aug 2021 07:15:58 +0000

What is vite JS

Vite (French word for "fast") is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Why we use Vite

Today most people use CRA

npx create-react-app

for starting a react project. Its very time consuming because it install many unused packages to the project.

Here, we use Vite for creating a react project. its less time consuming, because it only install necessary packages for the project.

When comparing to CRA, vite only take less time to start the server and updation.

So, here we start...

Install react app using vite

npm init @vitejs/app my-react-app

Choose the variant Here vite asked for the app and varient. These are the technologies installed using vite js
- vanilla
- vanilla-ts
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
- svelte
- svelte-ts Then Choose a variable and hit enter. It create a folder named my-react-app and create the template files.

change the directory

  cd my-react-ap

Intsall dependencies

  npm install

  or

  npm i

Run development server

  npm run dev

Now we completed the installation.
Now you can open a editor and start the work.