React Native Conditional Button styling for iOS.

React Native (RN) allows us to write code in one language for mobile apps instead of resorting to writing platform specific code.

However there are some things in RN that do require platform specific code.

Below we have a custom button component, the effect we're looking at now is the button changing color when pressed 👆🏾.

RN gives us a special property we can use for this effect, it's called android_ripple. Once the button is pressed, the ripple property applies the color we provided to the button.

Check it out!

    <View style={styles.buttonOuterContainer}>
      <Pressable
        onPress={pressHandler}
        android_ripple={{ color: "#540233" }}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>

But since this is an Android property 👽, it won't work on iOS devices, so we need to finesse some JS for this.

The style attribute in a component can either take a style object directly or an arrow function, so we can run some JS directly inside of it.

   <View style={styles.buttonOuterContainer}>
      <Pressable
        onPress={pressHandler}
        android_ripple={{ color: "#540233" }} //Android color change


        style={({ pressed }) => // iOS color change
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>

Here's what we get.

The Pressable component automatically passes a pressed value (which is a boolean) to the function, and then we can use that boolean in a ternary operator.

We’re allowed to return/add multiple styles objects in an array from this ternary operator, so we’re not limited to one ‘key’ from the stylesheet in this case. We're applying both the base button style and the button press color change here.

It ends up reading as “if pressed is true, apply both style objects from this array, if not, just apply a single style”.

A quick one, but good to know, cheers 🥂

A puppy for your troubles (source):

Cover image by Katya Ross