fix(setup-wallet): large font size scrolling

Emurgo · Apr 29, 2024 · cf9d220 · cf9d220
1 parent 5eea2a3
commit cf9d220
Showing 1 changed file with 24 additions and 13 deletions.
diff --git a/...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx b/...allet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
@@ -1,10 +1,11 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {useTheme} from '@yoroi/theme'
 import * as React from 'react'
-import {Linking, StyleSheet, Text, View} from 'react-native'
+import {Linking, ScrollView, StyleSheet, Text, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
+import {ViewProps} from 'react-native-svg/lib/typescript/fabric/utils'
 
-import {Button} from '../../../../components'
+import {Button, Spacer} from '../../../../components'
 import {Space} from '../../../../components/Space/Space'
 import {useMetrics} from '../../../../metrics/metricsManager'
 import {WalletInitRouteNavigation} from '../../../../navigation'
@@ -34,7 +35,7 @@ export const AboutRecoveryPhraseScreen = () => {
 
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.root}>
-      <View>
+      <ScrollView bounces={false} contentContainerStyle={styles.scroll}>
         <StepperProgress currentStep={1} currentStepTitle={strings.stepAboutRecoveryPhrase} totalSteps={4} />
 
         <Space height="l" />
@@ -54,21 +55,27 @@ export const AboutRecoveryPhraseScreen = () => {
             strings.aboutRecoveryPhraseCardFifthItem(bold),
           ]}
         />
+      </ScrollView>
 
-        <Space height="l" />
+      <Spacer fill />
+
+      <LearnMoreButton onPress={handleOnLearMoreButtonPress} />
 
-        <LearnMoreButton onPress={handleOnLearMoreButtonPress} />
-      </View>
+      <Space height="l" />
 
-      <Button
-        title={strings.next}
-        style={styles.button}
-        onPress={() => navigation.navigate('setup-wallet-recovery-phrase-mnemonic')}
-      />
+      <Actions style={styles.actions}>
+        <Button
+          title={strings.next}
+          style={styles.button}
+          onPress={() => navigation.navigate('setup-wallet-recovery-phrase-mnemonic')}
+        />
+      </Actions>
     </SafeAreaView>
   )
 }
 
+const Actions = ({style, ...props}: ViewProps) => <View style={style} {...props} />
+
 const useBold = () => {
   const {styles} = useStyles()
 
@@ -82,8 +89,6 @@ const useStyles = () => {
   const styles = StyleSheet.create({
     root: {
       flex: 1,
-      ...theme.padding['x-l'],
-      justifyContent: 'space-between',
       backgroundColor: theme.color['white-static'],
     },
     aboutRecoveryPhraseTitle: {
@@ -94,6 +99,12 @@ const useStyles = () => {
     bolder: {
       ...theme.typography['body-1-l-medium'],
     },
+    actions: {
+      ...theme.padding['l'],
+    },
+    scroll: {
+      ...theme.padding['x-l'],
+    },
   })
 
   return {styles} as const