Home

Awesome

Keyframes

react-native-facebook-keyframes

A React Native wrapper for the Facebook Keyframes library.

Getting started

npm install react-native-facebook-keyframes --save

react-native link react-native-facebook-keyframes

Steps for iOS only

You must install Facebook Keyframes dependency using CocoaPods:

  1. Install cocoapods in case you don't have already installed:

    sudo gem install cocoapods
    
  2. Go to [your project's name] ios folder (in this case MyProject):

    cd MyProject/ios  
    
  3. Create a new Podfile file with the following contents:

    target '{MyProject}' do
      pod 'Keyframes', :git => 'https://github.com/facebookincubator/Keyframes.git', :commit => '07ce61ee388360258777eb3342c87ba6128584d0'
    end
    
  4. Instal cocoapods dependencies and return to the project folder:

    pod install
    cd ../
    

Usage

  1. Create a new keyframes json file (you can find a sample here)

  2. Include the library in your js file:

    import KeyframesView from 'react-native-facebook-keyframes'
    
  3. Use the component:

    <KeyframesView 
      style={{ width: 100, height: 100 }}    // View styles
      seek={1.0}                             // Seek to a given progress in range [0, 1]  
      src={require('./keyframes-logo.json')} // Animation file
    />
    

Running the demo project included in this project

  1. Go to the demo/KeyframesDemo folder:

    cd demo/KeyframesDemo
    
  2. Install pod dependencies if running for iOS:

    cd ios
    pod install
    cd ../
    
  3. Run the project:

    npm install
    react-native run-ios
    

Demo


MIT Licensed