useDeviceOrientationMotion

Card like rotation Value built on top of device orientation event for react-native

usedeviceorientationmotion track device orientation event via react-native-sensors, and calculate the right rotation angle (rotationX, rotationY). It also leverages three.js to avoid gimbal lock problem.

Install

Install usedeviceorientationmotion and it's peer dependencies.

npm i usedeviceorientationmotion react-native-sensors three
# or
yarn add usedeviceorientationmotion react-native-sensors three

Usage

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 (
    <View
      style={[
        styles.container,
        {
          transform: [
            { perspective: 800 },
            { rotateX: `${rotation.x}deg` },
            { rotateY: `${rotation.y}deg` },
          ],
        },
      ]}>
      <Image source={Card} style={styles.cardImage} />
      <Text
        style={[
          styles.title,
          {
            transform: [
              { translateX: rotation.x * 0.3 },
              { translateY: rotation.y * 0.3 },
            ]
          },
        ]}>
        CREDIT CARD
      </Text>
    </View>
  )
}

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

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