Introduce nice "next" button with embedded progress bar

Will allow to use a proper screen title
alephium · Sep 5, 2023 · fb8cc77 · fb8cc77
1 parent ea4d04d
commit fb8cc77
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 19 deletions.
diff --git a/src/screens/SendReceive/ProgressHeader.tsx b/src/screens/SendReceive/ProgressHeader.tsx
@@ -20,8 +20,8 @@ import Ionicons from '@expo/vector-icons/Ionicons'
 import { getFocusedRouteNameFromRoute } from '@react-navigation/native'
 import { StackHeaderProps } from '@react-navigation/stack'
 import { useEffect, useState } from 'react'
-import { PressableProps, View } from 'react-native'
-import { Bar as ProgressBar } from 'react-native-progress'
+import { Pressable, PressableProps, View } from 'react-native'
+import { Circle as ProgressBar } from 'react-native-progress'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import styled, { useTheme } from 'styled-components/native'
 
@@ -44,9 +44,8 @@ const workflowSteps: Record<
   send: ['DestinationScreen', 'OriginScreen', 'AssetsScreen', 'VerifyScreen']
 }
 
-const ProgressHeader = ({ navigation, route, options, workflow }: ProgressHeaderProps) => {
+const ProgressHeader = ({ navigation, route, workflow, options }: ProgressHeaderProps) => {
   const theme = useTheme()
-  const insets = useSafeAreaInsets()
 
   const [progress, setProgress] = useState(0)
 
@@ -64,21 +63,24 @@ const ProgressHeader = ({ navigation, route, options, workflow }: ProgressHeader
   }, [route, steps])
 
   return (
-    <View style={{ paddingTop: insets.top }}>
-      <BaseHeader
-        HeaderLeft={
+    <BaseHeader
+      HeaderRight={
+        <View>
+          {options.headerRight && <HeaderRightOptionWrapper>{options.headerRight({})}</HeaderRightOptionWrapper>}
           <ProgressBar
             progress={progress}
             color={theme.global.accent}
             unfilledColor={theme.border.secondary}
+            fill="transparent"
+            strokeCap="round"
             borderWidth={0}
-            height={9}
-            width={120}
+            size={43}
+            pointerEvents="none"
           />
-        }
-        HeaderRight={HeaderRight}
-      />
-    </View>
+        </View>
+      }
+      HeaderLeft={HeaderRight}
+    />
   )
 }
 
@@ -87,11 +89,7 @@ export default ProgressHeader
 export const BackButton = (props: PressableProps) => {
   const theme = useTheme()
 
-  return (
-    <BackButtonStyled {...props}>
-      <Ionicons name="chevron-back-circle" size={25} color={theme.global.accent} />
-    </BackButtonStyled>
-  )
+  return <Button onPress={navigation.goBack} iconProps={{ name: 'close-outline' }} round />
 }
 
 interface ContinueButtonProps extends PressableProps {
@@ -122,6 +120,14 @@ export const BackButtonStyled = styled.Pressable`
   justify-content: center;
 `
 
+const HeaderRightOptionWrapper = styled.View`
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+`
+
 // TODO: Dry
 export const ContinueButtonStyled = styled.Pressable`
   padding: 4px 15px;

diff --git a/src/screens/SendReceive/Send/DestinationScreen.tsx b/src/screens/SendReceive/Send/DestinationScreen.tsx
@@ -138,7 +138,9 @@ const DestinationScreen = ({ navigation, route: { params }, ...props }: Destinat
 
       navigation.getParent()?.setOptions({
         headerLeft: () => <BackButton onPress={() => navigation.goBack()} />,
-        headerRight: () => <ContinueButton onPress={handleSubmit(onContinue)} />
+        headerRight: () => (
+          <Button onPress={handleSubmit(onContinue)} iconProps={{ name: 'arrow-forward-outline' }} round />
+        )
       })
     }, [handleSubmit, navigation, nextScreen, setToAddress])
   )