react native android scroll view not working

Question

I have a react native component like:

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

import Level from './Level';

class LevelList extends Component {
    render() {

        return (
            <ScrollView style={styles.scrollView} >
                <View style={styles.levelList}>
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                    <Level />
                </View>
            </ScrollView>
        )
    }
}

var styles = StyleSheet.create({
    scrollView: {
    backgroundColor: '#fff',
    flex: 1,
    },
    levelList: {
        marginTop: 50,
        flexDirection:'column',
        alignItems: 'center',
    },

})

export default LevelList;

Here <Level> is simply a component that holds a text.

I have <LevelList> in my container like:

class LevelListView extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <Header />
                <LevelList />
            </View>
        )
    }
}

export default LevelListView

Here I get a scrollbar in the side of my list but it does not get scrolled. What am I missing here ?

I am running the app in emulator:

Update:

import React, { Component } from 'react';

import { StyleSheet, Text, View } from 'react-native';

class Header extends Component {
    render() {
        return (
            <View style={styles.toolbar}>
                <Text style={styles.toolbarBack}>Back</Text>
                <Text style={styles.toolbarTitle}>Levels</Text>
            </View>
        )
    }
}

var styles = StyleSheet.create({
    toolbar:{
        backgroundColor:'#00bcd4',
        paddingTop:10,
        paddingBottom:10,
        flexDirection:'row'
    },
    toolbarTitle:{
        color:'#fff',
        textAlign:'center',
        fontSize:20,
        fontWeight:'bold',
        marginRight: 30,
        flex:1
    },
    toolbarBack: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        marginTop: 4,
        marginLeft: 10,
    }
})

export default Header;

Hey, I tried your code.. Its working here. Issue is in some other component i guess.. — Jickson
– Jickson, Commented May 26, 2016 at 8:10
@Jickson I have only 2 component out there header and levellist.... You tried on emulator ?? — gamer
– gamer, Commented May 26, 2016 at 8:14

Akif · Accepted Answer · 2020-12-09 21:02:39Z

4

I had the same problem and tried everything on the internet like flex:1 solutions... But the problem is, Android is not letting you use nested scroll with scrollview. I just put:

nestedScrollEnabled={true}

Command to my scrollview object and it worked like a charm.

edited Dec 9, 2020 at 21:02

Akif

7,6687 gold badges33 silver badges62 bronze badges

answered Nov 8, 2019 at 13:59

Emre SOLUĞAN

2032 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Heritier Mbumba · Accepted Answer · 2020-01-23 11:49:01Z

0

I had the similar problem but I resolved it by doing this:

<ScrollView style={{ 

    height:Dimensions.get('screen').height

    }}>
       ///
    </ScrollView>

answered Jan 23, 2020 at 11:49

Heritier Mbumba

12 bronze badges

Collectives™ on Stack Overflow

react native android scroll view not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related