update README, rAF on index change

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

@@ -33,7 +33,7 @@ const App = () => {
       <View
         style={{flex: 1, backgroundColor: 'white', justifyContent: 'center'}}>
         <PagerProvider activeIndex={activeIndex} onChange={onChange}>
-          <Tabs />
+          <MyPager />
         </PagerProvider>
       </View>
     </SafeAreaView>

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/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} />

src/pager.tsx

@@ -211,7 +211,9 @@ function Pager({
   const maxIndex = memoize(new Value(maxIndexValue));
 
   useEffect(() => {
-    maxIndex.setValue(maxIndexValue);
+    requestAnimationFrame(() => {
+      maxIndex.setValue(maxIndexValue);
+    });
   }, [maxIndexValue]);
 
   const dragX = memoize(new Value(0));
@@ -349,7 +351,9 @@ function Pager({
   // value to trigger transitions, not sure why but this works for now
   useEffect(() => {
     if (activeIndex >= minIndex && activeIndex <= maxIndexValue) {
-      nextPosition.setValue(activeIndex);
+      requestAnimationFrame(() => {
+        nextPosition.setValue(activeIndex);
+      });
     }
   }, [activeIndex, maxIndexValue, minIndex]);
 
@@ -726,7 +730,7 @@ function IndexProvider({ children, index }: iIndexProvider) {
 function useIndex() {
   const index = useContext(IndexContext);
 
-  if (!index) {
+  if (index === undefined) {
     throw new Error(`useIndex() must be used within an <IndexProvider />`);
   }