React Native Shadow - Javascript

If you're building a React Native app and you want to add shadows to your UI components, you can easily achieve this using the elevation property. However, not all platforms support this property so you'll need to use a combination of StyleSheet and Platform API to apply shadows across all supported platforms.

Here's an example:

import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    borderRadius: 10,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 3,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

export default function ShadowView() {
  return (
    <View style={styles.container}>
      {/* Your content here */}
    </View>
  );
}

In the above code, we're creating a ShadowView component that has a white background and 10px border radius. We're using Platform.select to apply different styles for iOS and Android devices. On iOS, we're setting the shadowColor to black, shadowOffset to { width: 0, height: 2 }, shadowOpacity to 0.5, and shadowRadius to 3. On Android, we're simply setting the elevation to 5.

Conclusion

Adding shadows to your React Native app is easy, but requires some platform-specific styles to be applied. By using the Platform API and the elevation and shadow properties, you can achieve consistent shadows across all supported platforms.