Skip to content

Instantly share code, notes, and snippets.

@mmazzarolo
Created January 28, 2017 18:19
Show Gist options
  • Save mmazzarolo/1b538d10813f249626e4876b3ed91ca4 to your computer and use it in GitHub Desktop.
Save mmazzarolo/1b538d10813f249626e4876b3ed91ca4 to your computer and use it in GitHub Desktop.
Super simple circle animation overlay for React-Native
/* @flow */
import React, { Component } from 'react'
import { View } from 'react-native-animatable'
import metrics from 'src/config/metrics'
type Props = {
isVisible: boolean,
backgroundColor: string,
animationTiming?: boolean
}
export default class CircleAnimation extends Component<void, Props, void> {
_viewRef: any = null
componentDidUpdate (prevProps: Props) {
const previouslyVisible = prevProps.isVisible
const currentlyVisible = this.props.isVisible
if (!previouslyVisible && currentlyVisible) {
this._viewRef.animate('zoomIn', this.props.animationTiming)
} else if (previouslyVisible && !currentlyVisible) {
this._viewRef.animate('zoomOut', this.props.animationTiming)
}
}
render () {
const size = metrics.DEVICE_HEIGHT * 1.3
const style = {
position: 'absolute',
bottom: (metrics.DEVICE_HEIGHT / 2) - (size / 2),
left: (metrics.DEVICE_WIDTH / 2) - (size / 2),
height: size,
width: size,
backgroundColor: this.props.backgroundColor,
borderRadius: size / 2
}
return (
<View
ref={(ref) => { this._viewRef = ref }}
style={style}
pointerEvents={'box-none'}
/>
)
}
}
@mmazzarolo
Copy link
Author

gif2

@devLaaziz
Copy link

awesome 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment