5

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;
David Vittori
  • 1,146
  • 1
  • 13
  • 30
gamer
  • 5,673
  • 13
  • 58
  • 91
  • Hey, share 'Header' component code.. – Jickson May 26 '16 at 07:45
  • @Jickson I have added the Header component – gamer May 26 '16 at 08:07
  • Hey, I tried your code.. Its working here. Issue is in some other component i guess.. – Jickson May 26 '16 at 08:10
  • @Jickson I have only 2 component out there header and levellist.... You tried on emulator ?? – gamer May 26 '16 at 08:14
  • Yes. I have tried on Android emulator.. – Jickson May 26 '16 at 08:15
  • @Jickson I figured out the issue but no solution. In my home page it is working.. the same component but after routing in the routed page scroll view is not working.. Not only scroll component touch opacity is also not working.. It works only on home page i.e to the page not being routed to anywhere – gamer May 26 '16 at 08:49
  • Ok.. Update the question with new issue and code related to that issue. Hopefully I will be able to help you – Jickson May 26 '16 at 08:51
  • @Jickson I have created new question for the issue.. http://stackoverflow.com/questions/37456641/react-native-scroll-view-do-not-work-after-routing-from-react-native-router-redu you can check it – gamer May 26 '16 at 09:23

2 Answers2

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.

Akif
  • 7,098
  • 7
  • 27
  • 53
Emre SOLUĞAN
  • 193
  • 1
  • 12
0

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

<ScrollView style={{ 

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

    }}>
       ///
    </ScrollView>
Heritier Mbumba
  • 1
  • 2