An attempt of a physics library for React Native
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
android
ios
src
.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
LICENSE.md
README.md
app.json
index.android.js
index.ios.js
index.js
package.json
yarn.lock

README.md

react-native-physics

A physics library for React Native (in progress)

youtube video that shows all the examples

Installation

npm install --save react-native-physics

Importation

import { Container, Box } from 'react-native-physics';

Usagation

Container lays out just like a View. Container holds the state of each box. Put Boxes inside the Container.

Examplelation

render() {
    return (
      <Container
        style={{ flex: 1, backgroundColor: '#fff' }}
        delay={500}
        >
        <Box
          position={{ x: 20, y: 150 }}
          velocity={{ x: 5, y: -7 }}
          bounce={{ x: 1, y: 1 }}
          collideWithContainer={true}
          id="a"
          >
          <Text style={{ fontSize: 35 }}>Hello World</Text>
        </Box>
      </Container>
    );
  }

To run the example in this repository, git clone, npm install, and react-native run-ios (or run-android).

Props

Container

Property type default required
height number null false
width number null false
fps number 60 false
delay number 0 false
collide array of objects null false
overlap array of objects null false

Note: collide and overlap array objects must follow this protocol

{
  boxes: [/* strings of box IDs */],
  callback: () => {} // box1, box2 are passed as arguments
}

Box

Property type default required
position object { x: 0, y: 0 } false
gravity object { x: 0, y: 0 } false
velocity object { x: 0, y: 0 } false
acceleration object { x: 0, y: 0 } false
drag object { x: 0, y: 0 } false
height number null false
width number null false
outline boolean or string null false
collideWithContainer boolean false false
id string or number null true

Note: If outline is set to true, the outline will be red. If set to a string, it must be a valid color (i.e. 'blue', '#abc', '#88dd66', 'rgb(...)', 'rgba(...)')

Contributing

Please do so. School and other projects have shifted my focus away from this one. Note: The developer experience was intended to be similar to Phaser and the logic of physics is loosely based on this article.