Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Content of Container does not scrolling inside ScrollView

See original GitHub issue

I have gone through these following points

Check latest documentation: https://docs.nativebase.io/
Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink

Issue Description

Container content does not scroll if the container is inside a ScrollView

node, npm, react-native, react and native-base version, expo version if used, xcode version

"react": "16.6.0",
"react-native": "0.55.4",
"native-base": "2.8.1",

Steps to reproduce

return (
    <ScrollView>
      <CustomParallaxHeader />
      <Container>
        <Tabs>
          <Tab heading={<TabHeading style={styles.tabStyle}><Icon style={styles.tabIconStyle} name="list-box" /></TabHeading>}>
            <ScrollView style={{ flex: 1 }}>
              <List>
                <ListItem itemDivider>
                  <Text style={{ fontWeight: 'bold' }}>Brightwood Town</Text>
                </ListItem>
                <ListItem >
                  <Text>Lord Lonwald</Text>
                </ListItem>
                <ListItem itemDivider>
                  <Text>Brightwood Forest</Text>
                </ListItem>
                <ListItem>
                  <Text>Nathaniel Clyne</Text>
                </ListItem>
                <ListItem>
                  <Text>Dejan Lovren</Text>
                </ListItem>
                <ListItem itemDivider>
                  <Text>Brightwood Town</Text>
                </ListItem>
                <ListItem >
                  <Text>Lord Lonwald</Text>
                </ListItem>
                <ListItem itemDivider>
                  <Text>Brightwood Forest</Text>
                </ListItem>
                <ListItem>
                  <Text>Nathaniel Clyne</Text>
                </ListItem>
                <ListItem>
                  <Text>Dejan Lovren</Text>
                </ListItem>
                <ListItem itemDivider>
                  <Text>Brightwood Town</Text>
                </ListItem>
                <ListItem >
                  <Text>Lord Lonwald</Text>
                </ListItem>
                <ListItem itemDivider>
                  <Text>Brightwood Forest</Text>
                </ListItem>
                <ListItem>
                  <Text>Nathaniel Clyne</Text>
                </ListItem>
                <ListItem>
                  <Text>Dejan Lovren</Text>
                </ListItem>
              </List>
            </ScrollView>
          </Tab>
          <Tab heading={<TabHeading style={styles.tabStyle}><Icon style={styles.tabIconStyle} name="images" /></TabHeading>}>
            <View style={styles.container}>
              <Text>Tab 2</Text>
            </View>
          </Tab>
        </Tabs>
      </Container>
    </ScrollView>
  )

Is the bug present in both iOS and Android or in any one of them?

Both

Issue Analytics

State:
Created 5 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

suvenduchhatoicommented, Dec 24, 2018

@FranclisJunior Your code is actually working fine for the scroll of ScrollView inside of a Container…May be you are not getting the scrolling effect due to some other error…Check out the following code

<ScrollView>
        <Container>
          {/* <CustomParallaxHeader /> */}
          <Tabs>
            <Tab
              heading={
                <TabHeading style={{ backgroundColor: "green" }}>
                  <Text style={{ color: "#fff" }}>TAB 1</Text>
                  <Icon style={{ color: "#fff" }} name="ios-star" />
                </TabHeading>
              }
            >
              <ScrollView style={{ flex: 1 }}>
                <List>
                  <ListItem itemDivider>
                    <Text style={{ fontWeight: "bold" }}>Brightwood Town</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Lord Lonwald</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Forest</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Nathaniel Clyne</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Dejan Lovren</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Town</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Lord Lonwald</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Forest</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Nathaniel Clyne</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Dejan Lovren</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Town</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Lord Lonwald</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Forest</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Nathaniel Clyne</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Dejan Lovren</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text style={{ fontWeight: "bold" }}>Brightwood Town</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Lord Lonwald</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Forest</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Nathaniel Clyne</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Dejan Lovren</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Town</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Lord Lonwald</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Forest</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Nathaniel Clyne</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Dejan Lovren</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Town</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Lord Lonwald</Text>
                  </ListItem>
                  <ListItem itemDivider>
                    <Text>Brightwood Forest</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Nathaniel Clyne</Text>
                  </ListItem>
                  <ListItem>
                    <Text>Dejan Lovren</Text>
                  </ListItem>
                </List>
              </ScrollView>

screenshot 2018-12-24 at 1 45 00 pm

0reactions

suvenduchhatoicommented, Dec 26, 2018

Closing the issue due to no response for a while…Hope your issue has been resolved.You can reopen the issue if you still feel the issue is exclusive to “native-base”…