Skip to content

Grid does not work properly in react native expo #2794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
2 of 6 tasks
Alireza-Iranpour opened this issue Mar 31, 2025 · 3 comments · May be fixed by #2821
Closed
2 of 6 tasks

Grid does not work properly in react native expo #2794

Alireza-Iranpour opened this issue Mar 31, 2025 · 3 comments · May be fixed by #2821
Assignees
@rajat693
Labels
bug Something isn't working

Comments

@Alireza-Iranpour
Copy link

Alireza-Iranpour commented Mar 31, 2025 •
edited
Loading

Description

The columns are not respected

CodeSandbox/Snack link

Steps to reproduce

  1. Go to '...'
  2. Click on '...'
  3. Scroll down to '...'
  4. See error

gluestack-ui Version

latest

Platform

  • Expo
  • React Native CLI
  • Next
  • Web
  • Android
  • iOS

Other Platform

No response

Additional Information

import { Grid, GridItem } from "@/components/ui/grid";
import { Text } from "@/components/ui/text";

export default function Example() {
  return (
    <Grid
      className="gap-y-2 gap-x-4 p-5"
      _extra={{
        className: "grid-cols-6",
      }}
    >
      <GridItem
        className="bg-background-50 p-4 rounded-md text-center"
        _extra={{
          className: "col-span-2",
        }}
      >
        <Text className="text-sm">01</Text>
      </GridItem>
      <GridItem
        className="bg-background-50 p-4 rounded-md text-center"
        _extra={{
          className: "col-span-2",
        }}
      >
        <Text className="text-sm">02</Text>
      </GridItem>
      <GridItem
        className="bg-background-50 p-4 rounded-md text-center"
        _extra={{
          className: "col-span-2",
        }}
      >
        <Text className="text-sm">03</Text>
      </GridItem>
      <GridItem
        className="bg-background-50 p-4 rounded-md text-center"
        _extra={{
          className: "col-span-2",
        }}
      >
        <Text className="text-sm">04</Text>
      </GridItem>
      <GridItem
        className="bg-background-50 p-4 rounded-md text-center"
        _extra={{
          className: "col-span-2",
        }}
      >
        <Text className="text-sm">05</Text>
      </GridItem>
      <GridItem
        className="bg-background-50 p-4 rounded-md text-center"
        _extra={{
          className: "col-span-2",
        }}
      >
        <Text className="text-sm">06</Text>
      </GridItem>
    </Grid>
  );
}

Image
@Alireza-Iranpour Alireza-Iranpour added the bug Something isn't working label Mar 31, 2025
@Alireza-Iranpour
Copy link
Author

https://github.com/gluestack/gluestack-ui/pull/2790/files
This seems to be the fix pending approval

@pigasoo
Copy link

pigasoo commented Apr 1, 2025

but text-center is still not work

@Sanchitv3
Copy link
Collaborator

We’ve released an updated version of the Grid component in gluestack-ui with the necessary fixes. You can now update the Grid package to get the fixes. Let us know if you run into any issues!

@LuisRodriguezLD LuisRodriguezLD mentioned this issue May 1, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rajat693 rajat693

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Refactor GridItem flexBasisValue calculation logic LuisRodriguezLD/gluestack-ui
4 participants
@Alireza-Iranpour @rajat693 @Sanchitv3 @pigasoo