react-native-gyroscope-animation

Gyroscope animation effect for React Native

Gyroscope animation effect for React Native (iOS and Android)

This module is designed for easy implementation of interactive animation that responds to changing the position of the device in real time

Installing (React Native >= 0.60.0)

Install react-native-gyroscope-animation (latest):

yarn add react-native-gyroscope-animation react-native-sensors

or

npm i --save react-native-gyroscope-animation react-native-sensors

Usage

GyroscopeAnimation can be used in a declarative way:

import React from 'react';
import GyroscopeAnimation from 'react-native-gyroscope-animation';
import Logo from './assets/images/logo.png';

export default class BasicExample extends React.Component {
  render() {
    return <GyroscopeAnimation><Image source={Logo} style={{width:200, height:200}} /></GyroscopeAnimation>;
  }
}

Changing animation parameters

import React from 'react';
import GyroscopeAnimation from 'react-native-gyroscope-animation';
import Logo from './assets/images/logo.png';

export default class BasicExample extends React.Component {
  render() {
    return <GyroscopeAnimation angle={45} distance={50} perspective={250} ><Image source={Logo} style={{width:200, height:200}} /></GyroscopeAnimation>;
  }
}

API

Prop	Description	Default
style	Style attributes for the view, as expected in a standard View.	None
angle	The maximum angle of deviation of the object when animating the rotation.	35
distance	The Maximum movement of the object when animating the translate.	40
perspective	The magnitude of the perspective when animating the object.	250