react-native-app-onboard 0.1.8 → 0.2.0

package/src/components/CustomPages.tsx

@@ -1,4 +1,12 @@
-import { View, Dimensions, Animated, StyleSheet, FlatList } from 'react-native';
+import {
+  View,
+  Dimensions,
+  Animated,
+  StyleSheet,
+  FlatList,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
 import React from 'react';
 import { Pagination } from './Pagination';
 import type { OnboardingProps } from '../types';
@@ -10,10 +18,16 @@ type CustomPagesProps = OnboardingProps & {
   children?: React.ReactNode[];
   currentPage: number;
   setPage: (newPageIndex: number) => void;
-  flatListRef: React.RefObject<FlatList>;
+  setFlatListRef: (node: FlatList | null) => void;
   scrollX: Animated.Value;
+  dotsAnimatedValue: Animated.Value;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onScrollBeginDrag: () => void;
   nextPage: () => void;
   numberOfScreens: number;
+  // Accepted for prop-spread compatibility. Forced-`rtl` mirroring applies to
+  // the declarative `pages` API; custom children follow the device direction.
+  mirror?: boolean;
 };
 
 export type SliderProps = {
@@ -28,6 +42,45 @@ export const CustomPages = ({
   showNext = true,
   ...props
 }: CustomPagesProps) => {
+  const pageWidth = props.width || width;
+
+  const paginationProps = {
+    color: '#fff',
+    backgroundColor: '#333',
+    width: pageWidth,
+    onNext: props.nextPage,
+    onSkip: props.onSkip,
+    onDone: props.onDone,
+    showDone: props.showDone,
+    showPrevious: props.showPrevious,
+    animatedValue: props.dotsAnimatedValue,
+    showSkip: props.showSkip,
+    numberOfScreens: props.numberOfScreens,
+    skipLabel: props.skipLabel,
+    showNext,
+    nextLabel: props.nextLabel,
+    previousLabel: props.previousLabel,
+    doneLabel: props.doneLabel,
+    hasSkipPosition: !!props.skipButtonPosition,
+    paginationStyle: props.paginationStyle,
+    progressBarStyle: props.progressBarStyle,
+    progressBarFillStyle: props.progressBarFillStyle,
+    dotsAreTappable: props.dotsAreTappable,
+    paginationContainerStyle: props.paginationContainerStyle,
+    buttonRightContainerStyle: props.buttonRightContainerStyle,
+    buttonLeftContainerStyle: props.buttonLeftContainerStyle,
+    dotsContainerStyle: props.dotsContainerStyle,
+    doneLabelStyle: props.doneLabelStyle,
+    skipButtonContainerStyle: props.skipButtonContainerStyle,
+    nextButtonContainerStyle: props.nextButtonContainerStyle,
+    doneButtonContainerStyle: props.doneButtonContainerStyle,
+    previousButtonContainerStyle: props.previousButtonContainerStyle,
+    skipLabelStyle: props.skipLabelStyle,
+    previousLabelStyle: props.previousLabelStyle,
+    nextLabelStyle: props.nextLabelStyle,
+    paginationPosition: props.paginationPosition,
+  };
+
   return (
     <View style={[styles.container]}>
       {props.skipButtonPosition && props.showSkip && (
@@ -36,59 +89,29 @@ export const CustomPages = ({
           buttonStyle={props.skipButtonContainerStyle}
           position={props.skipButtonPosition}
           onPress={props.onSkip}
+          label={props.skipLabel}
         />
       )}
       {showPagination && props.paginationPosition === 'top' && (
         <>
           {props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
-          {!props.customFooter && (
-            <Pagination
-              color={'#fff'}
-              backgroundColor={'#333'}
-              width={width}
-              onNext={props.nextPage}
-              onSkip={props.onSkip}
-              onDone={props.onDone}
-              showDone={props.showDone}
-              animatedValue={props.scrollX}
-              showSkip={props.showSkip}
-              numberOfScreens={props.numberOfScreens}
-              skipLabel={props.skipLabel}
-              showNext={showNext}
-              nextLabel={props.nextLabel}
-              doneLabel={props.doneLabel}
-              hasSkipPosition={!!props.skipButtonPosition}
-              paginationContainerStyle={props.paginationContainerStyle}
-              buttonRightContainerStyle={props.buttonRightContainerStyle}
-              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-              dotsContainerStyle={props.dotsContainerStyle}
-              doneLabelStyle={props.doneLabelStyle}
-              skipButtonContainerStyle={props.skipButtonContainerStyle}
-              nextButtonContainerStyle={props.nextButtonContainerStyle}
-              doneButtonContainerStyle={props.doneButtonContainerStyle}
-              skipLabelStyle={props.skipLabelStyle}
-              nextLabelStyle={props.nextLabelStyle}
-              paginationPosition={props.paginationPosition}
-            />
-          )}
+          {!props.customFooter && <Pagination {...paginationProps} />}
         </>
       )}
       <Animated.FlatList
-        ref={props.flatListRef}
+        ref={(node) => props.setFlatListRef(node as FlatList | null)}
         data={React.Children.toArray(props.children)}
         horizontal
         pagingEnabled
         showsHorizontalScrollIndicator={false}
         scrollEnabled={props.scrollEnabled}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { x: props.scrollX } } }],
-          { useNativeDriver: false }
-        )}
-        scrollEventThrottle={1}
+        onScroll={props.onScroll}
+        onScrollBeginDrag={props.onScrollBeginDrag}
+        scrollEventThrottle={16}
         onMomentumScrollEnd={(event) => {
           const pageIndex = Math.round(
-            event.nativeEvent.contentOffset.x / width
+            event.nativeEvent.contentOffset.x / pageWidth
           );
           props.setPage(pageIndex || 0);
         }}
@@ -110,36 +133,7 @@ export const CustomPages = ({
         <>
           {props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
-          {!props.customFooter && (
-            <Pagination
-              color={'#fff'}
-              backgroundColor={'#333'}
-              width={width}
-              onNext={props.nextPage}
-              onSkip={props.onSkip}
-              onDone={props.onDone}
-              showDone={props.showDone}
-              animatedValue={props.scrollX}
-              showSkip={props.showSkip}
-              numberOfScreens={props.numberOfScreens}
-              skipLabel={props.skipLabel}
-              nextLabel={props.nextLabel}
-              showNext={showNext}
-              doneLabel={props.doneLabel}
-              paginationContainerStyle={props.paginationContainerStyle}
-              buttonRightContainerStyle={props.buttonRightContainerStyle}
-              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-              dotsContainerStyle={props.dotsContainerStyle}
-              doneLabelStyle={props.doneLabelStyle}
-              skipButtonContainerStyle={props.skipButtonContainerStyle}
-              nextButtonContainerStyle={props.nextButtonContainerStyle}
-              doneButtonContainerStyle={props.doneButtonContainerStyle}
-              skipLabelStyle={props.skipLabelStyle}
-              hasSkipPosition={!!props.skipButtonPosition}
-              paginationPosition={props.paginationPosition}
-              nextLabelStyle={props.nextLabelStyle}
-            />
-          )}
+          {!props.customFooter && <Pagination {...paginationProps} />}
         </>
       )}
     </View>

package/src/components/OnboardingPages.tsx

@@ -1,6 +1,13 @@
-import React, { useRef } from 'react';
+import React, { useMemo } from 'react';
 import tinycolor from 'tinycolor2';
-import { Animated, StyleSheet, Dimensions, FlatList } from 'react-native';
+import {
+  Animated,
+  StyleSheet,
+  Dimensions,
+  FlatList,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
 import { Pagination } from './Pagination';
 import { OnboardingPage, type Page } from './Page';
 import type { OnboardingProps } from '../types';
@@ -12,9 +19,13 @@ type Props = OnboardingProps & {
   pages: Page[];
   currentPage: number;
   setPage: (newPageIndex: number) => void;
-  flatListRef: React.RefObject<FlatList>;
+  setFlatListRef: (node: FlatList | null) => void;
   scrollX: Animated.Value;
+  dotsAnimatedValue: Animated.Value;
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onScrollBeginDrag: () => void;
   nextPage: () => void;
+  mirror?: boolean;
 };
 
 export const OnboardingPages = ({
@@ -22,10 +33,9 @@ export const OnboardingPages = ({
   showNext = true,
   ...props
 }: Props) => {
-  const backgroundColorAnim = useRef(new Animated.Value(0)).current;
-  const [previousPage, setPreviousPage] = React.useState(0);
+  const pageWidth = props.width || width;
   const currentPage_ = props.pages[props.currentPage];
-  const currentBackgroundColor = currentPage_?.backgroundColor || '';
+  const currentBackgroundColor = currentPage_?.backgroundColor ?? 'white';
   const isLight = tinycolor(currentBackgroundColor).getBrightness() > 180;
   const footerBackgroundColor = isLight
     ? tinycolor(currentBackgroundColor).darken(30).toString()
@@ -35,27 +45,62 @@ export const OnboardingPages = ({
       ? tinycolor(footerBackgroundColor).darken(60).toString()
       : tinycolor(footerBackgroundColor).lighten(60).toString();
 
-  const previousBackgroundColor =
-    props.pages[previousPage]?.backgroundColor || 'white';
-  // Interpolating background color based on backgroundColorAnim value
-  const interpolatedBackgroundColor = backgroundColorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [currentBackgroundColor, previousBackgroundColor],
-    extrapolate: 'clamp',
-  });
+  const interpolatedBackgroundColor = useMemo(() => {
+    const pages = props.pages;
+    // interpolate() requires at least 2 stops; for 0 or 1 pages there is
+    // nothing to animate between, so use the solid current color.
+    if (pages.length < 2) return currentBackgroundColor;
+    const inputRange = pages.map((_, i) => i * pageWidth);
+    const outputRange = pages.map((p) => p.backgroundColor ?? 'white');
+    return props.scrollX.interpolate({
+      inputRange,
+      outputRange,
+      extrapolate: 'clamp',
+    });
+  }, [props.pages, props.scrollX, pageWidth, currentBackgroundColor]);
 
-  const setPage_ = (newPageIndex: number) => {
-    setPreviousPage(props.currentPage);
-    props.setPage(newPageIndex);
+  const paginationProps = {
+    width: pageWidth,
+    onNext: props.nextPage,
+    onSkip: props.onSkip,
+    color,
+    showNext,
+    onDone: props.onDone,
+    showDone: props.showDone,
+    showPrevious: props.showPrevious,
+    backgroundColor: footerBackgroundColor,
+    animatedValue: props.dotsAnimatedValue,
+    showSkip: props.showSkip,
+    numberOfScreens: props.pages.length,
+    skipLabel: props.skipLabel,
+    nextLabel: props.nextLabel,
+    previousLabel: props.previousLabel,
+    hasSkipPosition: !!props.skipButtonPosition,
+    doneLabel: props.doneLabel,
+    paginationStyle: props.paginationStyle,
+    progressBarStyle: props.progressBarStyle,
+    progressBarFillStyle: props.progressBarFillStyle,
+    dotsAreTappable: props.dotsAreTappable,
+    mirror: props.mirror,
+    paginationContainerStyle: props.paginationContainerStyle,
+    buttonRightContainerStyle: props.buttonRightContainerStyle,
+    buttonLeftContainerStyle: props.buttonLeftContainerStyle,
+    dotsContainerStyle: props.dotsContainerStyle,
+    doneLabelStyle: props.doneLabelStyle,
+    skipLabelStyle: props.skipLabelStyle,
+    previousLabelStyle: props.previousLabelStyle,
+    nextLabelStyle: props.nextLabelStyle,
+    skipButtonContainerStyle: props.skipButtonContainerStyle,
+    nextButtonContainerStyle: props.nextButtonContainerStyle,
+    doneButtonContainerStyle: props.doneButtonContainerStyle,
+    previousButtonContainerStyle: props.previousButtonContainerStyle,
   };
 
   return (
     <Animated.View
       style={[
         styles.container,
-        {
-          backgroundColor: interpolatedBackgroundColor,
-        },
+        { backgroundColor: interpolatedBackgroundColor },
       ]}
     >
       {props.skipButtonPosition && props.showSkip && (
@@ -73,62 +118,37 @@ export const OnboardingPages = ({
             props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
           {!props.customFooter && showPagination && (
-            <Pagination
-              width={props.width || width}
-              onNext={props.nextPage}
-              onSkip={props.onSkip}
-              color={color}
-              showNext={showNext}
-              onDone={props.onDone}
-              showDone={props.showDone}
-              backgroundColor={footerBackgroundColor}
-              animatedValue={props.scrollX}
-              showSkip={props.showSkip}
-              numberOfScreens={props.pages.length}
-              skipLabel={props.skipLabel}
-              nextLabel={props.nextLabel}
-              hasSkipPosition={!!props.skipButtonPosition}
-              doneLabel={props.doneLabel}
-              paginationContainerStyle={props.paginationContainerStyle}
-              buttonRightContainerStyle={props.buttonRightContainerStyle}
-              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-              dotsContainerStyle={props.dotsContainerStyle}
-              doneLabelStyle={props.doneLabelStyle}
-              skipLabelStyle={props.skipLabelStyle}
-              nextLabelStyle={props.nextLabelStyle}
-              skipButtonContainerStyle={props.skipButtonContainerStyle}
-              nextButtonContainerStyle={props.nextButtonContainerStyle}
-              doneButtonContainerStyle={props.doneButtonContainerStyle}
-            />
+            <Pagination {...paginationProps} />
           )}
         </>
       )}
       <Animated.FlatList
-        ref={props.flatListRef}
+        ref={(node) => props.setFlatListRef(node as FlatList | null)}
         data={props.pages}
         horizontal
         pagingEnabled
         showsHorizontalScrollIndicator={false}
+        scrollEnabled={props.scrollEnabled}
+        style={props.mirror ? styles.mirror : undefined}
         keyExtractor={(_, index) => index.toString()}
         renderItem={({ item, index }) => (
           <OnboardingPage
             color={color}
-            width={props.width || width}
+            width={pageWidth}
             swap={props.swap}
+            mirror={props.mirror}
             key={index}
             {...item}
           />
         )}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { x: props.scrollX } } }],
-          { useNativeDriver: false }
-        )}
+        onScroll={props.onScroll}
+        onScrollBeginDrag={props.onScrollBeginDrag}
         scrollEventThrottle={16}
         onMomentumScrollEnd={(event) => {
           const pageIndex = Math.round(
-            event.nativeEvent.contentOffset.x / (props.width || width)
+            event.nativeEvent.contentOffset.x / pageWidth
           );
-          setPage_(pageIndex || 0);
+          props.setPage(pageIndex || 0);
         }}
       />
       {props.paginationPosition !== 'top' && (
@@ -137,33 +157,7 @@ export const OnboardingPages = ({
             props.customFooter &&
             props.customFooter({ nextPage: props.nextPage })}
           {!props.customFooter && showPagination && (
-            <Pagination
-              width={props.width || width}
-              onNext={props.nextPage}
-              onSkip={props.onSkip}
-              color={color}
-              hasSkipPosition={!!props.skipButtonPosition}
-              onDone={props.onDone}
-              showDone={props.showDone}
-              backgroundColor={footerBackgroundColor}
-              animatedValue={props.scrollX}
-              showSkip={props.showSkip}
-              numberOfScreens={props.pages.length}
-              skipLabel={props.skipLabel}
-              nextLabel={props.nextLabel}
-              doneLabel={props.doneLabel}
-              paginationContainerStyle={props.paginationContainerStyle}
-              buttonRightContainerStyle={props.buttonRightContainerStyle}
-              buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-              dotsContainerStyle={props.dotsContainerStyle}
-              doneLabelStyle={props.doneLabelStyle}
-              skipLabelStyle={props.skipLabelStyle}
-              skipButtonContainerStyle={props.skipButtonContainerStyle}
-              nextButtonContainerStyle={props.nextButtonContainerStyle}
-              doneButtonContainerStyle={props.doneButtonContainerStyle}
-              showNext={showNext}
-              nextLabelStyle={props.nextLabelStyle}
-            />
+            <Pagination {...paginationProps} />
           )}
         </>
       )}
@@ -202,4 +196,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  mirror: {
+    transform: [{ scaleX: -1 }],
+  },
 });

package/src/components/Page.tsx

@@ -22,10 +22,12 @@ export type Page = {
   titleStyle?: StyleProp<TextStyle>;
   subtitleStyle?: StyleProp<TextStyle>;
   swap?: boolean;
+  /** Internal: counter-flips page content when the slider is mirrored for RTL. */
+  mirror?: boolean;
 };
 
 const { width, height } = Dimensions.get('window');
-const potrait = height > width;
+const portrait = height > width;
 
 export function OnboardingPage(props: Page) {
   return (
@@ -35,6 +37,7 @@ export function OnboardingPage(props: Page) {
         { width: props.width },
         props.containerStyle,
         props.swap && styles.swapStyle,
+        props.mirror && styles.mirror,
       ]}
     >
       <View style={[styles.imageContainer, props.imageContainerStyle]}>
@@ -87,7 +90,7 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     flex: 0,
-    paddingBottom: potrait ? 60 : 10,
+    paddingBottom: portrait ? 60 : 10,
     alignItems: 'center',
     width: '100%',
   },
@@ -97,4 +100,7 @@ const styles = StyleSheet.create({
   swapStyle: {
     flexDirection: 'column-reverse',
   },
+  mirror: {
+    transform: [{ scaleX: -1 }],
+  },
 });

package/src/components/Pagination.tsx

@@ -1,5 +1,6 @@
 import {
   View,
+  Pressable,
   Animated,
   StyleSheet,
   type StyleProp,
@@ -7,6 +8,7 @@ import {
   type TextStyle,
 } from 'react-native';
 import React from 'react';
+import tinycolor from 'tinycolor2';
 import { useOnboarding } from '../hooks/useOnboarding';
 import { Button } from './button';
 
@@ -19,9 +21,11 @@ type FooterProps = {
   showDone?: boolean;
   showSkip?: boolean;
   showNext?: boolean;
+  showPrevious?: boolean;
   nextLabel?: string | React.ReactNode;
   skipLabel?: string | React.ReactNode;
   doneLabel?: string | React.ReactNode;
+  previousLabel?: string | React.ReactNode;
   paginationContainerStyle?: StyleProp<ViewStyle>;
   buttonRightContainerStyle?: StyleProp<ViewStyle>;
   buttonLeftContainerStyle?: StyleProp<ViewStyle>;
@@ -29,20 +33,30 @@ type FooterProps = {
   doneLabelStyle?: StyleProp<TextStyle>;
   hasSkipPosition?: boolean;
   skipLabelStyle?: StyleProp<TextStyle>;
+  previousLabelStyle?: StyleProp<TextStyle>;
   skipButtonContainerStyle?: StyleProp<ViewStyle>;
   nextButtonContainerStyle?: StyleProp<ViewStyle>;
   doneButtonContainerStyle?: StyleProp<ViewStyle>;
+  previousButtonContainerStyle?: StyleProp<ViewStyle>;
   nextLabelStyle?: StyleProp<TextStyle>;
   paginationPosition?: 'top' | 'bottom';
+  paginationStyle?: 'dots' | 'progress';
+  progressBarStyle?: StyleProp<ViewStyle>;
+  progressBarFillStyle?: StyleProp<ViewStyle>;
+  dotsAreTappable?: boolean;
+  mirror?: boolean;
   onDone?: () => void;
   onSkip?: () => void;
   onNext?: () => void;
 };
 
 export function Pagination(props: FooterProps) {
-  const { isDone } = useOnboarding();
+  const { isDone, currentPage, progress, scrollTo, previousPage } =
+    useOnboarding();
   const dots = Array.from({ length: props.numberOfScreens }, (_, i) => i);
   const width = props.width;
+  const showPrevious = props.showPrevious && currentPage > 0;
+
   return (
     <View
       style={[
@@ -60,7 +74,15 @@ export function Pagination(props: FooterProps) {
           props.buttonLeftContainerStyle,
         ]}
       >
-        {props.showSkip && !props.hasSkipPosition && (
+        {showPrevious && (
+          <Button
+            onPress={() => previousPage()}
+            buttonTextStyle={props.previousLabelStyle}
+            buttonStyle={props.previousButtonContainerStyle}
+            label={props.previousLabel || 'Back'}
+          />
+        )}
+        {!showPrevious && props.showSkip && !props.hasSkipPosition && (
           <Button
             onPress={props.onSkip}
             buttonTextStyle={props.skipLabelStyle}
@@ -69,29 +91,86 @@ export function Pagination(props: FooterProps) {
           />
         )}
       </View>
-      <View style={styles.dotsContainer}>
-        {dots.map((_, i) => {
-          const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
-          const dotOpacity = props.animatedValue.interpolate({
-            inputRange,
-            outputRange: [0.3, 1, 0.3],
-            extrapolate: 'clamp',
-          });
-          return (
-            <Animated.View
-              key={i}
-              style={[
-                styles.dot,
-                {
-                  backgroundColor: props.color,
-                  opacity: dotOpacity,
-                },
-                props.dotsContainerStyle,
-              ]}
-            />
-          );
-        })}
-      </View>
+
+      {props.paginationStyle === 'progress' ? (
+        <View
+          accessible
+          accessibilityRole="progressbar"
+          accessibilityValue={{ min: 0, max: 100, now: progress }}
+          style={[
+            styles.progressTrack,
+            // Derive a faint track from the (background-aware) fill color so it
+            // stays visible on both light and dark pages.
+            {
+              backgroundColor: tinycolor(props.color)
+                .setAlpha(0.25)
+                .toRgbString(),
+            },
+            // Mirror the fill direction so it grows from the trailing edge.
+            props.mirror && styles.mirror,
+            props.progressBarStyle,
+          ]}
+        >
+          <View
+            style={[
+              styles.progressFill,
+              { backgroundColor: props.color, width: `${progress}%` },
+              props.progressBarFillStyle,
+            ]}
+          />
+        </View>
+      ) : (
+        <View
+          style={[
+            styles.dotsContainer,
+            props.mirror && styles.mirror,
+            props.dotsContainerStyle,
+          ]}
+        >
+          {dots.map((_, i) => {
+            const inputRange = [(i - 1) * width, i * width, (i + 1) * width];
+            const dotOpacity = props.animatedValue.interpolate({
+              inputRange,
+              outputRange: [0.3, 1, 0.3],
+              extrapolate: 'clamp',
+            });
+            const dotProps = {
+              accessibilityRole: props.dotsAreTappable
+                ? ('button' as const)
+                : ('image' as const),
+              accessibilityLabel: `Page ${i + 1} of ${props.numberOfScreens}`,
+              accessibilityState: { selected: i === currentPage },
+            };
+            const dot = (
+              <Animated.View
+                key={i}
+                style={[
+                  styles.dot,
+                  {
+                    backgroundColor: props.color,
+                    opacity: dotOpacity,
+                  },
+                ]}
+              />
+            );
+            return props.dotsAreTappable ? (
+              <Pressable
+                key={i}
+                onPress={() => scrollTo(i)}
+                hitSlop={8}
+                {...dotProps}
+              >
+                {dot}
+              </Pressable>
+            ) : (
+              <View key={i} {...dotProps}>
+                {dot}
+              </View>
+            );
+          })}
+        </View>
+      )}
+
       <View
         style={[
           styles.buttons,
@@ -138,21 +217,34 @@ const styles = StyleSheet.create({
   },
   dotsContainer: {
     flexDirection: 'row',
-    flex: 1,
+    flex: 2,
     justifyContent: 'center',
+    alignItems: 'center',
+  },
+  progressTrack: {
+    flex: 2,
+    height: 6,
+    borderRadius: 3,
+    marginHorizontal: 16,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 3,
   },
   text: {
     fontSize: 16,
   },
   buttons: {
-    minWidth: 200,
+    flex: 1,
   },
   rightButton: {
     alignItems: 'flex-end',
-    paddingRight: 30,
   },
   leftButton: {
     alignItems: 'flex-start',
-    paddingLeft: 30,
+  },
+  mirror: {
+    transform: [{ scaleX: -1 }],
   },
 });