postillonmedia / react-native-instagram-zoomable

A component to implement the Instagram Zoom-Draggable-Effect for any component in React-Native
MIT License
7 stars 13 forks source link

Example #1

Closed pontusab closed 6 years ago

pontusab commented 6 years ago

I will try this out, but did not find any examples, do you have one or should I fix one?

Thanks

danielang commented 6 years ago

Hey @pontusab,
thank you for your interest 🙂 We are currently in app-release-stress and currently working on document all our packages.
Here I've done a basic example for you: https://snack.expo.io/@danielang/react-native-instagram-zoomable

To the InstagramProvideryou can add an additional renderBackground-prop as a function. This is the default implementation:

/**
 * Default implementation which renders a background, when you zoom an Element.
 * @param selected The currently zoomed element
 * @param scaleValue The current scale value
 * @param gesturePosition The gesturePosition
 * @returns {*}
 */
renderBackground = (selected, scaleValue, gesturePosition) => {
    let backgroundOpacityValue = scaleValue.interpolate({
        inputRange: [1.2, 3],
        outputRange: [0, 0.6],
    });

    return (
        <Animated.View
            style={[
                styles.background,
                {
                    opacity: backgroundOpacityValue,
                },
            ]}
        />
    );
};
pontusab commented 6 years ago

@danielang thanks!