AI generated image

9 React Native Features Most Developers Overlook

Not a Medium Member? “Read For Free”

1. StyleSheet.flatten

In React Native you often pass a list of styles, and some of them only apply sometimes:

<View style={[styles.base, isActive && styles.active, isBig && styles.big]} />

But what does that list actually add up to? StyleSheet.flatten tells you. It merges the list into one plain object, with later styles gets.

const finalStyle = StyleSheet.flatten([styles.base, isActive && styles.active]);
// { width: 120, height: 120, borderRadius: 60, backgroundColor: '#4F46E5' }

console.log(finalStyle.backgroundColor);

It’s handy when you need to read one value out of a style, like a colour or a width, or when you’re trying to work out why a style isn’t doing what you expect. Empty values like false are simply skipped.

2. flashScrollIndicators()

Sometimes people don’t realise a list or a strip can scroll. flashScrollIndicators briefly shows the scroll bar, as a small hint that there is more to see.