React Native Scroll View

Part that wraps stage ScrollView while furnishing incorporation with contact locking "responder" framework.

React Native Scroll View

Remember that ScrollViews should have a limited level to work, since they contain unbounded-level kids into a limited holder (by means of a parchment connection). To bound the level of a ScrollView, either set the level of the view straightforwardly (deterred) or ensure all parent sees have limited level. Neglecting to move {flex: 1} down the view stack can prompt mistakes here, which the component reviewer makes fast to troubleshoot.

Doesn't yet uphold other contained responders from impeding this parchment view from turning into the responder.

<ScrollView> versus <FlatList> - which one to utilize?

ScrollView delivers all its respond kid parts immediately, yet this has an exhibition drawback.

Envision you have an extremely extensive rundown of things you need to show, perhaps a few screens worth of content. Making JS parts and local perspectives for everything at the same time, quite a bit of which may not actually be shown, will add to slow delivering and expanded memory utilization.

This is where FlatList becomes an integral factor. FlatList renders things languidly, when they are going to show up, and eliminates things that scroll way off screen to save memory and handling time.

FlatList is likewise convenient if you have any desire to deliver separators between your things, numerous segments, endless parchment stacking, or quite a few different highlights it upholds out of the case.

Example

import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42,
  },
});

export default App;

Props

StickyHeaderComponent

A Respond Part that will be utilized to deliver tacky headers, ought to be utilized along with stickyHeaderIndices. You might have to set this part assuming your tacky header utilizes custom changes, for instance, when you maintain that your rundown should have an energized and hidable header. In the event that part have not been given, the default ScrollViewStickyHeader part will be utilized.

alwaysBounceHorizontal iOS

When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself.

alwaysBounceVertical iOS

When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself.

automaticallyAdjustContentInsets iOS

Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/toolbar

automaticallyAdjustKeyboardInsets iOS

Controls whether the ScrollView should automatically adjust its contentInset and scrollViewInsets when the Keyboard changes its size.

automaticallyAdjustsScrollIndicatorInsets iOS

Controls whether iOS should automatically adjust the scroll indicator insets. See Apple's documentation on the property.