Slide 31
Slide 31 text
Animated API LayoutAnimation API
class SpinningImage extends React.Component {
spinValue = new Animated.Value(0)
componentDidMount() { this.spin() }
spin = () => {
this.spinValue.setValue(0)
Animated.timing(this.spinValue, {
toValue: 1,
duration: 2000,
easing: Easing.linear,
useNativeDriver: true,
}).start(this.spin)
}
render() {
const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
const transform = [{rotate: spin}]
const style = [styles.image, {transform}]
return (
)
}
}
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
class BoxWithSizeChanges extends React.Component {
state = {size: 200}
increaseSize = () => {
LayoutAnimation.spring()
// OR LayoutAnimation.configureNext(CUSTOM_CONFIG)
this.setState(state => ({size: state.size + 50}))
}
render() {
const {size} = this.state
const sizes = {height: size, width: size}
const style = [styles.box, sizes]
return (
)
}
}