ViewManager and Exposing Native Component Props
native UI component bridging.
the ViewManager creates the native view and maps it to a JS component; you expose props with a prop-setter that receives the value when the prop changes.
WHAT THIS TESTS Whether you understand the ViewManager's role as the bridge between a native view and a React component, distinct from a method-only native module.
A GOOD ANSWER COVERS A ViewManager is the object React Native uses to create and manage instances of a custom native view. It implements a factory method that constructs the actual platform view, declares the name under which JavaScript references the component, and is the place where incoming props are applied to the view. Unlike a plain native module, which only exposes callable methods, a ViewManager owns an on-screen UI element. To expose a custom prop such as sourceURL, you declare a prop setter that React Native invokes whenever that prop changes: on Android you annotate a method with ReactProp specifying the prop name and the method receives the view and the new value; on iOS you export a view property with the appropriate macro. When the JS component renders with a new sourceURL, the framework calls your setter with the string, and you update the native view accordingly, for example by loading the URL. You register the ViewManager in a package so it is available to JS, then wrap it with requireNativeComponent or a codegen-generated component.
COMMON WRONG ANSWERS Confusing a ViewManager with a native module that has no view and only methods. Thinking you read props from a return value rather than via setters the framework calls. Forgetting to register the ViewManager in the package, so the component is unknown to JS.
LIKELY FOLLOW-UPS How to send events from the native view back to JS. The difference between a ViewManager and a TurboModule or Fabric component under the New Architecture. How default prop values are handled.
ONE CONCRETE EXAMPLE A custom map view's ViewManager creates the native map and defines setSourceURL annotated with ReactProp name sourceURL. When the React component renders with sourceURL changed, the framework calls setSourceURL with the new string, and the manager tells the native view to load that tile source.
Read the original → msand.github.io
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.