Webp on React-Native

Question

React-Native documentation mentions that webp is not supported on Android, but says nothing about IOS. Out of the box it does not seem to work, but after installing this plugin https://libraries.io/npm/react-native-webp I can use images downloaded from internet.

Problem is that local files give me an error

: "{"type":InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"}

Unfortunately "react-native log-ios" command merely shows the same error there.

This is how I use the webp file after installing the plugin.

<Image
   source={require('../../assets/icon.webp')}
/>

How can I use local .webp images on React-native iOS?

Afflict

check this link: facebook.github.io/react-native/docs/image.html – Uhl

"The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only)." This reads there now. Not sure if it was there when I asked the question. – Afflict

Answer 1

I suggest using: https://github.com/Aleksefo/react-native-webp-format

Works on both iOS and Android. Doesn't need a separate import, you can just use it with standard Image/ImageBackground component like:

<Image source={require('../../assets/example.webp')} />

Herzl

How to make it work on an expo project? I have posted a question regarding this on stackoverflow too – Fuzzy