chore: add activity indicator to the example app operations

Author: Joaguirrem

example/app/(app)/home.tsx

@@ -1,18 +1,13 @@
 import Line, { AccessToken, UserProfile } from '@xmartlabs/react-native-line'
 import { useRouter } from 'expo-router'
-import { useEffect, useState } from 'react'
-import {
-  ActivityIndicator,
-  Alert,
-  Dimensions,
-  Image,
-  StyleSheet,
-} from 'react-native'
+import { Fragment, useEffect, useState } from 'react'
+import { Alert, Dimensions, Image, StyleSheet } from 'react-native'
 
 import {
   removeLocalStorageItem,
   setLocalStorageItem,
 } from '@/common/localStorage'
+import { ActivityBanner } from '@/components/ActivityBanner'
 import { Bullet } from '@/components/Bullet'
 import { Button } from '@/components/Button'
 import { ThemedView } from '@/components/ThemedView'
@@ -39,56 +34,60 @@ export default function () {
   }, [])
 
   function logOut() {
-    return Line.logout().then(() => {
-      removeLocalStorageItem('accessToken')
-      router.replace('/login')
-    })
+    setLoading(true)
+    return Line.logout()
+      .then(() => {
+        removeLocalStorageItem('accessToken')
+        router.replace('/login')
+      })
+      .finally(() => setLoading(false))
   }
 
   function getFriendshipStatus() {
+    setLoading(true)
     return Line.getFriendshipStatus()
       .then(result => Alert.alert(strings.isFriend, String(result.friendFlag)))
       .catch(handleError)
+      .finally(() => setLoading(false))
   }
 
   function refreshAccessToken() {
+    setLoading(true)
     return Line.refreshAccessToken()
       .then(accessToken => {
         setLocalStorageItem('accessToken', accessToken.accessToken)
         setToken(accessToken)
       })
       .catch(handleError)
+      .finally(() => setLoading(false))
   }
 
   function verifyAccessToken() {
+    setLoading(true)
     return Line.verifyAccessToken()
       .then(result => Alert.alert(result.clientId, result.expiresIn.toString()))
       .catch(handleError)
-  }
-
-  if (loading) {
-    return (
-      <ThemedView style={styles.container}>
-        <ActivityIndicator size="large" />
-      </ThemedView>
-    )
+      .finally(() => setLoading(false))
   }
 
   return (
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.contentContainer}>
-        <Image source={{ uri: user?.pictureUrl }} style={styles.image} />
-        <Bullet header={strings.name} text={user?.displayName} />
-        <Bullet header={strings.userId} text={user?.userId} />
-        <Bullet header={strings.accessToken} text={token?.accessToken} />
-      </ThemedView>
-      <Button onPress={getFriendshipStatus} text={strings.isFriend} />
-      <ThemedView style={styles.row}>
-        <Button onPress={verifyAccessToken} text={strings.verifyToken} />
-        <Button onPress={refreshAccessToken} text={strings.refreshToken} />
+    <Fragment>
+      <ThemedView style={styles.container}>
+        <ThemedView style={styles.contentContainer}>
+          <Image source={{ uri: user?.pictureUrl }} style={styles.image} />
+          <Bullet header={strings.name} text={user?.displayName} />
+          <Bullet header={strings.userId} text={user?.userId} />
+          <Bullet header={strings.accessToken} text={token?.accessToken} />
+        </ThemedView>
+        <Button onPress={getFriendshipStatus} text={strings.isFriend} />
+        <ThemedView style={styles.row}>
+          <Button onPress={verifyAccessToken} text={strings.verifyToken} />
+          <Button onPress={refreshAccessToken} text={strings.refreshToken} />
+        </ThemedView>
+        <Button onPress={logOut} text={strings.logOut} />
       </ThemedView>
-      <Button onPress={logOut} text={strings.logOut} />
-    </ThemedView>
+      {loading && <ActivityBanner />}
+    </Fragment>
   )
 }
 

example/app/(app)/login.tsx

@@ -1,17 +1,21 @@
 import Line from '@xmartlabs/react-native-line'
 import * as Haptics from 'expo-haptics'
 import { useRouter } from 'expo-router'
+import { Fragment, useState } from 'react'
 import { Alert, Image, StyleSheet } from 'react-native'
 
 import Logo from '@/assets/images/logo.png'
 import { setLocalStorageItem } from '@/common/localStorage'
+import { ActivityBanner } from '@/components/ActivityBanner'
 import { LineButton } from '@/components/LineButton'
 import { ThemedView } from '@/components/ThemedView'
 
 export default function () {
   const router = useRouter()
+  const [loading, setLoading] = useState<boolean>(false)
 
   function logIn() {
+    setLoading(true)
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
     return Line.login()
       .then(result => {
@@ -22,13 +26,19 @@ export default function () {
       .catch(() => {
         Alert.alert(strings.errorTitle, strings.errorMessage)
       })
+      .finally(() => {
+        setLoading(false)
+      })
   }
 
   return (
-    <ThemedView style={styles.container}>
-      <Image source={Logo} style={styles.logo} />
-      <LineButton onPress={logIn} />
-    </ThemedView>
+    <Fragment>
+      <ThemedView style={styles.container}>
+        <Image source={Logo} style={styles.logo} />
+        <LineButton onPress={logIn} />
+      </ThemedView>
+      {loading && <ActivityBanner />}
+    </Fragment>
   )
 }
 

example/components/ActivityBanner/index.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent } from 'react'
+import { ActivityIndicator, StyleSheet } from 'react-native'
+import Animated, {
+  FadeIn,
+  FadeOut,
+  ZoomIn,
+  ZoomOut,
+} from 'react-native-reanimated'
+
+import { Color } from '@/constants/Colors'
+
+interface Props {
+  backgroundColor?: Color
+}
+
+export const ActivityBanner: FunctionComponent<Props> = ({
+  backgroundColor = Color.Black50PCT,
+}) => (
+  <Animated.View
+    entering={FadeIn}
+    exiting={FadeOut}
+    style={[StyleSheet.absoluteFill, styles.container, { backgroundColor }]}>
+    <Animated.View
+      entering={ZoomIn}
+      exiting={ZoomOut}
+      style={styles.contentContainer}>
+      <ActivityIndicator size="small" />
+    </Animated.View>
+  </Animated.View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  contentContainer: {
+    backgroundColor: Color.White,
+    borderRadius: 12,
+    padding: 12,
+  },
+})

example/constants/Colors.ts

@@ -1,6 +1,7 @@
 export enum Color {
   Black = '#000000',
   Black8PCT = '#00000014',
+  Black50PCT = '#00000080',
   Gray = '#1E1E1E',
   Gray20PCT = '#1E1E1E33',
   Green = '#06C755',