largList

android/app/build.gradle

@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-spring-scrollview')
     implementation project(':react-native-gesture-handler')
     implementation project(':react-native-vector-icons')
     implementation fileTree(dir: "libs", include: ["*.jar"])

android/app/src/main/java/com/basicapp/MainApplication.java

@@ -3,6 +3,7 @@ package com.basicapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.bolan9999.SpringScrollViewPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
@@ -24,6 +25,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new SpringScrollViewPackage(),
             new VectorIconsPackage()
       );
     }

android/settings.gradle

 rootProject.name = 'BasicApp'
+include ':react-native-spring-scrollview'
+project(':react-native-spring-scrollview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spring-scrollview/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-gesture-handler'

package.json

@@ -17,6 +17,8 @@
     "react-native": "0.59.5",
     "react-native-elements": "^1.1.0",
     "react-native-gesture-handler": "^1.1.0",
+    "react-native-largelist-v3": "^3.0.14",
+    "react-native-spring-scrollview": "^2.0.22",
     "react-native-update-mutlirn-hg": "^3.1.1",
     "react-native-vector-icons": "^6.4.2",
     "react-navigation": "^3.9.1",

src/BasicNavigator/navigationStack.js

@@ -8,7 +8,7 @@ import {
 } from 'react-navigation';
 import JSPage from '../jsComponent/JSPage';
 import FramePage from '../home/FramePage';
-import ThemePage from '../ThemePage';
+import ThemePage from '../themePage';
 import NativeComponentList from '../home/NativeComponentList';
 import JSComponentList from '../home/JSComponentList';
 import NativePage from '../nativeComponent/NativePage';

src/home/FramePage.js

@@ -9,6 +9,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { LargeList } from 'react-native-largelist-v3';
 import {
   StyleSheet,
   Text,
@@ -24,8 +25,6 @@ Props = {};
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   instructions: {
@@ -33,16 +32,77 @@ const styles = StyleSheet.create({
     color: '#333333',
     marginBottom: 5,
   },
+  section: {
+    flex: 1,
+    backgroundColor: 'gray',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  row: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  line: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 1,
+    backgroundColor: '#EEE',
+  },
 });
 
 class FramePage extends Component<Props> {
+  _renderSection = (section: number) => (
+    <View style={styles.section}>
+      <Text>
+          Section
+        {' '}
+        {section}
+      </Text>
+    </View>
+  );
+
+  _renderIndexPath = ({ section, row }) => (
+    <View style={styles.row}>
+      <Text>
+          Section
+        {' '}
+        {section}
+        {' '}
+Row
+        {' '}
+        {row}
+      </Text>
+      <View style={styles.line} />
+    </View>
+  );
+
   render() {
-    console.log('HOMEPage', this.props);
+    const data = [];
+    for (let section = 1; section <= 10; section += 1) {
+      const sContent = { items: [] };
+      for (let row = 1; row <= 10; row += 1) {
+        sContent.items.push(row);
+      }
+      data.push(sContent);
+
+    }
     return (
       <View style={styles.container}>
+
         <TouchableOpacity onPress={() => { this.props.push('ThemePage'); }}>
           <Text style={styles.instructions}>Frame</Text>
         </TouchableOpacity>
+        <LargeList
+          style={styles.container}
+          data={data}
+          heightForSection={() => 50}
+          renderSection={this._renderSection}
+          heightForIndexPath={() => 50}
+          renderIndexPath={this._renderIndexPath}
+        />
       </View>
     );
   }

yarn.lock

@@ -6302,6 +6302,11 @@ react-native-gesture-handler@^1.1.0:
     invariant "^2.2.2"
     prop-types "^15.5.10"
 
+react-native-largelist-v3@^3.0.14:
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/react-native-largelist-v3/-/react-native-largelist-v3-3.0.14.tgz#0b03dc588ed90f90432361f91ffa26d8e529e7c0"
+  integrity sha512-eom9InjkKCGjFESft3/BmkNttV3EFOhSisd4DKDe/dAaj0+ySt+ukUTSv9AVnLim6HW3MiUkfNgMBxckoVyDqg==
+
 react-native-ratings@^6.3.0:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-6.3.1.tgz#4e4bd87f376423dc62c933f570fc1932c78adaa4"
@@ -6322,6 +6327,11 @@ react-native-safe-area-view@^0.13.0:
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.22.tgz#7a120377b52aa9bbb94d0b8541a014026be9289b"
   integrity sha512-kSyAt0AeVU6N7ZonfV6dP6iZF8B7Bce+tk3eujXhzBGsLg0VSLnU7uE9VqJF0xdQrHR91ZjGgVMieo/8df9KTA==
 
+react-native-spring-scrollview@^2.0.22:
+  version "2.0.22"
+  resolved "https://registry.yarnpkg.com/react-native-spring-scrollview/-/react-native-spring-scrollview-2.0.22.tgz#6d8dbaf485b68a30c330d25e7e22f70ce7574c4c"
+  integrity sha512-y1O/AMq1++AHOjQjT5Nse8GAQ7tOWnWTR67kO06FBHbgyu6EeZ0Ow5KK2EjtmFN0EAY8zFZmXtZyr0Sdht/wJA==
+
 react-native-status-bar-height@^2.2.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/react-native-status-bar-height/-/react-native-status-bar-height-2.3.1.tgz#b92ce9112c2367290847ac11284d9d84a6330169"