CODEWITHSUNDEEP
reactjsreact-native
Ayushman Kishore Dash
Ayushman Kishore Dash

Reputation: 81

Border Shadow React Native

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!

Upvotes: 8

Views: 60812

Answers (6)

Bestine
Bestine

Reputation: 94

1.For gradient colors use expo-linear-gradient
2.To add shadow use the elevation option in View.

<View elevation={5}>
{component}
</VIew>

Upvotes: 0

ianarko
ianarko

Reputation: 462

I recommend using this tool. It shows you what the shadows will look like and gives you code you can just copy.

Upvotes: 3

Vishal Ghai
Vishal Ghai

Reputation: 39

You can only use inbuilt shadow props in ios app only. For android, you can use {elevation:2} method to experience a shadow effect on your component but you can't be able to customize the shadow(color, offset etc.) like in ios.

Like this -

Upvotes: -1

Saurabh Joshi
Saurabh Joshi

Reputation: 267

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
    }
   },
 })

Upvotes: 11

jsina
jsina

Reputation: 4849

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

Upvotes: 4

Mohamed Khalil
Mohamed Khalil

Reputation: 3136

to add shadow you can use react-native-shadow and for gradient react-native-linear-gradient

Upvotes: 0

Related Questions