I am trying to display a base64 image from my api but get a white space in place of the image, its work fine on android - any ideas?
<Image
source={{ uri: Images.slider.slider1 }}
PlaceholderContent={<ActivityIndicator />}
style={{width: 100, height: 100}}
/>
Images.slider.slider1:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAFbCAIAAAChzFnkAAAAAXNSR0IArs4c6QAAIABJREFUeJx8vVuyLEmuKwZ6ZPW5pvlPST8y03Skc/tUOvRBAGTkrtZq611rZUb4gw8QpHt41P/5f/3fIC9574V/qqp/IUmAharTnx8CIADUAemL9QsB/QFcgH0BWFWFes6pQqFI9n8Bog5Q3dc551R1U9X9FwAUCuhuusnuDn1joQrFH
this is a known issue in react native 0.62 ,
kindly check this link Github RN .
What basically was done in the PR was :
For anyone else that comes across this just change the version of Flipper in the podfile to
versions['Flipper'] ||= '~> 0.37.0'
do let me know in case of any concerns
Related
I was using react-native-image-rotate to rotate images but its no longer mantained, any idea what could be a good alternative.
ps: I am not using expo and I am using react-native v0.71.0
I tried react-native-photo-manipulator and other packages but the build fails everytime.
Use transform style properties.
<Image
style={{width: 50, height: 50, transform: [{rotate: '45deg'}]}}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
I'm trying to import local images in my react native app, by using the "require" keyword, but everytime I use require I get a 500 response code from the development server.
<Image key={value + "1"} source={require("./giantdoubble.png")} style={{height: 100, width: 100}}/>
<TouchableOpacity onPress={() => alert(value)} key={value} style={styles.card} >
<Text>xD</Text>
</TouchableOpacity>
For some reason my PNG file used PNG with all caps, which made it unrecognizable by the code. Converting it to a png with lower case characters resolved the issue.
Trying to display an image within a WebView in ReactNative (Using Expo). Doing this to allow image zooming.
Using webview with source={{ uri: this.state.imageUrl }} which is an s3 bucket image location. ie-- ending in .jpg
I have set mixedContentMode to 'always' as is suggested by people with similar problems, along with setting javascriptEnabled and domStorage to true, setting style to flex:1 etc etc.
My android is displaying a white page only, but iOS displays the image just fine, so url is not the problem.
I know RN advertises Webview as being soon to be deprecated and to use react-native-webview. But as we use Expo this isn't an option as linking is required to use react-native-webview which cannot be done with expo.
Is there something I have missed with s3 buckets or has anyone else had a similar issue they have managed to solve this issue? Not sure what else to try, have used the trick with google drive prefix elsewhere in the app for displaying PDFs in the webview but that doesnt work in this case. And using mixedContentMode hasn't solved anything.
<WebView
source={{ uri: this.props.map.source }}
startInLoadingState
javaScriptEnabled
style={{ flex: 1}}
scalesPageToFit
javaScriptEnabled
domStorageEnabled
originWhitelist={['*']}
mixedContentMode='always'
/>
and example of the image url is 'https://example-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:example/public/image-hd-1.jpg'
just showing the format.. above url will not work
In the end I just used the WebView and inserted my own html with an img tag that references the exact same image url. This seems to work just fine and gets around what ever issue was occurring with referencing the image directly.
Would still like to know if anyone has gotten around this without having to perform different renders for different operating systems.
Did you try to wrap it in view? Because in my one of an old project I solved it like this
<View style={{flex:1}}>
<View style={{height:'100%',width:'100%'}}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
mixedContentMode='always'
/>
</View>
</View>
Here is the Snack Link
blurRadius seems to be working on images loaded from remote URIs, but not ones that were loaded from my local assets. Any ideas on why this is?
This can be a version issue or any type of styling error because i have tried blurRadius on many of my local assets and it worked as expected.
Make sure syntax is correct:
<Image
source={require('./image.png')}
style={{ width: 200, height: 200 }}
blurRadius={0.2}
resizeMode='contain'
/>
I am facing the problem with gif image in react-native.How to use gif image in react native. This is my code and I have placed the image in the images.js file.
Previously I fixed the issue of gif image displaying in ReactNative.
You too fix this if you follow the following steps,
By default the Gif images are not supported in android react native app. You need to set use Fresco to display the gif images. The code:
Edit your android/app/build.gradle file and add the following code:
dependencies: {
...
compile 'com.facebook.fresco:fresco:1.+'
// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.+'
// For WebP support, including animated WebP
compile 'com.facebook.fresco:animated-webp:1.+'
compile 'com.facebook.fresco:webpsupport:1.+'
}
then you need to bundle the app again, You can display the gif images in two ways like this.
For RN >= 0.60
implementation 'com.facebook.fresco:animated-gif:1.12.0' //instead of
implementation 'com.facebook.fresco:animated-gif:2.0.0' //use
1-> <Image
source={require('./../images/load.gif')}
style={{width: 100, height: 100 }}
/>
2-> <Image
source={{uri: 'http://www.clicktorelease.com/code/gif/1.gif'}}
style={{width: 100, height:100 }}
/>
I hope it is helpful to others,
Just like other assets image:
<Image
source={require('./images/loading.gif')}
style={{height: 200, width: 200}}
resizeMode='contain'
/>
Note: You need to turn on GIF support for Android version
use this,
<Image
style={styles.gif}
source={{uri: 'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'}}
/>
make sure to add below dependency,
compile 'com.facebook.fresco:animated-base-support:0.14.1'
compile 'com.facebook.fresco:animated-gif:0.14.1'
for more details refer this ,
StackOverFlow question.
<Image source={require('./img/ezgif.com-resize.gif')} />
//add that inside dependancy block in android/app/build.gradle
compile 'com.facebook.fresco:animated-base-support:1.3.0'
compile 'com.facebook.fresco:animated-gif:1.3.0'
compile 'com.facebook.fresco:animated-webp:1.3.0'
compile 'com.facebook.fresco:webpsupport:1.3.0'
Add that inside dependancy block in android/app/build.gradle
*For me react-native version 0.57.8. It is working for me.
compile 'com.facebook.fresco:animated-gif:1.10.0'
compile 'com.facebook.fresco:fresco:1.10.0'
*
<Image source={{ uri: 'https://media.giphy.com/media/NSI5d5LiHPxXCKDbob/giphy.gif' }}
style={{ height: 80, width: 60, }}
/>