Border Shadow React Native

Question

I am currently working on a react native app and want border shadows on my borders Any suggestions how to implement it? I have tried shadow props of the View component but it doesn't seem to work.

And also I want some gradient background color.Any suggestions?

Thanks!

Answer 1

You have to give elevation prop to View

<View elevation={5} style={styles.container}>
 <Text>Hello World !</Text>
</View>

styles can be added like this:

const styles = StyleSheet.create({

 container:{
    padding:20,
    backgroundColor:'#d9d9d9',
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 1
    }
   },
 })

Answer 2

you could simply use elevation like below: <View elevation={5}> </View>