BoxShadow in react-native

Question

I am trying to create a box-shadow around a view in react-native version 0.59.9

I have tried 'shadowOffSet' and all shadow properties but no use

import React, { Component } from 'react';
import { Text, View, StyleSheet, PixelRatio } from 'react-native';

const styles = {
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
}

export default class Card extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{
            borderWidth: 1,
            borderRadius: 20,
            borderColor: '#ddd',
            borderBottomWidth: 0,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.8,
            shadowRadius: 20,
            borderWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)),
            elevation: 1,
            justifyContent: 'center',
            alignItems: 'center',
            overflow: this.props.overflow ? this.props.overflow : 'hidden',
            width: 120,
            height: 150}}>
              <Text>Mine</Text>
        </View>
      </View>
    );
  }
}

The result is attached as screenshot

https://user-images.githubusercontent.com/14028306/60788321-0a283500-a17a-11e9-841d-5604982783ac.jpg

Answer 1

You can use the react native box shadow generator for the best practice.

https://ethercreative.github.io/react-native-shadow-generator/