Building Input Accessory View For React Native
Article Summary
After three years and countless '+1s' on GitHub, React Native finally solved one of iOS development's most requested features. Here's how the team built InputAccessoryView from scratch.
The React Native team tackled a long-standing feature request to expose iOS's native input accessory view API. This deep dive reveals the engineering decisions behind building a component that enables keyboard toolbars and sticky text inputs, two patterns essential for messaging apps like iMessage and WhatsApp.
Key Takeaways
- Used React portal-like concept to hoist any view hierarchy into native UIView
- Linked components via nativeID instead of circular dependencies for text inputs
- Avoided iPhone X home pill using container wrapper, not safeAreaLayoutGuide alone
- Supports both keyboard toolbars and sticky inputs with single unified API
React Native v0.55.0 shipped InputAccessoryView by cleverly bridging React's component model with iOS's responder infrastructure, solving keyboard synchronization without relying on notification events.
About This Article
UIKeyboardDidChangeFrame notifications weren't firing quickly enough when users swiped between keyboards. The events also missed keyboard height changes, which created frame synchronization bugs on iPhone X since text and emoji keyboards have different heights.
React Native's team moved away from NSNotificationCenter and switched to the native .inputAccessoryView property instead. This lets the responder infrastructure handle all frame updates on its own.
InputAccessoryView shipped in React Native v0.55.0 and fixed keyboard synchronization. Apps using keyboard event listeners no longer hit the frame-update bugs that used to affect them.