Skip to content

Instantly share code, notes, and snippets.

@EduVencovsky
Created November 13, 2019 01:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EduVencovsky/1b5b08495613e59b8dd2d2f898ea4623 to your computer and use it in GitHub Desktop.
Save EduVencovsky/1b5b08495613e59b8dd2d2f898ea4623 to your computer and use it in GitHub Desktop.
Component for creating a rotating View in React Native
import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types'
import { Animated, Easing } from 'react-native'
const RotateView = ({ rotate, degree, initialDegree, duration, children, ...otherProps }) => {
const [rotateValue] = useState(new Animated.Value(0))
useEffect(() => {
const toValue = rotate ? 1 : 0
Animated.timing(
rotateValue,
{
toValue,
duration,
easing: Easing.linear,
useNativeDriver: true
}
).start()
}, [rotate, duration, rotateValue])
const spin = rotateValue.interpolate({
inputRange: [0, 1],
outputRange: [initialDegree, degree]
})
return (
<Animated.View
style={{
transform: [{ rotate: spin }],
justifyContent: 'center'
}}
{...otherProps}
>
{children}
</Animated.View>
)
}
RotateView.defaultProps = {
rotate: false,
degree: '90deg',
duration: 100,
initialDegree: '0deg',
}
RotateView.propTypes = {
rotate: PropTypes.any,
degree: PropTypes.string,
duration: PropTypes.number,
initialDegree: PropTypes.string,
children: PropTypes.node,
}
export default RotateView
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment