Develop Reference

How to display an animated Gif in React Native

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>
);
};

React Material UI: Textfield maxLength not working in Android

I am using React Material UI and want to implement max length for a TextField component.
I tried to set max length in inputProps as below -
<TextField
id="name"
label="Name"
inputProps={{ maxLength: 5 }}
/>
This works in desktop browsers as expected, but doesn't seem to work in mobile devices browsers, expecially in most Android mobiles with Chrome latest version.
Not sure about IOS, as not tested in that environment.
Please refer the stackblitz here for reference.
To replicate, please open the above stackblitz in a mobile device browser prefebaly in Chrome.
I can go with regex, but I think setting up max length attribute to a field seems very clean and semantic.
Please let know if there is any way.

If your input filed type='number' then it will not work.
You can try this solution. I think it will work.
<TextField
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>

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.

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