react-native-app-onboard 0.1.9 → 0.2.0

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 }],
   },
 });

package/src/components/Swiper.tsx

@@ -1,109 +1,87 @@
 import React from 'react';
 import { OnboardingPages } from './OnboardingPages';
 import { CustomPages } from './CustomPages';
-import { Animated } from 'react-native';
+import {
+  Animated,
+  I18nManager,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+} from 'react-native';
 import { useOnboarding } from '../hooks/useOnboarding';
 import type { OnboardingProps } from '../types';
 
 export const Swiper: React.FC<OnboardingProps> = (props) => {
-  const scrollX = React.useRef(new Animated.Value(0)).current;
+  // `scrollX` is always JS-driven because the background-color interpolation
+  // cannot run on the native thread. When `useNativeDriver` is enabled we also
+  // keep `nativeScrollX`, driven natively, for transform/opacity animations
+  // (the pagination dots), and mirror its offset onto `scrollX` via a JS
+  // listener so the color interpolation keeps working.
+  const scrollX = React.useMemo(() => new Animated.Value(0), []);
+  const nativeScrollX = React.useMemo(() => new Animated.Value(0), []);
+  const nativeDriverEnabled = props.useNativeDriver ?? false;
+  const dotsAnimatedValue = nativeDriverEnabled ? nativeScrollX : scrollX;
+
+  // Direction handling: default to the device direction. We only mirror
+  // manually (via scaleX) when the requested direction differs from the
+  // device's — when they match, React Native already lays the row out
+  // correctly and an extra flip would double-invert it.
+  const rtl = props.rtl ?? I18nManager.isRTL;
+  const mirror = rtl !== I18nManager.isRTL;
+
   const {
-    flatListRef,
+    setFlatListRef,
     setCurrentPage,
     currentPage,
     numberOfScreens,
     nextPage,
     scrollEnabled,
+    pauseAutoPlay,
   } = useOnboarding();
+
+  const onScroll = React.useMemo(
+    () =>
+      nativeDriverEnabled
+        ? Animated.event(
+            [{ nativeEvent: { contentOffset: { x: nativeScrollX } } }],
+            {
+              useNativeDriver: true,
+              listener: (event: NativeSyntheticEvent<NativeScrollEvent>) =>
+                scrollX.setValue(event.nativeEvent.contentOffset.x),
+            }
+          )
+        : Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
+            useNativeDriver: false,
+          }),
+    [nativeDriverEnabled, nativeScrollX, scrollX]
+  );
+
+  // Stop autoplay as soon as the user takes manual control of the slider.
+  const onScrollBeginDrag = React.useCallback(
+    () => pauseAutoPlay(),
+    [pauseAutoPlay]
+  );
+
+  const shared = {
+    setFlatListRef,
+    scrollX,
+    dotsAnimatedValue,
+    onScroll,
+    onScrollBeginDrag,
+    setPage: setCurrentPage,
+    currentPage,
+    numberOfScreens,
+    nextPage,
+    scrollEnabled,
+    mirror,
+  };
+
   if (props.children) {
     return (
-      <CustomPages
-        customFooter={props.customFooter}
-        showPagination={props.showPagination}
-        flatListRef={flatListRef}
-        scrollX={scrollX}
-        setPage={setCurrentPage}
-        scrollEnabled={scrollEnabled}
-        currentPage={currentPage}
-        numberOfScreens={numberOfScreens}
-        nextPage={nextPage}
-        showDone={props.showDone}
-        showNext={props.showNext}
-        onDone={props.onDone}
-        skipButtonContainerStyle={props.skipButtonContainerStyle}
-        nextButtonContainerStyle={props.nextButtonContainerStyle}
-        doneButtonContainerStyle={props.doneButtonContainerStyle}
-        skipButtonPosition={props.skipButtonPosition}
-        paginationContainerStyle={props.paginationContainerStyle}
-        paginationPosition={props.paginationPosition}
-        nextLabel={props.nextLabel}
-        skipLabel={props.skipLabel}
-        doneLabel={props.doneLabel}
-        showSkip={props.showSkip}
-        onSkip={props.onSkip}
-        scrollAnimationDuration={props.scrollAnimationDuration}
-        buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-        buttonRightContainerStyle={props.buttonRightContainerStyle}
-        dotsContainerStyle={props.dotsContainerStyle}
-        doneLabelStyle={props.doneLabelStyle}
-        skipLabelStyle={props.skipLabelStyle}
-        nextLabelStyle={props.nextLabelStyle}
-        width={props.width}
-        color={props.color}
-        useNativeDriver={props.useNativeDriver}
-        imageContainerStyle={props.imageContainerStyle}
-        containerStyle={props.containerStyle}
-        titleContainerStyle={props.titleContainerStyle}
-        titleStyle={props.titleStyle}
-        subtitleStyle={props.subtitleStyle}
-        swap={props.swap}
-      >
+      <CustomPages {...props} {...shared}>
         {props.children}
       </CustomPages>
     );
   }
 
-  return (
-    <OnboardingPages
-      showDone={props.showDone}
-      customFooter={props.customFooter}
-      flatListRef={flatListRef}
-      scrollX={scrollX}
-      setPage={setCurrentPage}
-      currentPage={currentPage}
-      paginationPosition={props.paginationPosition}
-      nextPage={nextPage}
-      showSkip={props.showSkip}
-      onDone={props.onDone}
-      pages={props.pages || []}
-      width={props.width}
-      showNext={props.showNext}
-      skipButtonContainerStyle={props.skipButtonContainerStyle}
-      nextButtonContainerStyle={props.nextButtonContainerStyle}
-      doneButtonContainerStyle={props.doneButtonContainerStyle}
-      skipLabelStyle={props.skipLabelStyle}
-      skipButtonPosition={props.skipButtonPosition}
-      showPagination={props.showPagination}
-      color={props.color}
-      onSkip={props.onSkip}
-      swap={props.swap}
-      scrollEnabled={scrollEnabled}
-      nextLabel={props.nextLabel}
-      skipLabel={props.skipLabel}
-      doneLabel={props.doneLabel}
-      scrollAnimationDuration={props.scrollAnimationDuration}
-      buttonLeftContainerStyle={props.buttonLeftContainerStyle}
-      buttonRightContainerStyle={props.buttonRightContainerStyle}
-      dotsContainerStyle={props.dotsContainerStyle}
-      doneLabelStyle={props.doneLabelStyle}
-      nextLabelStyle={props.nextLabelStyle}
-      useNativeDriver={props.useNativeDriver}
-      imageContainerStyle={props.imageContainerStyle}
-      containerStyle={props.containerStyle}
-      titleContainerStyle={props.titleContainerStyle}
-      titleStyle={props.titleStyle}
-      subtitleStyle={props.subtitleStyle}
-      paginationContainerStyle={props.paginationContainerStyle}
-    />
-  );
+  return <OnboardingPages {...props} {...shared} pages={props.pages || []} />;
 };

package/src/components/button.tsx

@@ -18,7 +18,12 @@ type ButtonProps = {
 
 export const Button = (props: ButtonProps) => {
   return typeof props.label === 'string' ? (
-    <TouchableOpacity onPress={props.onPress} style={props.buttonStyle}>
+    <TouchableOpacity
+      onPress={props.onPress}
+      style={props.buttonStyle}
+      accessibilityRole="button"
+      accessibilityLabel={props.label}
+    >
       <Text
         style={[
           styles.text,