Loading…
The bridge, native modules, navigation, styling and performance on mobile.
A shared Button component receives style props such as
[styles.base, [isPrimary && styles.primary, props.style], null] and
a test helper needs to know the final, merged style, the way
StyleSheet.flatten computes it.
Your header uses a different shadow on each platform, written as a
spec object in the style of Platform.select:
{ "ios": {...}, "android": {...}, "native": {...}, "default": {...} }
(any key may be missing).
A design system stores brand colours as hex strings and screens need a translucent version for overlays and pressed states.
Write withOpacity(hex, opacity) returning a string
A toolbar row has fixed-width icons and flexible sections, laid out
with flexDirection: "row". To check the layout in a unit test you
compute the widths the way flexbox would for this simple case.
You are porting a small web card to React Native and you write
<View>Welcome back</View>. The app shows a red error screen. What are
View and Text for, and why does the plain string break here?
A teammate's profile screen puts every style inline, like
style={{ padding: 16, backgroundColor: "#fff" }}, and you suggest
StyleSheet.create instead. What does StyleSheet.create give you,
and how do you combine two styles on one element?