I simply fetch a JSON from external API, put it into a state and render it. Everything works just super fast on iOS, but Android takes 5 times to render. Anything before the render itself takes a couple of milliseconds. The render exclusively on Android (no matter the emulator or a real device) takes minimum of 5 seconds while on iOS it takes a couple of milliseconds. I made a video where I describe the issue.
The simple version of the original code of the component is here:
import { StyleSheet, Text, View } from "react-native";
import React, { useEffect, useState } from "react";
import { IStory } from "../../interface/fairytale.interface";
import { safeConsole } from "../../helpers/safeConsole";
const StoriesList = () => {
const [fairytales, setFairytales] = useState<{ data: IStory[] } | null>();
useEffect(() => {
(async () => {
safeConsole.time("Items Rendered");
safeConsole.time("Fetched Data");
const response: Response = await fetch(
https://api-fairy.swcookies.com/api/fairytales?populate=*&sort=createdAt:desc&pagination[pageSize]=5&pagination[page]=1
);
safeConsole.timeEnd("Fetched Data");
safeConsole.time("Turned Into a JSON");
const data = await response.json();
safeConsole.timeEnd("Turned Into a JSON");
safeConsole.time("Setting fairyTales to state");
setFairytales(data);
safeConsole.timeEnd("Setting fairyTales to state");
})();
}, []);
return (
<View
style={{
height: 800,
width: 400,
}}
>
{fairytales &&
fairytales.data.map((item: IStory, index: number) => {
safeConsole.timeEnd("Items Rendered");
return <Text key={index}>The item is rendered</Text>;
})}
</View>
);
};
export default StoriesList;
const styles = StyleSheet.create({});