Add react-native-styled-system

App.js

@@ -1,20 +1,21 @@
-import { useFonts } from "expo-font";
-import { useState } from "react";
-import { Button, StyleSheet, Text, View } from "react-native";
+import { useFonts } from 'expo-font';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
 
-import Dripsy from "./components/Dripsy";
-import EmotionNative from "./components/EmotionNative";
-import Gluestack from "./components/Gluestack";
-import NativeWind from "./components/NativeWind";
-import Native from "./components/ReactNative";
-import Restyle from "./components/Restyle";
-import StyledComponents from "./components/StyledComponents";
-import Tamagui from "./components/Tamagui";
-import TimedRender from "./components/TimedRender";
-import Twrnc from "./components/Twrnc";
-import { Zephyr } from "./components/Zephyr";
-import FastStyles from "./components/FastStyles";
-import Unistyles from "./components/Unistyles";
+import Dripsy from './components/Dripsy';
+import EmotionNative from './components/EmotionNative';
+import Gluestack from './components/Gluestack';
+import NativeWind from './components/NativeWind';
+import Native from './components/ReactNative';
+import Restyle from './components/Restyle';
+import StyledComponents from './components/StyledComponents';
+import Tamagui from './components/Tamagui';
+import TimedRender from './components/TimedRender';
+import Twrnc from './components/Twrnc';
+import { Zephyr } from './components/Zephyr';
+import FastStyles from './components/FastStyles';
+import Unistyles from './components/Unistyles';
+import { ReactNativeStyledSystem } from './components/ReactNativeStyledSystem';
 
 export default function App() {
   const [styleType, setStyleType] = useState(undefined);
@@ -49,6 +50,8 @@ export default function App() {
         return <FastStyles />;
       case "Unistyles":
         return <Unistyles />;
+      case "ReactNativeStyledSystem":
+        return <ReactNativeStyledSystem />;
       default:
         return null;
     }
@@ -90,6 +93,7 @@ export default function App() {
       <Button title="Tamagui" onPress={onStyleTypePress("Tamagui")} />
       <Button title="Gluestack" onPress={onStyleTypePress("Gluestack")} />
       <Button title="Dripsy" onPress={onStyleTypePress("Dripsy")} />
+      <Button title="ReactNativeStyledSystem" onPress={onStyleTypePress("ReactNativeStyledSystem")} />
       {styleType ? (
         <TimedRender key={styleType}>
           <Text style={styles.text}>

README.md

@@ -4,7 +4,7 @@ Original reproducer was created by @tj-mc: https://github.com/tj-mc/styled-compo
 
 This is an Expo SDK 49 App reproducer to demonstrate the performance difference between popular style libraries and react-native built-in styling.
 
-Tests include React Native [StyleSheet](https://reactnative.dev/docs/stylesheet), [Styled Components](https://github.com/styled-components/styled-components), [Tamagui](https://github.com/tamagui/tamagui), [NativeWind](https://github.com/marklawlor/nativewind), [Emotion](https://github.com/emotion-js/emotion), [Zephyr](https://github.com/FormidableLabs/react-native-zephyr), [Dripsy](https://github.com/nandorojo/dripsy), Gluestack [[1]](https://github.com/gluestack/gluestack-ui) [[2]](https://github.com/gluestack/gluestack-style), [fast-styles](https://github.com/fedemartinm/fast-styles), [Tailwind React Native Classnames(twrnc)](https://github.com/jaredh159/tailwind-react-native-classnames), Shopify's [restyle](https://github.com/Shopify/restyle) and [react-native-unistyles](https://github.com/jpudysz/react-native-unistyles) 
+Tests include React Native [StyleSheet](https://reactnative.dev/docs/stylesheet), [Styled Components](https://github.com/styled-components/styled-components), [Tamagui](https://github.com/tamagui/tamagui), [NativeWind](https://github.com/marklawlor/nativewind), [Emotion](https://github.com/emotion-js/emotion), [Zephyr](https://github.com/FormidableLabs/react-native-zephyr), [Dripsy](https://github.com/nandorojo/dripsy), Gluestack [[1]](https://github.com/gluestack/gluestack-ui) [[2]](https://github.com/gluestack/gluestack-style), [fast-styles](https://github.com/fedemartinm/fast-styles), [Tailwind React Native Classnames(twrnc)](https://github.com/jaredh159/tailwind-react-native-classnames), Shopify's [restyle](https://github.com/Shopify/restyle), [react-native-unistyles](https://github.com/jpudysz/react-native-unistyles) and [react-native-styled-system](https://github.com/mj-studio-library/react-native-styled-system) 
 
 Feel free to fork or PR this repo with improvements or to include other styling libraries.
 

components/ReactNativeStyledSystem.js

@@ -0,0 +1,35 @@
+import { View } from 'react-native';
+import { COUNT } from '../utils';
+import { StyledSystemProvider, useSx } from '@react-native-styled-system/core';
+
+const AppTheme = {
+  colors: {
+    red: '#F00',
+  },
+  space: {1: 5},
+  sizes: {},
+  radii: {},
+  typography: {},
+};
+
+export const ReactNativeStyledSystem = () => {
+  return (
+    <StyledSystemProvider theme={AppTheme}>
+      <View style={{ display: 'flex', flexDirection: 'row' }}>
+        {new Array(COUNT).fill(0).map((_, i) => (
+          <StyledView
+            key={i}
+            borderWidth={2}
+            p={1}
+            borderColor={'red'}
+          />
+        ))}
+      </View>
+    </StyledSystemProvider>
+  );
+};
+
+const StyledView = (props) => {
+  const { getStyle, filteredProps } = useSx(props);
+  return <View style={getStyle()} {...filteredProps} />;
+};