Skip to content

fengzie/react-native-parabolic

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

react-native-parabolic

A react native component simulation of parabolic motion.

Install

$ npm i react-native-parabolic --save

Show case

add

Add it to your project

import Parabolic from 'react-native-parabolic'
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  AlertIOS,
  Text,
  View
} from 'react-native';

export default class par extends Component {
  constructor(props){
    super(props)
  }
  componentDidMount(){
    setTimeout(()=>{
      this.refs["parabolic"].run([20,20,200,300]) // startX startY endX endY
    }, 200)
  }
  animateEnd(){
    AlertIOS.alert("title", "animate end")
  }
  render() {
    return (
      <View style={styles.container}>
        <Parabolic
          ref={"parabolic"}
          style={{position: "absolute", left: 30, top: 30}}
          renderChildren={() => {
            return (
              <View style={{backgroundColor:"#f00", width: 16, height: 16, borderRadius: 8}}></View>
            )
          }}
          animateEnd={this.animateEnd.bind(this)}
          curvature={.008}
          duration={250}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Properties

Prop Default Type Description
renderChildren function func render children layout
animateEnd function func animate end callback function
curvature 0.003 number Parabolic curvature
duration 350 number animate duration time
style null object animate element style

About

A react native component simulation of parabolic motion.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%