https://github.com/luokuning/usedeviceorientationmotion
Card like rotation Value built on top of device orientation event for react-native
https://github.com/luokuning/usedeviceorientationmotion
deviceorientation motion rotation
Last synced: 2 months ago
JSON representation
Card like rotation Value built on top of device orientation event for react-native
- Host: GitHub
- URL: https://github.com/luokuning/usedeviceorientationmotion
- Owner: luokuning
- License: mit
- Created: 2021-08-27T08:36:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T09:23:18.000Z (over 2 years ago)
- Last Synced: 2025-03-27T02:08:12.677Z (3 months ago)
- Topics: deviceorientation, motion, rotation
- Language: TypeScript
- Homepage:
- Size: 3.2 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
useDeviceOrientationMotion
Card like rotation Value built on top of device orientation event for react-native
`usedeviceorientationmotion` track device orientation event
via [react-native-sensors](https://github.com/react-native-sensors/react-native-sensors), and calculate the right
rotation angle (`rotationX`, `rotationY`). It also leverages [three.js](https://github.com/mrdoob/three.js) to
avoid [gimbal lock](https://en.wikipedia.org/wiki/Gimbal_lock) problem.
### Install
Install `usedeviceorientationmotion` and it's peer dependencies.
```bash
npm i usedeviceorientationmotion react-native-sensors three
# or
yarn add usedeviceorientationmotion react-native-sensors three
```
### Usage
```jsx
import useDeviceOrientationValue from 'usedeviceorientationmotion'
import { View, Image, Text, StyleSheet } from 'react-native'
import React from 'react'
import Card from '../../assets/images/address/img.jpg'
const App = () => {
const { rotation } = useDeviceOrientationValue({
limit: 12,
sensitivityX: 90,
sensitivityY: 45,
})
return (
CREDIT CARD
)
}
const styles = StyleSheet.create({
container: {
width: 300,
height: 200,
marginLeft: 35,
marginTop: 100,
shadowColor: '#000',
shadowOffset: {
width: 5,
height: 10,
},
shadowOpacity: 0.3,
shadowRadius: 10,
},
cardImage: {
width: 300,
height: 200,
borderRadius: 12,
},
title: {
fontSize: 30,
fontWeight: '900',
color: 'white',
position: 'absolute',
top: 70,
left: 60,
},
})
export default App
```
### ⚠️ Caution
Remember to add `{ perspective: 800 }` style for the element you want to animate.
### Paramters
| Key | Type | Default Value | Description |
|--------------|--------|---------------|-------------------------------------------------|
| limit | number | 15 | The maximum degree |
| sensitivityX | number | 180 | The ratio that react to device motion in X axis |
| sensitivityY | number | 90 | The ratio that react to device motion in Y axis |
### Return
```jsx
const { rotation, subscribe, unsubscribe } = useDeviceOrientationValue()
```
| Value | Type | Desciption |
|-------------|--------------------------|--------------------------------------|
| rotation | { x: number; y: number } | Rotation angle |
| subscribe | () => void | Subscribe device orientation event |
| unsubscribe | () => void | Unsubscribe device orientation event |