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
    }
})