matzielab/react-native-facebook-keyframes

A react-native wrapper for Facebook 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