React Native - Framed Video Generator

TO DO

• Add anchor links on README
• VideoPlayer on example project
• Add method to create video using background image from path (If the user saved it before on the iOS side)
• Loop on VideoPlayer example to simulate GIF animation
• Add configurable on native side to set the video duration
• Add async fetching of images (iOS)
• Android side
• Unit Testing iOS
• Unit Testing Android

Getting started

$ npm install react-native-framed-video-generator --save

Mostly automatic installation

$ react-native link react-native-framed-video-generator

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-framed-video-generator and add RNReactNativeFramedVideoGenerator.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNReactNativeFramedVideoGenerator.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNReactNativeFramedVideoGeneratorPackage; to the imports at the top of the file
• Add new RNReactNativeFramedVideoGeneratorPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

   include ':react-native-framed-video-generator'
   project(':react-native-framed-video-generator').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-framed-video-generator/android')
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-framed-video-generator')
   

Usage

FramedVideoGenerator works with a base image (The background image for our generated video) and an array of images, which will form the overlay animation. To manage this we will use URLs.

import { FramedVideoGenerator } from "react-native-framed-video-generator";
const json = require("./data.json");
 
FramedVideoGenerator.create(
  json["baseImage"],
  json["framesArray"],
  callback => {
    this.setState({
      videoUrl: callback
    });
  }
);

We get the data from a JSON:

{
  "baseImage": "https://image.ibb.co/eakAUd/moon.jpg",
  "framesArray": [
    "https://image.ibb.co/mDgZpd/t01.gif",
    "https://image.ibb.co/fHzyFJ/t02.gif",
    "https://image.ibb.co/d0PXaJ/t03.gif",
    "https://image.ibb.co/c7A5vJ/t04.gif",
    "https://image.ibb.co/ewysaJ/t05.gif",
    "https://image.ibb.co/dnHUNy/t06.gif",
    "https://image.ibb.co/cHGZpd/t07.gif",
    "https://image.ibb.co/b9bCaJ/t08.gif",
    "https://image.ibb.co/dTGpNy/t09.gif",
    "https://image.ibb.co/dqSJFJ/t10.gif",
    "https://image.ibb.co/ggzn9d/t11.gif",
    "https://image.ibb.co/jYEyFJ/t12.gif",
    "https://image.ibb.co/d0U9Ny/t13.gif",
    "https://image.ibb.co/i2B0Ud/t14.gif",
    "https://image.ibb.co/fymCaJ/t15.gif",
    "https://image.ibb.co/kGkupd/t16.gif",
    "https://image.ibb.co/mC4XaJ/t17.gif",
    "https://image.ibb.co/nb0ihy/t18.gif",
    "https://image.ibb.co/cqMpNy/t19.gif",
    "https://image.ibb.co/joYQvJ/t20.gif",
    "https://image.ibb.co/dQFG2y/t21.gif",
    "https://image.ibb.co/d3tfUd/t22.gif",
    "https://image.ibb.co/k0dm2y/t23.gif",
    "https://image.ibb.co/iFgTFJ/t24.gif",
    "https://image.ibb.co/i8W62y/t25.gif",
    "https://image.ibb.co/kDW62y/t26.gif",
    "https://image.ibb.co/mPj4pd/t27.gif",
    "https://image.ibb.co/fVehaJ/t28.gif",
    "https://image.ibb.co/kGvc9d/t29.gif",
    "https://image.ibb.co/ihNeNy/t30.gif",
    "https://image.ibb.co/fXyavJ/t31.gif",
    "https://image.ibb.co/hTTKNy/t32.gif",
    "https://image.ibb.co/kfQzNy/t33.gif",
    "https://image.ibb.co/eJt8FJ/t34.gif",
    "https://image.ibb.co/hWYVUd/t35.gif"
  ]
}