Skip to content

brunolemos/react-native-css-in-js-benchmarks

Repository files navigation

CSS in JS Benchmarks

for React Native

Results

See RESULTS.md for the benchmark results.

Technique

  • Big table with random data and dynamic background color opacity
  • Multiple implementations for each lib with small variations, e.g. using inline styles or not
  • Multiple rerenders are executed per test and the result is their average render time

React Native running CSS in JS benchmarks on iOS simulator

Libs

Know any other? Please open an issue or, preferrably, a pull request :)

Inspiration

The idea and some code pieces are heavily inspired by A-gambit/CSS-IN-JS-Benchmarks, which benchmarks were made for React Web.

How to run

  • Run git clone [email protected]:brunolemos/react-native-css-in-js-benchmarks.git
  • Run yarn or npm install

Manually

  • Run react-native run-ios
  • Use the app as usual

Automatically

  • Run brew tap wix/brew
  • Run brew install applesimutils
  • Start the iPhone X Simulator
  • Run npm run test:e2e:build
  • Run npm run test:e2e

Detox will run all benchmarks and show the results at the end.

Author

Bruno Lemos (follow @brunolemos on twitter)