How to set elevation shadow only on the bottom on React Native?

Sometimes, we want to set elevation shadow only on the bottom on React Native.

In this article, we’ll look at how to set elevation shadow only on the bottom on React Native.

How to set elevation shadow only on the bottom on React Native?

To set elevation shadow only on the bottom on React Native, we wrap out View with another View and set its overflow to 'hidden'.

For instance, we write:

import * as React from 'react';
import { View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <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>
  );
}

to set overflow to 'hidden' on the outer View.

And then we add the shadow styles in the inner view to add the shadow.

elevation is needed for Android to show the shadow.

Conclusion

To set elevation shadow only on the bottom on React Native, we wrap out View with another View and set its overflow to 'hidden'.