import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { Box } from "@/components/ui/box";
import { HStack } from "@/components/ui/hstack";
import { Grid, GridItem } from "@/components/ui/grid";
import { Text } from "@/components/ui/text";


export default function Index() {
return (
<View>
<HStack space="md" reversed={false}>
<Box className="h-20 w-40 bg-primary-300" />
<Box className="h-20 w-40 bg-primary-400" />
<Box className="h-20 w-40 bg-primary-500" />
</HStack>

<Grid className="gap-4" _extra={{
className: 'grid-cols-9',
}}>
<GridItem
className="bg-background-50 p-3 rounded-md text-center"
_extra={{
className: 'col-span-3',
}}
>
<Text>A</Text>
</GridItem>
<GridItem
className="bg-background-50 p-3 rounded-md text-center"
_extra={{
className: 'col-span-3',
}}
>
<Text>B</Text>
</GridItem>
<GridItem
className="bg-background-50 p-3 rounded-md text-center"
_extra={{
className: 'col-span-3',
}}
>
<Text>C</Text>
</GridItem>
</Grid>

</View>
);
}

const styles = StyleSheet.create({

});

anyone check why my grid is not working on expogo app anyone has idea
on web it working fine