diff --git a/README.md b/README.md index ab7c7a0..f9aa0b3 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ Customize the number of dots, animation speed, and style using these props: | **`animationDelay`** | The length in milliseconds of each phase of the animated. Defaults to **300**. | | **`minOpacity`** | The minimum opacity for the dots. Defaults to **0**. | | **`style`** | CSS to apply to the dots. It accepts any styles that a normal `` component can take. | +| **`useNativeDriver`** | Specify true or false. Defaults to **true**. | ## More Examples diff --git a/src/AnimatedEllipsis.js b/src/AnimatedEllipsis.js index 6ce7bbf..6d533ea 100644 --- a/src/AnimatedEllipsis.js +++ b/src/AnimatedEllipsis.js @@ -1,6 +1,6 @@ -import React, { Component } from 'react'; -import { Text, Animated, View, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import { Text, Animated, View, StyleSheet } from 'react-native'; +import PropTypes from 'prop-types'; export default class AnimatedEllipsis extends Component { @@ -9,6 +9,7 @@ export default class AnimatedEllipsis extends Component { animationDelay: PropTypes.number, minOpacity: PropTypes.number, style: Text.propTypes.style, + useNativeDriver: PropTypes.bool }; static defaultProps = { @@ -18,7 +19,8 @@ export default class AnimatedEllipsis extends Component { style: { color: '#aaa', fontSize: 32, - } + }, + useNativeDriver: true }; constructor(props) { @@ -66,10 +68,11 @@ export default class AnimatedEllipsis extends Component { Animated.timing(this._animation_state.dot_opacities[which_dot], { toValue: this._animation_state.target_opacity, duration: this.props.animationDelay, + useNativeDriver: this.props.useNativeDriver, }).start(this.animate_dots.bind(this, next_dot)); } - render () { + render() { let dots = this._animation_state.dot_opacities.map((o, i) => {' '}