A react native component to capture pictures and record Video with Vine-like tap to record, animatable filters, slow motion, segments editing.
Based on this awesome library SCRecorder.

1. npm install react-native-screcorder@latest --save
2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
3. Go to node_modules ➜ react-native-recorder and add RNRecorder.xcodeproj
4. In XCode, in the project navigator, select your project. Add libRNRecorder.a to your project's Build Phases ➜ Link Binary With Libraries
5. Click RNRecorder.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
6. Run your project (Cmd+R)

Check index.ios.js in the Example folder.

Configure the recorder See below the full options available: The filters are applied on the saved video

{
  autoSetVideoOrientation: false,

  video: {
    enabled: true,
    bitrate: 2000000, // 2Mbit/s
    timescale: 1, // Higher than 1 makes a slow motion, between 0 and 1 makes a timelapse effect
    format: "MPEG4",
    quality: "HighestQuality", // HighestQuality || MediumQuality || LowQuality
    filters: [
      {
        "CIfilter": "CIColorControls",
        "animations": [{
          "name": "inputSaturation",
          "startValue": 100,
          "endValue": 0,
          "startTime": 0,
          "duration": 0.5
        }]
      },
      {"file": "b_filter"},
      {"CIfilter":"CIColorControls", "inputSaturation": 0},
      {"CIfilter":"CIExposureAdjust", "inputEV": 0.7}
    ]
  },
  audio: {
    enabled: true,
    bitrate: 128000, // 128kbit/s
    channelsCount: 1, // Mono output
    format: "MPEG4AAC",
    quality: "HighestQuality" // HighestQuality || MediumQuality || LowQuality
  }
};

Values: "front" or "back" Specify wihich camera to use

Will call the specified method when a new segment has been recorded

You can access component methods by adding a ref (ie. ref="recorder") prop to your <Recorder> element, then you can use this.refs.recorder.record(), etc. inside your component.

Capture a picture

Start the recording of a new segment

Stop the recording of the segment

Generate a video with the recorded segments, if filters have been specified in the configuration they will be applied

Remove the last segment

Remove all the segments

Remove segment at the specified index