Unifying divergent native video player props

WHAT THIS TESTS The interviewer wants to see that you can design an adapter component that presents one stable, ergonomic API while absorbing the differences between two native views, doing the prop transformation in JavaScript.

A GOOD ANSWER COVERS You create a single JavaScript component, say VideoPlayer, whose public interface accepts a unified source prop shaped like { uri, headers }. Internally you obtain references to the two native views via requireNativeComponent (or the codegen-generated component on the new architecture), for example IosVideoView and AndroidVideoView. In the render method you branch on Platform.OS and transform the unified source into the shape each native view expects: on iOS you compute sourceURL from source.uri and pass it (handling headers however iOS supports, perhaps embedding or via a separate prop), while on Android you pass uri and headers as the separate props the Android view declares. You then render the correct native view, forwarding the mapped props plus any common ones like style and event callbacks. The transformation lives entirely in this wrapper, so consumers always write the same source prop and never learn about sourceURL versus uri/headers.

COMMON WRONG ANSWERS Exposing the raw native prop names to consumers leaks the abstraction and forces callers to branch themselves. Creating two separate public components, one per platform, duplicates the API surface and defeats the goal. Forgetting to forward shared props like style or event handlers breaks layout and callbacks. Mutating the incoming source object instead of building a new mapped object can cause subtle bugs.

LIKELY FOLLOW-UPS Where does the transformation belong, JS or native? JS keeps it simple and visible; native is heavier. How do you handle events uniformly? Normalize native events into one callback shape. How do you memoize the mapped props? Use useMemo keyed on source to avoid recomputing each render.

ONE CONCRETE EXAMPLE function VideoPlayer({ source, style, onEnd }) { if (Platform.OS === 'ios') return <IosVideoView sourceURL={source.uri} style={style} onEnd={onEnd} />; return <AndroidVideoView uri={source.uri} headers={source.headers} style={style} onEnd={onEnd} />; }. Consumers always pass source={{ uri, headers }}; the wrapper maps it to each platform's contract.