React Native - How to detect view screen is scrollable?

Question

Main Question : how to keep scrollbar of ScrollView visible?

and this question isn't answered my question

similar question : How can i detect if a content of view height is higher than device height? so i can setState if the screen is scrollable

I have tried using onLayout with this code:

<View onLayout={(event)=>{var {x, y, width, height}=event.nativeEvent.layout}}>
  //Long Content higher than device height
</View>

but I got the height of view in device screen and not the height of a content itself

Is there a way to answering my question?

maybe this solution help u https://stackoverflow.com/a/41398953/2083099 — Nima, Oct 12 '18 at 06:46
@Nima I've used the highest upvote of your link given, but like i said, `onLayout` itself just show the height of device screen, not a content — flix, Oct 12 '18 at 06:51

score 2 · Accepted Answer · edited Jul 16 '20 at 07:00

I dont know how to get height inside a View but inside ScrollView you can use onContentSizeChange.

import React, { Component } from "react";
import { View, Text, StyleSheet, Dimensions, ScrollView, Image } from "react-native";

const images =
    [
        { image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },
        { image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },
        { image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' },
        { image: 'https://www.lens-rumors.com/wp-content/uploads/2014/10/Nikon-AF-S-DX-Nikkor-18-140mm-f3.5-5.6G-ED-VR-sample-images1.jpg', text: 'hello' }];

class Test extends Component {
    find_dimesions(width,height) {
        const deviceHeight = Dimensions.get("window").height;
        const deviceWidth = Dimensions.get("window").width;
        console.log(" view width:" + width + "  " + "view height:" + height);
        console.log(
            "device width:" + deviceWidth + "  " + " device height:" + deviceHeight
        );
    }

    render() {
        return (
            <ScrollView
            onContentSizeChange={(width, height) => {
                this.find_dimesions(width,height)
              }}
                style={styles.container}
            >
                {images.map((data, index) => {
                   return <View key={index} style={{ flex: 1 }}>
                        <Image style={{height:200,width:200}} source={{ uri: data.image }} />
                    </View>
                })}
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        // justifyContent: "center",
        // alignItems: "center",
        backgroundColor: "#F5FCFF",
        
    }
});

export default Test;

did you know what's my question? >How can i detect if a content of view height is higher than device height? changing `height` of `view` lower than `height` of devices doesn't make sense — flix, Oct 12 '18 at 07:36
as I said the updated code you can use onContentSizeChange() for scrollView based on this https://stackoverflow.com/a/36736197/2083099 — Nima, Oct 12 '18 at 07:54
it's better than last updated, i can mix your code with mine to make it works — flix, Oct 12 '18 at 08:26

React Native - How to detect view screen is scrollable?

1 Answers1