diff --git a/example/ui-examples-babel/App.tsx b/example/ui-examples-babel/App.tsx index 294226542..df56c4b84 100644 --- a/example/ui-examples-babel/App.tsx +++ b/example/ui-examples-babel/App.tsx @@ -1,22 +1,58 @@ import React from 'react'; -import { View } from 'react-native'; -import { config } from './gluestack-ui.config'; -import { styled, StyledProvider } from '../../packages/react'; -// import { Box, Heading } from './src/core'; +import { useState } from 'react'; +import { Button, StyleSheet, Text, View } from 'react-native'; -const Box = styled(View, { - bg: '$primary100', - h: '$10', - w: '$10', -}); +import Gluestack from './BenchGlueStack'; +import ReactNative from './BenchReactNative'; +import TimedRender from './TimedRender'; export default function App() { + const [styleType, setStyleType] = useState(undefined); + + const onStyleTypePress = (curry) => () => { + setStyleType(curry); + }; + + const renderStyleLibrary = () => { + switch (styleType) { + case 'Gluestack': + return ; + case 'React Native': + return ; + default: + return null; + } + }; + return ( - <> - {/* gluestack-ui provider */} - - - - + + Tap a style library to start rendering +