Can't scroll on web

[ghost]

On web, if you have many items, say 20, it doesn't show all of them and you can't scroll. Is it possible to add a scrollview to the actionsheet for web?

[bradbyte]

Sorry for the delay. iOS and Android seem to support this, so I could see this being added to web too.

[OneHatRepo]

Running into this too!

[hmhobbs]

For anyone else that runs into this, the action sheet does scroll, it just needs a little convincing.

Give the root node wrapped by ActionSheetProvider a maximum height so it doesn't extend past the bottom of the screen. This is important because the action sheet has a position of absolute, so without a max height it will display at the bottom of the content which may be below the viewport.

<ActionSheetProvider>
   <SafeAreaView style={styles.container}>
      {
         // The rest of your app
      }
   </SafeAreaView>
</ActionSheetProvider>
...
const maxHeight = Platform.OS === 'web' ? '100vh' : '100%'
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    maxHeight
  }
});

Second, give the actionSheet a containerStyle that limits its height.

showActionSheetWithOptions({
    options,
    containerStyle: {maxHeight: 500},
})

The action sheet has a ScrollView wrapping the options, so with these changes you should be able to scroll on web.

Here's a demo: https://snack.expo.dev/@hmhobbs/action-sheet-maxheight