uilib-native 3.0.8 → 4.1.0

package/android/src/main/java/com/wix/reactnativeuilib/dynamicfont/DynamicFontModule.java

@@ -0,0 +1,148 @@
+package com.wix.reactnativeuilib.dynamicfont;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.Callback;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.views.text.ReactFontManager;
+
+import android.app.Activity;
+import android.graphics.Typeface;
+import android.util.Base64;
+
+import java.io.File;
+import java.io.FileOutputStream;
+import java.lang.reflect.Field;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
+
+public class DynamicFontModule extends ReactContextBaseJavaModule {
+  int tempNameCounter = 0;
+
+  private final ReactApplicationContext reactContext;
+
+  public DynamicFontModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+    this.reactContext = reactContext;
+  }
+
+  @Override
+  public String getName() {
+    return "DynamicFont";
+  }
+
+  @ReactMethod
+  public void loadFontFromFile(final ReadableMap options, final Callback callback) {
+    Activity currentActivity = getCurrentActivity();
+    if (currentActivity == null) {
+      callback.invoke("Invalid activity");
+      return;
+    }
+
+    String filePath = options.hasKey("filePath") ? options.getString("filePath") : null,
+           name = (options.hasKey("name")) ? options.getString("name") : null;
+
+    if (filePath == null || filePath.length() == 0) {
+      callback.invoke("filePath property empty");
+      return;
+    }
+
+    File f = new File(filePath);
+
+    if (f.exists() && f.canRead()) {
+      boolean wasLoaded = false;
+      try {
+        Typeface typeface = Typeface.createFromFile(f);
+        //Cache the font for react
+        ReactFontManager.getInstance().setTypeface(name, typeface.getStyle(), typeface);
+        wasLoaded = true;
+      } catch (Throwable e) {
+        callback.invoke(e.getMessage());
+      } finally {
+        if (wasLoaded) {
+          callback.invoke(null, name);
+        }
+      }
+    } else {
+      callback.invoke("invalid file");
+    }
+  }
+
+  @ReactMethod
+  public void loadFont(final ReadableMap options, final Callback callback) throws Exception {
+    Activity currentActivity = getCurrentActivity();
+    if (currentActivity == null) {
+      callback.invoke("Invalid activity");
+      return;
+    }
+
+    String name = (options.hasKey("name")) ? options.getString("name") : null,
+           data = (options.hasKey("data")) ? options.getString("data") : null,
+           type = null;
+
+    if (name == null || name.length() == 0) {
+      callback.invoke("Name property empty");
+      return;
+    }
+
+    if (data == null || data.length() == 0) {
+      callback.invoke("Data property empty");
+      return;
+    }
+
+    if (("data:").equalsIgnoreCase(data.substring(0, 5))) {
+      Integer pos = data.indexOf(',');
+      if (pos > 0) {
+        String[] encodingParams = data.substring(5, pos).split(";");
+        String mimeType = encodingParams[0];
+
+        data = data.substring(pos + 1);
+
+        if (("application/x-font-ttf").equalsIgnoreCase(mimeType) ||
+            ("application/x-font-truetype").equalsIgnoreCase(mimeType) ||
+            ("font/ttf").equalsIgnoreCase(mimeType)) {
+          type = "ttf";
+        } else if (("application/x-font-opentype").equalsIgnoreCase(mimeType) ||
+                   ("font/opentype").equalsIgnoreCase(mimeType)) {
+          type = "otf";
+        }
+      }
+    }
+
+    if (options.hasKey("type"))
+      type = options.getString("type");
+
+    if (type == null)
+      type = "ttf";
+
+    try {
+      byte[] decodedBytes = Base64.decode(data, Base64.DEFAULT);
+      File cacheFile = new File(currentActivity.getCacheDir(), "tempFont" + (tempNameCounter++) + type);
+
+      FileOutputStream stream = new FileOutputStream(cacheFile);
+      try {
+        stream.write(decodedBytes);
+      } finally {
+        stream.close();
+      }
+
+      //Load the font from the temporary file we just created
+      Typeface typeface = Typeface.createFromFile(cacheFile);
+
+      //Cache the font for react
+      ReactFontManager.getInstance().setTypeface(name, typeface.getStyle(), typeface);
+
+      cacheFile.delete();
+    } catch(Exception e) {
+      callback.invoke(e.getMessage());
+    } finally {
+      callback.invoke(null, name);
+    }
+  }
+}

package/android/src/main/java/com/wix/reactnativeuilib/dynamicfont/DynamicFontPackage.java

@@ -0,0 +1,27 @@
+package com.wix.reactnativeuilib.dynamicfont;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.bridge.JavaScriptModule;
+public class DynamicFontPackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+      return Arrays.<NativeModule>asList(new DynamicFontModule(reactContext));
+    }
+
+    // Deprecated from RN 0.47
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+      return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+      return Collections.emptyList();
+    }
+}

package/android/src/main/java/com/wix/reactnativeuilib/keyboardinput/utils/RuntimeUtils.java

@@ -14,7 +14,9 @@ public class RuntimeUtils {
     };
 
     public static void runOnUIThread(Runnable runnable) {
-        ReactContextHolder.getContext().runOnUiQueueThread(runnable);
+        if (ReactContextHolder.getContext() != null) {
+            ReactContextHolder.getContext().runOnUiQueueThread(runnable);
+        }
     }
 
     public static void dispatchUIUpdates(final Runnable userRunnable) {
@@ -22,7 +24,9 @@ public class RuntimeUtils {
             @Override
             public void run() {
                 userRunnable.run();
-                ReactContextHolder.getContext().runOnNativeModulesQueueThread(sUIUpdateClosure);
+                if (ReactContextHolder.getContext() != null) {
+                    ReactContextHolder.getContext().runOnNativeModulesQueueThread(sUIUpdateClosure);
+                }
             }
         });
     }

package/components/DynamicFonts/FontDownloader.ts

@@ -0,0 +1,135 @@
+import {Platform} from 'react-native';
+import fs from 'react-native-fs';
+import {FontExtension} from './FontLoader';
+
+const DEFAULT_DYNAMIC_FONTS_FOLDER = '/dynamicFonts';
+const DEFAULT_DOWNLOAD_ERROR_MESSAGE = 'An error occurred downloading the file:';
+
+export type FontDownloaderProps = {
+  /**
+   * Should be In the following convention: '/NAME'
+   */
+  dynamicFontsFolder?: string;
+  downloadErrorMessage?: string;
+  /**
+   * Enable debug mode to print extra logs
+   */
+  debug?: boolean;
+};
+
+// TODO: this can probably be a more general "downloader" if we so choose
+export default class FontDownloader {
+  private readonly props: FontDownloaderProps;
+
+  constructor(props: FontDownloaderProps) {
+    this.props = {
+      dynamicFontsFolder: DEFAULT_DYNAMIC_FONTS_FOLDER,
+      downloadErrorMessage: DEFAULT_DOWNLOAD_ERROR_MESSAGE,
+      ...props
+    };
+  }
+
+  private getPrivateFolder() {
+    const {dynamicFontsFolder} = this.props;
+    return (Platform.OS === 'android' ? fs.ExternalDirectoryPath : fs.DocumentDirectoryPath) + dynamicFontsFolder;
+  }
+
+  private getPrivateFilePath(fileName: string) {
+    return this.getPrivateFolder() + '/' + fileName;
+  }
+
+  private getFileName(fontName: string, fontExtension: FontExtension) {
+    return fontName + '.' + fontExtension;
+  }
+
+  private async _isFontDownloaded(fileName: string) {
+    const privateFilePath = this.getPrivateFilePath(fileName);
+    return await fs.exists(privateFilePath);
+  }
+
+  private async createPrivateFolderIfNeeded() {
+    const privateFolder = this.getPrivateFolder();
+    if (!(await fs.exists(privateFolder))) {
+      await fs.mkdir(privateFolder);
+    }
+  }
+
+  private getDownloadFontOptions(fontUri: string, downloadLocation: string, readTimeout: number) {
+    const platformSpecificOptions =
+      Platform.OS === 'ios'
+        ? {
+          background: false,
+          discretionary: true,
+          cacheable: false
+        }
+        : {
+          connectionTimeout: readTimeout
+        };
+
+    return {
+      fromUrl: fontUri,
+      toFile: downloadLocation,
+      // TODO: It is possible to add a better progress, maybe for slower networks
+      // progress: ({bytesWritten, contentLength}: {bytesWritten: number; contentLength: number}) => {},
+      ...platformSpecificOptions,
+      fileCache: false,
+      readTimeout
+    };
+  }
+
+  /**
+   * Download the font
+   * @param fontUri the remote location of the font
+   * @param fontName the full name of the font
+   * @param fontExtension the extension of the font, i.e. '.ttf' or '.otf'
+   * @param timeout a timeout for the download to fail after
+   * @returns the full path of the download
+   */
+  public async downloadFont(fontUri: string,
+    fontName: string,
+    fontExtension: FontExtension,
+    timeout: number): Promise<string> {
+    const {downloadErrorMessage} = this.props;
+    await this.createPrivateFolderIfNeeded();
+    const fileName = this.getFileName(fontName, fontExtension);
+    const downloadLocation = this.getPrivateFilePath(fileName);
+
+    try {
+      const result = await fs.downloadFile(this.getDownloadFontOptions(fontUri, downloadLocation, timeout)).promise;
+      if (result.statusCode === 200) {
+        return downloadLocation;
+      } else {
+        return Promise.reject({
+          source: 'uilib:FontDownloader:downloadFont',
+          message: `${downloadErrorMessage} fontName: ${fontName} statusCode: ${result.statusCode}`
+        });
+      }
+    } catch (error) {
+      return Promise.reject({
+        source: 'uilib:FontDownloader:downloadFont',
+        message: `${downloadErrorMessage} fontName: ${fontName} error: ${error}`
+      });
+    }
+  }
+
+  /**
+   * Is the font cached (already downloaded)
+   * @param {*} fontName the full name of the font
+   * @param {*} fontExtension the extension of the font, i.e. '.ttf' or '.otf'
+   */
+  public async isFontDownloaded(fontName: string, fontExtension: FontExtension): Promise<boolean> {
+    const fileName = this.getFileName(fontName, fontExtension);
+    return await this._isFontDownloaded(fileName);
+  }
+
+  public async readFontFromDisk(fontName: string, fontExtension: FontExtension): Promise<string | void> {
+    let base64FontString;
+    const fileName = this.getFileName(fontName, fontExtension);
+    const privateFilePath = this.getPrivateFilePath(fileName);
+    if (await fs.exists(privateFilePath)) {
+      base64FontString = await fs.readFile(privateFilePath, 'base64').catch(() => {});
+    }
+
+    return base64FontString;
+  }
+}

package/components/DynamicFonts/FontLoader.ts

@@ -0,0 +1,120 @@
+import {NativeModules} from 'react-native';
+
+const {DynamicFont} = NativeModules;
+
+export type FontExtension = 'ttf' | 'otf';
+
+export type LoadFontInput = {
+  /**
+   * Specify registered font name (doesn't work for iOS)
+   */
+  fontName: string;
+  /**
+   * This can be a data URI or raw base64...
+   * if it is raw base64 type must be specified,
+   * but defaults to TTF (data URI mime: font/ttf or font/otf)
+   */
+  base64FontString: string;
+  /**
+   * Specify the type of font in the encoded data (ttf or otf). Defaults to "ttf"
+   */
+  fontExtension: FontExtension;
+  /**
+   * Force the loading of the font even if previously loaded it
+   */
+  forceLoad?: boolean;
+};
+
+export type FontLoaderProps = {
+  /**
+   * Enable debug mode to print extra logs
+   */
+  debug?: boolean;
+};
+
+export default class FontLoader {
+  private readonly props: FontLoaderProps;
+  private readonly loadedFonts = new Map<string, string>();
+
+  constructor(props: FontLoaderProps) {
+    this.props = props;
+  }
+
+  public loadFont = ({
+    fontName,
+    base64FontString,
+    fontExtension = 'ttf',
+    forceLoad = false
+  }: LoadFontInput): Promise<string> => {
+    const {debug} = this.props;
+    /* Check if this font was already loaded */
+    if (!forceLoad && this.loadedFonts.has(fontName)) {
+      if (debug) {
+        console.log(fontName, 'Already loaded');
+      }
+      return Promise.resolve(this.loadedFonts.get(fontName) as string);
+    }
+
+    if (!fontName) {
+      throw new Error('fontName is a required argument');
+    }
+
+    if (!base64FontString) {
+      throw new Error('base64FontString is a required argument');
+    }
+
+    if (debug) {
+      console.log(fontName, 'Starting to load');
+    }
+    /* Load font via native binary code */
+    return new Promise((resolve, reject) => {
+      DynamicFont.loadFont({
+        name: fontName,
+        data: base64FontString,
+        type: fontExtension
+      },
+      (err: string, givenName: string) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        /* Loaded successfully... resolve promise with "real" font name */
+        this.loadedFonts.set(fontName, givenName);
+        resolve(givenName);
+      });
+    });
+  };
+
+  public loadFontFromFile = (fontName: string, filePath: string) => {
+    if (!fontName) {
+      throw new Error('name is a required argument');
+    }
+
+    if (!filePath) {
+      throw new Error('filePath is a required argument');
+    }
+
+    return new Promise((resolve, reject) => {
+      DynamicFont.loadFontFromFile({
+        name: fontName,
+        filePath
+      },
+      (err: string, givenName: string) => {
+        if (err) {
+          reject(err);
+          return;
+        }
+        resolve(givenName);
+      });
+    });
+  };
+
+  public loadFonts = (fonts: LoadFontInput | LoadFontInput[], forceLoad?: boolean) => {
+    if (!fonts) {
+      return Promise.resolve([]);
+    }
+
+    const fontsArray = fonts instanceof Array ? fonts : [fonts];
+    return Promise.all(fontsArray.filter(font => font).map(font => this.loadFont({forceLoad, ...font})));
+  };
+}

package/components/DynamicFonts/PermissionsAcquirer.android.ts

@@ -0,0 +1,63 @@
+import {Platform, PermissionsAndroid} from 'react-native';
+const AndroidOsVersion = Platform.OS === 'android' ? Platform.constants.Release : undefined;
+
+export type PermissionsAcquirerProps = {
+  requestPermissionsTitle?: string;
+  requestPermissionsMessage?: string;
+  requestPermissionsNegativeButtonText?: string;
+  requestPermissionsPositiveButtonText?: string;
+  permissionsRefusalMessage?: string;
+  permissionsErrorMessage?: string;
+};
+
+const DEFAULT_PERMISSIONS_ACQUIRER_PROPS: Required<PermissionsAcquirerProps> = {
+  requestPermissionsTitle: 'Allow Storage Access',
+  requestPermissionsMessage: 'Give the Spaces app permission to access the files and storage on your device.',
+  requestPermissionsNegativeButtonText: 'Cancel',
+  requestPermissionsPositiveButtonText: 'Continue',
+  permissionsRefusalMessage: 'Please edit your permission settings to continue.',
+  permissionsErrorMessage: `We weren't able to obtain the required permissions. Please try Again.`
+};
+
+export default class PermissionsAcquirer {
+  private readonly props;
+  constructor(props: PermissionsAcquirerProps) {
+    this.props = props;
+  }
+
+  public async checkPermissions() {
+    return await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
+  }
+
+  public async getPermissions() {
+    if ((AndroidOsVersion && Number(AndroidOsVersion) >= 13) || (await this.checkPermissions())) {
+      return Promise.resolve();
+    }
+
+    try {
+      const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, {
+        title: this.props.requestPermissionsTitle ?? DEFAULT_PERMISSIONS_ACQUIRER_PROPS.requestPermissionsTitle,
+        message: this.props.requestPermissionsMessage ?? DEFAULT_PERMISSIONS_ACQUIRER_PROPS.requestPermissionsMessage,
+        buttonNegative:
+          this.props.requestPermissionsNegativeButtonText ??
+          DEFAULT_PERMISSIONS_ACQUIRER_PROPS.requestPermissionsNegativeButtonText,
+        buttonPositive:
+          this.props.requestPermissionsPositiveButtonText ??
+          DEFAULT_PERMISSIONS_ACQUIRER_PROPS.requestPermissionsPositiveButtonText
+      });
+      if (result === PermissionsAndroid.RESULTS.GRANTED) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject({
+          source: 'uilib:FontDownloader:getPermissions',
+          message: this.props.permissionsRefusalMessage ?? DEFAULT_PERMISSIONS_ACQUIRER_PROPS.permissionsRefusalMessage
+        });
+      }
+    } catch (err) {
+      return Promise.reject({
+        source: 'uilib:FontDownloader:getPermissions',
+        message: this.props.permissionsErrorMessage ?? DEFAULT_PERMISSIONS_ACQUIRER_PROPS.permissionsErrorMessage
+      });
+    }
+  }
+}

package/components/DynamicFonts/PermissionsAcquirer.ios.ts

@@ -0,0 +1,9 @@
+export default class PermissionsAcquirer {
+  public async checkPermissions() {
+    return Promise.resolve(true);
+  }
+
+  public async getPermissions() {
+    return Promise.resolve();
+  }
+}

package/components/DynamicFonts/index.ts

@@ -0,0 +1,155 @@
+import {Platform} from 'react-native';
+import FontLoader, {FontExtension, LoadFontInput} from './FontLoader';
+import FontDownloader, {FontDownloaderProps} from './FontDownloader';
+import PermissionsAcquirerAndroid, {PermissionsAcquirerProps} from './PermissionsAcquirer.android';
+import PermissionsAcquirerIOS from './PermissionsAcquirer.ios';
+const PermissionsAcquirer = Platform.OS === 'android' ? PermissionsAcquirerAndroid : PermissionsAcquirerIOS;
+
+const DEFAULT_FONT_LOAD_ERROR_MESSAGE = 'Unable to load this font.';
+
+type DynamicFontsProps = {
+  fontDownloadingProps?: Omit<FontDownloaderProps, 'debug'>;
+  permissionsAcquirerProps?: PermissionsAcquirerProps;
+  fontLoadErrorMessage?: string;
+  /**
+   * Enable debug mode to print extra logs
+   */
+  debug?: boolean;
+};
+
+type GetFontInput = {
+  /**
+   * The uri of the font (to be downloaded from)
+   */
+  fontUri: string;
+  /**
+   * The full name of the font
+   */
+  fontName: string;
+  /**
+   * The extension of the font, i.e. '.ttf' or '.otf'
+   */
+  fontExtension: FontExtension;
+  /**
+   * Milliseconds for the download to complete in (defaults to 5000)
+   */
+  timeout?: number;
+};
+
+export {DynamicFontsProps, FontExtension, GetFontInput};
+
+export default class DynamicFonts {
+  private readonly props: DynamicFontsProps;
+  private readonly permissionsAcquirer: InstanceType<typeof PermissionsAcquirer>;
+  private readonly fontLoader: InstanceType<typeof FontLoader>;
+  private readonly fontDownloader: InstanceType<typeof FontDownloader>;
+
+  constructor(props: DynamicFontsProps) {
+    const {debug} = props;
+    this.props = {fontLoadErrorMessage: DEFAULT_FONT_LOAD_ERROR_MESSAGE, ...props};
+    this.permissionsAcquirer = new PermissionsAcquirer(this.props.permissionsAcquirerProps ?? {});
+    this.fontLoader = new FontLoader({debug});
+    const fontDownloadingProps = this.props.fontDownloadingProps ?? {};
+    this.fontDownloader = new FontDownloader({...fontDownloadingProps, debug});
+  }
+
+  private async loadFont(input: LoadFontInput) {
+    const {fontLoadErrorMessage} = this.props;
+    try {
+      return await this.fontLoader.loadFont(input);
+    } catch (err) {
+      return Promise.reject({
+        source: 'uilib:FontDownloader:loadFont',
+        message: `${fontLoadErrorMessage} fontName: ${input.fontName}`
+      });
+    }
+  }
+
+  /**
+   * Get font - download from uri (or from cache if already downloaded) and load it to memory
+   * You need to handle errors in the form of Promise.reject
+   * @param fontUri the uri of the font (to be downloaded from)
+   * @param fontName the full name of the font
+   * @param fontExtension the extension of the font, i.e. '.ttf' or '.otf'
+   * @param timeout milliseconds for the download to complete in (defaults to 5000)
+   */
+  public async getFont({fontUri, fontName, fontExtension, timeout = 5000}: GetFontInput): Promise<string> {
+    const {debug} = this.props;
+    const {fontLoadErrorMessage} = this.props;
+    await this.permissionsAcquirer.getPermissions();
+    if (await this.fontDownloader.isFontDownloaded(fontName, fontExtension)) {
+      if (debug) {
+        console.log(fontName, 'Already downloaded');
+      }
+    } else {
+      if (debug) {
+        console.log(fontName, 'Starting to download');
+      }
+      await this.fontDownloader.downloadFont(fontUri, fontName, fontExtension, timeout);
+      if (debug) {
+        console.log(fontName, 'Finished downloading');
+      }
+    }
+
+    const base64FontString = await this.fontDownloader.readFontFromDisk(fontName, fontExtension);
+    if (base64FontString) {
+      if (debug) {
+        console.log(fontName, 'Loading');
+      }
+      const _fontName = await this.loadFont({fontName, base64FontString, fontExtension});
+      if (debug) {
+        console.log(_fontName, 'Finished loading');
+      }
+      return Promise.resolve(_fontName);
+    } else {
+      return Promise.reject({
+        source: 'uilib:FontDownloader:getFont',
+        message: `${fontLoadErrorMessage} fontName: ${fontName}`
+      });
+    }
+  }
+
+  public async getFonts(fonts: GetFontInput | GetFontInput[]): Promise<string[]> {
+    await this.permissionsAcquirer.getPermissions();
+    if (fonts instanceof Array) {
+      return Promise.all(fonts.filter(font => font).map(font => this.getFont(font)));
+    } else {
+      return Promise.resolve([await this.getFont(fonts)]);
+    }
+  }
+
+  private buildFontName(rootUri: string,
+    fontName: string,
+    fontExtension: FontExtension,
+    fontNamePrefix?: string): GetFontInput {
+    const _fontName = `${fontNamePrefix ?? ''}${fontName}`;
+    const fullFontName = `${_fontName}.${fontExtension}`;
+    return {fontUri: `${rootUri}${fullFontName}`, fontName: _fontName, fontExtension};
+  }
+
+  // eslint-disable-next-line max-params
+  public async getFontFamily(rootUri: string,
+    fontNames: string[],
+    fontExtension: FontExtension,
+    fontNamePrefix?: string,
+    retries = 1): Promise<string[]> {
+    const {debug} = this.props;
+    const fonts: GetFontInput[] = fontNames.map(fontName =>
+      this.buildFontName(rootUri, fontName, fontExtension, fontNamePrefix));
+    let fontsLoaded: string[] = [];
+    let tryCounter = 0;
+    while (fontsLoaded.length < fontNames.length && tryCounter < retries) {
+      try {
+        ++tryCounter;
+        // TODO: we should return successful loaded fonts and not fail all of them
+        fontsLoaded = await this.getFonts(fonts);
+      } catch (error) {
+        if (debug) {
+          console.log(`getFontFamily failed (try #${tryCounter}) error: ${error}`);
+        }
+      }
+    }
+
+    return Promise.resolve(fontsLoaded);
+  }
+}