React Native Accelerometer Parallax 🍻

Simple Accelerometer animation react-native library for animate translateXY some View RN for IOS and Android 🍎 🤖

That now Library is supporting and work ⚙️

Library stand by expo-sensors and react-native-reanimated. TS only.

video example source link 🪐

repository code example from video*

Install

1. Install last version react-native-reanimated (v2.0.0 or more)

2. Install last version expo-sensors

3. Install library

yarn add react-native-accelerometer-parallax

Usage

1. Wrap your root App.tsx to ParallaxProvider to provide context value for hooks.

1import React from 'react'
2import {ParallaxProvider} from 'react-native-accelerometer-parallax'
3
4const App = () => {
5    return <ParallaxProvider>
6        <SomeStack/> 
7    </ParallaxProvider>
8}
9
10export default App
11

2. Get context value to use animated value (hook shared value from react-native-reanimated)

1import {useParallax} from 'react-native-accelerometer-parallax'
2
3
4const Screen = () => {
5    const {animStyle} = useParallax()
6
7    return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
8        <Text>Parallax text test</Text>
9    </View>
10}
11

3. Wrap your some component to Animated.View from react-native-reanimated and pass animated style to style prop

1import React from 'react'
2import {useParallax} from 'react-native-accelerometer-parallax'
3import Animated from 'react-native-reanimated'
4import {View, Text} from 'react-native'
5import {ParallaxProvider} from 'react-native-accelerometer-parallax'
6
7const Screen = () => {
8   const {animStyle} = useParallax()
9   return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
10      <Animated.View style={animStyle}>
11         <Text>Parallax text test</Text>
12      </Animated.View>
13   </View>
14}
15
16const App = () => {
17   return <ParallaxProvider>
18      <Screen/>
19   </ParallaxProvider>
20}
21
22export default App
23

4. Final - ✨📲 Look at work view motion!

Documentation.

1. useParallax(config: ParallaxConfig): ParallaxObject

ParallaxConfig

• sensitivity: number - (default 1, sensitivity accelerometer rotate and multiple to animate shared value )

ParallaxObject

• animStyle: {transform:[{translateX: number},{translateY: number}]} (for pass to Animated.View style prop)

• posX: Animated.SharedValue (for use it or interpolate, for example style={{opacity: posY.value}})

• posY: Animated.SharedValue (equal posX)

#Contact

✨Lib going to grow up, and you can send your questions and offers to my telegram Stepan_Turchenko 🛬