3

In my ReactNative App i have a FlatList shows availability of a service as a timeline. While implementing this, only a part of scrollview is visible on screen. How to set an arrow indicator to make users aware that this view is a scrollview and more content is there to scroll.

FlatList is as shown in this picture. Here content after 4am is invisible and User is unaware that there is more content to scroll

1 Answer 1

0

I achieved this by adding tow more views along with FlatList. I added linear gradient view, starting from white color to partially transparent white color, before the flatlist. Also a flipped view of the same at the ending of flatlist. fir linear gradient i used react-native-linear-gradient.

final render looks like

<View style={{ flexDirection: 'row' }}>

    <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        colors={["#FFFFFF00", "#FFFFFFFF"]}
        style={{
            height: "100%",
            width: 32,
        }}
    />

    <FlatList
        data={this.state.timeSlotes}
        renderItem={({ item, index }) => {
            return <TimeSloteItem data={item} />;
        }} />

    <LinearGradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        colors={["#FFFFFF", "#FFFFFF00"]}
        style={{
            height: "100%",
            width: 32,
        }}
    />
</View>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.