Making an Image scrollable in React Native

672 Views Asked by At

I'm creating an app using react native (expo) and I need to show a really tall image inside a scrollview, where a back button hovers on the top at all times.

Super tall image (denoted by purple) and the hovering back button Super tall image (denoted by purple) and the hovering back button

My goal is to be able to scroll vertically to see the rest of the image (clipped by the viewport) where the back button stays at the fixed position. I used ImageBackground inside a ScrollView to host both the image and the back button.

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        backgroundColor: "transparent"
    },
    scrollView: {
        flex: 1
    },
    imageBackground: {
        flex: 1
    },
    container: {
        flex: 1,
        flexDirection: "column",
        justifyContent: "space-between",
        paddingHorizontal: 16,
        paddingVertical: scaleVertical(24),
        backgroundColor: "transparent"
    },
    backButtonView: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 0,
        paddingRight: 10
    },
    backButtonIcon: {
        height: 470 * 0.085,
        width: 470 * 0.085,
        resizeMode: "contain"
    }
});

export class ImageScreenComponent extends React.Component {
    static navigationOptions = {
        header: null
    };

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View
                behavior="position"
                style={styles.screen}
                onStartShouldSetResponder={e => true}
                onResponderRelease={e => Keyboard.dismiss()}
            >
                <StatusBar hidden={true} />
                <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollView}>
                    <ImageBackground
                        source={this.props.backgroundImage}
                        resizeMode="center"
                        style={styles.imageBackground}
                    >
                        <View style={styles.container}>
                            <TouchableOpacity style={styles.backButtonView} onPress={this.props._goBackFunc}>
                                <Image style={styles.backButtonIcon} source={backIcon} />
                            </TouchableOpacity>
                        </View>
                    </ImageBackground>
                </ScrollView>
            </View>
        );
    }
}

With the above implementation, even though the image is displayed at full screen, I can't scroll the image as desired. Any help on this regard is much appreciated!

0

There are 0 best solutions below