LazyVerticalGrid and LazyColumn preview not working

[Angelk90]

Library Version

2.0.0-rc.2

React Native Version

0.85.3

React Version

19.2.3

Expo Version

56.0.5

Minimal Reproduction

I wanted to try using LazyVerticalGrid and LazyColumn, but when I test it in the preview I don't see anything, only the VoltraWidgetPreview is displayed.

import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
  VoltraWidgetPreview,
} from '@use-voltra/android-client';
import { VoltraAndroid } from '@use-voltra/android'

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <View style={styles.container}>
        <MyWidgetPreview />
      </View>
    </SafeAreaProvider>
  );
}

function MyWidgetPreview() {
  const letters = Array.from({ length: 11 }, (_, i) =>
    String.fromCharCode(65 + i)
  );
  return (
    <VoltraWidgetPreview
      family="extraLarge"
      style={{ backgroundColor: '#1557ff', borderRadius: 4 }}
    >
      <VoltraAndroid.LazyVerticalGrid
        columns={3}
        horizontalAlignment="center-horizontally"
        verticalAlignment="center"
        style={{
          padding: 6,
        }}
      >
        {letters.map((letter, index) => (
          <VoltraAndroid.Box
            key={letter}
            style={{
              backgroundColor: index % 2 === 0 ? "#ffffff" : "#000000",
              borderRadius: 4,
              width: 100,
              height: 100,
              margin: 5,
            }}
            contentAlignment="center"
          >
            <VoltraAndroid.Text
              style={{
                color: index % 2 === 0 ? "#000" : "#fff",
              }}
            >
              {letter}
            </VoltraAndroid.Text>
          </VoltraAndroid.Box>
        ))}
      </VoltraAndroid.LazyVerticalGrid>
    </VoltraWidgetPreview>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Additional Information (Optional)

No response

[V3RON]

Hey!

Unfortunately, preview for lazy components will not work. This is because they rely on the AppWidget context, which is missing in the Preview component. Bringing that context into the Preview component could introduce more issues than benefits 😢

I added a Components screen to the Android example app. For LazyColumn and LazyVerticalGrid, it displays a message explaining that they cannot be used with the Preview component.

During the investigation, I also found and fixed a couple of minor issues, which are included in the linked PR.

[Angelk90]

Could you post an example of how this works, based on the code above.

By Preview you mean what you see in the image above using VoltraWidgetPreview or the preview when you click the button and it shows you that preview.

[V3RON]

Preview -> VoltraWidgetPreview

As for a snippet - this one is for LazyVerticalGrid after #169:

      <VoltraAndroid.LazyVerticalGrid
        columns={{ type: 'adaptive', minSize: 125 }}
        horizontalAlignment="center-horizontally"
        style={{ width: '100%', height: '100%' }}
      >
        {GRID_ITEMS.map((item) => (
          <VoltraAndroid.Box
            key={item.label}
            style={{
              width: 52,
              height: 40,
              margin: 4,
              borderRadius: 10,
              backgroundColor: item.color,
            }}
            contentAlignment="center"
          >
            <VoltraAndroid.Text style={{ color: '#0F172A', fontSize: 16, fontWeight: '700' }}>
              {item.label}
            </VoltraAndroid.Text>
          </VoltraAndroid.Box>
        ))}
      </VoltraAndroid.LazyVerticalGrid>

[Angelk90]

@V3RON : I tested LazyVerticalGrid, but not having a preview is a problem because you have no idea exactly how things will turn out.

No warning appears in preview.

Example when it is at the minimum size in width, when the boxes collide they take a strange shape, see the video below.

If I set the number of columns to 3 it doesn't work.

<VoltraAndroid.LazyVerticalGrid
  columns={3}
>
  {/* items */}
</VoltraAndroid.LazyVerticalGrid>

Or

<VoltraAndroid.LazyVerticalGrid
  columns={{
    type: 'fixed',
    count: 3,
  }}
>
  {/* items */}
</VoltraAndroid.LazyVerticalGrid>

Code:

import React from 'react';
import { VoltraAndroid } from '@use-voltra/android';

export const Widget = ({ }) => {

  const letters = Array.from({ length: 26 }, (_, i) =>
    String.fromCharCode(65 + i)
  );

  return (
    <VoltraAndroid.LazyVerticalGrid
      columns={{ type: 'adaptive', minSize: 125 }}
      horizontalAlignment="center-horizontally"
      style={{ width: '100%', height: '100%' }}
    >
      {letters.map((letter, index) => (
        <VoltraAndroid.Column>
          <VoltraAndroid.Box
            key={letter}
            style={{
              width: 52,
              height: 40,
              margin: 4,
              borderRadius: 10,
              backgroundColor: index % 2 === 0 ? "#ffffff" : "#000000",
            }}
            contentAlignment="center"
          >
            <VoltraAndroid.Text style={{ color: index % 2 === 0 ? "#000" : "#fff", fontSize: 16, fontWeight: '700' }}>
              {letter}
            </VoltraAndroid.Text>
          </VoltraAndroid.Box>
          <VoltraAndroid.Spacer
            style={{
              height: 5,
            }}
          />
        </VoltraAndroid.Column>
      ))}
    </VoltraAndroid.LazyVerticalGrid>
  );
};

Here's a video:

Screen_Recording_20260603_192741_One.UI.Home.mp4