Native Image as local asset

[mcallisto]

It should be easy, but it is not... so I think having it solved in the demo could be quite useful for others.

How to show in React Native a local image?

I am working on a solution in the react-native-assets branch... But I cannot find where to place the asset in order to JSImport it.

I keep getting
Unable to resolve "assets/scala-logo.png" from "target/scala-2.13/react-native-fastopt.js"
or "./assets/scala-logo.png"

I tried to put the assets directory under react-native, under react-native/src, under react-native/src/main and react-native/src/main/js, but no success.

Any suggestion?

[oyvindberg]

https://github.com/ScalablyTyped/Demos/blob/master/pixi/src/main/scala/demo/assets.scala

Does duplicating the setup there work? Try to keep ./ in the import path as well

[mcallisto]

I had seen the Pixi demo.
But replicating that setup:

• searching "./assets/scala-logo.png"
• in react-native/src/main/js/assets/scala-logo.png"

unfortunately does not work.

In the ReactNative docs it says:

To add a static image to your app, place it somewhere in your source code tree
[...]
Images live in the same folder as your JavaScript code

[oyvindberg]

ok, this actually gives a hint:

Unable to resolve "assets/scala-logo.png" from "target/scala-2.13/react-native-fastopt.js"

The image is resolved relative to target/scala-2.13/react-native-fastopt.js, so you need @JSImport("../../assets/scala-logo.png", JSImport.Default)

[oyvindberg]

the js folder normally puts things in the target/scala-2.13/scalajs-bundler/main folder so it can be more easiliy resolved, but it's a scalajs-bundler thing, and the react-native demo doesnt use scalajs-bundler.

[mcallisto]

ok, this actually gives a hint:

Unable to resolve "assets/scala-logo.png" from "target/scala-2.13/react-native-fastopt.js"

The image is resolved relative to target/scala-2.13/react-native-fastopt.js, so you need @JSImport("../../assets/scala-logo.png", JSImport.Default)

Perfect, 👍, is working! Hope that solving all this dumb stuff will make life easier for someone else in the future 😄.

(By the way I am inching towards the release of a first app in the stores, almost there!)

[mcallisto]

I have another doubt before merging... I had to use a custom Image class since the demo seems to be on Slinky 0.6.5 instead of 0.6.6 (where shadaj/slinky#411 has been fixed and merged).

Upgrading to 0.6.6 the only reference I found in build.sbt

SlinkyDemos/build.sbt

Line 54 in 89fbd0d

libraryDependencies ++= Seq("me.shadaj" %%% "slinky-hot" % "0.6.5"),

does not seem solve the issue.

Where I should upgrade to 0.6.6?

[oyvindberg]

Perfect, +1, is working! Hope that solving all this dumb stuff will make life easier for someone else in the future smile.

Great!

(By the way I am inching towards the release of a first app in the stores, almost there!)

Cool, looking forward to see what you're working on 👍

Where I should upgrade to 0.6.6?

Honestly the best place is a PR here https://github.com/ScalablyTyped/Converter/blob/master/scalajs/src/main/scala/org/scalablytyped/converter/internal/scalajs/Versions.scala#L8
Otherwise this is exactly like if you're depending on a library with a transitive dependency on a library you use in your project. You just add it to libraryDependencies with the version you want.

[mcallisto]

Honestly the best place is a PR here https://github.com/ScalablyTyped/Converter/blob/master/scalajs/src/main/scala/org/scalablytyped/converter/internal/scalajs/Versions.scala#L8

Done, see ScalablyTyped/Converter@351b7ad

[mcallisto]

After this ScalablyTyped/Converter#207 has been solved, is there anything to be done on this repo to make it available? I am trying right now, but 0.6.6 seems not available yet.

[oyvindberg]

Well I still need to make a release of the converter and bump the release here. I'll do it within a day or two. meanwhile if you want to continue here it's no problem to just add slinky 0.6.6 youself in the meantime

[mcallisto]

No hurry, I can wait, thank you!

[oyvindberg]

I released the new version now :)

[mcallisto]

Done, merged a PR with the added image.

(In the meanwhile I have a further strange behavior to investigate, in my projects I have a local SVG image that is showing in the Android simulator but not in the packaged app on the store...)

[mcallisto]

I am reopening the issue, since I strongly suspect that the app bundled by Expo, even if it is showing the image

SlinkyDemos/react-native/src/main/scala/hello/world/Home.scala

Line 44 in 4d9507c

Image(source = ScalaLogo)

in the Android simulator, will not show it once published on Expo.

We can verify this by publishing a new version, substituting the currently outdated https://expo.io/@scalablytyped/projects/scalably-typed-react-native.

The issue happens for sure in my projects.
And I have local audio .mp3 files, placed in the same assets folder, that are bundled perfectly and play in the published version...

Any idea on what it might be going on?

[oyvindberg]

did you figure out something here?

Unfortunately no...

might we have to load the files in the same way we load the font resources maybe?

My doubts:

1. The current .png image is shown in the simulator but not in the packaged app.
   The .ttf font files were shown instead (or not shown, if loaded incorrectly) in both the packaged app and in the simulator.
   Same as the .mp3 files, that I load with something like this:

@JSImport("../../assets/audio/feedback/meh.mp3", JSImport.Default)
@js.native
object MehSound extends Asset

2. By the way, I tried also to change
   

   SlinkyDemos/react-native/src/main/scala/hello/world/Home.scala

   Line 19 in 22f67b2

   object ScalaLogo extends js.Object

   
   with object ScalaLogo extends Asset but no difference.

3. I cannot see a method to load async an Image, like the one available for Font.

[mcallisto]

@oyvindberg sorry I edited your post, while I wanted to quote your questions and reply them in a new one...