Scrolling with ScrollView component

[morrigan]

Hi,

I am not sure whose issue is this but this example is my starting point so I am asking here. The problem is that scroll within ScrollView component doesn't work when using NavigationCardStack or NavigationTransitioner.

Anyone else using this or has any ideas?

[jlyman]

Code snippet?

Also, make sure that you have flex: 1 set on your ScrollView component and all parent components up the chain from it. Missing one causes ScrollViews to not know their height and stop working.

[morrigan]

@jlyman For testing purposes I am using your code so just try using ScrollView instead of View in one of your screens for example FirstScreen.js.

EDIT: Seems like this issue appears only on Android.

[jlyman]

Hmm, can't seem to replicate this issue. Here's some scrolling that works just fine on Android for me:

import React, {PropTypes} from 'react'
import {ScrollView, Text, StyleSheet} from 'react-native'

import NavButton from './NavButton'

const FirstScreen = (props) => {
    return (
        <ScrollView style={styles.container} contentContainerStyle={styles.scrollContainer}>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>
            <Text style={styles.title}>First Screen</Text>

            <NavButton destLabel="Second" buttonHandler={props.onButtonPress} />
        </ScrollView>
    )
}

FirstScreen.propTypes = {
    onButtonPress: PropTypes.func.isRequired
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#2F9CB2'
    },
    scrollContainer: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    title: {
        fontSize: 24,
        fontWeight: '500',
        color: '#ffffff',
        marginBottom: 30
    }
})

export default FirstScreen

Note you'll want to add some margin on the top to make sure things don't get hidden behind the nav bar, but I didn't do that in this app because it isn't meant to be a skeleton or boilerplate that covers all bases, just a simple example of how to combine Redux and NavExp.

Is there any more particular issue than the above that you are seeing?

[morrigan]

I guess we can close this, the issue was never with this example. Thanks for testing!