https://github.com/tlackemann/react-native-cube-transition
React Native module for iOS that rotates components on a cube, similar to Instagram Stories.
https://github.com/tlackemann/react-native-cube-transition
Last synced: 7 months ago
JSON representation
React Native module for iOS that rotates components on a cube, similar to Instagram Stories.
- Host: GitHub
- URL: https://github.com/tlackemann/react-native-cube-transition
- Owner: tlackemann
- License: mit
- Created: 2016-12-23T23:55:24.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-24T20:37:11.000Z (about 9 years ago)
- Last Synced: 2025-01-07T04:13:56.075Z (about 1 year ago)
- Language: Objective-C
- Homepage: https://lacke.mn/blog/react-native-experiments-instagram-stories/
- Size: 11.7 KB
- Stars: 60
- Watchers: 2
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-React-Native-Education - React Native Cube Transition
README
# React Native Cube Transition
React Native module for iOS that rotates components on a cube, similar to Instagram Stories.
## Installation
Install the module from npm.
```bash
npm install react-native-cube-transition --save
```
### iOS
Link the framework in XCode.
* Right click _Libraries_
* Add Files to _[Your Project's Name]_
* Go to `node_modules/react-native-cube-transition`
* Add the `.xcodeproj` file
* Add the `libRNCubeTransition.a` file under `Libraries > RNCubeTransition.xcodeproj > Products` to your project's `Build Phases > Link Binary With Libraries`
### Android
Not supported, yet.
## Usage
```javascript
import React, { Component } from 'react';
import { Image, Dimensions, Text, StyleSheet, View } from 'react-native';
import { RNCubeTransition } from 'react-native-cube-transition';
export default class MyComponent extends Component {
render() {
return (
3D Cube Transitions Using React Native
Use View or Image components
Even Gifs
);
}
}
const { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
flex: 1,
},
page: {
position: 'absolute',
flexDirection: 'row',
overflow: 'hidden',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
image: {
resizeMode: 'stretch',
width,
height,
},
view: {
justifyContent: 'center',
alignItems: 'center',
width,
height,
},
text: {
color: '#FFF',
textAlign: 'center',
fontSize: 30,
},
});
```
## License
MIT