Skip to content
CSS in JS Benchmarks for React Native
JavaScript Objective-C Python Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android
e2e
ios
src
.babelrc
.buckconfig
.eslintrc
.flowconfig
.gitattributes
.gitignore
.watchmanconfig
README.md
RESULTS.md
app.json
index.js
package-lock.json
package.json
yarn.lock

README.md

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 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)

You can’t perform that action at this time.