akveo / react-native-ui-kitten

:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/react-native-ui-kitten/
MIT License
10.3k stars 952 forks source link

Android only - ScrollView within a Popover does not scroll. #1271

Closed robinheinze closed 3 years ago

robinheinze commented 3 years ago

🐛 Bug Report

We have a ScrollView within a Popover. On iOS it responds to scroll gestures as expected, but on Android scrolling does not work at all.

To Reproduce

  1. Add this component to a blank screen:
export const PopoverSimpleUsageShowcase = () => {
  const [visible, setVisible] = React.useState(false);

  const renderToggleButton = () => (
    <Button onPress={() => setVisible(true)}>TOGGLE POPOVER</Button>
  );

  return (
    <Popover
      visible={visible}
      anchor={renderToggleButton}
      onBackdropPress={() => setVisible(false)}>
      <ScrollView contentContainerStyle={popoverStyles.content}>
        {[...new Array(100)].map((item, index) => (
          <Text key={index}>{`${index}. Welcome to UI Kitten 😻`}</Text>
        ))}
      </ScrollView>
    </Popover>
  );
};

const popoverStyles = StyleSheet.create({
  content: {
    alignItems: 'center',
    paddingHorizontal: 4,
    paddingVertical: 8,
  },
  avatar: {
    marginHorizontal: 4,
  },
});
  1. Run on Android and toggle the list open.
  2. Attempt to swipe vertically to scroll the list.

Expected behavior

When a ScrollView is placed within a Popover, scrolling is possible.

Link to runnable example or repository (highly encouraged)

App with minimal repro: https://github.com/robinheinze/PopoverDemo

popover-scrolling-demo

UI Kitten and Eva version

Package Version
@eva-design/eva "^2.0.0"
@ui-kitten/components "^5.0.0"

Environment information

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 13.12.0 - ~/.nvm/versions/node/v13.12.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.12.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 30.0.0
      System Images: android-28 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: 0.63.3 => 0.63.3
whitestranger7 commented 3 years ago

Hey, @robinheinze. It's happens because you don't provide height for the ScrollView. Since Popover used absolute position inside, please apply styles for ScrollView with provided height property. Use either constant value or calculate the value you need. Have a good time =)