Writing a Custom Android Component for React Native
Article Summary
Guillermo Orellana from Bumble's tech team tackles React Native's biggest question: Can you actually integrate complex native Android components without losing your mind?
This hands-on guide from Bumble's engineering team walks through building a custom Android ProgressBar component for React Native. Written when RN was still maturing (2017, updated for v0.42.3), it explores whether native integration is practical for production apps with complex, customized codebases.
Key Takeaways
- Three extension paths: Native Modules, JavaScript Modules, and ViewManagers for UI components
- ViewManager setup requires just getName() and createViewInstance() methods to start
- Expose custom properties using @ReactProp annotations with automatic default value handling
- JavaScript interface needs PropTypes matching your native properties exactly
- One command generates working boilerplate, but complex module integration still feels cumbersome
You can bridge native Android views to React Native with surprisingly little code, though the author questions whether starting native and adding RN components might be easier than the reverse.
About This Article
Badoo's engineering team wanted to know if React Native could work alongside their large, heavily customized Android codebase without forcing them to rewrite their existing native classes.
They built a ViewManager-based approach using @ReactProp annotations to expose Android ProgressBar properties like progress and indeterminate to JavaScript. This created a bridge between the native and React layers through a ReactPackage.
The team found that custom Android components could be mapped to React Native with minimal boilerplate code. However, they also learned that adding React Native to an existing production app was harder than building a new app with React Native from the start.