feat: Add a refresh function to the Weblink Screen

Author: funnyzak

src/screens/common/WebLink.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useLayoutEffect, useMemo } from 'react'
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import { View } from 'react-native'
-import { WebView } from 'react-native-webview'
+import { WebView, WebViewProps } from 'react-native-webview'
 
 import { useTheme, SylCommon } from '@src/theme'
 import { WebViewerScreenProps as ScreenProps } from '@src/navigation/routes'
@@ -11,6 +11,7 @@ import { translate } from '@src/i18n'
 
 const WebLink = ({ route, navigation }: ScreenProps) => {
   const { theme } = useTheme()
+  const webViewRef = useRef(new WebView<{ current?: any }>({}))
   const [loading, setLoading] = React.useState(true)
   const url = useMemo(
     () => (!route.params.url.startsWith('http') ? `http://${route.params.url}` : route.params.url),
@@ -26,12 +27,22 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
   useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <HeaderButton
-          source={theme.assets.images.icons.header.link}
-          onPress={() => {
-            linking(url)
-          }}
-        />
+        <>
+          <HeaderButton
+            containerStyle={[{ marginRight: theme.spacing.tiny }]}
+            source={theme.assets.images.icons.header.refresh}
+            onPress={() => {
+              setLoading(true)
+              webViewRef.current.reload()
+            }}
+          />
+          <HeaderButton
+            source={theme.assets.images.icons.header.link}
+            onPress={() => {
+              linking(url)
+            }}
+          />
+        </>
       )
     })
   }, [navigation])
@@ -40,6 +51,7 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
     <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
       {loading && <Spinner text={translate('placeholder.loading')} />}
       <WebView
+        ref={webViewRef}
         originWhitelist={['*']}
         source={{ uri: url }}
         onLoad={(syntheticEvent) => {

src/screens/components/common/General.tsx

@@ -13,7 +13,8 @@ import {
   TextStyle,
   TouchableOpacity,
   ViewStyle,
-  Pressable
+  Pressable,
+  StyleProp
 } from 'react-native'
 import { IState } from '@src/types'
 import { translate } from '@src/i18n'
@@ -82,11 +83,13 @@ const BorderLine = () => {
 }
 
 const HeaderButton = ({
+  containerStyle: style,
   source,
   onPress,
   text,
   textColor
 }: {
+  containerStyle?: StyleProp<ViewStyle>
   source?: ImageSourcePropType
   text?: string
   textColor?: string
@@ -95,7 +98,7 @@ const HeaderButton = ({
   const { theme } = useTheme()
 
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} style={style}>
       {source && <Image source={source} width={24} />}
       {text && <Text style={styles.headerText(theme, textColor)}>{text}</Text>}
     </Pressable>