nandorojo / galeria

The React (Native) Image Viewer. 📷
168 stars 9 forks source link

Not able to get it to work :( #6

Closed TowhidKashem closed 3 months ago

TowhidKashem commented 3 months ago

Hey Fernando!

I've been searching for a native lib like this for a long time, it has everything I need but unfortunately I couldn't get it to work. I followed the examples and every time I end up with just an image on the screen. If I press it nothing happens, no popup or anything. All I did was install the package and rebuilt the app via EAS, do I need to do some additional setup step that I'm missing?

  import { Image } from 'expo-image';
  import { Galeria } from '@nandorojo/galeria';

  const url = 'https://i.imgur.com/gZc0oeO.png',

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'red',
        borderStyle: 'solid',
        borderWidth: 1
      }}
    >
      <Galeria urls={[url]} theme="light">
        <Galeria.Image>
          <Image
            source={{ uri: url }}
            style={{
              width: 300,
              height: 300
            }}
          />
        </Galeria.Image>
      </Galeria>
    </View>
  );

This is on a Expo SDK 51 managed workflow with a dev client.

nandorojo commented 3 months ago

hey, weird. i’ll take a look, might be a version thing. not new arch right?

TowhidKashem commented 3 months ago

hey, weird. i’ll take a look, might be a version thing. not new arch right?

Yep old arch, thanks!

TowhidKashem commented 3 months ago

hey, weird. i’ll take a look, might be a version thing. not new arch right?

Hey @nandorojo any update on this? :)

nandorojo commented 3 months ago

hey remind me the platform? just checked the example app and it worked for me

TowhidKashem commented 3 months ago

hey remind me the platform? just checked the example app and it worked for me

ok this is weird, I finally got it to work randomly but it looks very different from what the instructions say:

Single:

    <Galeria>
      <Galeria.Image
        src={urls[0]}
        style={{
          width: 300,
          height: 300
        }}
      />
    </Galeria>
Multiple:
   <Galeria urls={urls}>
        <FlashList
          data={urls}
          renderItem={({ item, index }) => {
            return (
              <Galeria.Image
                src={urls[index]}
                index={index}
                recyclingKey={item + index}
                style={{
                  width: IMAGE_SIZE,
                  height: IMAGE_SIZE
                }}
              />
            );
          }}
          numColumns={3}
          estimatedItemSize={IMAGE_SIZE}
          keyExtractor={(item, i) => item + i}
        />
      </Galeria>

So not using any additional image component and using the src prop directly on the Galeria.Image tag instead. And for the single version not using a urls prop on the Galeria wrapper doesn't seem to matter, works without it too.

Anyway I'll close the bug,I'll let u decide if the instructions should be updated or not. Really weird that the demo is working but if no one else complained it might be some weird case with me 🤷