Scroll not working on web

[deelo55]

I'm trying to render the examples using Expo on web and the table doesnt scroll. Any advice?

[dosubot]

To address the scrolling issue on the web with your Expo project, focus on the configuration of your ScrollView components, especially around the table content. Here are the key points to ensure both horizontal and vertical scrolling work as expected:

1. Define Height for Inner ScrollView: The ScrollView that enables vertical scrolling around your table must have a defined height. Without it, the component might attempt to render all content at once, eliminating the need to scroll. You can set a fixed height directly or use flex properties to allow it to expand based on its parent container's size.

2. Check for Conflicting Styles or Props: Make sure there are no styles or props that inadvertently prevent scrolling. This includes fixed heights on scrollable elements or ScrollView props that disable scrolling.

For the vertical scrolling issue, explicitly setting a height for the ScrollView wrapping your Table component is crucial. If a fixed height isn't suitable due to varying content sizes, consider using flex properties or dynamically calculating the height based on the screen size or parent container's dimensions.

Here's an example adjustment for your dataWrapper style:

dataWrapper: {
  marginTop: -1,
  height: 300, // Or use flex: 1 for dynamic sizing
},

Adjust the height or flex value as needed, based on your layout and design requirements. This approach should help ensure that your table content scrolls as expected on the web.

Sources

• example/src/App.tsx
• example/package.json

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.