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

Render many charts without lags on React Native

I'need to show user feed with items where every item contain a chart.
Now I use react-native-svg-charts:
<LineChart
style={{ height: 150, position: 'relative', left: -20 }}
data={data}
curve={shape.curveNatural}
svg={{ stroke: chartColor1, strokeWidth: 5 }}
contentInset={{ top: 20, bottom: 20 }}
showGrid={false}
numberOfTicks={0}
key={props.id}
>
But when I load more then 50 items performance of the app fall down to 10-15 fps.
I think it because of many SVG's on page. Which solution do you think should I use to avoid this?

I answered a similar question recently here: Real-time data update chart in React Native and will suggest the same here.
I've struggled with performance when plotting in React Native with all of the SVG-based libraries I've tried. I recently decided to try using a couple canvas-based plotting libraries within a WebView and had very good results. I ended up making a simple package: https://www.npmjs.com/package/#dpwiese/react-native-canvas-charts.
Should you not want to use this package and instead do it yourself, it's quite straightforward. While the package source code is probably the best resource I'll summarize the steps below:
Create an HTML file and import it into your component:
const htmlTemplate = require("./index.html");
where the HTML contains the JavaScript for the charting library of choice. The linked package above currently supports Chart.js v3 and uPlot. In the steps below I'll show a Chart.js configuration.
Create a ref, for example let webref.
Create a WebView and onLoadEnd you can inject some JavaScript into the WebView that will configure and create your chart
<WebView
originWhitelist={["*"]}
ref={r => (webref = r)}
source={htmlTemplate}
onLoadEnd={() => { addChart(config) }}
/>
where addChart looks something like:
const addChart = config => {
webref.injectJavaScript(`const el = document.createElement("canvas");
document.body.appendChild(el);
window.canvasLine = new Chart(el.getContext('2d'), ${JSON.stringify(config)});`);
};
and config is a valid Chart.js configuration.
To update the chart data simply inject some JavaScript to update the data. In the case of Chart.js here, that'd look like:
const setData = dataSets => {
if (dataSets) {
dataSets.forEach((_, i) => {
webref.injectJavaScript(`window.canvasLine.config.data.datasets[${i}].data = ${JSON.stringify(dataSets[i])};
window.canvasLine.update();`);
});
}
};
where dataSets are valid Chart.js data sets.
That's it! I've only played around with these two plotting libraries via the https://www.npmjs.com/package/#dpwiese/react-native-canvas-charts package, but so far performance has been really good, even with the JSON stringification of all the passed chart data. I haven't quantified it thoroughly, but both libraries are orders of magnitude more performant than any of the SVG-based ones I've tried.

React Native - Text Transform issue with Android Simulator

Is there a known issue with TextTransform:'uppercase' with Android?
I'm fairly new to React native and just finished building views, all looked great in Ios but on Android - no button text displaying. After a series of trial and error I found that the issue seems to be textTransform:'uppercase', if I remove this from the stylesheet the text displays fine.
Has anyone experienced this? I cant find any information about the bug on the web.
This is my Code:
return (
<View style={AppStyles.buttonRect} >
<View style={AppStyles.buttonRectWrap}>
<Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />
<Text style={AppStyles.btnText}>{this.props.buttonTxt}</Text>
</View >
</View>
);
with a style of :
btnText:{
color:'#fff',
marginRight:14,
marginLeft:10,
fontSize:20,
alignSelf: 'center',
marginTop:-3,
textTransform:'uppercase',
},
which results in -
If I remove the transform line:
I've tried with several simulators and get the same error.

This is currently a bug with React Native. A fix appears to be in 0.59.0 release, since the 0.59.0 release candidates don't contain the bug. Source: https://github.com/facebook/react-native/issues/21966

There is a known issue. Basically using textTransform breaks text styling for android. Even textTransform: none will break your styling. Issue link: https://github.com/facebook/react-native/issues/21966

I'm facing the same issue with react native version 0.58.5, this seems to be a well known bug. Try using normal JS to capitalize strings for now:
capitalizeString = (text: string) => typeof text === 'string' && text.length > 0 && ${text[0].toUpperCase()}${text.slice(1)}
capitalizeString('mystring')
or just:
string.toUpperCase();
ref: https://github.com/facebook/react-native/issues/21966

The workaround this issue I found was to create a component that renders the props.children and chain the .toUpperCase method.
react-native text-transform uppercase

Styles are not being applied to children props

My container class:
import React from 'react';
import {View} from 'react-native';
const Cont = (props) => {
return(
<View style={styles.cStyle}>
{props.children}
</View>
);
};
const styles = {
cStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#fff',
borderBottomWidth: 0,
elevation: 10,
marginLeft: 5,
marginRight: 5,
marginTop: 10
}
};
export default Cont;
Now the class that uses this component:
import React from 'react';
import {Text} from 'react-native';
import Cont from './Cont';
const Det = (props) => {
return(
<Cont>
<Text>{props.alb.title}</Text>
</Cont>
);
};
export default Det;
I don't think I need to provide the index.js, since all I'm doing related to the subject in matter is calling a self closing tag of the object. I have no idea why my styles are not being applied. I checked everything I thought I could of have checked. Any ideas? Any support is appreciated.
PS: I was expecting <Text /> childs to inherit my styles
PS2: Also I'm not sure this is really 'inheritance'. Because actually the styles should affect every <View> from my class and then consequently the children that is INSIDE my <View> tags

I'd like to answer my own question regarding this issue because there might be other persons struggling now or in the future, and would not know quite what to do, hopefully this answer will help them.
There was no error in my code, at least not in the classes I posted above. And EVERY <Text> children should be inside a styled <View>, which was my intention at first. So I had made a typo when calling the class in the entry js file. But, somehow (yes this defies my current React Native knowledge which is already little) the app was still compiling but not styling ANYTHING. Only after I restarted not only the server in the terminal but also the simulator, is that I received the bug which I could finnally debug. (Unexpected char 'blabla' in Line X). After fixing it my styles were applied. But the craziest thing is: It was either compiling with an unexpected character (which seems impossible to me) or compiling a past version of my App. Now, this sounds absolutely crazy to me and I will be reporting it on React Native forums and Android Studio. Thanks for all the help.
EDIT: React Native forums topic on the issue: http://discuss.nativebase.io/t/android-simulator-compiling-wrong-code/1183

Regular styles behave differently in react-native compared to CSS in say, the web-browser. There's no concept of style inheritance by default in react-native, so styling that you apply to <Cont /> won't be inherited by the children of <Cont /> (ie your <Text> elements).
When styling with react, you'll typically need to apply styles directly to all components that you want to tweak the appearance of:
<Cont>
{ /* custom styling must be applied to all components that you
want to tweak */ }
<Text style={{ color : 'red' }}>{props.alb.title}</Text>
</Cont>
Something to also keep in mind is that different element types (<Text/> , <View />, etc) sometimes only support a limited subset of styling options. For example, see the styling documentation for <Text /> for an overview of the styling options that the <Text /> element type supports.

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}