Merge pull request #8 from CrowdLinker/develop

Develop

README.md

@@ -178,15 +178,17 @@ function NavigationButtons({ activeIndex, onChange }) {
 
 ## Pager
 
+This interface looks intimidating, but nearly all of these props are optional to customize specific behaviours and won't be necessary in a lot of use cases.
+
 ```typescript
 import { Pager } from '@crowdlinker/react-native-pager'
 
 Props
 --------
+children: React.ReactNode[];
 activeIndex?: number; - active screen
 onChange?: (nextIndex: number) => void; - active screen changed
 initialIndex?: number; - initial active screen
-children: React.ReactNode[];
 springConfig?: Partial<SpringConfig> - configuration for spring transitions on swipe / snap
 pageInterpolation?: ViewStyle - see below - configuration for individual page transforms
 panProps?: Partial<GestureHandlerProperties> - configuration for <PanGestureHandler />
@@ -217,7 +219,6 @@ import { Pagination } from '@crowdlinker/react-native-pager'
 Props
 --------
 children: React.ReactNode;
-animatedIndex?: Animated.Value<number>;
 pageInterpolation: iPageInterpolation;
 style?: ViewStyle;
 ```
@@ -230,7 +231,6 @@ import { Slider } from '@crowdlinker/react-native-pager'
 Props
 --------
 numberOfScreens: number;
-animatedIndex?: Animated.Value<number>;
 style: ViewStyle;
 ```
 
@@ -242,7 +242,6 @@ import { Progress } from '@crowdlinker/react-native-pager'
 Props
 --------
 numberOfScreens: number;
-animatedIndex?: Animated.Value<number>;
 style: ViewStyle;
 ```
 
@@ -568,3 +567,51 @@ function Controls() {
   );
 }
 ```
+
+## Hooks
+
+There are a number of useful hooks you can use to access values from the Pager:
+
+```typescript
+  usePager(): [activeIndex, onChange, translationValue, animatedIndex]
+  useFocus(): boolean -> is screen focused
+  useAnimatedOffset(index: number) -> animatedIndex relative to index e.g -2, -1, 0, 1, 2, etc
+  useOnFocus(fn) -> fn() to fire on screen focus
+  useIndex() -> the index of the screen
+  useAnimatedIndex() -> the animatedIndex value of the pager
+```
+
+### What is animatedIndex?
+
+Animated index represents the animated value of the active index -- it includes possible intermediate values.
+When panning or transitioning, the activeIndex value moves from 0 -> 1 but the animatedIndex value captures all intermediate values between 0 and 1 during this transition
+
+## Functions
+
+```typescript
+  interpolateWithConfig(offset: Animated.Node<number>, pageInterpolation: iPageInterpolation) -> ViewStyle
+```
+
+This function can be used in your components to provide style transforms for a given animated node, for example using the useAnimatedOffset(index) to interpolate specific opacity or scale styles based on your components relative position to the active index
+
+e.g:
+
+```javascript
+function MySlide() {
+  const index = useIndex();
+  const offset = useAnimatedOffset(index);
+
+  const style = interpolateWithConfig(offset, {
+    transform: [
+      {
+        scale: {
+          inputRange: [-1, 0, 1],
+          outputRange: [0.9, 1, 0.9],
+        },
+      },
+    ],
+  });
+
+  return <Animated.View style={{ flex: 1, ...style }}>...</Animated.View>;
+}
+```

example/App.tsx

@@ -29,13 +29,14 @@ const App = () => {
   }
 
   return (
-    <View style={{flex: 1, backgroundColor: 'white'}}>
-      <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+    <SafeAreaView style={{flex: 1}}>
+      <View
+        style={{flex: 1, backgroundColor: 'white', justifyContent: 'center'}}>
         <PagerProvider activeIndex={activeIndex} onChange={onChange}>
           <MyPager />
         </PagerProvider>
-      </SafeAreaView>
-    </View>
+      </View>
+    </SafeAreaView>
   );
 };
 

example/src/basic-example.tsx

@@ -3,10 +3,10 @@ import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
 import {Pager} from '@crowdlinker/react-native-pager';
 import {Slide, NavigationButtons} from './shared-components';
 
-const children = Array.from({length: 10000}, (_, i) => <Slide key={i} i={i} />);
+const children = Array.from({length: 1000}, (_, i) => <Slide key={i} i={i} />);
 
 function MyPager() {
-  const [activeIndex, onChange] = useState(5000);
+  const [activeIndex, onChange] = useState(500);
 
   return (
     <View>
@@ -19,13 +19,9 @@ function MyPager() {
       </Text>
 
       <Pager
+        style={{height: 200, width: 200, alignSelf: 'center'}}
         activeIndex={activeIndex}
-        onChange={onChange}
-        style={{
-          height: 200,
-          width: 200,
-          alignSelf: 'center',
-        }}>
+        onChange={onChange}>
         {children}
       </Pager>
 

example/src/shared-components.tsx

@@ -7,7 +7,14 @@ import {
   TextInput,
   Button,
 } from 'react-native';
-import {useFocus} from '@crowdlinker/react-native-pager';
+import {
+  useFocus,
+  useOnFocus,
+  useAnimatedOffset,
+  interpolateWithConfig,
+  useIndex,
+} from '@crowdlinker/react-native-pager';
+import Animated from 'react-native-reanimated';
 
 const colors = [
   'aquamarine',
@@ -20,26 +27,39 @@ const colors = [
   'salmon',
 ];
 
-function Slide({i}: {i: number}) {
+function Slide() {
   // const [count, setCount] = useState(0);
   const focused = useFocus();
+  const index = useIndex();
+  // const offset = useAnimatedOffset(index);
+
+  // const style = interpolateWithConfig(offset, {
+  //   transform: [
+  //     {
+  //       scale: {
+  //         inputRange: [-1, 0, 1],
+  //         outputRange: [0.9, 1, 0.9],
+  //       },
+  //     },
+  //   ],
+  // });
 
   return (
-    <View
+    <Animated.View
       style={{
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 10,
         marginHorizontal: 5,
-        backgroundColor: colors[i % colors.length],
+        backgroundColor: colors[index % colors.length],
       }}>
-      <Text>{`Screen: ${i}`}</Text>
+      <Text>{`Screen: ${index}`}</Text>
       <Text>{`Focused: ${focused}`}</Text>
       {/* <TextInput placeholder="Test Update" />
       <Text>{`Count: ${count}`}</Text>
       <Button title="Inc" onPress={() => setCount(count + 1)} /> */}
-    </View>
+    </Animated.View>
   );
 }
 

example/src/stack.tsx

@@ -31,7 +31,7 @@ function Stack() {
           enabled: activeIndex !== 0,
         }}
         onChange={onChange}
-        clamp={{prev: 0.3}}
+        clamp={{prev: 0.4}}
         clampDrag={{next: 0}}
         adjacentChildOffset={4}
         style={{

example/src/stacked-cards.tsx

@@ -32,7 +32,7 @@ function StackedCards() {
         style={{height: 200, width: 200, alignSelf: 'center', padding: 10}}
         pageInterpolation={stackedCardsConfig}>
         {Array.from({length: activeIndex + 3}, (_, i) => (
-          <Slide key={i} i={i} />
+          <Slide key={i} />
         ))}
       </Pager>
       <NavigationButtons activeIndex={activeIndex} onChange={onChange} />

example/src/swipe-cards.tsx

@@ -55,7 +55,7 @@ function SwipeCards() {
         style={{height: 200, width: 200, alignSelf: 'center', padding: 10}}
         pageInterpolation={swipeCardsConfig}>
         {Array.from({length: activeIndex + 4}, (_, i) => (
-          <Slide key={i} i={i} />
+          <Slide key={i} />
         ))}
       </Pager>
       <NavigationButtons activeIndex={activeIndex} onChange={onChange} />

package.json

@@ -49,7 +49,7 @@
     "react-dom": "^16.9.0",
     "react-native": "^0.60.5",
     "react-native-gesture-handler": "^1.4.1",
-    "react-native-reanimated": "^1.2.0",
+    "react-native-reanimated": "^1.3.0",
     "tsdx": "^0.9.1",
     "tslib": "^1.10.0",
     "typescript": "^3.6.2"

src/index.tsx

@@ -1,2 +1,3 @@
 export * from './pager';
 export * from './pagination';
+export { interpolateWithConfig } from './util';