React Native (RN) permits us to put in writing code in a single language for cellular apps as an alternative of resorting to writing platform particular code.
Nevertheless there are some issues in RN that do require platform particular code.
Beneath we have now a customized button part, the impact we’re now’s the button altering coloration when pressed 👆🏾.
RN offers us a particular property we will use for this impact, it is known as android_ripple. As soon as the button is pressed, the ripple property applies the colour we supplied to the button.
Test it out!
<View type={types.buttonOuterContainer}>
<Pressable
onPress={pressHandler}
android_ripple={{ coloration: "#540233" }}
>
<Textual content type={types.buttonText}>{kids}</Textual content>
</Pressable>
</View>
However since that is an Android property 👽, it will not work on iOS units, so we have to finesse some JS for this.
The type attribute in a part can both take a mode object instantly or an arrow perform, so we will run some JS instantly within it.
<View type={types.buttonOuterContainer}>
<Pressable
onPress={pressHandler}
android_ripple={{ coloration: "#540233" }} //Android coloration change
type={({ pressed }) => // iOS coloration change
pressed
? [styles.buttonInnerContainer, styles.pressed]
: types.buttonInnerContainer
}
>
<Textual content type={types.buttonText}>{kids}</Textual content>
</Pressable>
</View>
Here is what we get. 
The Pressable part mechanically passes a pressed worth (which is a boolean) to the perform, after which we will use that boolean in a ternary operator.
We’re allowed to return/add a number of types objects in an array from this ternary operator, so we’re not restricted to at least one ‘key’ from the stylesheet on this case. We’re making use of each the bottom button type and the button press coloration change right here.
It finally ends up studying as “if pressed is true, apply each type objects from this array, if not, simply apply a single type”.
A fast one, however good to know, cheers 🥂
A pet to your troubles (supply):
Cowl picture by Katya Ross
