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

Libs

• fela-native
• glamorous-native
• react-native
• styled-components

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 git@github.com: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)