chore: add close button

example/src/App.tsx

@@ -51,6 +51,7 @@ export default function App() {
               left: insets?.left,
               right: insets?.right,
             }}
+            onCloseButtonPress={() => console.log('close')}
           />
         )}
       </SafeAreaConsumer>

src/PaperOnboarding.tsx

@@ -1,26 +1,36 @@
 import React, { useMemo, useCallback } from 'react';
-import { View, Dimensions, StatusBar, Platform } from 'react-native';
-import { horizontalPanGestureHandler, ReText } from 'react-native-redash';
+import { Dimensions, StatusBar, Platform } from 'react-native';
+import { horizontalPanGestureHandler } from 'react-native-redash';
 import { PanGestureHandler } from 'react-native-gesture-handler';
-import Animated, { interpolate, add, concat } from 'react-native-reanimated';
+import Animated, { interpolate, add } from 'react-native-reanimated';
+
+import { PaperOnboardingButton } from './button';
+import { PaperOnboardingIndicatorsContainer } from './indicatorsContainer';
+import { PaperOnboardingPage } from './page/PaperOnboardingPage';
 import { withTiming } from './withTiming';
 import {
   PaperOnboardingItemType,
   PaperOnboardingSafeAreaInsetsType,
 } from './types';
-import { PaperOnboardingIndicatorsContainer } from './indicatorsContainer';
-import { PaperOnboardingPage } from './page/PaperOnboardingPage';
 import { styles } from './styles';
 
 interface PaperOnboardingProps {
   data: PaperOnboardingItemType[];
   safeInsets?: Partial<PaperOnboardingSafeAreaInsetsType>;
   indicatorSize?: number;
+  closeButtonText?: string;
+  onCloseButtonPress: () => void;
 }
 
 export const PaperOnboarding = (props: PaperOnboardingProps) => {
   // props
-  const { data, safeInsets: _safeInsets, indicatorSize = 40 } = props;
+  const {
+    data,
+    safeInsets: _safeInsets,
+    indicatorSize = 40,
+    closeButtonText = 'close',
+    onCloseButtonPress,
+  } = props;
   const safeInsets = useMemo<PaperOnboardingSafeAreaInsetsType>(
     () => ({
       top: _safeInsets?.top ?? 50,
@@ -114,21 +124,14 @@ export const PaperOnboarding = (props: PaperOnboardingProps) => {
           indicatorSize={indicatorSize}
           safeInsets={safeInsets}
         />
-        <View style={styles.debugContainer} pointerEvents="none">
-          <ReText
-            style={styles.text}
-            text={concat(`translationX: `, translationX)}
-          />
-          <ReText style={styles.text} text={concat(`velocityX: `, velocityX)} />
-          <ReText
-            style={styles.text}
-            text={concat(`currentIndex: `, currentIndex)}
-          />
-          <ReText
-            style={styles.text}
-            text={concat(`threshold: `, screenDimensions.width / 2)}
-          />
-        </View>
+
+        <PaperOnboardingButton
+          lastIndex={data.length}
+          currentIndex={currentIndex}
+          safeInsets={safeInsets}
+          text={closeButtonText}
+          onPress={onCloseButtonPress}
+        />
       </Animated.View>
     </PanGestureHandler>
   );

src/button/PaperOnboardingButton.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import Animated, { round } from 'react-native-reanimated';
+// import { TouchableOpacity } from 'react-native-gesture-handler';
+import { PaperOnboardingSafeAreaInsetsType } from '../types';
+import { styles } from './styles';
+
+const { interpolate, Extrapolate } = Animated;
+
+interface PaperOnboardingButtonProps {
+  lastIndex: number;
+  safeInsets: PaperOnboardingSafeAreaInsetsType;
+  currentIndex: Animated.Node<number>;
+  text: string;
+  onPress: () => void;
+}
+
+export const PaperOnboardingButton = (props: PaperOnboardingButtonProps) => {
+  // props
+  const { safeInsets, currentIndex, lastIndex, text, onPress } = props;
+
+  // animations
+  const animatedContainerScale = interpolate(currentIndex, {
+    inputRange: [lastIndex - 2, lastIndex - 1],
+    outputRange: [0, 1],
+    extrapolate: Extrapolate.CLAMP,
+  });
+
+  // styles
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      {
+        top: safeInsets.top,
+        transform: [{ scale: round(animatedContainerScale) }],
+      },
+    ],
+    [safeInsets, animatedContainerScale]
+  );
+  const textStyle = useMemo(() => [styles.text], []);
+
+  return (
+    <Animated.View style={containerStyle}>
+      <TouchableOpacity onPress={onPress}>
+        <Text style={textStyle}>{text}</Text>
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};

src/button/index.ts

@@ -0,0 +1 @@
+export * from './PaperOnboardingButton';

src/button/styles.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    padding: 12,
+    right: 12,
+  },
+  text: {
+    color: 'white',
+  },
+});