@bifold/core 2.4.6 → 2.5.0

package/src/screens/ListContacts.tsx

@@ -1,112 +0,0 @@
-import { ConnectionRecord, ConnectionType, DidExchangeState } from '@credo-ts/core'
-import { useAgent, useConnections } from '@credo-ts/react-hooks'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useCallback, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { DeviceEventEmitter, FlatList, StyleSheet, View } from 'react-native'
-
-import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
-import EmptyListContacts from '../components/misc/EmptyListContacts'
-import { EventTypes } from '../constants'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { BifoldError } from '../types/error'
-import { ContactStackParams, Screens, Stacks } from '../types/navigators'
-import { BifoldAgent } from '../utils/agent'
-import { fetchContactsByLatestMessage } from '../utils/contacts'
-import { testIdWithKey } from '../utils/testable'
-import { TOKENS, useServices } from '../container-api'
-
-interface ListContactsProps {
-  navigation: StackNavigationProp<ContactStackParams, Screens.Contacts>
-}
-
-const ListContacts: React.FC<ListContactsProps> = ({ navigation }) => {
-  const { ColorPalette } = useTheme()
-  const { t } = useTranslation()
-  const { agent } = useAgent()
-  const [connections, setConnections] = useState<ConnectionRecord[]>([])
-  const { records: connectionRecords } = useConnections()
-  const [store] = useStore()
-  const [{ contactHideList }, ContactListItem, defaultScreenOptionsDict] = useServices([
-    TOKENS.CONFIG,
-    TOKENS.COMPONENT_CONTACT_LIST_ITEM,
-    TOKENS.OBJECT_SCREEN_CONFIG,
-  ])
-  const style = StyleSheet.create({
-    list: {
-      backgroundColor: ColorPalette.brand.secondaryBackground,
-    },
-    itemSeparator: {
-      backgroundColor: ColorPalette.brand.primaryBackground,
-      height: 1,
-      marginHorizontal: 16,
-    },
-  })
-
-  useEffect(() => {
-    const fetchAndSetConnections = async () => {
-      if (!agent) return
-      let orderedContacts = await fetchContactsByLatestMessage(agent as BifoldAgent, connectionRecords)
-
-      // if developer mode is disabled, filter out mediator connections and connections in the hide list
-      if (!store.preferences.developerModeEnabled) {
-        orderedContacts = orderedContacts.filter((r) => {
-          return (
-            !r.connectionTypes.includes(ConnectionType.Mediator) &&
-            !contactHideList?.includes((r.theirLabel || r.alias) ?? '') &&
-            r.state === DidExchangeState.Completed
-          )
-        })
-      }
-
-      setConnections(orderedContacts)
-    }
-
-    fetchAndSetConnections().catch((err) => {
-      agent?.config.logger.error('Error fetching contacts:', err)
-      const error = new BifoldError(t('Error.Title1046'), t('Error.Message1046'), (err as Error)?.message ?? err, 1046)
-      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
-    })
-  }, [agent, connectionRecords, store.preferences.developerModeEnabled, contactHideList, t])
-
-  const onPressAddContact = useCallback(() => {
-    navigation.getParent()?.navigate(Stacks.ConnectStack, { screen: Screens.Scan, params: { defaultToConnect: true } })
-  }, [navigation])
-
-  useEffect(() => {
-    if (store.preferences.useConnectionInviterCapability) {
-      navigation.setOptions({
-        headerRight: () => (
-          <IconButton
-            buttonLocation={ButtonLocation.Right}
-            accessibilityLabel={t('Contacts.AddContact')}
-            testID={testIdWithKey('AddContact')}
-            onPress={onPressAddContact}
-            icon="plus-circle-outline"
-          />
-        ),
-      })
-    } else {
-      navigation.setOptions({
-        headerRight: defaultScreenOptionsDict[Screens.Contacts]?.headerRight,
-      })
-    }
-  }, [store.preferences.useConnectionInviterCapability, navigation, t, onPressAddContact, defaultScreenOptionsDict])
-
-  return (
-    <View>
-      <FlatList
-        style={style.list}
-        data={connections}
-        ItemSeparatorComponent={() => <View style={style.itemSeparator} />}
-        keyExtractor={(connection) => connection.id}
-        renderItem={({ item: connection }) => <ContactListItem contact={connection} navigation={navigation} />}
-        ListEmptyComponent={() => <EmptyListContacts navigation={navigation} />}
-        showsVerticalScrollIndicator={false}
-      />
-    </View>
-  )
-}
-
-export default ListContacts

package/src/screens/ListCredentials.tsx

@@ -1,135 +0,0 @@
-import { AnonCredsCredentialMetadataKey } from '@credo-ts/anoncreds'
-import { CredentialExchangeRecord, CredentialState, SdJwtVcRecord, W3cCredentialRecord } from '@credo-ts/core'
-import { useCredentialByState } from '@credo-ts/react-hooks'
-import { useNavigation, useIsFocused } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FlatList, View } from 'react-native'
-
-import CredentialCard from '../components/misc/CredentialCard'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { useTour } from '../contexts/tour/tour-context'
-import { RootStackParams, Screens } from '../types/navigators'
-import { TOKENS, useServices } from '../container-api'
-import { EmptyListProps } from '../components/misc/EmptyList'
-import { CredentialListFooterProps } from '../types/credential-list-footer'
-import { useOpenIDCredentials } from '../modules/openid/context/OpenIDCredentialRecordProvider'
-import { GenericCredentialExchangeRecord } from '../types/credentials'
-import { CredentialErrors } from '../components/misc/CredentialCard11'
-import { BaseTourID } from '../types/tour'
-import { OpenIDCredentialType } from '../modules/openid/types'
-
-const ListCredentials: React.FC = () => {
-  const { t } = useTranslation()
-  const [store, dispatch] = useStore()
-  const [
-    CredentialListOptions,
-    credentialEmptyList,
-    credentialListFooter,
-    { enableTours: enableToursConfig, credentialHideList },
-  ] = useServices([
-    TOKENS.COMPONENT_CRED_LIST_OPTIONS,
-    TOKENS.COMPONENT_CRED_EMPTY_LIST,
-    TOKENS.COMPONENT_CRED_LIST_FOOTER,
-    TOKENS.CONFIG,
-  ])
-  const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
-  const { ColorPalette } = useTheme()
-  const { start, stop } = useTour()
-  const screenIsFocused = useIsFocused()
-  const {
-    openIdState: { w3cCredentialRecords, sdJwtVcRecords },
-  } = useOpenIDCredentials()
-
-  let credentials: GenericCredentialExchangeRecord[] = [
-    ...useCredentialByState(CredentialState.CredentialReceived),
-    ...useCredentialByState(CredentialState.Done),
-    ...w3cCredentialRecords,
-    ...sdJwtVcRecords,
-  ]
-
-  const CredentialEmptyList = credentialEmptyList as React.FC<EmptyListProps>
-  const CredentialListFooter = credentialListFooter as React.FC<CredentialListFooterProps>
-
-  // Filter out hidden credentials when not in dev mode
-  if (!store.preferences.developerModeEnabled) {
-    credentials = credentials.filter((r) => {
-      const credDefId = r.metadata.get(AnonCredsCredentialMetadataKey)?.credentialDefinitionId
-      return !credentialHideList?.includes(credDefId)
-    })
-  }
-
-  useEffect(() => {
-    const shouldShowTour = enableToursConfig && store.tours.enableTours && !store.tours.seenCredentialsTour
-
-    if (shouldShowTour && screenIsFocused) {
-      start(BaseTourID.CredentialsTour)
-      dispatch({
-        type: DispatchAction.UPDATE_SEEN_CREDENTIALS_TOUR,
-        payload: [true],
-      })
-    }
-  }, [enableToursConfig, store.tours.enableTours, store.tours.seenCredentialsTour, screenIsFocused, start, dispatch])
-
-  // stop the tour when the screen unmounts
-  useEffect(() => {
-    return stop
-  }, [stop])
-
-  const renderCardItem = (cred: GenericCredentialExchangeRecord) => {
-    return (
-      <CredentialCard
-        credential={cred as CredentialExchangeRecord}
-        credentialErrors={
-          (cred as CredentialExchangeRecord).revocationNotification?.revocationDate && [CredentialErrors.Revoked]
-        }
-        onPress={() => {
-          if (cred instanceof W3cCredentialRecord) {
-            navigation.navigate(Screens.OpenIDCredentialDetails, {
-              credentialId: cred.id,
-              type: OpenIDCredentialType.W3cCredential,
-            })
-          } else if (cred instanceof SdJwtVcRecord) {
-            navigation.navigate(Screens.OpenIDCredentialDetails, {
-              credentialId: cred.id,
-              type: OpenIDCredentialType.SdJwtVc,
-            })
-          } else {
-            navigation.navigate(Screens.CredentialDetails, { credentialId: cred.id })
-          }
-        }}
-      />
-    )
-  }
-
-  return (
-    <View>
-      <FlatList
-        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
-        data={credentials.sort((a, b) => new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf())}
-        keyExtractor={(credential) => credential.id}
-        renderItem={({ item: credential, index }) => {
-          return (
-            <View
-              style={{
-                marginHorizontal: 15,
-                marginTop: 15,
-                marginBottom: index === credentials.length - 1 ? 45 : 0,
-              }}
-            >
-              {renderCardItem(credential)}
-            </View>
-          )
-        }}
-        ListEmptyComponent={() => <CredentialEmptyList message={t('Credentials.EmptyList')} />}
-        ListFooterComponent={() => <CredentialListFooter credentialsCount={credentials.length} />}
-      />
-      <CredentialListOptions />
-    </View>
-  )
-}
-
-export default ListCredentials

package/src/screens/ListProofRequests.tsx

@@ -1,148 +0,0 @@
-import { ProofRequestTemplate, hasPredicates, isParameterizable } from '@bifold/verifier'
-import { MetaOverlay, OverlayType } from '@bifold/oca'
-import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack'
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { FlatList, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-import Icon from 'react-native-vector-icons/MaterialIcons'
-
-import EmptyList from '../components/misc/EmptyList'
-import { TOKENS, useServices } from '../container-api'
-import { useStore } from '../contexts/store'
-import { useTheme } from '../contexts/theme'
-import { useTemplates } from '../hooks/proof-request-templates'
-import { ProofRequestsStackParams, Screens } from '../types/navigators'
-import { testIdWithKey } from '../utils/testable'
-import { ThemedText } from '../components/texts/ThemedText'
-
-interface ProofRequestsCardProps {
-  navigation: StackNavigationProp<ProofRequestsStackParams>
-  template: ProofRequestTemplate
-  connectionId?: string
-}
-
-const ProofRequestsCard: React.FC<ProofRequestsCardProps> = ({ navigation, template, connectionId }) => {
-  const { t } = useTranslation()
-  const { i18n } = useTranslation()
-  const { ListItems } = useTheme()
-  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const style = StyleSheet.create({
-    card: {
-      ...ListItems.requestTemplateBackground,
-      flexDirection: 'row',
-      borderRadius: 8,
-      padding: 12,
-      marginBottom: 10,
-    },
-    textContainer: {
-      flex: 1,
-    },
-    templateTitle: {
-      ...ListItems.requestTemplateTitle,
-      marginBottom: 4,
-    },
-    templateDetails: {
-      ...ListItems.requestTemplateDetails,
-      marginBottom: 4,
-    },
-    templateZkpLabel: {
-      ...ListItems.requestTemplateZkpLabel,
-    },
-    iconContainer: {
-      alignSelf: 'center',
-    },
-    icon: {
-      ...ListItems.requestTemplateIcon,
-    },
-  })
-
-  const [meta, setMeta] = useState<MetaOverlay | undefined>(undefined)
-
-  useEffect(() => {
-    bundleResolver.resolve({ identifiers: { templateId: template.id }, language: i18n.language }).then((bundle) => {
-      const metaOverlay =
-        bundle?.metaOverlay ||
-        new MetaOverlay({
-          capture_base: '',
-          type: OverlayType.Meta10,
-          name: template.name,
-          description: template.description,
-          language: i18n.language,
-          credential_help_text: '',
-          credential_support_url: '',
-          issuer: '',
-          issuer_description: '',
-          issuer_url: '',
-        })
-      setMeta(metaOverlay)
-    })
-  }, [bundleResolver, template, i18n.language])
-
-  return meta ? (
-    <TouchableOpacity
-      style={style.card}
-      onPress={() => navigation.navigate(Screens.ProofRequestDetails, { templateId: template.id, connectionId })}
-      accessibilityLabel={t('Screens.ProofRequestDetails')}
-      accessibilityRole="button"
-      testID={testIdWithKey('ProofRequestsCard')}
-    >
-      <View style={style.textContainer}>
-        <ThemedText style={style.templateTitle} numberOfLines={1}>
-          {meta.name}
-        </ThemedText>
-        <ThemedText style={style.templateDetails} numberOfLines={2}>
-          {meta.description}
-        </ThemedText>
-        {hasPredicates(template) && (
-          <ThemedText style={style.templateZkpLabel}>{t('Verifier.ZeroKnowledgeProof')}</ThemedText>
-        )}
-        {isParameterizable(template) && (
-          <ThemedText style={style.templateZkpLabel}>{t('Verifier.Parameterizable')}</ThemedText>
-        )}
-      </View>
-      <View style={style.iconContainer}>
-        <Icon style={style.icon} name={'chevron-right'} />
-      </View>
-    </TouchableOpacity>
-  ) : null
-}
-
-type ListProofRequestsProps = StackScreenProps<ProofRequestsStackParams, Screens.ProofRequests>
-
-const ListProofRequests: React.FC<ListProofRequestsProps> = ({ navigation, route }) => {
-  const { t } = useTranslation()
-  const { ColorPalette } = useTheme()
-  const [store] = useStore()
-
-  const style = StyleSheet.create({
-    container: {
-      flexGrow: 1,
-      margin: 24,
-      elevation: 5,
-    },
-  })
-
-  const connectionId = route?.params?.connectionId
-
-  // if useDevVerifierTemplates not set then exclude dev templates
-  const proofRequestTemplates = useTemplates().filter(
-    (tem) => store.preferences.useDevVerifierTemplates || !tem.devOnly
-  )
-
-  return (
-    <SafeAreaView style={style.container} edges={['left', 'right']}>
-      <FlatList
-        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
-        data={proofRequestTemplates}
-        keyExtractor={(records) => records.id}
-        renderItem={({ item }) => {
-          return <ProofRequestsCard template={item} connectionId={connectionId} navigation={navigation} />
-        }}
-        ListEmptyComponent={() => <EmptyList message={t('Verifier.EmptyList')} />}
-      />
-    </SafeAreaView>
-  )
-}
-
-export default ListProofRequests

package/src/screens/MobileVerifierLoading.tsx

@@ -1,106 +0,0 @@
-import { useAgent, useProofById } from '@credo-ts/react-hooks'
-import { isPresentationFailed, isPresentationReceived } from '@bifold/verifier'
-import { StackScreenProps } from '@react-navigation/stack'
-import React, { useCallback, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native'
-
-import PresentationLoading from '../components/animated/PresentationLoading'
-import Button, { ButtonType } from '../components/buttons/Button'
-import SafeAreaModal from '../components/modals/SafeAreaModal'
-import { useTheme } from '../contexts/theme'
-import { useOutOfBandByConnectionId } from '../hooks/connections'
-import { DeliveryStackParams, Screens } from '../types/navigators'
-import { testIdWithKey } from '../utils/testable'
-import { ThemedText } from '../components/texts/ThemedText'
-
-type MobileVerifierLoadingProps = StackScreenProps<DeliveryStackParams, Screens.MobileVerifierLoading>
-
-const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigation, route }) => {
-  const { proofId, connectionId } = route.params
-  const goalCode = useOutOfBandByConnectionId(connectionId)?.outOfBandInvitation.goalCode
-  const proofRecord = useProofById(proofId)
-  const { t } = useTranslation()
-  const { ColorPalette, TextTheme } = useTheme()
-  const { agent } = useAgent()
-
-  if (!agent) {
-    throw new Error('Unable to fetch agent from Credo')
-  }
-
-  const styles = StyleSheet.create({
-    container: {
-      height: '100%',
-      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
-      padding: 20,
-    },
-    image: {
-      marginTop: 20,
-    },
-    messageContainer: {
-      alignItems: 'center',
-    },
-    messageText: {
-      fontWeight: TextTheme.normal.fontWeight,
-      textAlign: 'center',
-      marginTop: 30,
-    },
-    controlsContainer: {
-      marginTop: 'auto',
-      margin: 20,
-    },
-    delayMessageText: {
-      textAlign: 'center',
-      marginTop: 20,
-    },
-  })
-
-  const onDismissModalTouched = useCallback(() => {
-    if (proofRecord && (isPresentationReceived(proofRecord) || isPresentationFailed(proofRecord))) {
-      if (goalCode?.endsWith('verify.once')) {
-        agent.connections.deleteById(connectionId)
-      }
-    }
-
-    navigation.pop()
-  }, [navigation, proofRecord, goalCode, agent, connectionId])
-
-  useEffect(() => {
-    if (proofRecord && (isPresentationReceived(proofRecord) || isPresentationFailed(proofRecord))) {
-      navigation.replace(Screens.ProofDetails, { recordId: proofRecord.id })
-    }
-  }, [proofRecord, goalCode, agent, connectionId, navigation])
-
-  return (
-    <SafeAreaModal transparent animationType={'slide'}>
-      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
-        <ScrollView style={styles.container}>
-          <View style={styles.messageContainer}>
-            <ThemedText
-              variant="modalHeadingThree"
-              style={styles.messageText}
-              testID={testIdWithKey('VerifierLoading')}
-            >
-              {t('Verifier.WaitingForResponse')}
-            </ThemedText>
-          </View>
-
-          <View style={styles.image}>
-            <PresentationLoading />
-          </View>
-        </ScrollView>
-        <View style={styles.controlsContainer}>
-          <Button
-            title={t('Global.GoBack')}
-            accessibilityLabel={t('Global.GoBack')}
-            testID={testIdWithKey('BackToProofList')}
-            onPress={onDismissModalTouched}
-            buttonType={ButtonType.ModalSecondary}
-          />
-        </View>
-      </SafeAreaView>
-    </SafeAreaModal>
-  )
-}
-
-export default MobileVerifierLoading

package/src/screens/NameWallet.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-import WalletNameForm from '../components/forms/WalletNameForm'
-
-const NameWallet: React.FC = () => {
-  return <WalletNameForm />
-}
-
-export default NameWallet

package/src/screens/Onboarding.tsx

@@ -1,162 +0,0 @@
-import { useNavigation, useFocusEffect } from '@react-navigation/native'
-import { StackNavigationProp } from '@react-navigation/stack'
-import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Animated, BackHandler, FlatList, View, ViewStyle, useWindowDimensions } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
-
-import IconButton, { ButtonLocation } from '../components/buttons/IconButton'
-import { Pagination } from '../components/misc/Pagination'
-import { DispatchAction } from '../contexts/reducers/store'
-import { useStore } from '../contexts/store'
-import { OnboardingStackParams } from '../types/navigators'
-import { testIdWithKey } from '../utils/testable'
-export interface OnboardingStyleSheet {
-  container: ViewStyle
-  carouselContainer: ViewStyle
-  pagerContainer: ViewStyle
-  pagerDot: ViewStyle
-  pagerDotActive: ViewStyle
-  pagerDotInactive: ViewStyle
-  pagerPosition: ViewStyle
-  pagerNavigationButton: ViewStyle
-}
-
-interface OnboardingProps {
-  pages: Array<Element>
-  nextButtonText: string
-  previousButtonText: string
-  style: OnboardingStyleSheet
-  disableSkip?: boolean
-}
-
-const Onboarding: React.FC<OnboardingProps> = ({
-  pages,
-  nextButtonText,
-  previousButtonText,
-  style,
-  disableSkip = false,
-}) => {
-  const [activeIndex, setActiveIndex] = useState(0)
-  const flatList: Ref<FlatList> = useRef(null)
-  const scrollX = useRef(new Animated.Value(0)).current
-  const { t } = useTranslation()
-  const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
-  const [, dispatch] = useStore()
-  const { width } = useWindowDimensions()
-
-  const onViewableItemsChangedRef = useRef(({ viewableItems }: any) => {
-    if (!viewableItems[0]) {
-      return
-    }
-
-    setActiveIndex(viewableItems[0].index)
-  })
-
-  const viewabilityConfigRef = useRef({
-    viewAreaCoveragePercentThreshold: 60,
-  })
-
-  const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
-    useNativeDriver: false,
-  })
-
-  const next = useCallback(() => {
-    if (activeIndex + 1 < pages.length) {
-      flatList?.current?.scrollToIndex({
-        index: activeIndex + 1,
-        animated: true,
-      })
-    }
-  }, [activeIndex, pages, flatList])
-
-  const previous = useCallback(() => {
-    if (activeIndex !== 0) {
-      flatList?.current?.scrollToIndex({
-        index: activeIndex - 1,
-        animated: true,
-      })
-    }
-  }, [activeIndex, flatList])
-
-  const renderItem = useCallback(
-    ({ item, index }: { item: Element; index: number }) => (
-      <View key={index} style={[{ width }, style.carouselContainer]}>
-        {item as React.ReactNode}
-      </View>
-    ),
-    [width, style.carouselContainer]
-  )
-
-  const onSkipTouched = useCallback(() => {
-    dispatch({
-      type: DispatchAction.DID_COMPLETE_TUTORIAL,
-    })
-  }, [dispatch])
-
-  useEffect(() => {
-    !disableSkip &&
-      navigation.setOptions({
-        headerRight: () => (
-          <IconButton
-            buttonLocation={ButtonLocation.Right}
-            accessibilityLabel={t('Onboarding.SkipA11y')}
-            testID={testIdWithKey('Skip')}
-            onPress={onSkipTouched}
-            icon="chevron-right"
-            text={t('Global.Skip')}
-          />
-        ),
-      })
-
-    if (!disableSkip && activeIndex + 1 === pages.length) {
-      navigation.setOptions({
-        headerRight: () => false,
-      })
-    }
-  }, [disableSkip, navigation, t, onSkipTouched, activeIndex, pages])
-
-  useFocusEffect(
-    useCallback(() => {
-      const onBackPress = () => {
-        BackHandler.exitApp()
-
-        return true
-      }
-
-      BackHandler.addEventListener('hardwareBackPress', onBackPress)
-
-      return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress)
-    }, [])
-  )
-
-  return (
-    <SafeAreaView style={style.container} edges={['left', 'right', 'bottom']}>
-      <FlatList
-        ref={flatList}
-        horizontal
-        pagingEnabled
-        showsHorizontalScrollIndicator={false}
-        style={{ width }}
-        data={pages}
-        renderItem={renderItem}
-        viewabilityConfig={viewabilityConfigRef.current}
-        onViewableItemsChanged={onViewableItemsChangedRef.current}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
-      />
-      <Pagination
-        pages={pages}
-        activeIndex={activeIndex}
-        nextButtonText={nextButtonText}
-        previousButtonText={previousButtonText}
-        scrollX={scrollX}
-        style={style}
-        next={next}
-        previous={previous}
-      />
-    </SafeAreaView>
-  )
-}
-
-export default Onboarding