Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to load font from remote uri #2745

Closed
wants to merge 2 commits into from
Closed

Conversation

seekshiva
Copy link

Why

Calling Font.loadAsync with a remote uri currently throws an error saying that remote uri file download isn't supported yet. This is my initial attempt at implementing Asset.fromUri, thereby allowing remote uri fonts to be loaded to the app.

How

This contains a naive implementation for fromUri. It is also not possible to know the md5 hash of the file beforehand, like the way we know with other normal type assets. So I've added a constructor argument for Asset called ignoreHashCheck which lets us ignore hash check for remote uri assets.

The implementation in this PR makes remote font loading for my specific use case, but if someone has suggestion for extending this to more generic use cases, please let me know.

Caveat: It is not possible to know the md5 hash of files beforehand, so this PR ignores the hash check. This also means that newer version of files would not be re-downloaded if the file already exists in cache directory.

The name of the file that the remote file gets downloaded to is the base64 encoded value of the uri itself. This ensures that different uri have different their own unique local file name and wouldn't conflict. Is there a better way to do this?

Also, prettier auto-formatted a bunch of other lines in the Asset file that are not related to the change. Please let me know if I should reset them or move that change to a separate commit.

Test Plan

Expo.Font.loadAsync({
  Montserrat: "https://host.seekshiva.in/downloads/fonts-master/ofl/montserrat/Montserrat-Regular.ttf",
  'Montserrat-SemiBold': "https://host.seekshiva.in/downloads/fonts-master/ofl/montserrat/Montserrat-SemiBold.ttf",
});

packages/expo-asset/src/Asset.js Outdated Show resolved Hide resolved
packages/expo-font/src/Font.js Outdated Show resolved Hide resolved
packages/expo-asset/src/Asset.js Outdated Show resolved Hide resolved
packages/expo-asset/src/Asset.js Outdated Show resolved Hide resolved
packages/expo-asset/src/Asset.js Outdated Show resolved Hide resolved
packages/expo-asset/src/Asset.js Outdated Show resolved Hide resolved
@ide
Copy link
Member

ide commented Nov 19, 2018

Please also add a small demo to the native-component-list app (ex: with https://github.com/google/fonts/raw/master/apache/roboto/Roboto-Regular.ttf) and a test to test-suite, both under apps.

@seekshiva
Copy link
Author

All changes mentioned above are done. Adding test to test-suite is pending.

@ide
Copy link
Member

ide commented Dec 13, 2018

Waiting for test suite and a rebase before review again

@seekshiva
Copy link
Author

I've redone the changes on top of .ts files and pushed. Can you help me with running the test suite locally, I get this error while trying to run yarn test inside expo-assets folder:

  ● Test suite failed to run

    Cannot find module 'setupDevtools' from 'setup.js'

      at Resolver.resolveModule (../../node_modules/jest-resolve/build/index.js:221:17)
      at Object.<anonymous> (../../node_modules/react-native/jest/setup.js:3:6)

make changes as per review

add example for remote font loading in Font screen

calculate md5 hash of uri if hash is null
@seekshiva
Copy link
Author

@ide Please let me know how we can proceed forward with this change.

@ide
Copy link
Member

ide commented Mar 28, 2019

CI (the sdk workflow) seems to be passing so if you can't get things working locally (probably wrong dep versions somewhere) you can look at CI.

sjchmiela added a commit that referenced this pull request May 27, 2019
Rebased copy of #2745, closes #2745.

# Why

Calling `Font.loadAsync` with a remote uri currently throws an error saying that remote uri file download isn't supported yet. This is my initial attempt at implementing `Asset.fromUri`, thereby allowing remote uri fonts to be loaded to the app.

# How

This contains a naive implementation for `fromUri`. It is also not possible to know the md5 hash of the file beforehand, like the way we know with other normal type assets. So I've added a constructor argument for Asset called `ignoreHashCheck` which lets us ignore hash check for remote uri assets.

The implementation in this PR makes remote font loading for my specific use case, but if someone has suggestion for extending this to more generic use cases, please let me know.

**Caveat:** It is not possible to know the md5 hash of files beforehand, so this PR ignores the hash check. This also means that newer version of files would not be re-downloaded if the file already exists in cache directory.

The name of the file that the remote file gets downloaded to is the base64 encoded value of the uri itself. This ensures that different uri have different their own unique local file name and wouldn't conflict. Is there a better way to do this?

Also, prettier auto-formatted a bunch of other lines in the Asset file that are not related to the change. Please let me know if I should reset them or move that change to a separate commit.

# Test Plan

```
Expo.Font.loadAsync({
  Montserrat: "https://host.seekshiva.in/downloads/fonts-master/ofl/montserrat/Montserrat-Regular.ttf",
  'Montserrat-SemiBold': "https://host.seekshiva.in/downloads/fonts-master/ofl/montserrat/Montserrat-SemiBold.ttf",
});
```
@sjchmiela
Copy link
Contributor

I somehow failed to keep the original ownership of the changes when merging an updated branch, sorry! Your contribution is still listed in the CHANGELOG.md. Thanks!

@seekshiva
Copy link
Author

Thank you so much

sjchmiela added a commit that referenced this pull request May 28, 2019
Rebased copy of #2745, closes #2745.

# Why

Calling `Font.loadAsync` with a remote uri currently throws an error saying that remote uri file download isn't supported yet. This is my initial attempt at implementing `Asset.fromUri`, thereby allowing remote uri fonts to be loaded to the app.

# How

This contains a naive implementation for `fromUri`. It is also not possible to know the md5 hash of the file beforehand, like the way we know with other normal type assets. So I've added a constructor argument for Asset called `ignoreHashCheck` which lets us ignore hash check for remote uri assets.

The implementation in this PR makes remote font loading for my specific use case, but if someone has suggestion for extending this to more generic use cases, please let me know.

**Caveat:** It is not possible to know the md5 hash of files beforehand, so this PR ignores the hash check. This also means that newer version of files would not be re-downloaded if the file already exists in cache directory.

The name of the file that the remote file gets downloaded to is the base64 encoded value of the uri itself. This ensures that different uri have different their own unique local file name and wouldn't conflict. Is there a better way to do this?

Also, prettier auto-formatted a bunch of other lines in the Asset file that are not related to the change. Please let me know if I should reset them or move that change to a separate commit.

# Test Plan

```
Expo.Font.loadAsync({
  Montserrat: "https://host.seekshiva.in/downloads/fonts-master/ofl/montserrat/Montserrat-Regular.ttf",
  'Montserrat-SemiBold': "https://host.seekshiva.in/downloads/fonts-master/ofl/montserrat/Montserrat-SemiBold.ttf",
});
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants