npm package: @hippovideo/react-native-hippo-video
Description: A react native component that lets you add hippo video recorder to your app.
Author: Hippovideo
Latest version: 1.0.4

# Hippo Video SDK Documentation

# react-native-hippo-video

A react native component that lets you integrate Hippo Video SDK into your app

Note: Package currently supports **React Native 0.68 and below** 

**Documentation**

# **Installation**

```
$ npm install @hippovideo/react-native-hippo-video --save
```

There are more additional steps needed to fulfil the dependencies of the react-native-hippo-video sdk.

```
$ npm install react-native-camera react-native-video react-native-background-upload react-native-device-info react-native-document-picker ffmpeg-kit-react-native react-native-fs @react-native-async-storage/async-storage react-native-svg react-native-webview react-native-keep-awake react-native-video-editor react-native-linear-gradient
```

## ****iOS installation****

**React Native 0.60 and above**
Run `npx pod-install`. Linking is not required in React Native 0.60 and above.

**React Native 0.59 and below**
Run `react-native link LIBRARY_NAME` to link the library.(For more information Follow the instructions of the respective libraries)

## ****iOS - other required steps****

**Add Permissions to info.plist**

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

<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
```

You might need to adjust your Podfile following the example below:

```ruby
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '13.0'

target 'testapp' do
  ### Add this line for ffmpeg ###
  pod 'ffmpeg-kit-react-native', :subspecs => ['full-lts'], :podspec => '../node_modules/ffmpeg-kit-react-native/ffmpeg-kit-react-native.podspec'
  ### Add this line for ffmpeg ###

  ### Add this line for linear gradient ###
  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
  ### Add this line for linear gradient ###

  ### Add this line for camera ###
  pod 'react-native-camera', path: '../node_modules/react-native-camera'
  ### Add this line for camera ###

  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  target 'testappTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end
```

## Android ****installation****

**React Native 0.60 and above**
Run `npx pod-install`. Linking is not required in React Native 0.60 and above.

**React Native 0.59 and below**
Run `react-native link LIBRARY_NAME` to link the library or make manual linking (For more information Follow the instructions of the respective libraries)

# **Android - other required steps**

Add permissions to your app `android/app/src/main/AndroidManifest.xml` file:

```xml
<!-- 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" />

<!-- Include this only if you are planning to use the microphone for video recording -->
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
```

### Insert the following lines in `android/app/build.gradle`:

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

```

Make sure you have jitpack added in `android/build.gradle`

```java
allprojects {
    repositories {
        maven { url "https://www.jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

```

# Usage

```jsx
import HippoVideoRecorder from '@hippovideo/react-native-hippo-video';

...

return (
    <View>
      <HippoVideoRecorder 
        api-key={"API_KEY"} 
        email={"USER_EMAIL"} 
        //this will open the player
        showPlayer={true}/>
    </View>
  );
};
```

# Props

- email (required)
- api-key (required)
- showPlayer  (required)

- recordInitiated
- recordStarted
- recordPaused
- recordResumed
- recordStopped
- recordAborted
- recordError
- videoCancelled
- videoSubmitted
- uploadedVideoDetails