Scroll horizontal and vertical with ScrollViews in React Native

Question

I try to implement a horizontal AND vertical Scrolling like the following:

The horizontal scrolling shows featured content as images (should be clickable). The vertical scrolling has other clickable items.

My first attempt was to use two ScrollViews both with position absolute, but the horizontal ScrollView consumes all touch events (even after adding pointerEvents={"box-none"}).

That is what I tried in that case:

import React, { Component } from "react";
import { Dimensions, ScrollView, Text, StyleSheet, View } from "react-native";
const DimensionsWindowWidth = Dimensions.get("window").width;

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <ScrollView horizontal={true} style={styles.scrollView}>
                    <View style={styles.slide}>
                        <Text>H1</Text>
                    </View>
                    <View style={styles.slide}>
                        <Text>H2</Text>
                    </View>
                    <View style={styles.slide}>
                        <Text>H3</Text>
                    </View>
                </ScrollView>
                <ScrollView pointerEvents={"box-none"} style={styles.scrollView}>
                    <View style={styles.item}>
                        <Text>V1</Text>
                    </View>
                    <View style={styles.item}>
                        <Text>V2</Text>
                    </View>
                    <View style={styles.item}>
                        <Text>V3</Text>
                    </View>
                    <View style={styles.item}>
                        <Text>V4</Text>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    slide: {
        padding: 100,
        width: DimensionsWindowWidth,
        height: "100%"
    },
    scrollView: {
        position: "absolute",
        width: "100%",
        height: "100%"
    },
    item: {
        margin: 40,
        height: 100
    }
});

(Also as snack: https://snack.expo.io/Hyb7x-qQQ)

My second try was to use a PanResponder and in onPanResponderMove methods to use the ScrollViews scrollTo method. But then it seems I have to implement all the ScrollView special like smooth scrolling and bounce back on my own.

Any ideas how I could solve this while having both, the background in horizontal and the items in vertical scrolling clickable?

where you able to this in pure JS?

Gianfranco P
– Gianfranco P

2018-10-12 09:42:55 +00:00
Commented Oct 12, 2018 at 9:42 — Gianfranco P
– Gianfranco P, Commented Oct 12, 2018 at 9:42

Luís Mestre · Accepted Answer · 2021-06-08 15:43:41Z

Here I can scroll both vertically and horizontally. I tested it for android.

import React, { Component } from "react";
import { List, ListItem, Text } from "native-base";
import { View, ScrollView } from "react-native";

class Table extends Component {
    render() {
        return (
            <View>
                <ScrollView>
                <ScrollView horizontal={true}>
                    <List>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                        <Text>COMEDY </Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    <ListItem>
                        <Text>COMEDY :</Text>
                        <Text>Hangover </Text>
                    </ListItem>
                    </List>
                </ScrollView>
                </ScrollView>
            </View>
        );
    }
}

export default Table;

Sait Banazili · Accepted Answer · 2018-07-16 14:52:43Z

4

In IOS you can simply use nested ScrollView's for such behaviour but in Android you will need something else.

Take a look at react-native-nested-scroll-view which claims to do that only for Android. I haven't used it but seems like it uses the native NestedScrollView class.

answered Jul 16, 2018 at 14:52

Sait Banazili

1,3632 gold badges12 silver badges27 bronze badges

Comments

Ali Zeynalov · Accepted Answer · 2018-07-16 15:44:51Z

3

here is how I implement vertical and horizontal scrolling in my app for my Grid Table. It works fine for my on both IOS and ANDROID. I hope it will be helpful for you.

 import {Dimensions, AsyncStorage,View,Image, TextInput,ScrollView,FlatList, Platform} from 'react-native';

const {width, height} = Dimensions.get("window"),
    vw = width / 100
vh = height / 100


styles={
    parentScrollViewStyle: {
        height: height-300,
        borderWidth: 1,
        borderColor: '#D3D3D3'
    },
    childScrollViewStyle: {
        borderWidth: 1,
        borderColor: '#D3D3D3'
    },
    gridStyle: {
        width: '100%',
        marginTop: 20
    }
}




<Grid style={styles.gridStyle} >

    <ScrollView style={styles.parentScrollViewStyle}>
        <ScrollView horizontal={true}  contentContainerStyle={styles.childScrollViewStyle}>

         //here your child views to render.

        </ScrollView>
    </ScrollView>
</Grid>

edited Jul 16, 2018 at 15:44

answered Jul 16, 2018 at 15:31

Ali Zeynalov

3,0488 gold badges35 silver badges54 bronze badges

1 Comment

Hassan jan Over a year ago

from where you import the Grid

Austin Poulson · Accepted Answer · 2023-02-14 16:51:51Z

1

Here's a simplified set of code based on the other answers here. All you need is nested scrollviews, with the inner one set to horizontal.

<ScrollView>
<ScrollView horizontal={true}>
  //content
</ScrollView>
</ScrollView>

answered Feb 14, 2023 at 16:51

Austin Poulson

9219 silver badges27 bronze badges

Collectives™ on Stack Overflow

Scroll horizontal and vertical with ScrollViews in React Native

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related