react-native-photos-gallery
Version:
A React Native animated custom photo gallery component
77 lines • 2.38 kB
JavaScript
import { useEffect, useState } from 'react';
import { interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
import { Constants } from '../../../constants';
const usePhotoGallery = ({ animationCloseSpeed, }) => {
const [origin, setOrigin] = useState({
width: 0,
height: 0,
x: 0,
y: 0,
});
const [selectedItem, setSelectedItem] = useState({
id: 0,
source: 0,
});
const layoutValue = useSharedValue(0);
const [indexValue, setIndexValue] = useState(0);
const [visible, setVisible] = useState(false);
/**
* The modal is opened using this method.
* @param values - Measured co-ordinate values of animated view
* @param item - of ArrayData for which modal is opened
* @param index - of ArrayData for which modal is opened
*/
const onOpen = (values, item, index) => {
setSelectedItem(item);
setIndexValue(index);
setOrigin({
width: values.width,
height: values.height,
x: values.pageX,
y: values.pageY,
});
setVisible(true);
};
/**
* Screen layout opacity will change when the value of visible changes.
*/
useEffect(() => {
visible &&
(layoutValue.value = withTiming(1, {
duration: animationCloseSpeed !== null && animationCloseSpeed !== void 0 ? animationCloseSpeed : 0 + Constants.animationCloseSpeedMargin,
}));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [visible]);
/**
* Screen layout animation style
*/
const layoutStyle = useAnimatedStyle(() => {
const opacity = interpolate(layoutValue.value, [0, 0.5, 1], [1, 0.5, 0]);
return {
opacity: opacity,
};
});
/**
* The modal is closed using this method.
*/
const onClose = () => {
layoutValue.value = withTiming(0, {
duration: animationCloseSpeed,
}, () => {
runOnJS(setVisible)(false);
});
};
return {
origin,
indexValue,
selectedItem,
onOpen,
layoutStyle,
onClose,
visible,
setSelectedItem,
setIndexValue,
};
};
export default usePhotoGallery;
//# sourceMappingURL=usePhotoGallery.js.map