Both crashes looked identical from the sofa: a white screen and one line of red. One was a scope mistake hiding inside a stylesheet, the other a missing import in an icon file. Neither line of text pointed at the actual mistake, which is the whole lesson.

Indie DevReact NativeExpo

The screen that went white instead of telling me

The story screen in LittleStory is the part I care about most: you bring a photo, a few seconds of your own voice and one sentence, and the app hands back an illustrated bedtime story. I had clicked through it a dozen times that afternoon. Then I hit the generate step and the screen went white.

The only clue was one line of red: `[runtime not ready]: ReferenceError: Property 'width' doesn't exist`. It names a symptom. It does not name a file, a line or a component, and finding the actual mistake cost me the better part of an hour.

StyleSheet runs before your component does

The offending line sat inside a `StyleSheet.create()` block: an overlay card sized `width: width * 0.8`, where `width` was never defined in that file. It read as reasonable, because inside a component body that name usually arrives from a hook.

But `StyleSheet.create()` is evaluated when the module loads, long before any component runs. A variable that only exists inside the component is simply `undefined` at that moment, and React Native reports the missing name rather than the missing scope. The fix was one line: `width: '80%'`. A percentage resolves at layout time, so the style never needs to know the screen size at all.

When I genuinely need the number there are two honest places for it: `Dimensions.get('window')` at module level, or `useWindowDimensions()` inside the component with an inline style. Never in the stylesheet.

The same red line, a completely different cause

Two days later, a second white screen. Same shape of message: `ReferenceError: Property 'Polyline' doesn't exist`. I assumed styles again and spent twenty minutes in the wrong file.

This one lived in `Icon.tsx`. The icon drew a small polyline and polygon — two shapes from `react-native-svg` — while the import at the top of the file listed `Path`, `Circle`, `Rect` and `Line`. Everything the icon actually used was missing. JSX will happily write `<Polyline />` whether or not the name exists; it only fails the moment React tries to render it.

Adding two names to one import statement fixed it. What it really taught me is that `Property 'X' doesn't exist` is a template, not a diagnosis. The identical sentence covered a scope mistake in one file and a missing import in another, an hour apart.

What I check first now

The list is short and unglamorous. Read the first line of the error before the stack, because the stack is where you go to be wrong for twenty minutes. And when a style needs a dimension, reach for a percentage before a variable.

Neither bug was about Expo Go, or the sandbox, or the phone. They were ordinary mistakes that a precompiled environment made harder to see. The story screen has been quiet since, which is the only review that counts when the audience is a child waiting for her story.

← Back to all posts