react-native-physics v0.0.5
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.