Group and FlatList - Githubissues

Current Behavior

Right now, I'd expect to have the same behaviour when using groups with or without FlatList. Let's have a look.

Standard Group usage produce the following UI:

This is the code:

<YGroup separator={<Separator />}>
  <YGroup.Item>
    <ListItem title="First" />
  </YGroup.Item>
  <YGroup.Item>
    <ListItem title="Second" subTitle="Second subtitle" />
  </YGroup.Item>
  <YGroup.Item>
    <ListItem>Third</ListItem>
  </YGroup.Item>
</YGroup>

FlatList Group usage produces the following UI:

This is the code

<YGroup separator={<Separator />}>
    <FlatList
      data={[1, 2, 3]}
      renderItem={(item) => {
        return (
          <YGroup.Item>
            <ListItem title={item.toString()} subTitle="Second subtitle" />
          </YGroup.Item>
        );
      }}
    />
</YGroup>

Clearly the problem lies in some additional wrapper flatlists puts there. If this is a limitation or I need to usee some advanced tamagui stuff, better write it in the documentation probably.

Expected Behavior

The two snippets should behave the same.

Tamagui Version

1.99.1

Platform (Web, iOS, Android)

iOS

Reproduction

<YGroup separator={<Separator />}>
    <FlatList
      data={[1, 2, 3]}
      renderItem={(item) => {
        return (
          <YGroup.Item>
            <ListItem title={item.toString()} subTitle="Second subtitle" />
          </YGroup.Item>
        );
      }}
    />
</YGroup>

System Info

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 80.41 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.0.5 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
    Watchman: 2024.01.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 120.0.6099.216
    Safari: 17.5
  npmPackages:
    @babel/core: ^7.20.0 => 7.24.6 
    @expo/vector-icons: ^14.0.0 => 14.0.2 
    @react-navigation/native: ^6.0.2 => 6.1.17 
    @tamagui/config: ^1.99.1 => 1.99.1 
    @tamagui/lucide-icons: ^1.99.1 => 1.99.1 
    @tanstack/react-query: ^5.40.0 => 5.40.0 
    @types/jest: ^29.5.12 => 29.5.12 
    @types/react: ~18.2.45 => 18.2.79 
    @types/react-test-renderer: ^18.0.7 => 18.3.0 
    axios: ^1.7.2 => 1.7.2 
    expo: ~51.0.9 => 51.0.9 
    expo-auth-session: ~5.5.2 => 5.5.2 
    expo-constants: ~16.0.2 => 16.0.2 
    expo-crypto: ~13.0.2 => 13.0.2 
    expo-font: ~12.0.6 => 12.0.6 
    expo-linking: ~6.3.1 => 6.3.1 
    expo-router: ~3.5.14 => 3.5.14 
    expo-secure-store: ~13.0.1 => 13.0.1 
    expo-splash-screen: ~0.27.4 => 0.27.4 
    expo-status-bar: ~1.12.1 => 1.12.1 
    expo-system-ui: ~3.0.4 => 3.0.4 
    expo-web-browser: ~13.0.3 => 13.0.3 
    jest: ^29.2.1 => 29.7.0 
    jest-expo: ~51.0.1 => 51.0.2 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-native: 0.74.1 => 0.74.1 
    react-native-gesture-handler: ~2.16.1 => 2.16.2 
    react-native-reanimated: ~3.10.1 => 3.10.1 
    react-native-safe-area-context: 4.10.1 => 4.10.1 
    react-native-screens: 3.31.1 => 3.31.1 
    react-native-svg: ^15.3.0 => 15.3.0 
    react-native-web: ~0.19.10 => 0.19.12 
    react-test-renderer: 18.2.0 => 18.2.0 
    tamagui: ^1.99.1 => 1.99.1 
    typescript: ~5.3.3 => 5.3.3

tamagui / tamagui

Group and FlatList #2700