Box Shadow on both OSs

Hello everyone! I know this is not exatly an Expo issue, but is there anyone who managed to create box shadow that works both in iOS and Android? I’ve found some articles about shadowOffset (and other properties), elevation, and even a library react-native-shadow, but yet I couldn’t make it work ok on both OSs.

Any help would be very appreciated!

5 Likes

Found a solution, we have to use react-native-shadow - GitHub - 879479119/react-native-shadow: A SVG shadow component powered with react-native-svg,which can provide shadow on Android like iOS ^_^ - which uses react-native-svg which expo has installed.

One major drawback is that you have to give it the height/width, it will not take the height/width automatically.

react-native-svg doesn’t have shadow out of the box, but these guys do some trick with gradients I think.

Here is a snack - android box shadow - Snack

It worked well for me on both OS using the config showed here box shadow - Snack

Thanks very much for your effort and help. You are using elevation there. That is incorrect. Elevation is not the customizable shadow we are looking for. You also used react-native-paper Card which as a shadow of its own.

Here is corrected code that shows no shadow on android:

import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.shadowBox}>
      <Text>rawr</Text>
        <AssetExample />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  shadowBox: {
    backgroundColor: 'white',
    shadowColor: "#000",
    shadowOpacity: 0.35,
    shadowRadius: 5,
    shadowOffset: {
      width: 0,
      height: 0,
    },
  }
});