Member-only story

Most React Native Developers Miss These 10 Useful Details

8 min read20 hours ago

Not a Medium Member? “Read For Free”

1. TouchableHighlight

Everyone uses Pressable these days. But TouchableHighlight is still here, and it does one thing really well. When you press it, a color shows up behind your button.

In the demo there are four white tiles, each with a colored dot. Press a tile and it fills with that dot’s color. Each tile uses a different activeOpacity, so some show only a little bit of color and others show a lot.

Code:

const underlays = [palette[0], palette[2], palette[3], palette[4]];
const opacities = [1, 0.85, 0.6, 0.3];

export function TouchableHighlightDemo() {
  const theme = useTheme();

  return (
    <View style={styles.highlightGrid}>
      {underlays.map((underlayColor, index) => (
        <TouchableHighlight
          key={underlayColor}
          onPress={() => {}}
          underlayColor={underlayColor}
          activeOpacity={opacities[index]}
          style={styles.highlightTile}
        >
          <View style={[styles.highlightFace, { backgroundColor: theme.card }]}>
            <View…