ScrollView: View is not scrolling

[nomartin]

Environment

1. react-native -v: react-native-cli: 2.0.1 react-native: 0.52.2

2. npm ls rnpm-plugin-windows: rnpm-plugin-windows@0.2.8

3. npm ls react-native-windows: react-native-windows@0.52.0-rc.0

4. node -v: v9.4.0

5. npm -v: 5.6.0

6. yarn --version: N/A

Then, specify:

• Target Platform: UWP
• Target Platform Version(s): 10.0.14393
• Target Device(s): Desktop
• Development Operating System: Windows
• Visual Studio Version: 2017

Steps to Reproduce

1. Clone Repo (below)
2. Restore package: npm install
3. Run App: react-native start & react-native run-windows
4. Try to scroll the window

Expected Behavior

Expected to click on list and scroll up/down

Actual Behavior

Window does not scroll.

Reproducible Demo

https://github.com/nomartin/rnScrollViewTest

[npmun]

I am also experiencing exact issue. Any update?

[nomartin]

@npmun I was able to get scrolling to work by adding {{ flex: 1}} on the root element (in a different project).

 const App = () => (
   <View style={{ flex: 1 }}>
     <Header text="Auth Test" />
     <ProviderList />
   </View>
 );

I haven't had a chance to check this test repo again.

[npmun]

@nomartin Thanks for your response. Your solution seems to work on your test repo. However, It did not fix the issue in my project. ScrollView component in my project is part of React Navigations's DrawerNavigator. Not sure if that was the reason for the issue, will do more testing tomorrow. But the issue does not happen on Android.

[npmun]

As I stated in my previous message, My component does seem to work when I move it outside DrawerNavigator. But it does not work when it is part of DrawerNavigator. I created a simple case using the code in test repo to demonstrate this issue... `import React from "react"; import {DrawerNavigator} from "react-navigation"; import {Button, ScrollView, StyleSheet, Text, View} from "react-native";

class MyHomeScreen extends React.Component {

static navigationOptions = {
    drawerLabel: 'Home',

};
state = {
    names: [
        {'name': 'Ben', 'id': 1},
        {'name': 'Susan', 'id': 2},
        {'name': 'Robert', 'id': 3},
        {'name': 'Mary', 'id': 4},
        {'name': 'Daniel', 'id': 5},
        {'name': 'Laura', 'id': 6},
        {'name': 'John', 'id': 7},
        {'name': 'Debra', 'id': 8},
        {'name': 'Aron', 'id': 9},
        {'name': 'Ann', 'id': 10},
        {'name': 'Steve', 'id': 11},
        {'name': 'Olivia', 'id': 12}
    ]
}
render() {
    return (
        <View style={{flex:1}}>
            <ScrollView>
                {
                    this.state.names.map((item, index) => (
                        <View key = {item.id} style = {styles.item}>
                            <Text>{item.name}</Text>
                        </View>
                    ))
                }
            </ScrollView>
        </View>
    )
}

}

const styles = StyleSheet.create ({ item: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 30, margin: 2, borderColor: '#2a4944', borderWidth: 1, backgroundColor: '#d2f7f1' } })

class MyNotificationsScreen extends React.Component { static navigationOptions = { drawerLabel: 'Notifications',

};

render() {
    return (
        <Button
            onPress={() => this.props.navigation.goBack()}
            title="Go back home"
        />
    );
}

}

export default MyApp = DrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, });`

[octaviantu]

@npmun did you finally found a solution to your problem?

[rozele]

I suspect this bug is related to Yoga. I'm going to merge the latest from Yoga soon, hopefully that will fix the issue.

[npmun]

@rozele Thanks for the update. Looking forward to your fix for this issue.

[npmun]

@rozele I have tried with 54.* version, unfortunately, the issue still exists. Here are the exact versions that I have tried... "dependencies": { "react": "16.3.0-alpha.1", "react-native": "0.54.2", "react-native-windows": "0.54.0-rc.1", "react-navigation": "^1.5.8" }

[el173]

Issue is still there same dependencies like above

[el173]

I think there is an issue with DrawerNavigator

[npmun]

@rozele Did you get a chance to see what could be causing this issue? Please let me know if you think I should be reporting this to react-navigation team. This one is a major blocker for me.

[qcobber]

I think I know what the problem is generated. In react-navigation used package -> react-native-drawer-layout-polyfill -> react-native-drawer-layout Because the main view zIndex is set to 0 and the auxiliary view zIndex is larger than it, so it does not receive events. change const styles = StyleSheet.create({ drawer: { position: 'absolute', top: 0, bottom: 0, zIndex: 1001, }, main: { flex: 1, zIndex: 0, }, ... }); to const styles = StyleSheet.create({ drawer: { position: 'absolute', top: 0, bottom: 0, zIndex: 1001, }, main: { flex: 1, zIndex: Platform.OS === 'windows' ? 1001 : 0, }, ... });

[npmun]

@qcobber, thanks for the information. that did resolve the issue. However, it introduced a new issue where the overlay does not show up. any thoughts?

[npmun]

I think #1889 is a duplicate of this one.

[qcobber]

@npmun The problem should be that react-native-windows does not support pointerEvents. Can try react-native-drawer-layout#47, we can use the drawerShown to control the overlay.

[npmun]

@qcobber thanks for your help. This seems to work.

[paulbx81]

@qcobber THX my picker element work now thx a lot !

[rozele]

I believe this is related to https://github.com/Microsoft/react-native-windows/issues/1889. Please see suggestion in that issue for workaround.