harnesses the power of gluestack-style
, a universal and highly performant styling library, to create beautifully styled components. With a babel plugin for pre-computing styles during the build process, and runtime performance optimizations, gluestack-style delivers high performance styling, even in the most demanding applications.
We performed the benchmarks
with some famous React Native libraries like gluestack-ui, Tamagui, NativeBase, Styled Components and React Native built-in styling.
In each case we have rendered 1000 components with styling of each library. Results are average of 5 mounts.
All the benchmarks were measured in production environment on iPhone 13.
The time it takes to render a simple themed component. We've developed a Box component using View with some default styles.
Component with variants
The time needed to render a component with different variations. We've developed a Box component using View with default styles and multiple variants.
Styled Components doesn't have built-in support for variants. We've incorporated prop-based variants into Styled Components.
Component with default theme and inline styles
A component with default themes, variations, inline styles, and state styles. We've designed a Button component using Pressable with default style, variations, state style, and inline styles.
React Native and Styled Components doesn't provide out of the box support for state styling.
Layout using HStack, VStack, Image and Text
Creating a layout with HStack, VStack, Image, and Text to display a list of 28 items. We've utilized components from the following libraries for this purpose.
Note: This test was taken from Tamagui
We are actively working on benchmarks for web, updates will be available soon.