New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android] [Style] No box-shadows on Android #2768

Closed
bsansouci opened this Issue Sep 16, 2015 · 29 comments

Comments

Projects
None yet
@bsansouci

bsansouci commented Sep 16, 2015

I might totally be missing something but shadows don't appear on my android phone (and they do the iOS simulator). Here's the style:

<View style={{
  width: 320,
  margin: 8,
  borderRadius: 2,
  shadowOffset: {
    width: 0,
    height: 1,
  },
  shadowRadius: 2,
  shadowOpacity: 0.2,
  shadowColor: 'black',
  backgroundColor: '#fff',
}}>
  <View style={{
    flexDirection: 'row',
    height: 48,
  }}>
    <View style={{
      justifyContent: 'center',
      flex: 1,
      paddingRight: 8,
      overflow: 'hidden',
    }}>
      <Text style={{
        fontFamily: 'Helvetica Neue',
        color: 'rgb(51, 51, 51)',
        fontSize: 14,
      }}>
        Lorem ipsum dolor sit amet, consectetur
      </Text>
    </View>
  </View>
</View>

@bsansouci bsansouci changed the title from No shadows on Android? to No shadows on Android Sep 16, 2015

@foghina

This comment has been minimized.

Show comment
Hide comment
@foghina

foghina Sep 16, 2015

Contributor

We don't support shadows on Android currently. These are notoriously hard to implement as they require drawing outside of a view's bounds and Android's invalidation logic can't really deal with that.

Contributor

foghina commented Sep 16, 2015

We don't support shadows on Android currently. These are notoriously hard to implement as they require drawing outside of a view's bounds and Android's invalidation logic can't really deal with that.

@bsansouci

This comment has been minimized.

Show comment
Hide comment
@bsansouci

bsansouci Sep 16, 2015

Oh that's unfortunate, any plans on making it happen some time soon? :p

bsansouci commented Sep 16, 2015

Oh that's unfortunate, any plans on making it happen some time soon? :p

@foghina foghina added the Android label Sep 16, 2015

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Sep 16, 2015

Collaborator

@bsansouci - I updated known issues to reflect this: c1c455f 😄

Collaborator

brentvatne commented Sep 16, 2015

@bsansouci - I updated known issues to reflect this: c1c455f 😄

@brentvatne brentvatne changed the title from No shadows on Android to [Android] [Style] No shadows on Android Sep 16, 2015

@foghina

This comment has been minimized.

Show comment
Hide comment
@foghina

foghina Sep 16, 2015

Contributor

@brentvatne mentions we could try to use elevation or something similar (using outlines) to achieve this, but this would only work on Android 5.0+.

Contributor

foghina commented Sep 16, 2015

@brentvatne mentions we could try to use elevation or something similar (using outlines) to achieve this, but this would only work on Android 5.0+.

@bsansouci

This comment has been minimized.

Show comment
Hide comment
@bsansouci

bsansouci Sep 16, 2015

Considering I kind of need those nice shadows, I'll try to look into it (I'm not an android dev though so this might take some time :p)

bsansouci commented Sep 16, 2015

Considering I kind of need those nice shadows, I'll try to look into it (I'm not an android dev though so this might take some time :p)

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Sep 16, 2015

Collaborator

@foghina (or any other Android gurus) -- do you know if it's possible to use the appcompat library to get the effects of elevation on Android 4.x? And if not, could we enable shadows on Android 5.0+ and have them gracefully not show up on Android 4.x so that the UI is nominally usable but not necessarily ideal?

Collaborator

ide commented Sep 16, 2015

@foghina (or any other Android gurus) -- do you know if it's possible to use the appcompat library to get the effects of elevation on Android 4.x? And if not, could we enable shadows on Android 5.0+ and have them gracefully not show up on Android 4.x so that the UI is nominally usable but not necessarily ideal?

@vickychijwani

This comment has been minimized.

Show comment
Hide comment
@vickychijwani

vickychijwani Sep 17, 2015

@ide you could take a look at how AppCompat CardView does it.

CardView uses elevation property on L for shadows and falls back to a custom shadow implementation on older platforms. Before L, CardView adds padding to its content and draws shadows to that area.

Rather than drawing the shadow outside of the View's bounds, it automatically adds a bit of padding on Android < 5.0 and draws the shadow in that padded area using RoundRectDrawableWithShadow. Naturally, changing layout props like this is surprising behaviour and may not be appropriate for RN. But you could always just use View#setElevation() on Android 5.0+ and ignore older versions for now.

vickychijwani commented Sep 17, 2015

@ide you could take a look at how AppCompat CardView does it.

CardView uses elevation property on L for shadows and falls back to a custom shadow implementation on older platforms. Before L, CardView adds padding to its content and draws shadows to that area.

Rather than drawing the shadow outside of the View's bounds, it automatically adds a bit of padding on Android < 5.0 and draws the shadow in that padded area using RoundRectDrawableWithShadow. Naturally, changing layout props like this is surprising behaviour and may not be appropriate for RN. But you could always just use View#setElevation() on Android 5.0+ and ignore older versions for now.

@bsansouci

This comment has been minimized.

Show comment
Hide comment
@bsansouci

bsansouci Sep 17, 2015

Modifying the elevation will change the radius and opacity of the shadow, but how would we change the offset?

bsansouci commented Sep 17, 2015

Modifying the elevation will change the radius and opacity of the shadow, but how would we change the offset?

@vickychijwani

This comment has been minimized.

Show comment
Hide comment
@vickychijwani

vickychijwani Sep 18, 2015

At this point, even static shadows would greatly enhance the "native-ness" of the components.

vickychijwani commented Sep 18, 2015

At this point, even static shadows would greatly enhance the "native-ness" of the components.

@allenmanning

This comment has been minimized.

Show comment
Hide comment
@allenmanning

allenmanning Oct 1, 2015

++ Elevation for 5+

allenmanning commented Oct 1, 2015

++ Elevation for 5+

@corbt

This comment has been minimized.

Show comment
Hide comment
@corbt

corbt Oct 10, 2015

Contributor

Would it be reasonable to add an "elevation" prop for views that (1) sets elevation for android 5+ (2) does nothing on Android <5 (current behavior for "elevation" in the appcompat packages if I'm not mistaken) and (3) sets shadows on iOS to mimic the "elevation" effect? This seems like the most straightforward (and perhaps only sane) way to implement cross-platform shadows across both Android and iOS without users having to write a bunch of platform-specific code.

Contributor

corbt commented Oct 10, 2015

Would it be reasonable to add an "elevation" prop for views that (1) sets elevation for android 5+ (2) does nothing on Android <5 (current behavior for "elevation" in the appcompat packages if I'm not mistaken) and (3) sets shadows on iOS to mimic the "elevation" effect? This seems like the most straightforward (and perhaps only sane) way to implement cross-platform shadows across both Android and iOS without users having to write a bunch of platform-specific code.

@bsansouci

This comment has been minimized.

Show comment
Hide comment
@bsansouci

bsansouci Oct 10, 2015

@corbt I don't think it's a good idea to have different ways to describe shadows for View. There should be a way to make boxShadow and shadowOffset work with elevation and translationZ.

bsansouci commented Oct 10, 2015

@corbt I don't think it's a good idea to have different ways to describe shadows for View. There should be a way to make boxShadow and shadowOffset work with elevation and translationZ.

@corbt

This comment has been minimized.

Show comment
Hide comment
@corbt

corbt Oct 11, 2015

Contributor

@bsansouci so the issue from my perspective is that Android doesn't give you a fine-grained way to set a shadow. Really the only levers you have to pull are elevation and translationZ (which are basically driving the same thing anyway, so you really only have one independent dimension to play with). And I haven't seen any other shadow implementations on Android that can be used in a consistent, programmatic way. Given that state of affairs, I only see a few options:

  1. Don't support shadows on Android :(
  2. Add an Android-only elevation style for views that does nothing on iOS. So cross-platform views would need to set elevation as well as the shadow* APIs.
  3. Use some combination of the shadowRadius, shadowOffset and shadowOpacity to compute a value for elevation behind the scenes on Android. Remember though, we only get to set one number on Android, so some layout information will inevitably be lost here. (With this option it may just make sense to translate shadowRadius to an elevation and throw away the other two numbers on Android -- I think we have to throw away shadowColor anyway).
  4. Implement elevation as a cross-platform prop that invokes the elevation Android API for Android 5+, does nothing on Android < 5 and sets the shadow* APIs on iOS to create a visually similar effect.

Option (4) is what I proposed above. I totally agree that having multiple ways to set a shadow on a view isn't ideal, but I still think it's cleaner than having to set both elevation and shadow styles on any cross-platform view (option 2). Option 3, which I think is what you are suggesting, has merit as well. My concern is that since so much information is being thrown away anyway because of elevation's limitations, it might be better to encode it in a new style option so users understand what they're getting into. Reasonable minds may disagree.

On a more philosophical level, I actually like what Google is doing with the elevation property in material design. 99% of the time I use shadows, what I'm actually trying to convey is a sense of elevation/levels. Setting the offset/radius/opacity feel like the wrong level of abstraction for this use case. So I wouldn't mind just sticking with elevation across all platforms and letting the library calculate the brass tacks of how that's actually implemented.

Contributor

corbt commented Oct 11, 2015

@bsansouci so the issue from my perspective is that Android doesn't give you a fine-grained way to set a shadow. Really the only levers you have to pull are elevation and translationZ (which are basically driving the same thing anyway, so you really only have one independent dimension to play with). And I haven't seen any other shadow implementations on Android that can be used in a consistent, programmatic way. Given that state of affairs, I only see a few options:

  1. Don't support shadows on Android :(
  2. Add an Android-only elevation style for views that does nothing on iOS. So cross-platform views would need to set elevation as well as the shadow* APIs.
  3. Use some combination of the shadowRadius, shadowOffset and shadowOpacity to compute a value for elevation behind the scenes on Android. Remember though, we only get to set one number on Android, so some layout information will inevitably be lost here. (With this option it may just make sense to translate shadowRadius to an elevation and throw away the other two numbers on Android -- I think we have to throw away shadowColor anyway).
  4. Implement elevation as a cross-platform prop that invokes the elevation Android API for Android 5+, does nothing on Android < 5 and sets the shadow* APIs on iOS to create a visually similar effect.

Option (4) is what I proposed above. I totally agree that having multiple ways to set a shadow on a view isn't ideal, but I still think it's cleaner than having to set both elevation and shadow styles on any cross-platform view (option 2). Option 3, which I think is what you are suggesting, has merit as well. My concern is that since so much information is being thrown away anyway because of elevation's limitations, it might be better to encode it in a new style option so users understand what they're getting into. Reasonable minds may disagree.

On a more philosophical level, I actually like what Google is doing with the elevation property in material design. 99% of the time I use shadows, what I'm actually trying to convey is a sense of elevation/levels. Setting the offset/radius/opacity feel like the wrong level of abstraction for this use case. So I wouldn't mind just sticking with elevation across all platforms and letting the library calculate the brass tacks of how that's actually implemented.

@bsansouci

This comment has been minimized.

Show comment
Hide comment
@bsansouci

bsansouci Oct 11, 2015

Those are very good points. I didn't understand that translationZ + elevation didn't give us enough power to express all of the same shadows as on iOS. I actually think there are two other options: make a ShadowAndroid component that's just a View that has an elevation prop. I think this is a better option that than 2 because it doesn't make sense for RN to have a platform specific property on Views, and it's better than 4 because there isn't two way doing things (if you're using the same component for iOS and android you'd use boxShadow and elevation which is confusing). Or the other option is have a top level property specific to android called elevation on Views. I'd argue this is a less good solution as it seems like most top level properties don't deal with visuals, they are behavior related.

bsansouci commented Oct 11, 2015

Those are very good points. I didn't understand that translationZ + elevation didn't give us enough power to express all of the same shadows as on iOS. I actually think there are two other options: make a ShadowAndroid component that's just a View that has an elevation prop. I think this is a better option that than 2 because it doesn't make sense for RN to have a platform specific property on Views, and it's better than 4 because there isn't two way doing things (if you're using the same component for iOS and android you'd use boxShadow and elevation which is confusing). Or the other option is have a top level property specific to android called elevation on Views. I'd argue this is a less good solution as it seems like most top level properties don't deal with visuals, they are behavior related.

@satya164

This comment has been minimized.

Show comment
Hide comment
@satya164

satya164 Oct 11, 2015

Collaborator

@bsansouci RN already has platform specific properties for components. And if you think about it, boxShadow is a platform specific property right now as it works only on iOS, and not Android.

I'm kinda leaning towards 4. Most of the time I just want to convey a sense of elevation.

Creating another view component will increase the complexity greatly IMO. It's not ideal to subclass a view just because of one property. Other option is to have the property as androidElevation. But it has the problem that you will need to define both boxShadow and elevation if you want shadows both on iOS and Android. Not as clean.

Collaborator

satya164 commented Oct 11, 2015

@bsansouci RN already has platform specific properties for components. And if you think about it, boxShadow is a platform specific property right now as it works only on iOS, and not Android.

I'm kinda leaning towards 4. Most of the time I just want to convey a sense of elevation.

Creating another view component will increase the complexity greatly IMO. It's not ideal to subclass a view just because of one property. Other option is to have the property as androidElevation. But it has the problem that you will need to define both boxShadow and elevation if you want shadows both on iOS and Android. Not as clean.

@bsansouci

This comment has been minimized.

Show comment
Hide comment
@bsansouci

bsansouci Oct 11, 2015

@satya164 @corbt Ok, I think I agree with 4 after giving it some more thoughts.

bsansouci commented Oct 11, 2015

@satya164 @corbt Ok, I think I agree with 4 after giving it some more thoughts.

@omnidan

This comment has been minimized.

Show comment
Hide comment
@omnidan

omnidan Nov 3, 2015

Any updates on this issue? I tried using setElevation but my android development knowledge is far too limited to figure it out 😢

If anyone could tell me how to set elevation on a certain component that'd be amazing 😄 And I can't wait for the elevation property to get implemented.

omnidan commented Nov 3, 2015

Any updates on this issue? I tried using setElevation but my android development knowledge is far too limited to figure it out 😢

If anyone could tell me how to set elevation on a certain component that'd be amazing 😄 And I can't wait for the elevation property to get implemented.

@foghina

This comment has been minimized.

Show comment
Hide comment
@foghina

foghina Nov 5, 2015

Contributor

I tried to do this at some point but ran into some issues where setting elevation doesn't actually do anything, potentially due to our overriding of measurement and layout. I probably won't have time to look into this very soon. 😞

Contributor

foghina commented Nov 5, 2015

I tried to do this at some point but ran into some issues where setting elevation doesn't actually do anything, potentially due to our overriding of measurement and layout. I probably won't have time to look into this very soon. 😞

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Nov 5, 2015

Collaborator

@foghina OK if I mark this as Help Wanted to encourage experiments?

Collaborator

ide commented Nov 5, 2015

@foghina OK if I mark this as Help Wanted to encourage experiments?

@foghina

This comment has been minimized.

Show comment
Hide comment
@foghina

foghina Nov 5, 2015

Contributor

@ide good idea!

Contributor

foghina commented Nov 5, 2015

@ide good idea!

@corbt

This comment has been minimized.

Show comment
Hide comment
@corbt

corbt Nov 13, 2015

Contributor

Ok I've had a chance to look into this and have some preliminary working code. I'll pull it together into a PR. @foghina it looks like elevation is working just fine in RN (at least in my basic tests); you may have been running into one of the limitations of Android's elevation attribute, the most prominent being that (1) it does nothing on Android < 5.0 and (2) it doesn't work for objects with a transparent or translucent background.

Contributor

corbt commented Nov 13, 2015

Ok I've had a chance to look into this and have some preliminary working code. I'll pull it together into a PR. @foghina it looks like elevation is working just fine in RN (at least in my basic tests); you may have been running into one of the limitations of Android's elevation attribute, the most prominent being that (1) it does nothing on Android < 5.0 and (2) it doesn't work for objects with a transparent or translucent background.

@corbt

This comment has been minimized.

Show comment
Hide comment
@corbt

corbt Nov 17, 2015

Contributor

Ok, I've implemented elevation for React Native's View component in the PR above.

Contributor

corbt commented Nov 17, 2015

Ok, I've implemented elevation for React Native's View component in the PR above.

ghost pushed a commit that referenced this issue Nov 26, 2015

Use elevation to implement shadows on Android
Summary: This PR includes a working interface to Android's `elevation` property implemented as an RN style. Elevation is the only (easy) [platform-supported way to create shadows](http://developer.android.com/training/material/shadows-clipping.html). For it to work note that you must be running on Android 5.0+, and add `elevation` to a view with a `backgroundColor` set. These are platform limitations.

This PR is not intended to be merged in its current state, but rather to inform the discussion from #2768. At a minimum, before merging we would need to add the elevation style to the docs and rebase this to master (**EDIT** I have now rebased on master because from v0.14.2 too many commits were being pulled in -- haven't tested it since the rebase though). Additionally, it might be good to add tests, although I couldn't find any for the Android code. I'm happy to get that done if this feature gets signed off by the React Native team.

Finally, as I argued in #2768 I think that `elevation` is a useful abstraction ov
Closes #4180

Reviewed By: svcscm

Differential Revision: D2684746

Pulled By: mkonicek

fb-gh-sync-id: 825f3ccd20c4b0eea9d11b5f0e3a6b018b7e4378

satya164 added a commit to callstack-internal/react-native that referenced this issue Dec 1, 2015

Use elevation to implement shadows on Android
Summary: This PR includes a working interface to Android's `elevation` property implemented as an RN style. Elevation is the only (easy) [platform-supported way to create shadows](http://developer.android.com/training/material/shadows-clipping.html). For it to work note that you must be running on Android 5.0+, and add `elevation` to a view with a `backgroundColor` set. These are platform limitations.

This PR is not intended to be merged in its current state, but rather to inform the discussion from #2768. At a minimum, before merging we would need to add the elevation style to the docs and rebase this to master (**EDIT** I have now rebased on master because from v0.14.2 too many commits were being pulled in -- haven't tested it since the rebase though). Additionally, it might be good to add tests, although I couldn't find any for the Android code. I'm happy to get that done if this feature gets signed off by the React Native team.

Finally, as I argued in #2768 I think that `elevation` is a useful abstraction ov
Closes facebook#4180

Reviewed By: svcscm

Differential Revision: D2684746

Pulled By: mkonicek

fb-gh-sync-id: 825f3ccd20c4b0eea9d11b5f0e3a6b018b7e4378

sunnylqm added a commit to sunnylqm/react-native that referenced this issue Dec 2, 2015

Use elevation to implement shadows on Android
Summary: This PR includes a working interface to Android's `elevation` property implemented as an RN style. Elevation is the only (easy) [platform-supported way to create shadows](http://developer.android.com/training/material/shadows-clipping.html). For it to work note that you must be running on Android 5.0+, and add `elevation` to a view with a `backgroundColor` set. These are platform limitations.

This PR is not intended to be merged in its current state, but rather to inform the discussion from #2768. At a minimum, before merging we would need to add the elevation style to the docs and rebase this to master (**EDIT** I have now rebased on master because from v0.14.2 too many commits were being pulled in -- haven't tested it since the rebase though). Additionally, it might be good to add tests, although I couldn't find any for the Android code. I'm happy to get that done if this feature gets signed off by the React Native team.

Finally, as I argued in #2768 I think that `elevation` is a useful abstraction ov
Closes facebook#4180

Reviewed By: svcscm

Differential Revision: D2684746

Pulled By: mkonicek

fb-gh-sync-id: 825f3ccd20c4b0eea9d11b5f0e3a6b018b7e4378

satya164 added a commit to callstack-internal/react-native that referenced this issue Dec 4, 2015

Use elevation to implement shadows on Android
Summary: This PR includes a working interface to Android's `elevation` property implemented as an RN style. Elevation is the only (easy) [platform-supported way to create shadows](http://developer.android.com/training/material/shadows-clipping.html). For it to work note that you must be running on Android 5.0+, and add `elevation` to a view with a `backgroundColor` set. These are platform limitations.

This PR is not intended to be merged in its current state, but rather to inform the discussion from #2768. At a minimum, before merging we would need to add the elevation style to the docs and rebase this to master (**EDIT** I have now rebased on master because from v0.14.2 too many commits were being pulled in -- haven't tested it since the rebase though). Additionally, it might be good to add tests, although I couldn't find any for the Android code. I'm happy to get that done if this feature gets signed off by the React Native team.

Finally, as I argued in #2768 I think that `elevation` is a useful abstraction ov
Closes facebook#4180

Reviewed By: svcscm

Differential Revision: D2684746

Pulled By: mkonicek

fb-gh-sync-id: 825f3ccd20c4b0eea9d11b5f0e3a6b018b7e4378

mkonicek added a commit that referenced this issue Dec 4, 2015

Use elevation to implement shadows on Android
Summary: This PR includes a working interface to Android's `elevation` property implemented as an RN style. Elevation is the only (easy) [platform-supported way to create shadows](http://developer.android.com/training/material/shadows-clipping.html). For it to work note that you must be running on Android 5.0+, and add `elevation` to a view with a `backgroundColor` set. These are platform limitations.

This PR is not intended to be merged in its current state, but rather to inform the discussion from #2768. At a minimum, before merging we would need to add the elevation style to the docs and rebase this to master (**EDIT** I have now rebased on master because from v0.14.2 too many commits were being pulled in -- haven't tested it since the rebase though). Additionally, it might be good to add tests, although I couldn't find any for the Android code. I'm happy to get that done if this feature gets signed off by the React Native team.

Finally, as I argued in #2768 I think that `elevation` is a useful abstraction ov
Closes #4180

Reviewed By: svcscm

Differential Revision: D2684746

Pulled By: mkonicek

fb-gh-sync-id: 825f3ccd20c4b0eea9d11b5f0e3a6b018b7e4378

Crash-- added a commit to Crash--/react-native that referenced this issue Dec 24, 2015

Use elevation to implement shadows on Android
Summary: This PR includes a working interface to Android's `elevation` property implemented as an RN style. Elevation is the only (easy) [platform-supported way to create shadows](http://developer.android.com/training/material/shadows-clipping.html). For it to work note that you must be running on Android 5.0+, and add `elevation` to a view with a `backgroundColor` set. These are platform limitations.

This PR is not intended to be merged in its current state, but rather to inform the discussion from #2768. At a minimum, before merging we would need to add the elevation style to the docs and rebase this to master (**EDIT** I have now rebased on master because from v0.14.2 too many commits were being pulled in -- haven't tested it since the rebase though). Additionally, it might be good to add tests, although I couldn't find any for the Android code. I'm happy to get that done if this feature gets signed off by the React Native team.

Finally, as I argued in #2768 I think that `elevation` is a useful abstraction ov
Closes facebook#4180

Reviewed By: svcscm

Differential Revision: D2684746

Pulled By: mkonicek

fb-gh-sync-id: 825f3ccd20c4b0eea9d11b5f0e3a6b018b7e4378

@satya164 satya164 changed the title from [Android] [Style] No shadows on Android to [Android] [Style] No box-shadows on Android Dec 24, 2015

kanerogers added a commit to kanerogers/react-native-material-kit that referenced this issue Sep 12, 2016

Remove note about shadows being unavailable on Android
Since [this commit](facebook/react-native#2768), shadows are now available on Android. Hooray!
@Kishanjvaghela

This comment has been minimized.

Show comment
Hide comment
@Kishanjvaghela

Kishanjvaghela Apr 28, 2017

I have implemented CardView for react-native with elevation, that support android(All version) and iOS. https://github.com/Kishanjvaghela/react-native-cardview

Kishanjvaghela commented Apr 28, 2017

I have implemented CardView for react-native with elevation, that support android(All version) and iOS. https://github.com/Kishanjvaghela/react-native-cardview

@SamnangLaor

This comment has been minimized.

Show comment
Hide comment
@SamnangLaor

SamnangLaor Feb 4, 2018

As my experience, we can use Card with CardItem from native-base for shadow block.

SamnangLaor commented Feb 4, 2018

As my experience, we can use Card with CardItem from native-base for shadow block.

@arasemami

This comment has been minimized.

Show comment
Hide comment
@arasemami

arasemami May 27, 2018

for an android screen you can use this property elevation . for example --

HeaderView:{
    backgroundColor:'#F8F8F8',
    justifyContent:'center',
    alignItems:'center',
    height:60,
    paddingTop:15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,

   // its for android 
    elevation: 5,
    position:'relative',

},

arasemami commented May 27, 2018

for an android screen you can use this property elevation . for example --

HeaderView:{
    backgroundColor:'#F8F8F8',
    justifyContent:'center',
    alignItems:'center',
    height:60,
    paddingTop:15,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,

   // its for android 
    elevation: 5,
    position:'relative',

},
@ggepenyan

This comment has been minimized.

Show comment
Hide comment
@ggepenyan

ggepenyan Jun 25, 2018

Elevation is not working for android 4.4

ggepenyan commented Jun 25, 2018

Elevation is not working for android 4.4

@NishanthShankar

This comment has been minimized.

Show comment
Hide comment
@NishanthShankar

NishanthShankar Jun 25, 2018

NishanthShankar commented Jun 25, 2018

@ggepenyan

This comment has been minimized.

Show comment
Hide comment
@ggepenyan

ggepenyan Jun 26, 2018

@NishanthShankar So what suggestions are to get shadow for android 4.4. It's not an issue?

ggepenyan commented Jun 26, 2018

@NishanthShankar So what suggestions are to get shadow for android 4.4. It's not an issue?

@NishanthShankar

This comment has been minimized.

Show comment
Hide comment
@NishanthShankar

NishanthShankar Jun 26, 2018

NishanthShankar commented Jun 26, 2018

@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.