CODEWITHSUNDEEP
react-nativedropshadow
Isuru Sanjana
Isuru Sanjana

Reputation: 91

React native drop shadow

I need to drop shadow option to add to buttons in the Android app. In react, native default options (shadowColor, shadowOpacity, shadowRadius) only work with ios versions. Android only work with elevation option. Does anyone know how to do this? I used react-native-shadow but it older on not supported to latest react native versions it got errors from SVG component even we installed it manually.

Upvotes: 5

Views: 7892

Answers (3)

Owen Easter
Owen Easter

Reputation: 308

In react-native, you should avoid writing platform specific code.

When required to handle tasks like this - you should use an existing library or create your own.

react-native-drop-shadow is a good example of one of these cases. Or you could use a similar method to the one I have used in my app and just include the elevation and shadow styles in a single style object.

No External Library Required:

elevation: 5,              // Android
shadowColor: '#030002',    // Android, iOS & Web
shadowOpacity: 0.25,       // iOS & Web
shadowRadius: 5            // iOS & web

Upvotes: 0

Marcus
Marcus

Reputation: 19

You can use the React Native Platform module to set an OS-specific style. For example:

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

// your component //////

const styles = StyleSheet.create({        
  button: {

    // cross-platform css

    ...Platform.select({
      ios: {
        shadowColor: rgba(0,0,0),
        shadowOpacity: 0.5,
        shadowRadius: 5
      },
      android: {
        elevation: 5
      },
    }),
  }
})

Upvotes: 1

Brijesh Shiroya
Brijesh Shiroya

Reputation: 3383

Try to use below library:

https://github.com/Kishanjvaghela/react-native-cardview

It will fulfill your requirements

Upvotes: 0

Related Questions