Home: handle background breakage - fix #972 (#974)

Client/Assets/Images.xcassets/home-background.imageset/Contents.json

@@ -0,0 +1,17 @@
+{
+  "images" : [
+    {
+      "filename" : "cliqz-bg0.jpg",
+      "idiom" : "universal"
+    },
+    {
+      "filename" : "cliqz-bg0_mobile.jpg",
+      "idiom" : "universal",
+      "width-class" : "compact"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ReactNative/js/screens/Home/components/Background.jsx

@@ -4,7 +4,6 @@ import FastImage from 'react-native-fast-image';
 
 const DAY_OF_MONTH = new Date().getDate();
 const BACKGROUND_URL = `https://cdn.cliqz.com/serp/configs/config_${DAY_OF_MONTH}.json`;
-
 const styles = {
   mask: [
     StyleSheet.absoluteFill,
@@ -13,22 +12,25 @@ const styles = {
     },
   ],
 };
+const fallbackImageSource = { uri: 'home-background' };
+const maskSource = { uri: 'mask' };
 
 const useBackgroundImage = () => {
   const [url, setUrl] = useState(Settings.get('backgroundUrl'));
   useEffect(() => {
     const fetchBackground = async () => {
-      const responseData = await fetch(BACKGROUND_URL);
+      const responseData = await fetch(BACKGROUND_URL, { cache: 'no-cache' });
       const responseJSON = await responseData.json();
       const backgrounds = Platform.isPad
         ? responseJSON.backgrounds
         : responseJSON.backgrounds_mobile;
       const backgroundIndex = Math.floor(Math.random() * backgrounds.length);
       const background = backgrounds[backgroundIndex];
       if (background && background.url !== url) {
-        setUrl(background.url);
+        const newUrl = background.url;
+        setUrl(newUrl);
         Settings.set({
-          backgroundUrl: background.url,
+          backgroundUrl: newUrl,
           backgroundTimestamp: Date.now(),
         });
       }
@@ -61,11 +63,18 @@ export default ({ height, children }) => {
     }),
     [backgroundUrl],
   );
-  const maskSource = useMemo(() => ({ uri: 'mask' }), []);
-
+  const [hasError, setError] = useState(false);
   return (
     <View style={style} accessibilityIgnoresInvertColors>
-      <FastImage style={StyleSheet.absoluteFill} source={backgroundSource} />
+      {hasError ? (
+        <Image style={StyleSheet.absoluteFill} source={fallbackImageSource} />
+      ) : (
+        <FastImage
+          style={StyleSheet.absoluteFill}
+          source={backgroundSource}
+          onError={setError}
+        />
+      )}
       <Image style={styles.mask} source={maskSource} />
       {children}
     </View>