Poor performance in lists

[teivienn]

When rendering icons in lists, performance drops. Below are 2 videos of how the lists behave with or without icons. I don't know about performance on iOS, because I can't run my app on iOS, but I think on iOS will be the same problem.

https://github.com/oktaysenkan/react-native-iconify/assets/30047592/e0c437fb-54c9-4116-addc-af3cc93f85b5

https://github.com/oktaysenkan/react-native-iconify/assets/30047592/ce9be8f3-f574-4f0b-b641-431a64c622d6

[oktaysenkan]

Hi, can you share your code?

[oktaysenkan]

iOS

https://github.com/oktaysenkan/react-native-iconify/assets/42527467/3b92e0f4-0cdd-4b3c-a580-bd5f7c301cf0

Android

https://github.com/oktaysenkan/react-native-iconify/assets/42527467/80dfe495-0125-4956-a4fe-1f92aa0dc109

Code

import * as React from 'react';
import { FlatList, ViewStyle } from 'react-native';
import { Iconify } from 'react-native-iconify';
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView
        style={{
          flex: 1,
        }}
      >
        <FlatList
          keyExtractor={(_, index) => index.toString()}
          contentContainerStyle={{
            paddingHorizontal: 16,
            gap: 8,
          }}
          data={Array.from({ length: 100 })}
          renderItem={() => (
            <Iconify
              icon="emojione:flag-for-united-states"
              size={32}
              color="black"
            />
          )}
        />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

[teivienn]

Yep, please check

import { View, SafeAreaView, StyleSheet, FlatList } from 'react-native';

import { Iconify } from 'react-native-iconify';

const data = [
  <Iconify icon="circle-flags:ru" size={34} />,
  <Iconify icon="circle-flags:by" size={34} />,
  <Iconify icon="circle-flags:us" size={34} />,
  <Iconify icon="circle-flags:eu" size={34} />,
  <Iconify icon="circle-flags:az" size={34} />,
  <Iconify icon="circle-flags:gb" size={34} />,
  <Iconify icon="circle-flags:am" size={34} />,
  <Iconify icon="circle-flags:bg" size={34} />,
  <Iconify icon="circle-flags:pl" size={34} />,
  <Iconify icon="circle-flags:cn" size={34} />,
  <Iconify icon="circle-flags:au" size={34} />,
  <Iconify icon="circle-flags:br" size={34} />,
  <Iconify icon="circle-flags:hu" size={34} />,
  <Iconify icon="circle-flags:vn" size={34} />,
  <Iconify icon="circle-flags:hk" size={34} />,
  <Iconify icon="circle-flags:ge" size={34} />,
  <Iconify icon="circle-flags:dk" size={34} />,
  <Iconify icon="circle-flags:ae" size={34} />,
  <Iconify icon="circle-flags:eg" size={34} />,
  <Iconify icon="circle-flags:in" size={34} />,
  <Iconify icon="circle-flags:id" size={34} />,
  <Iconify icon="circle-flags:kz" size={34} />,
  <Iconify icon="circle-flags:ca" size={34} />,
  <Iconify icon="circle-flags:qa" size={34} />,
  <Iconify icon="circle-flags:kr" size={34} />,
  <Iconify icon="circle-flags:md" size={34} />,
  <Iconify icon="circle-flags:nz" size={34} />,
  <Iconify icon="circle-flags:no" size={34} />,
  <Iconify icon="circle-flags:sd" size={34} />,
  <Iconify icon="circle-flags:sg" size={34} />,
  <Iconify icon="circle-flags:tj" size={34} />,
  <Iconify icon="circle-flags:th" size={34} />,
  <Iconify icon="circle-flags:tr" size={34} />,
  <Iconify icon="circle-flags:tm" size={34} />,
  <Iconify icon="circle-flags:uz" size={34} />,
  <Iconify icon="circle-flags:ua" size={34} />,
  <Iconify icon="circle-flags:cz" size={34} />,
  <Iconify icon="circle-flags:se" size={34} />,
  <Iconify icon="circle-flags:ch" size={34} />,
  <Iconify icon="circle-flags:rs" size={34} />,
  <Iconify icon="circle-flags:za" size={34} />,
  <Iconify icon="circle-flags:jp" size={34} />,
  <Iconify icon="circle-flags:kg" size={34} />,
];

const renderItem = ({ item }) => (
  <View style={styles.item}>
    {item}
  </View>
)

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList data={data} renderItem={renderItem} keyExtractor={(_, index) => index.toString()} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    height: 60,
    marginHorizontal: 10,
  },
});

[teivienn]

Well I spent some time investigating, and found out that it's a problem with rendering svg elements, not in iconify library

[oktaysenkan]

I think circle-flags icon pack is not optimised.

const data = [
  <Iconify icon="flag:ru-1x1" size={34} />,
  <Iconify icon="flag:by-1x1" size={34} />,
  <Iconify icon="flag:us-1x1" size={34} />,
  <Iconify icon="flag:eu-1x1" size={34} />,
  <Iconify icon="flag:az-1x1" size={34} />,
  <Iconify icon="flag:gb-1x1" size={34} />,
  <Iconify icon="flag:am-1x1" size={34} />,
  <Iconify icon="flag:bg-1x1" size={34} />,
  <Iconify icon="flag:pl-1x1" size={34} />,
  <Iconify icon="flag:cn-1x1" size={34} />,
  <Iconify icon="flag:au-1x1" size={34} />,
  <Iconify icon="flag:br-1x1" size={34} />,
  <Iconify icon="flag:hu-1x1" size={34} />,
  <Iconify icon="flag:vn-1x1" size={34} />,
  <Iconify icon="flag:hk-1x1" size={34} />,
  <Iconify icon="flag:ge-1x1" size={34} />,
  <Iconify icon="flag:dk-1x1" size={34} />,
  <Iconify icon="flag:ae-1x1" size={34} />,
  <Iconify icon="flag:eg-1x1" size={34} />,
  <Iconify icon="flag:in-1x1" size={34} />,
  <Iconify icon="flag:id-1x1" size={34} />,
  <Iconify icon="flag:kz-1x1" size={34} />,
  <Iconify icon="flag:ca-1x1" size={34} />,
  <Iconify icon="flag:qa-1x1" size={34} />,
  <Iconify icon="flag:kr-1x1" size={34} />,
  <Iconify icon="flag:md-1x1" size={34} />,
  <Iconify icon="flag:nz-1x1" size={34} />,
  <Iconify icon="flag:no-1x1" size={34} />,
  <Iconify icon="flag:sd-1x1" size={34} />,
  <Iconify icon="flag:sg-1x1" size={34} />,
  <Iconify icon="flag:tj-1x1" size={34} />,
  <Iconify icon="flag:th-1x1" size={34} />,
  <Iconify icon="flag:tr-1x1" size={34} />,
  <Iconify icon="flag:tm-1x1" size={34} />,
  <Iconify icon="flag:uz-1x1" size={34} />,
  <Iconify icon="flag:ua-1x1" size={34} />,
  <Iconify icon="flag:cz-1x1" size={34} />,
  <Iconify icon="flag:se-1x1" size={34} />,
  <Iconify icon="flag:ch-1x1" size={34} />,
  <Iconify icon="flag:rs-1x1" size={34} />,
  <Iconify icon="flag:za-1x1" size={34} />,
  <Iconify icon="flag:jp-1x1" size={34} />,
  <Iconify icon="flag:kg-1x1" size={34} />,
];

These icons works well.