Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ScrollView: View is not scrolling #1617

Closed
nomartin opened this issue Feb 5, 2018 · 18 comments
Closed

ScrollView: View is not scrolling #1617

nomartin opened this issue Feb 5, 2018 · 18 comments

Comments

@nomartin
Copy link

nomartin commented Feb 5, 2018

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
Copy link

npmun commented Feb 11, 2018

I am also experiencing exact issue. Any update?

@nomartin
Copy link
Author

@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
Copy link

npmun commented Feb 13, 2018

@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
Copy link

npmun commented Feb 13, 2018

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
Copy link

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

@rozele
Copy link
Collaborator

rozele commented Feb 16, 2018

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
Copy link

npmun commented Feb 18, 2018

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

@npmun
Copy link

npmun commented Mar 17, 2018

@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
Copy link

el173 commented Mar 26, 2018

Issue is still there same dependencies like above

@el173
Copy link

el173 commented Apr 2, 2018

I think there is an issue with DrawerNavigator

@npmun
Copy link

npmun commented May 29, 2018

@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
Copy link

qcobber commented Jul 26, 2018

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
Copy link

npmun commented Jul 26, 2018

@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
Copy link

npmun commented Jul 26, 2018

I think #1889 is a duplicate of this one.

@qcobber
Copy link

qcobber commented Jul 27, 2018

@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
Copy link

npmun commented Jul 27, 2018

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

@paulbx81
Copy link

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

@rozele
Copy link
Collaborator

rozele commented Feb 26, 2019

I believe this is related to #1889. Please see suggestion in that issue for workaround.

@rozele rozele closed this as completed Feb 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants