Skip to content
A react-native wrapper for Facebook Keyframes
Objective-C Java JavaScript Python Ruby
Branch: master
Clone or download
Latest commit e96d243 Jan 29, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android Fix android package name Jan 29, 2017
demo/KeyframesDemo Fix seek property on iOS. Closes #5 Jan 11, 2017
ios
.editorconfig Initial commit Dec 7, 2016
.eslintrc
.gitignore Fix seek property on iOS. Closes #5 Jan 11, 2017
.npmignore
Gemfile Use pods instead of submodules Dec 9, 2016
LICENSE Initial commit Dec 7, 2016
Podfile.template Use pods instead of submodules Dec 9, 2016
README.md Update pod reference Jan 11, 2017
index.js Fix seek property on iOS. Closes #5 Jan 11, 2017
package.json Bump to 1.0.1 Jan 29, 2017

README.md

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

You can’t perform that action at this time.