¿Cómo puedo configurar la sombra de elevación solo en la parte inferior en reaccionar nativo?

Estoy tratando de agregar una sombra en la parte inferior de una vista, pero no sé cómo hacerlo en Android. Con elevation puso una sombra también en la parte superior. ¿Hay alguna manera de hacerlo como en iOS?

Aquí está mi código:

export function makeElevation(elevation) {
const iosShadowElevation = {
    shadowOpacity: 0.0015 * elevation + 0.18,
    shadowRadius: 0.5 * elevation,
    shadowOffset: {
        height: 0.6 * elevation,
    },
};
const androidShadowElevation = {
    elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;

}

izquierda: iOS (esperado)

derecha: androide

EDITAR: La única solución “falsa” que encontré es usar react-native-linear-gradient en su lugar, para crear una sombra personalizada.

Puedes usar overflow: 'hidden' para lograr el resultado deseado sin tener que instalar una biblioteca.
envuelva la vista en una vista principal y establezca el desbordamiento de los padres en oculto y aplique un relleno solo en el lado donde desea que aparezca su sombra así:

  <View style={{ overflow: 'hidden', paddingBottom: 5 }}>
    <View
      style={{
        backgroundColor: '#fff',
        width: 300,
        height: 60,
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity:  0.4,
        shadowRadius: 3,
        elevation: 5,
      }} 
    />
  </View>

resultado:

Aquí hay un componente personalizado que puede usar:

import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowBox = ({ children, style }) => (
  <View style={[ styles.container, style ]}>
    { children }
  </View>
);

const styles = StyleSheet.create({
  container:{
    overflow: 'hidden',
    paddingBottom: 5,
  }
});

SingleSidedShadowBox.propTypes = {
  children: PropTypes.element,
  style: ViewPropTypes.style,
};

export default SingleSidedShadowBox;

ejemplo:

<SingleSidedShadowBox style={{width: '90%', height: 40}}>
  <View style={{
    backgroundColor: '#fff',
    width: '100%',
    height: '100%',
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 5,
  }} />
</SingleSidedShadowBox>

puedes ajustar el relleno dependiendo de tu sombra

Desafortunadamente, RN no lo admite de manera predeterminada, verifique el enlace de soplado
https://ethercreative.github.io/react-native-shadow-generator/

pero puedes usar paquetes npm como este

Las respuestas anteriores son bastante útiles, pero la solución que funcionó mejor para mí es envolver ambos, 1-El componente dejando caer la sombra y 2-El componente sobre el que se proyecta la sombra en un componente con la regla de estilo overflow: "hidden"

Ejemplo:

function SomeScreen (){
  return (
    <View style={{overflow: "hidden"}}/*Top shadow is hidden*/>
      <NavBar style={styles.shadow}/*The component dropping a shadow*/ /> 
      <ProductList /*The component under the shadow*/ />
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "black",
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 6,
    shadowOpacity: 0.2,
    elevation: 3,
  }
});

Simplemente agregue/ponga esto en el contenedor de la vista principal:

const styles = StyleSheet.create({
      container: {
        ...Platform.select({
          ios: {
            shadowColor: '#000',
            shadowOffset: {width: 1, height: 3},
            shadowOpacity: 0.4,
          },
          android: {
            elevation: 4,
          },
        }),
      },
    });