react-native: Platform specific style code only for android/ios

Question

I need a particular style to apply only for android and needs to have no effect when on iOS.

My code snippet is somewhat like this:

<CardItem
  style={{
borderWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "#fff",
overflow: Platform.OS == "ios" ? "hidden":"auto"
}}
cardBody
>

I need the overflow to be hidden only on iOS and needs no effect when on android. I have used overflow: Platform.OS == "ios" ? "hidden":"auto", but this doesn't look apt for the scenario.

Would this work for you overflow: Platform.OS == "ios" && "hidden" — VilleKoo
– VilleKoo, Commented Apr 18, 2019 at 10:02
I guess it might be because after backgroundColor is no comma, try to put there comma and see if it works — Zirek
– Zirek, Commented Apr 18, 2019 at 10:11

agilgur5 · Accepted Answer · 2025-08-20 11:41:13Z

4

The overflow property doesn't have an 'auto' value in React Native. It's an enum with these options:

enum('visible', 'hidden', 'scroll')

You can set 'visible' (the default value) instead of 'auto' for Android. This should work:

overflow: Platform.OS == "ios" ? "hidden": "visible"

edited Aug 20 at 11:41

agilgur5

2,0924 gold badges50 silver badges71 bronze badges

answered Apr 18, 2019 at 12:51

akcoban

9937 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-native: Platform specific style code only for android/ios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related