How do I keep my ScrollView from snapping back to the top? (React Native)

In order to create a scrollable UI, I decided to use a ScrollView to display all my components. However, whenever I try to scroll to the bottom, the app bounces back to the top as soon as I release my finger. I’ve tried adding styling to the ScrollView and its parent view, but it doesn’t seem to help my situation.

Here is my code:

export default function App() {

  const items = [
    <TopText key='1' />,
    <Bar key='2' />,
    <TabDivider key='3' type="Carpool" />,
    <Tiles key='4' />,
    <TabDivider key='5' type="Schedule" />,
    <Schedule key='6' />]

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollViewStyle}>
        {items}
      </ScrollView>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    flex: 1,
    backgroundColor: 'rgba(187, 248, 237, 0.41)',
  },

  scrollViewStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  }
});

If you can help me, I would appreciate it a lot 😀

Answer

I figured it out! What I had to do was wrap the ScrollView around the view, and edit the styling. Here is the updated code:

export default function App() {

  return (
      <ScrollView>
        <View style={styles.container}>
          <TopText key='1' />
          <Bar key='2' />
          <TabDivider key='3' type="Carpool" />
          <Tiles key='4' />
          <TabDivider key='5' type="Schedule" />
          <Schedule key='6' />
          
          <StatusBar style='auto'/>
        </View>
      </ScrollView>



  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'rgba(187, 248, 237, 0.41)',
    height: 2000
  }
});

Advertisement

Answer