This repository offers a standardized tool set for benchmarking React Native applications, aiming to enhance development efficiency and inclusivity.
- Introduction
- Why Now?
- Standardization
- Test Suite
- Benchmarked Libraries
- Getting Started
- Contributing
- License
- Acknowledgments
The React Native ecosystem needs a comprehensive and standardized benchmarking tool that reflects real-world scenarios and diverse hardware, leading to more effective and inclusive React Native development. The number of styling libraries have doubled in 2023, but each is using a different benchmark repo with different tests and different setups. The goal is to unify them under one roof and provide a clear picture for developers when deciding which one to use.
- Implement a comprehensive set of tests with varying complexity and performance is measured
- Integrates each styled system & UI library
- Ensure consistent styling approaches are used, such as inline styles vs. styled views
- Ensure a diverse range of devices that the community can test on and average out
- Use Production builds for measuring
- Present results benchmarked against the GeekBench score
Styling systems libraries use Views, while UI component libraries use components. Simulate re-rendering scenarios with 5 and 50 iterations to emulate real-world scenarios for low and high complexity applications.
-
Computation
30x views / 1000x views
-
Re-rendering
5 times / 50 times
-
Loading times
first load vs warmed up load
-
Style complexity
simple vs complex styles
-
Web performance & media queries
If your library is not on any list PRs to include, integrate and benchmark them are open. Check the Contributing section
Order based on the results from State of React Native 2023 styling survey
Order based on the results from State of React Native 2023 components survey
The project was started with Expo, since this is the most popular React Native Framework.
npx create-expo-app@latest --template tabs@50
It is bun
and yarn
compatible.
Installing Dependencies
yarn install
bun install --yarn #to generate yarn.lock
Contributions to the benchmarking repository are welcome! Whether you're a developer, tester, or enthusiast in the React Native community, your input can help shape and improve this tool. Please read our contributing guidelines for more information on how you can contribute.
This project is licensed under the MIT License - see the LICENSE.md file for details.
Special thanks to Nate (Tamagui), Marc and Hanno (Margelo), and Jacek (Unistyles) for their help and support in reviewing the initial proposal and coming up with suggestions.
Thanks to all the contributors who have invested their time and effort in this project.