How to achieve drop-shadow with no blur in React Native

Question

I'm new using React Native and I'm trying to map the following component (made in web) but for React Native with no success:

Elevation and shadow properties does not do the trick because they add some blur to the resulting shadow. Which would be the proper way to handle this?

Regards

Answer 1

Edit: For dynamic height, two lines or more of text, as asked for in the comments, I had to use another workaround.

https://snack.expo.io/7bVXvbmE0

const Label = () => {
  return <View style={{width: 100, height: 50}}>
           <View style={styles.topView}>
             <Text>Hello world</Text>
             <Text>Hi world</Text>
           </View>
           <View style={styles.shadowView} >
              <Text style={{color: 'transparent'}}>Hello world</Text>
             <Text style={{color: 'transparent'}}>Hi world</Text>
           </View>
        </View>;
}

Whatever dynamic text you have on the label, duplicate for the shadow label, but make it transparent. That way you are guaranteed that the shadow follows the top view.

Also, get rid of the hardcoded heights in the styles. For both top view and shadow view, their heights are informed by the text input, and the wrapper container's height is informed by the two views.

Lastly, change shadow view style's top to be just a few points above 0 to make sure you it peeks from under topview. You can adjust borderRadius of the shadow view to fit your preferences.

const styles = StyleSheet.create({
  topView: {
    width: '100%',
    position: 'absolute',
    top: 0, backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 25,
    },
  shadowView: {
    position: 'absolute',
    top: 3,
    width: '100%',
    zIndex: -10,
    borderRadius: 17,
    backgroundColor: '#ddd'}
});

Previous Post

A little bit hacky, but you can do this if you absolutely don't want any blur.

https://snack.expo.io/pWyPplcm3

const Label = () => {
  return <View style={{width: 100, height: 30}}>
           <View style={styles.topView}>
             <Text>Hello world</Text>
           </View>
           <View style={styles.shadowView} />
        </View>;
}

styles:

const styles = StyleSheet.create({
  topView: {
    height: 25,
    width: '100%',
    position: 'absolute',
    top: 0, backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 15,
    },
  shadowView: {
    position: 'absolute',
    top: 0,
    height: 28,
    width: '100%',
    zIndex: -10,
    borderRadius: 13,
    backgroundColor: '#ddd'}
});

Answer 2

Use react-native-cardview

import React, { Component } from 'react';
import {
  View,
  ScrollView,
  TextInput,
} from 'react-native';
import CardView from 'react-native-cardview';
import styles from './styles';

export default class Signup extends Component {

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: colors.whiteColor }}>
        <ScrollView contentContainerStyle={styles.signupContainer}>
            <View style={styles.signupInputs}>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Nom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
              <CardView
                style={styles.cardStyle}
                cardElevation={2}
                cardMaxElevation={2}
                cornerRadius={5}
              >
                <TextInput
                  underlineColorAndroid="transparent"
                  style={[styles.signupInput, styles.commonsignupStyle]}
                  placeholder="Prénom *"
                  placeholderTextColor={colors.primaryColor}
                />
              </CardView>
            </View>
        </ScrollView>
      </View>
    );
  }
}