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'

ios/BasicApp.xcodeproj/project.pbxproj

@@ -41,6 +41,7 @@
 		2D16E6881FA4F8E400B85C8A /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 2D16E6891FA4F8E400B85C8A /* libReact.a */; };
 		2DCD954D1E0B4F2C00145EB5 /* BasicAppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* BasicAppTests.m */; };
 		2DF0FFEE2056DD460020B375 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3DAD3EA31DF850E9000B6D8A /* libReact.a */; };
+		5049979F956343A58ED88DD1 /* libRNSpringScrollView.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B4CEC7D8652E4A80BB0A6D75 /* libRNSpringScrollView.a */; };
 		511877E333E24A6A9690DB3F /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8A01206684554F25837ADFFE /* FontAwesome5_Regular.ttf */; };
 		5BBCBF7EE13243DDA5CC11FF /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 523991BB6CEE47A18F8A6B54 /* Octicons.ttf */; };
 		7D086754CFF647B296C82959 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8BEF1FB779D54460BAA6C75D /* FontAwesome5_Brands.ttf */; };
@@ -292,6 +293,13 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RCTLinking;
 		};
+		8313C21E22B23D3800BA05CE /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = B07B6BBF88EF441EB7E6EA69 /* RNSpringScrollView.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RNSpringScrollView;
+		};
 		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
@@ -406,6 +414,8 @@
 		99E1BFFB629F466DAB4074DD /* Entypo.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Entypo.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; };
 		A45B683174C84617B17BFEB8 /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
+		B07B6BBF88EF441EB7E6EA69 /* RNSpringScrollView.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNSpringScrollView.xcodeproj; path = "../node_modules/react-native-spring-scrollview/ios/RNSpringScrollView.xcodeproj"; sourceTree = "<group>"; };
+		B4CEC7D8652E4A80BB0A6D75 /* libRNSpringScrollView.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNSpringScrollView.a; sourceTree = "<group>"; };
 		D9B6D714CCDB47ECBCB3505A /* AntDesign.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = AntDesign.ttf; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; };
 		E853E9B8BDDC4E8D80A38FC9 /* libRNVectorIcons-tvOS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = "libRNVectorIcons-tvOS.a"; sourceTree = "<group>"; };
 		EC55B197E6FE4578ABA9633D /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome5_Solid.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; };
@@ -442,6 +452,7 @@
 				83A28A9B22A93EBD00BC7202 /* libRNGestureHandler.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				2D02EAF2008D44B9AC5CF4EE /* libRNVectorIcons.a in Frameworks */,
+				5049979F956343A58ED88DD1 /* libRNSpringScrollView.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -617,6 +628,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		8313C21B22B23D3700BA05CE /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				8313C21F22B23D3800BA05CE /* libRNSpringScrollView.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
@@ -634,6 +653,7 @@
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				18EC90269FAE4C86A967E3D7 /* RNVectorIcons.xcodeproj */,
+				B07B6BBF88EF441EB7E6EA69 /* RNSpringScrollView.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -652,6 +672,7 @@
 			children = (
 				8BB06A9FC75847828D9E5BE1 /* libRNVectorIcons.a */,
 				E853E9B8BDDC4E8D80A38FC9 /* libRNVectorIcons-tvOS.a */,
+				B4CEC7D8652E4A80BB0A6D75 /* libRNSpringScrollView.a */,
 			);
 			name = "Recovered References";
 			sourceTree = "<group>";
@@ -896,6 +917,10 @@
 					ProjectRef = 83A28A9222A93EA900BC7202 /* RNGestureHandler.xcodeproj */;
 				},
 				{
+					ProductGroup = 8313C21B22B23D3700BA05CE /* Products */;
+					ProjectRef = B07B6BBF88EF441EB7E6EA69 /* RNSpringScrollView.xcodeproj */;
+				},
+				{
 					ProductGroup = 8355A87E22A8ECC900A4ECE5 /* Products */;
 					ProjectRef = 18EC90269FAE4C86A967E3D7 /* RNVectorIcons.xcodeproj */;
 				},
@@ -1128,6 +1153,13 @@
 			remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		8313C21F22B23D3800BA05CE /* libRNSpringScrollView.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNSpringScrollView.a;
+			remoteRef = 8313C21E22B23D3800BA05CE /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1354,6 +1386,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = BasicAppTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1362,6 +1395,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1381,6 +1415,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = BasicAppTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1389,6 +1424,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1409,6 +1445,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = BasicApp/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1417,7 +1454,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = {{packageName}};
+				PRODUCT_BUNDLE_IDENTIFIER = com.basicapp;
 				PRODUCT_NAME = BasicApp;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
@@ -1431,6 +1468,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = BasicApp/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1439,7 +1477,7 @@
 					"-ObjC",
 					"-lc++",
 				);
-				PRODUCT_BUNDLE_IDENTIFIER = {{packageName}};
+				PRODUCT_BUNDLE_IDENTIFIER = com.basicapp;
 				PRODUCT_NAME = BasicApp;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
@@ -1460,6 +1498,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = "BasicApp-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1467,6 +1506,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1495,6 +1535,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = "BasicApp-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1502,6 +1543,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1529,6 +1571,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = "BasicApp-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1536,6 +1579,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1563,6 +1607,7 @@
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
+					"$(SRCROOT)/../node_modules/react-native-spring-scrollview/ios/SpringScrollView",
 				);
 				INFOPLIST_FILE = "BasicApp-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1570,6 +1615,7 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",

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"