Getting the following error while running lottie animation in react native app with fabric enabled.
Unimplemented component LottieAnimationView output screen
<LottieView
source={require('../NewArchApp/lottie/133603-like-animation.json')}
style={{width: 240, height: 240, backgroundColor: 'black'}}
autoPlay={true}
loop={true}
/>
The same works perfectly fine without enabling the new arch.
react-native version: 0.71.1
lottie-react-native version: 5.1.4
Using the command RCT_NEW_ARCH_ENABLED=1 to enable the new arch.
Getting the error only when the new arch is enabled.
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 saw this article:
https://expo.canny.io/feature-requests/p/react-native-fast-image
I install expo react native fast image. So I want to use it but I get this err message:
Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
Code:
...
import FastImage from 'react-native-fast-image';
...
{ /* Modal Shipping */ }
<Modal
isVisible={modalView}
swipeDirection="down"
swipeThreshold={20}
propagateSwipe={true}
backdropTransitionOutTiming={0}
>
<View style={{ justifyContent: 'center', padding: 12, alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, padding: 12, borderWidth: 4, borderColor: '#ac67f9'}}>
<FastImage source={{uri: 'https://i.ebayimg.com/thumbs/images/g/QSIAAOSw3gNggE1r/s-l225.webp'}} resizeMode="contain" />
</View>
</Modal>
Is there any new option for this? In expo project, "FastImageView was not found in the UIManager." still occurs.
I've managed to install react-native-fast-image to my expo project. Here is what I've done:
Make sure you run the eas build -p all --profile development Ensure
eas-cli is installed prior to run this script.
After running it, you will have an eas.json file in the root dir of
the project.
The next step is to run expo run:ios or expo run:android, then
you will notice the generated native folders (android, ios) in the
root dir again...
All should work just fine after these steps.
Use this package it is super fast
expo fast image
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
I'm trying to run my application from Xcode version 10.3 and react native version 0.57.8
open a terminal Running Metro Bundler on port 8081. and it's done but the simulation did not bundle project brings an older version.
I tried to delete node_modules again install and same way for pod file but it's still not working also I tried clear bundle but still not bundle my project?
any idea?
Try adding overflow: 'hidden' as below
const SCREEN_WIDTH = Dimensions.get("window").width;
const SCREEN_HEIGHT = Dimensions.get("window").height;
<View style={{ height: SCREEN_HEIGHT , width: SCREEN_WIDTH ,overflow:'hidden' }}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
/>
</View>
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, }}
/>