Spectrum: [Mobile] Image assets for React Native App.

Created on 15 Apr 2018 · 7Comments · Source: withspectrum/spectrum

We should figure out how to provide image assets for the mobile app, since React Native don't have out of the box support for SVG (https://react-native.canny.io/feature-requests/p/support-rendering-svg-images)

Some options that we have :
1) Use JPG or PNG files

2) Use Expo.SVG https://docs.expo.io/versions/latest/sdk/svg , in that case we would need to create a react components with svg elements based on the content of the current svg files, as this solution don't support loading and rendering image from file

Tech Debt

Source

ArturKlajnerok

Most helpful comment

Default avatar: https://spectrum.imgix.net/default_images/default_avatar.svg

Cover photos (we already have png versions):

Profile photos (already have png versions):

Logo:

Let me know if anything else is needed here!

brianlovin on 17 Apr 2018

👍3

All 7 comments

We use Imgix, so we should be able to proxy any SVGs through imgix and pass the fm parameter to transform them into jpgs or pngs on the fly. /cc @brianlovin who knows how our imgix setup works, how can we make that happen?

mxstbr on 15 Apr 2018

Yeah I would just need a list of which assets need to be uploaded and reformatted (https://docs.imgix.com/apis/url/format/fm) so that I can upload them manually to S3 and share back the imgix urls.

brianlovin on 16 Apr 2018

Basically just the default avatar and cover photos at this point as far as I can tell

mxstbr on 16 Apr 2018

Default avatar: https://spectrum.imgix.net/default_images/default_avatar.svg

Cover photos (we already have png versions):

Profile photos (already have png versions):

Logo:

Let me know if anything else is needed here!

brianlovin on 17 Apr 2018

👍3

If you want to use your own custom icons, would be grate to create .ttf file based on this Glpyh:
https://github.com/withspectrum/spectrum/blob/1d2f60240cc8712c261b2eb06d12d28fb32f3d92/src/components/icons/index.js

See:
https://docs.expo.io/versions/latest/guides/icons
https://github.com/oblador/react-native-vector-icons/blob/master/README.md#custom-fonts

Also some community icon fonts are available and can be used for now :
https://expo.github.io/vector-icons/
https://oblador.github.io/react-native-vector-icons/

ArturKlajnerok on 17 Apr 2018

We definitely want to use our own icons. /cc @uberbryn do you reckon you can export the set as .ttfs?

mxstbr on 17 Apr 2018

We can do PNG like most apps. Should not use icon fonts.

On Apr 17, 2018 at 4:56 AM,
We definitely want to use our own icons. /cc @uberbryn (https://github.com/uberbryn) do you reckon you can export the set as .ttfs?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (https://github.com/withspectrum/spectrum/issues/2862#issuecomment-381964834), or mute the thread (https://github.com/notifications/unsubscribe-auth/AEstaMG0nyVPw-5wjo3EPNNMDjhn4g5Rks5tpdhQgaJpZM4TVZfa).