Android ViewManager: Bridging Native UI to React Native

WHY IT EXISTS React Native provides many common UI components, but not all. To use custom native Android views or third-party UI libraries, you need a mechanism to bridge them into the React ecosystem. This allows JavaScript to control UI elements written in Java or Kotlin, giving you access to the full power of the native platform.

THE MENTAL MODEL A ViewManager is a bridge-side singleton responsible for a specific type of native UI component. Think of it as a factory manager. When your JavaScript code renders <MyCustomView>, React Native asks the corresponding ViewManager to create a native view instance. It then acts as a translator, converting JS props like src or color into native method calls on that view.

HOW IT WORKS You create a native UI component by subclassing SimpleViewManager. This class has a few key responsibilities. First, its getName method returns a string that JavaScript uses to reference the component (e.g., "RCTImageView"). Second, the createViewInstance method is a factory that instantiates your native view. Finally, you expose properties to JavaScript by annotating setter methods with @ReactProp. For example, a method setSrc(MyView view, String url) annotated with @ReactProp(name = "src") allows you to set the src prop from JS.

WHEN TO USE IT Use ViewManager when you need to incorporate a pre-existing, complex native UI component into a React Native app. This is common when integrating with specialized SDKs (like mapping or video players) or reusing UI code from a previous native Android application. It's a powerful tool for accessing platform-specific UI features not available in React's core library.

WHEN NOT TO USE IT Do not use ViewManager for new projects or when starting to build for the New Architecture. It is part of the legacy bridge system and is being replaced by Fabric Native Components. Fabric offers better performance and a more direct, synchronous communication model between JavaScript and native code. Using the legacy system for new work creates technical debt.

ONE CANONICAL EXAMPLE To expose a native Android image view to JavaScript, you'd create a ReactImageManager class extending SimpleViewManager<ReactImageView>. Its getName() would return "RCTImageView". The createViewInstance() would return a new ReactImageView. A method like public void setResizeMode(ReactImageView view, String resizeMode) annotated with @ReactProp(name = "resizeMode") would let you control the image's scaling from an <RCTImageView resizeMode="cover" /> component in your JS code.