feat: add more props for renderItem

r0b0t3d · May 5, 2021 · 147397c · 147397c
1 parent 72f5f79
commit 147397c
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 166 deletions.
diff --git a/README.md b/README.md
@@ -9,15 +9,24 @@ Note: Currently, I am using `react-native-reanimated` for animation. So you shou
 `$ yarn add react-native-reanimated`
 
 ## Breaking changes
- ### v3.0.0
+
+### v3.3.0
+  - Changed: `renderItem` now required and add more props to easy customization
+  ```
+  renderItem: (
+    data: { item: T; index?: number },
+    animatedData?: { scrollPosition?: Animated.SharedValue<number>, offset?: number }
+  ) => React.ReactNode
+  ````
+### v3.0.0
   - Added: 
     - `animatedPage`: animated value used which is current selected page. Used to pass into the `PaginationIndicator` for animation.
   - Removed:
     - `useIndicator`, `indicatorContainerStyle`, `renderIndicator`, . Used `PaginationIndicator` instead
     - `renderOverlay`: you can render overlay inside `renderItem` function
   - Changed: 
     - `renderImage` -> `renderItem`
- ### v2.0.0
+### v2.0.0
   - requires `react-native-reanimated@2.1.0`
 
 ## Show cases
@@ -73,7 +82,7 @@ function MyCarousel() {
       firstItemAlignment="start"
       spaceBetween={20}
       animatedPage={currentPage}
-      renderItem={(item) => {
+      renderItem={({item}) => {
         return (
           <Image
             style={{
@@ -123,7 +132,7 @@ function MyCarousel() {
 |spaceBetween?| Add additional space between items | 0 |
 |spaceHeadTail?| Add more space in head/tail. This only work if `firstItemAlignment = 'start'` | 0 |
 |animatedPage?| Animated value which is the current page. This value used to pass into `PaginationIndicator` for animation | |
-|renderItem?| `(item: CarouselData) => React.ReactNode`<br> Custom image render. | |
+|renderItem| `(data: { item: T; index?: number }, animatedData?: { scrollPosition?: Animated.SharedValue<number>, offset?: number }) => React.ReactNode`<br>Render carousel item | |
 |onPageChange?| `(index: number) => void`<br> Callback to notify when page change | |
 
 ## Methods

diff --git a/example/ios/Podfile b/example/ios/Podfile
@@ -12,8 +12,8 @@ target 'ReactNativeCarouselExample' do
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable these next few lines.
-  use_flipper!({ 'Flipper' => '0.80.0' })
+  # use_flipper!({ 'Flipper' => '0.80.0' })
   post_install do |installer|
-    flipper_post_install(installer)
+    # flipper_post_install(installer)
   end
 end
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1,6 +1,5 @@
 PODS:
   - boost-for-react-native (1.63.0)
-  - CocoaAsyncSocket (7.6.5)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.63.4)
   - FBReactNativeSpec (0.63.4):
@@ -10,52 +9,6 @@ PODS:
     - React-Core (= 0.63.4)
     - React-jsi (= 0.63.4)
     - ReactCommon/turbomodule/core (= 0.63.4)
-  - Flipper (0.80.0):
-    - Flipper-Folly (~> 2.5)
-    - Flipper-RSocket (~> 1.3)
-  - Flipper-DoubleConversion (1.1.7)
-  - Flipper-Folly (2.5.1):
-    - boost-for-react-native
-    - Flipper-DoubleConversion
-    - Flipper-Glog
-    - libevent (~> 2.1.12)
-    - OpenSSL-Universal (= 1.1.180)
-  - Flipper-Glog (0.3.6)
-  - Flipper-PeerTalk (0.0.4)
-  - Flipper-RSocket (1.3.1):
-    - Flipper-Folly (~> 2.5)
-  - FlipperKit (0.80.0):
-    - FlipperKit/Core (= 0.80.0)
-  - FlipperKit/Core (0.80.0):
-    - Flipper (~> 0.80.0)
-    - FlipperKit/CppBridge
-    - FlipperKit/FBCxxFollyDynamicConvert
-    - FlipperKit/FBDefines
-    - FlipperKit/FKPortForwarding
-  - FlipperKit/CppBridge (0.80.0):
-    - Flipper (~> 0.80.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (0.80.0):
-    - Flipper-Folly (~> 2.5)
-  - FlipperKit/FBDefines (0.80.0)
-  - FlipperKit/FKPortForwarding (0.80.0):
-    - CocoaAsyncSocket (~> 7.6)
-    - Flipper-PeerTalk (~> 0.0.4)
-  - FlipperKit/FlipperKitHighlightOverlay (0.80.0)
-  - FlipperKit/FlipperKitLayoutPlugin (0.80.0):
-    - FlipperKit/Core
-    - FlipperKit/FlipperKitHighlightOverlay
-    - FlipperKit/FlipperKitLayoutTextSearchable
-    - YogaKit (~> 1.18)
-  - FlipperKit/FlipperKitLayoutTextSearchable (0.80.0)
-  - FlipperKit/FlipperKitNetworkPlugin (0.80.0):
-    - FlipperKit/Core
-  - FlipperKit/FlipperKitReactPlugin (0.80.0):
-    - FlipperKit/Core
-  - FlipperKit/FlipperKitUserDefaultsPlugin (0.80.0):
-    - FlipperKit/Core
-  - FlipperKit/SKIOSNetworkPlugin (0.80.0):
-    - FlipperKit/Core
-    - FlipperKit/FlipperKitNetworkPlugin
   - Folly (2020.01.13.00):
     - boost-for-react-native
     - DoubleConversion
@@ -66,8 +19,6 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - libevent (2.1.12)
-  - OpenSSL-Universal (1.1.180)
   - RCTRequired (0.63.4)
   - RCTTypeSafety (0.63.4):
     - FBLazyVector (= 0.63.4)
@@ -326,32 +277,11 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - Yoga (1.14.0)
-  - YogaKit (1.18.1):
-    - Yoga (~> 1.14)
 
 DEPENDENCIES:
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
-  - Flipper (= 0.80.0)
-  - Flipper-DoubleConversion (= 1.1.7)
-  - Flipper-Folly (~> 2.2)
-  - Flipper-Glog (= 0.3.6)
-  - Flipper-PeerTalk (~> 0.0.4)
-  - Flipper-RSocket (~> 1.1)
-  - FlipperKit (= 0.80.0)
-  - FlipperKit/Core (= 0.80.0)
-  - FlipperKit/CppBridge (= 0.80.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (= 0.80.0)
-  - FlipperKit/FBDefines (= 0.80.0)
-  - FlipperKit/FKPortForwarding (= 0.80.0)
-  - FlipperKit/FlipperKitHighlightOverlay (= 0.80.0)
-  - FlipperKit/FlipperKitLayoutPlugin (= 0.80.0)
-  - FlipperKit/FlipperKitLayoutTextSearchable (= 0.80.0)
-  - FlipperKit/FlipperKitNetworkPlugin (= 0.80.0)
-  - FlipperKit/FlipperKitReactPlugin (= 0.80.0)
-  - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.80.0)
-  - FlipperKit/SKIOSNetworkPlugin (= 0.80.0)
   - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
@@ -383,17 +313,6 @@ DEPENDENCIES:
 SPEC REPOS:
   trunk:
     - boost-for-react-native
-    - CocoaAsyncSocket
-    - Flipper
-    - Flipper-DoubleConversion
-    - Flipper-Folly
-    - Flipper-Glog
-    - Flipper-PeerTalk
-    - Flipper-RSocket
-    - FlipperKit
-    - libevent
-    - OpenSSL-Universal
-    - YogaKit
 
 EXTERNAL SOURCES:
   DoubleConversion:
@@ -455,21 +374,11 @@ EXTERNAL SOURCES:
 
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
-  Flipper: ed161911b24ac3f237ed57febeed5d71d432d9bf
-  Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
-  Flipper-Folly: f7a3caafbd74bda4827954fd7a6e000e36355489
-  Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
-  Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
-  Flipper-RSocket: 127954abe8b162fcaf68d2134d34dc2bd7076154
-  FlipperKit: 57764956d2f0f972c1af5075a9c8f05ca5b12349
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
-  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
-  OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
   RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
   React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
@@ -493,8 +402,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNReanimated: 70f662b5232dd5d19ccff581e919a54ea73df51c
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
-  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: d6f450a6a23d6fe8fee209a9d74ced917ae47668
+PODFILE CHECKSUM: 56bf85921e0d953d4d3cb3b7c6b93cfefb51f799
 
 COCOAPODS: 1.10.1
diff --git a/example/ios/ReactNativeCarouselExample.xcodeproj/project.pbxproj b/example/ios/ReactNativeCarouselExample.xcodeproj/project.pbxproj
@@ -206,7 +206,6 @@
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				C1D60D28B925C94BD88E79D7 /* [CP] Copy Pods Resources */,
-				E98C4D0E9E930B0842136B05 /* [CP] Embed Pods Frameworks */,
 			);
 			buildRules = (
 			);
@@ -404,24 +403,6 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ReactNativeCarouselExample/Pods-ReactNativeCarouselExample-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		E98C4D0E9E930B0842136B05 /* [CP] Embed Pods Frameworks */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_ROOT}/Target Support Files/Pods-ReactNativeCarouselExample/Pods-ReactNativeCarouselExample-frameworks.sh",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
-			);
-			name = "[CP] Embed Pods Frameworks";
-			outputPaths = (
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/OpenSSL.framework",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-ReactNativeCarouselExample/Pods-ReactNativeCarouselExample-frameworks.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -16,14 +16,21 @@ import {
   Dimensions,
   TouchableOpacity,
   Text,
+  ImageProps,
 } from 'react-native';
 import Carousel, {
   CarouselHandles,
   PaginationIndicator,
 } from '@r0b0t3d/react-native-carousel';
 import { useSharedValue } from 'react-native-reanimated';
 
-const data = [
+type CarouselData = {
+  id: string;
+  source: ImageProps['source'];
+  url: string;
+}
+
+const data: CarouselData[] = [
   {
     id: 'image1',
     source: {
@@ -76,17 +83,17 @@ export default function App() {
   const carousel = useRef<CarouselHandles>(null);
 
   const handleRandom = useCallback(() => {
-    const randomIdx = Math.floor(Math.random() * data.length);    
+    const randomIdx = Math.floor(Math.random() * data.length);
     carousel.current?.snapToItem(randomIdx, true);
   }, []);
 
   const handleNext = useCallback(() => {
     carousel.current?.goNext();
-  }, [])
-  
+  }, []);
+
   const handlePrev = useCallback(() => {
     carousel.current?.goPrev();
-  }, [])
+  }, []);
 
   return (
     <View style={styles.container}>
@@ -100,13 +107,13 @@ export default function App() {
         duration={3000}
         itemWidth={width - 100}
         inactiveOpacity={0.5}
-        inactiveScale={1}
+        inactiveScale={0.8}
         firstItemAlignment="center"
-        spaceBetween={50}
+        spaceBetween={10}
         spaceHeadTail={20}
         animatedPage={currentPage}
         additionalPagesPerSide={3}
-        renderItem={(item) => {
+        renderItem={({ item }) => {
           return (
             <Image
               style={{
@@ -135,7 +142,7 @@ export default function App() {
       </View>
 
       <View style={styles.buttonContainer}>
-      <TouchableOpacity style={styles.button} onPress={handlePrev}>
+        <TouchableOpacity style={styles.button} onPress={handlePrev}>
           <Text>PREV</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={handleRandom}>
@@ -158,13 +165,13 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     marginTop: 30,
-    flexDirection: 'row'
+    flexDirection: 'row',
   },
   button: {
     backgroundColor: '#b2b2b2',
     borderRadius: 8,
     paddingHorizontal: 10,
     paddingVertical: 5,
-    marginRight: 20
+    marginRight: 20,
   },
 });