Refactoring a Hotel Page in React Native: Architecture, Redux, and Native Animation Lessons

The talk, presented at Qunar's 2016 Tech Carnival by iOS engineer Zhu Tianren, introduces the motivation for adopting React Native on the hotel page and homepage, describing the initial investigation and the decision to prototype these two screens.

During the first implementation the team applied a native‑thinking approach to React Native, using Redux for data flow but keeping most logic and state in the top‑level view, which led to three major problems: a non‑idiomatic native‑style development that hindered progress, poor robustness due to tangled logic and manual UI updates, and unsatisfactory animation performance on low‑end devices.

To address these issues the architecture was redesigned: functions were moved from the top‑level view into Redux actions, data was centralized in the Redux store (state), and UI components were reduced to pure presentational sub‑components. The connect function was introduced to bind components to the store, enabling automatic UI updates when state changes.

The refactor improved debugging (pure functions in reducers made data changes traceable), reduced maintenance cost (clear separation of actions, reducers, and state), and fully leveraged data binding, eliminating manual UI management.

Performance problems with native‑side animations were solved by exposing a native animation API: a UIView category receives animation parameters (position, size, opacity, duration) from JavaScript and executes them on the native thread, achieving smooth 60 fps animations even on older devices.

Finally, the speaker summarizes four key takeaways: use React Native’s paradigm rather than native thinking, store all data in Redux state, consider native implementations for performance‑critical features, and ensure reducers are robust to keep state reliable.