React-native-windows: The bundle builds dont show .gifs

[KinanKazmi]

Windows 10 x64 15063

1. react-native -v: react-native-cli: 1.0 react-native: 0.49.5
2. npm ls rnpm-plugin-windows: [email protected]
3. npm ls react-native-windows: [email protected]
4. node -v: v8.9.0
5. npm -v: 5.5.1
6. yarn --version:

Then, specify:

UWP

• Target Platform: x86, x64

• Target Platform Version(s): 10.0.15063

• Target Device(s): Desktop

• Development Operating System: Windows

• Visual Studio Version: Visual Studio 2017

Steps to Reproduce

1- Add a gif as as image source. e.g. <Image source={require('./abc.gif')} ...>
2- Test it on Debug mode => works fine.
3- Test it on DebugBundle => No gifs, like they werent even there.
4- Test it on Release => works fine.
5- Test it on ReleaseBundle => same as debug bundle => No image/gifs there.

Expected Behavior

I expected them to animate in bundlebuilds (ReleaseBundle and DebugBundle).

Actual Behavior

No Gifs! Like i didnt even write the image tag.

Reproducible Demo

Try using an animated gif as an image source.

Could this be my bundler problem ? Its not packing gifs?

[KinanKazmi]

btw the gif that im using is this one.
https://stormandsky.com/gif/t4.gif

[KinanKazmi]

Update: It runs gifs from source={{uri: 'http...'}} just fine. Only the local files don't load in buldle builds.

[rozele]

cc @phongcao I think this is a difference between using the encoded and decoded APIs from the ImagePipeline project.

[phongcao]

Yes, this issue has been fixed on my repo. Just need to check for a few more things before creating the PR.

[KinanKazmi]

@phongcao is it expected to be merged by today?
If not, can i use your repo from npm? ( npm -i -S yourRepo.git )
I'm in a middle of a project and really need this feature.

[phongcao]

@KinanKazmi Can you try this?
https://github.com/phongcao/react-native-windows/tree/encoded-local-image

[KinanKazmi]

@phongcao hey thanks for this!
But Your git is 16 commits behind master. I hope nothing else breaks in my project when i pull this.

[KinanKazmi]

Also, any idea how i could use videos in my project?
I tried react-native-video but its ancient and breaks. It throws an error by calling a function that takes 1 parameter, with 2 arguments ...etc.

[phongcao]

@KinanKazmi I've just rebased my branch and will create a PR for it soon. Maybe @rozele can comment on the video feature.

[KinanKazmi]

@phongcao Thanks man!

[KinanKazmi]

@phongcao a quick question. Would this work with images only or all other assets too?
Since video files also dont get bundled along, and only work in debug.

[KinanKazmi]

I just tried it, nothing is getting bundled now. Not even pngs. @phongcao please help!
( Im using RN 0.50.3 now )

[phongcao]

@KinanKazmi There is indeed an issue with the bundle URI in 0.50. @rozele is working on a fix and keep you posted!

[KinanKazmi]

@phongcao his commit brings back images but with your commit + his, images lag a LOT in animation. And also, no gifs visible as locally bundled. :(

[phongcao]

@KinanKazmi Are you referring master or my local branch? I haven't rebased my local one so it's still having the bundle issue. How did you test the animation and saw it's lagging?

[KinanKazmi]

Your local branch + react-native 0.50 + rozele's commit's file.
The animation in my project gets stuck for a few secs, then resumes, then gets stuck again... and so on.
All was fine when i opened this issue, with the specs mentioned on the top. The only issue back then was that gif images were not being bundled along, in DebugBundle and ReleaseBundle. I had to upload them to a server and use them through a uri.

[KinanKazmi]

Just tested it without your local branch ( used react-native-windows 0.50.0-rc.1 ) and the animation lags there too.

[phongcao]

@KinanKazmi You might want to create another issue to track the performance issue which you still encounter.

[phongcao]

@KinanKazmi I updated my branch and tested with DebugBundle/ReleaseBundle configuration. Your t4.gif file works for me as below:

[KinanKazmi]

I'm using it like this
this.citybg = require('../assets/city.gif'); <Image source={this.citybg} style={styles.backgroundVideo}/>

In non-bundle builds, it works. When bundled, its gone.

[KinanKazmi]

This works in both.
this.citybg = {uri: 'http://cdn.dribbble.com/users/891406/screenshots/2146143/city1.gif'};

[phongcao]

How's about this?
<Image source={require('./city.gif')} style={styles.icon} />

[KinanKazmi]

No difference between inline requiring and variable requiring. Same.
And its only for gif format. I'm using multiple pngs throughout the app and they work fine.

[KinanKazmi]

Are animated gifs working for you in bundle builds ?

[phongcao]

Yes, I just tried loading t4.gif file in the ImageExample.js and it displays as the above screenshot.

[KinanKazmi]

My target and min version for all projects are 10.0.14393. Does that effect?

[phongcao]

It shouldn't. Maybe you can try doing a fresh clone and bundling it again.

[KinanKazmi]

@phongcao There's something wrong with your latest code. My log says

```git://github.com/phongcao/react-native-windows.git successfully installed.
Generating self-signed certificate...

events.js:183
throw er; // Unhandled 'error' event
^

TypeError: Cannot read property 'toString' of null
at constructor.writing (C:\Users\Kaz\react\testProj\node_modules\react-native-windows\local-cli\generator-windows
\index.js:69:60)
at C:\Users\Kaz-PC\react\testProj\node_modules\yeoman-generator\lib\base.js:430:16
at runCallback (timers.js:789:20)
at tryOnImmediate (timers.js:751:5)
at processImmediate [as _immediateCallback] (timers.js:722:5)
```

[KinanKazmi]

I did this

1- react-native init testProj
2- npm install --save-dev rnpm-plugin-windows
3- react-native windows --windowsVersion git://github.com/phongcao/react-native-windows.git

[phongcao]

Maybe it's easier if you just integrate these changes to your local copy:
https://github.com/phongcao/react-native-windows/commit/a6969ab7e2410acb9d993ba41c413b47e3ba4f1e

[KinanKazmi]

@phongcao got it working. Thanks a lot for your help!

There was something wrong with the bundler-tree-scanning-structure too. Maybe it couldnt read all the links through the navigation component im using.
My structure was
=> React-Navigation's StackNavigator in index.js, registering the app.
=> The initial screen to load through this component was a screen named App.js.
=> In App.js's render function, i had a conditional return, i.e. if (!this.state.initial) return < ViewB />; return <ViewA>
=> And it was in that ViewA where my gifs were not being loaded.

This is how i got it working.
=> In my index.js, i changed my initial route from App.js to <ViewA>.
=> Saved the file, made a bundle and made a releaseBuild. It ran perfectly ( all gifs loading ) .
=> Changed the project structure back ( i.e. index.js's initial route back to App.js ) . Saved the file, cleaned the project solution in visual studio, made a bundle again, made the release build. And its working fine ( all gifs loading ) .
My final config

"react": "16.0.0",
"react-native": "0.50.3",
"react-native-windows": "^0.50.0-rc.2", ( + manually changing files as in your repo )
"react-navigation": "^1.0.0-beta.19"

[KinanKazmi]

And for the new version's issue, animation lag :(
I'l open a new issue for it.

[phongcao]

No problem, glad it's working for you now!