fix(mobile): force redownload of themes if unable to parse first time (#1150)

packages/mobile/ios/Podfile.lock

@@ -419,7 +419,7 @@ PODS:
     - React-RCTImage
   - RNSearchBar (3.5.1):
     - React-Core
-  - RNShare (7.6.2):
+  - RNShare (7.6.4):
     - React-Core
   - RNStoreReview (0.2.1):
     - React-Core
@@ -744,7 +744,7 @@ SPEC CHECKSUMS:
   RNReanimated: 46cdb89ca59ab7181334f4ed05a70e82ddb36751
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19
   RNSearchBar: 5ed8e13ba8a6c701fbd2afdfe4164493d24b2aee
-  RNShare: da0fd52f08c7b9f1ca31aef98a4890e98fc2c4c5
+  RNShare: 4406f61af043027b695c3a0b8f39e2c2bdacde12
   RNStoreReview: e05edbbf426563070524cec384ac0b8df69be801
   RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
   RNVectorIcons: 7923e585eaeb139b9f4531d25a125a1500162a0b

packages/mobile/src/Lib/ComponentManager.ts

@@ -260,10 +260,12 @@ export class ComponentManager extends SNComponentManager {
     if (!(await RNFS.exists(componentPath))) {
       return undefined
     }
+
     const filePath = `${componentPath}/${relativePath}`
     if (!(await RNFS.exists(filePath))) {
       return undefined
     }
+
     const fileContents = await RNFS.readFile(filePath)
     return fileContents
   }

packages/mobile/src/Style/ThemeService.ts

@@ -372,22 +372,38 @@ export class ThemeService {
   private async downloadTheme(theme: SNTheme): Promise<ThemeVariables | undefined> {
     const componentManager = this.application?.mobileComponentManager
     if (componentManager?.isComponentDownloadable(theme)) {
-      if (await componentManager.doesComponentNeedDownload(theme)) {
+      return this.downloadThemeVariablesFromPackage(theme)
-        await componentManager.downloadComponentOffline(theme)
+    } else {
-      }
+      return this.downloadThemeVariablesFromHostedUrl(theme)
+    }
+  }
 
-      const file = await componentManager.getIndexFile(theme.identifier)
+  private async downloadThemeVariablesFromPackage(
-      if (!file) {
+    theme: SNTheme,
-        console.error(`Did not find local index file for ${theme.identifier}`)
+    forceDownload = false,
-        return undefined
+  ): Promise<ThemeVariables | undefined> {
-      }
+    const componentManager = this.application!.mobileComponentManager
-      const variables: ThemeVariables = CSSParser.cssToObject(file)
+    if (forceDownload || (await componentManager.doesComponentNeedDownload(theme))) {
-      if (!variables || Object.keys(variables).length === 0) {
+      await componentManager.downloadComponentOffline(theme)
-        return undefined
-      }
-      return variables
     }
 
+    const file = await componentManager.getIndexFile(theme.identifier)
+    if (!file) {
+      console.error(`Did not find local index file for ${theme.identifier}`)
+      return undefined
+    }
+
+    const variables: ThemeVariables = CSSParser.cssToObject(file)
+    if (!variables || Object.keys(variables).length === 0) {
+      if (!forceDownload) {
+        return this.downloadThemeVariablesFromPackage(theme, true)
+      }
+    }
+
+    return variables
+  }
+
+  private async downloadThemeVariablesFromHostedUrl(theme: SNTheme): Promise<ThemeVariables | undefined> {
     let url = theme.hosted_url
     if (!url) {
       console.error('Theme download error')
@@ -423,16 +439,19 @@ export class ThemeService {
       this.activateTheme(theme.uuid)
       return
     }
+
     const variables = await this.downloadTheme(theme)
     if (!variables) {
       Alert.alert('Not Available', 'This theme is not available on mobile.')
       return
     }
+
     const appliedVariables = Object.assign(this.templateVariables(), variables)
     const finalVariables = {
       ...appliedVariables,
       ...ThemeService.constants,
     }
+
     const mobileTheme = new MobileTheme(
       theme.payload.copy({
         content: {
@@ -490,17 +509,21 @@ export class ThemeService {
     if (!variables) {
       return false
     }
+
     /** Merge default variables to ensure this theme has all the variables. */
     const appliedVariables = Object.assign(this.templateVariables(), variables)
     const mobileTheme = this.findOrCreateTheme(theme.uuid, {
       ...appliedVariables,
       ...ThemeService.constants,
     })
+
     this.addTheme(mobileTheme)
     void this.cacheThemes()
+
     if (theme.uuid === this.activeThemeId) {
       this.setActiveTheme(theme.uuid)
     }
+
     return true
   }