How to display an animated Gif in React Native - android

Before you link me to another question similar to this one, such as this or that. I will say that I have done exactly what the answers said, but my gif won't animate as it should (It is displayed though).
Here is what I've done in a function, which is displayed through the main App function Stack.Screen within a NavigationContainer and Stack.Navigator. (I'm using React Navigation to move across screens, the context here is that a button is pressed and it displays the contents of the DetailsScreen function)
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 2, alignItems: 'center', justifyContent: 'center' }}>
<Image source={require('./src/gif/moving.gif')} />
<Text>Here is a gif</Text>
</View>
);
}
This displays the first still image of my gif, but doesn't animate it.
I also already went ahead and placed the implementations in the build.gradle dependencies, but it didn't do anything for me. I have a feeling the problem lies there.
implementation 'com.facebook.fresco:fresco:1.+'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.+'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.+'
implementation 'com.facebook.fresco:webpsupport:1.+'
(I already checked fresco's new implementation version 2, but it still didn't help. I also tried changing from a specific version, still doesn't work)
I am using React Native version 0.67. (I tried starting it again while downgrading react-native to 0.66 and it still doesn't work.)
Also, not sure if this has to do with anything in this screenshot here, this is what I had by default and gave me this error message as soon as I opened the file, but the program launches just fine even with that on
Doing it normally in the main App() function starting first displays the gif, but still remains as a still image.
What should I do? I mean... what else can I do?
Edit:
I found the solution to the problem... it was a simple case of just cold booting the emulator I was using from android studio.
However, Tadej's answer is valid, as the view style aligning messes up the gif a bit. If you are having a similar problem and the answer doesn't help, try cold booting your emulator, or even reinstall a newer one... or alternatively, use a real android phone to test these sorts of things.
Anyway, thanks a lot for the help Tadej ! I hope this question has helped others in my situation.
Tadej Slemenšek

This worked for me. Setting height and width on Image prop did not show the gif. So I flexed it and added maxWidth and maxHeight.
const imageUrl = 'https://media.giphy.com/media/xT0xeCCINrlk96yc0w/giphy.gif';
const App = () => {
const { width } = useWindowDimensions();
return (
<View style={{flex: 1}}>
<Image style={{flex: 1, maxWidth: width, maxHeight: width}} source={{uri: imageUrl}}/>
</View>
);
};

Related

Why do I have so many problems refreshing code in Android emulator

So I have just started learning app development with React Native this past week and so I've been getting into using Android studio emulators to run my apps. I've noticed that when I run the apps on the emulator, it doesn't seem to refresh the code properly. For example I made this very simple app while following a tutorial:
import React from 'react';
import { Text, View, Platform } from 'react-native';
import {Button} from 'native-base';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><text>Hello World!</text></Button>
</View>
)
}
}
const styles = {
container: {
flex: 1,
marginTop: 24
}
}
But when I first created it, in the tutorial the instructor forgot to put the Text tag within the button, so when I ran the app I got an error of:
Text strings must be rendered within a <Text> component.
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4137:14 in <anonymous>
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4134:2 in createTextInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:15909:12 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19409:28 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19380:30 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
and it keeps going. Then in the tutorial the instructor noticed the mistake and fixed it by adding the tag in the button, but then when he does that, the app refreshed properly and displayed the button but for me I still get this same error. I've noticed this happening quite often with the Emulator, it doesnt like to refresh properly when opening a new app or altering one. I have deleted and recreated the emulator like 5 or more times now to test out different apps. Does anyone have a suggestion of how to fix this? Thanks in advance!
Change your <text> to <Text> as below.
<View style={styles.container}>
<Text>Testing 12321</Text>
<Button><Text>Hello World!</Text></Button>
</View>
Feel free for doubts.

ReactNative TextInput in Android is not editable

Below is the simple code I have.
change(text) {
this.setState({text});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome, what is your name?
</Text>
<TextInput
style={{height: 40, width: 200}}
onChangeText={this.change.bind(this)}
value={this.state.text}
/>
</View>
);
}
It works as expected in iOS. In Android, it shows the Text and TextInput field. However anything I type in TextInput does not show up.
I have two questions basically.
First one is, what might be going wrong here?
Second and more important question is, how do I debug a problem like this? I used ReactNative debugger and put a breakpoint in change function, it doesn't get called.
I also checked the generated native code in anticipation to debug using Android Studio. Didn't see anything in the code there where I can possibly put a breakpoint.
If in case it helps someone - here is what I found.
I was running Android emulator with API level 25 (Nougat).
When I switched to API level 23 (Marshmallow) it started working.

http or https <image> component on React Native showing blank on Android 4.1.2 (API 16)

Hello I'm just a newbie on react native.
I'm trying to use a Facebook tutorial for the image component
export default class PropertyFinder extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
var yourPicture = require ('./images/image1.jpg');
return (
<ScrollView>
<Image source={{uri: 'http://i.imgur.com/UePbdph.jpg'}} style={{width: 200, height: 227}} />
<Text> test </Text>
<Image source={pic} style={{width: 193, height: 110}}/>
<Image source={yourPicture}/>
<View>
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
</View>
</ScrollView>
);
}
}
I ran this on the AVD emulator and it works all the images show
But, I tried to debug on the device (old lenovo API 16) and an image is shown only for the local image var yourPicture , all the URI http / https images aren't showing. They are just blank.
So I'm curious, how can this be happening?
I've tried to search the forum, but can't found any solution. I also tried to release the apk, and install it on my old lenovo, but I still get the same result. (only local image shows)
Finally I tried to install it on my new xiaomi (android 6), and all the images show..
Hmm this behavior is odd, because React native supports android 16, right?
minSdkVersion 16
Any way to fix this?
Thank you very much......
Are you using big images?
You should try to use android:largeheap="true" to see if it's works with that. If the image appear than mean you have a memory issue on old devices.
android:largeheap="true" is not a solution. It should be only used for apps which require a lot of memory (like drawing on picture).
You can use ImageOptim to reduce the size of your files

react native pdf View

Good day mates,
I'm currently having a problem with our project. I'd like to rerender a pdf with fields to contain texts and a signature, are there any ways or solution available to get this?
Please direct me to the right direction. :D
Did you try react-native-view-pdf package? It's pretty simple and has zero NPM dependencies:
import PDFView from 'react-native-view-pdf';
<View style={{ flex: 1 }}>
<PDFView
style={{ flex: 1 }}
onError={(error) => console.log('onError', error)}
onLoad={() => console.log('PDF rendered from url')}
resource="http://www.pdf995.com/samples/pdf.pdf"
resourceType="url"
/>
</View>
Recently i did a similar research for our java-webapp. Those may be useful in your case also:
You can use Flying Saucer to convert your XHTML based template
into PDF (CSS2.1 supported - you'll be able to render really pretty
PDFs)
If HTML and CSS are not your strengths - stick with Apache FOP.
As an experimental solution - you can try to generate those on
client-side with jsPDF (for simplistic stuff this approach may
do it)
In the end we chose Flying Saucer and we're pretty happy with the results
try this react-native-pdf-view on github

react-native app lags on android

I wrote simple app on react-native. It consists of <ListView> that shows <Image> in rows. Images are fetched from the network. It runs on iOS very well. But on Android if stucks when image appears. FPS is 0.9-3.2;
I used systrace tool to figure out what is going on. Here is a screenshot of it.
It looks like everything is done on UI thread.
Here is a render function of my class:
render() {
return (
<View style={styles.container}>
<ListView
style={styles.list}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
</View>
);
}
renderRow(rowData) {
return <Image
style={{ width: 320, height: 320 }}
source={{uri: rowData.coverPhoto}} />
}
I have aa filling that I missed something. Can somebody help me figure out what exactly ?
Thanks!
I ran into the same problem recently and figured out what's causing this and how to solve it (at least for me). I know this is old, but I'll leave this here in case somebody needs it.
The Cause
For me it was the image from the net. Its resolution is huge (more than 3000x4000) while my <Image /> component was styled to be small (50x50 to be exact).
The Solution
There's a prop for <Image /> specifically for Android, which is resizeMethod (this is different from resizeMode). I used resizeMethod: resize and the app runs well on Android. Here's the documentation for more info.
Try change
renderRow={this.renderRow.bind(this)}
to
renderRow={this.renderRow}

Categories

Resources