Academy
easyReact Native#30

StyleSheet.create pattern

Prompt

Refactor inline styles into StyleSheet.create for a login screen with Email input, Password input, and a Login button.

Solution

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 24 },
  input: { borderWidth: 1, padding: 12, marginBottom: 12 },
  lastInput: { borderWidth: 1, padding: 12, marginBottom: 24 },
})
export default function LoginScreen() {
  return (
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="Email" />
      <TextInput style={styles.lastInput} placeholder="Password" secureTextEntry />
      <Button title="Login" onPress={() => {}} />
    </View>
  )
}
Mentor's take

StyleSheet.create is a create-once contract: the style objects are built a single time at module load, validated in development (a typo like paddin throws immediately instead of silently doing nothing), and referenced by identity thereafter. An inline object literal, by contrast, is allocated fresh on every render — and because it's a new reference each time, it defeats React.memo and any shallow prop comparison on the component receiving it. That's the precise cost: not "inline styles are slow to render," but new object identity per render breaks memoization and adds allocation churn. Getting that mechanism right is what the question tests.

The refactor also changes the code's semantics for humans: styles.container and styles.input name the role of each style, and repeated patterns become visible — here, input and lastInput differing only in marginBottom is a smell you'd fix by composing: style={[styles.input, styles.lastSpacing]} — the array syntax merges left-to-right and is the idiomatic way to layer a base style with variants or dynamic values. Truly dynamic styles (a color computed from state) stay inline or memoized, composed on top of the static sheet; the split is static-in-sheet, dynamic-in-render.

Red flag: justifying the refactor with vague "it's faster because native" claims. The defensible answer is: created once vs per-render allocation, dev-time validation, and stable references that keep memoized children from re-rendering.

Say it: "StyleSheet.create builds and validates styles once and gives me stable references — inline objects are per-render allocations with fresh identity, which is exactly what breaks shallow comparison."