README
react-native-animated-elevated-view
This component is a based on ElevatedView.
Installation
With npm
npm install react-native-animated-elevated-view
Or with yarn
yarn add react-native-animated-elevated-view
Usage
Import
import AnimatedElevatedView from 'react-native-animated-elevated-view'
Component
<AnimatedElevatedView elevation={4}/>
Example
import React from 'react'
import { Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import AnimatedElevatedView from 'react-native-animated-elevated-view'
class Main extends React.Component {
constructor(props) {
super(props)
this.state = {
squareOpacity: new Animated.Value(1)
}
}
render() {
return (
<View style={style.mainContainer}>
<TouchableOpacity style={style.button} onPress={() => {
Animated.timing(this.state.squareOpacity, {
toValue: 0,
duration: 375
}).start()
}}>
<Text style={style.textButton}>Hide the square!</Text>
</TouchableOpacity>
<AnimatedElevatedView style={[style.square, {
opacity: this.state.squareOpacity
}]} elevation={4} />
</View>
)
}
}
const style = StyleSheet.create({
mainContainer: {
flex: 1
},
button: {
padding: 10,
borderRadius: 8,
alignSelf: 'center',
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
textButton: {
color: 'white'
},
square: {
backgroundColor: 'red',
width: 100,
height: 100
}
})