pavelbabenko / react-native-awesome-gallery

Performant, native-like, and well-customizable gallery for React Native.
MIT License
494 stars 54 forks source link

feat: add containerDimensions prop #2

Closed vonovak closed 3 years ago

vonovak commented 3 years ago

hello, thanks for fixing the android support. I've had an issue with images in the gallery not being centered properly when using react-navigation because the lib currently assumes that the gallery is full-screen which may not always be the case.

For example, I'm using react navigation, and presenting the gallery in a screen with a header. That means the images have a little less vertical space, and I need to subtract the header height from the total window height.

Adding a new optional prop allows consumers to provide whichever values they need.

tested with this code:

import AwesomeGallery from "react-native-awesome-gallery";
import { useHeaderHeight } from "@react-navigation/stack";
...

const { width, height } = useWindowDimensions();
const headerHeight = useHeaderHeight();

return (
    <AwesomeGallery
        data={imageUrls}
        initialIndex={index}
        renderItem={renderImage}
        containerDimensions={{ width, height: height - headerHeight }}
    />
);
before ![IMG_0119](https://user-images.githubusercontent.com/1566403/111315821-08a75380-8663-11eb-8c05-3f8946095af2.PNG)
after ![IMG_0120](https://user-images.githubusercontent.com/1566403/111315874-13fa7f00-8663-11eb-83dc-b4b910965ba8.PNG)

In a separate commit I also added lockfiles because they should be present in the repo.

Hope this makes sense,

Thanks!

pavelbabenko commented 3 years ago

Hi @vonovak

Adding containerDimensions was in my TODO, but thank you for your PR =) I had issues with more exotic container dimensions (e.g when height < width) but for react-navigation example it works so I'm merging it