Return to Question

I implemented everything and it works perfectly however the performance is very slow. Whenever I write text, the fancy text changes very slow and gets slower when the text becomes very large. I think it is the problem with the flatlist being rendered everytime the text changes or maybe with my textgeneration function. I tried everything to optimize it but it was still noticably slower even in the final build of APK file.

Here is the function that generates the fancy text:

remap = () => {
let newtext = Array(51).fill("")
let regText = `${this.state.inputdata}` != "" ? `${this.state.inputdata}` : "example"
let normal = `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890`
let normal2 = `a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0`
let normal3 = `a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0`
let lent = regText.length
for (var i = 0; i < regText.length; i++) {
 let sliced = regText.slice(i, i + 1)
 let indexed = normal.indexOf(sliced)
 let indexed2 = normal2.indexOf(sliced)
 let indexed3 = normal3.indexOf(sliced)
 if (normal.includes(sliced)) {
 newtext[0] += [...fonts.font24][indexed];
 newtext[1] += [...fonts.font15][indexed];
 newtext[2] += [...fonts.font26][indexed];
 newtext[3] += [...fonts.font23][indexed];
 newtext[4] += [...fonts.font14][indexed];
 newtext[5] += [...fonts.font5][indexed]; //reverse remap
 newtext[6] += [...fonts.font4][indexed];
 newtext[7] += [...fonts.font25][indexed];
 newtext[8] += [...fonts.font0][indexed];
 newtext[9] += [...fonts.font21][indexed];
 newtext[10] += [...fonts.font22][indexed];
 newtext[11] += [...fonts.font19][indexed];
 newtext[12] += [...fonts.font18][indexed];
 newtext[13] += [...fonts.font17][indexed];
 newtext[14] += [...fonts.font16][indexed];
 newtext[15] += [...fonts.font2][indexed];
 newtext[16] += [...fonts.font20][indexed];
 newtext[17] += [...fonts.font6][indexed];
 newtext[18] += fonts.font3[indexed3] + fonts.font3[indexed3 + 1] + fonts.font3[indexed3 + 2];
 newtext[19] += [...fonts.font1][indexed];
 newtext[20] += [...fonts.font27][indexed];
 newtext[21] += [...fonts.font28][indexed];
 newtext[22] += [...fonts.font7][indexed];
 newtext[23] += [...fonts.font11][indexed];
 newtext[24] += [...fonts.font10][indexed];
 newtext[25] += [...fonts.font13][indexed];
 newtext[26] += fonts.font8[indexed2] + fonts.font8[indexed2 + 1];
 newtext[27] += [...fonts.font9][indexed];
 newtext[28] += [...fonts.font12][indexed];
 newtext[29] += normal[indexed] + '̲';
 newtext[30] += normal[indexed] + '̶';
 newtext[31] += normal[indexed] + '͙';
 newtext[32] += normal[indexed] + '̟';
 newtext[33] += normal[indexed] + '̃';
 newtext[34] += normal[indexed] + '͎';
 newtext[35] += normal[indexed] + '̺'; 
 newtext[36] += normal[indexed] + '͆';
 newtext[37] += normal[indexed] + '̳';
 newtext[38] += normal[indexed] + '̈';
 newtext[39] += normal[indexed] + '̾';
 newtext[40] += normal[indexed] + '͓̽'; 
 newtext[41] += normal[indexed] + '̸'; 
 newtext[42] += normal[indexed] + '҉ ';
 newtext[43] += normal[indexed] + '҈ ';
 newtext[44] += [...fonts.font29][indexed];
 newtext[45] += [...fonts.font30][indexed];
 newtext[46] += [...fonts.font31][indexed];
 newtext[47] += [...fonts.font32][indexed];
 newtext[48] += [...fonts.font33][indexed];
 newtext[49] += [...fonts.font34][indexed];
 newtext[50] += [...fonts.font35][indexed];
 }
 else {
 for (let i = 0; i < 51; i++)
 newtext[i] += sliced.toString();
 }
}
newtext[5] = newtext[5].split('').reverse().join('')
return newtext }

And here is my flatlist code:

 <FlatList
 ref={component=> this._MyComponent=component}
 style={{ marginTop: 10 }} 
 data = { this.remap() } //<--Function is called here on every change in text. 
 initialNumToRender={10}
 keyExtractor={( item, index) => 'key' + index}
 renderItem={({ item }) =>
 (
 <TouchableHighlight underlayColor={'#ecf0f1'} style={styles.flatview} onPress={this.getListViewItem.bind(this, item)}>
 <View style={styles.Listviu}>
 <Text numberOfLines={1} ellipsizeMode="head" style={styles.item}>
 {item}
 </Text>
 <TouchableOpacity onPress={this._onPressButton.bind(this, item)}>
 <Icon name="copy" size={28} color="#7966FE" />
 </TouchableOpacity>
 <TouchableOpacity onPress={this.shareit.bind(this, item)} style={{paddingLeft: 4}}>
 <Icon name="share-2" size={28} color="#7966FE" />
 </TouchableOpacity>
 </View>
 </TouchableHighlight> 
 )
 }
 />

Here is how my app looks like:

enter image description here

I have the unicode data in the seperate JSON file which is used by the function.

{
"font0": "αвc∂εғgнιנкlмησρqяsтυvωxүzαвc∂εғgнιנкlмησρqяsтυvωxүz1234567890",
"font1": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font2": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font3": "🇦‌🇧‌🇨‌🇩‌🇪‌🇫‌🇬‌🇭‌🇮‌🇯‌🇰‌🇱‌🇲‌🇳‌🇴‌🇵‌🇶‌🇷‌🇸‌🇹‌🇺‌🇻‌🇼‌🇽‌🇾‌🇿‌🇦‌🇧‌🇨‌🇩‌🇪‌🇫‌🇬‌🇭‌🇮‌🇯‌🇰‌🇱‌🇲‌🇳‌🇴‌🇵‌🇶‌🇷‌🇸‌🇹‌🇺‌🇻‌🇼‌🇽‌🇾‌🇿‌ 1 2 3 4 5 6 7 8 9 0",
"font4": "αɓc∂εƒɠɦเʝҡlɱɳσρφɾรƭμѵωκყƶαɓc∂εƒɠɦเʝҡlɱɳσρφɾรƭμѵωκყƶ1234567890",
"font5": "ɐqɔpǝɟƃɥᴉɾʞlɯuodbɹsʇnʌʍxʎz∀ᗺϽᗭƎℲ⅁HIsꞰꞀꟽNOԀΌꞞS⊥ᑎΛMXʎZ1234567890",
"font6": "ᴀʙᴄᴅᴇғɢʜɪᴊᴋʟᴍɴᴏᴘϙʀsᴛᴜᴠᴡxʏᴢᴀʙᴄᴅᴇғɢʜɪᴊᴋʟᴍɴᴏᴘϙʀsᴛᴜᴠᴡxʏᴢ1234567890",
"font7": "abcdefghijklmnopφrstuvwxyzabcdefghijklmnopφrstuvwxyz1234567890",
"font8": "aⷮbⷥcͩdͯeⷦfͩgⷬhⷮiͭjⷭkͪlⷨmͥnⷬoͤpͣqⷬrͤsͫtͨuⷬvⷦwⷦxͪyͭzͭaⷮbⷥcͩdͯeⷦfͩgⷬhⷮiͭjⷭkͪlⷨmͥnⷬoͤpͣqⷬrͤsͫtͨuⷬvⷦwⷦxͪyͭzͭ 1 2 3 4 5 6 7 8 9 0",
"font9": "卂乃匚D乇千G卄丨丿Ҡㄥ爪几ㄖ卩Ɋ尺丂ㄒ凵V山乂ㄚ乙卂乃匚D乇千G卄丨丿Ҡㄥ爪几ㄖ卩Ɋ尺丂ㄒ凵V山乂ㄚ乙1234567890",
"font10": "(a)(b)(c)(d)(e)(f)(g)(h)(i)(j)(k)(l)(m)(n)(o)(p)(q)(r)(s)(t)(u)(v)(w)(x)(y)(z)(A)(B)(C)(D)(E)(F)(G)(H)(I)(J)(K)(L)(M)(N)(O)(P)(Q)(R)(S)(T)(U)(V)(W)(X)(Y)(Z)(1)(2)(3)(4)(5)(6)(7)(8)(9)(o)",
"font11": "ค๒ς๔єŦgђเʝкl๓ภ๏ρợгรtยѵฬκՎzค๒ς๔єŦgђเʝкl๓ภ๏ρợгรtยѵฬκՎz1234567890",
"font12": "₳Ƀ€ƉɆ₣₲ĦƗɈԞⱠM₦Ø₱QɌ$₮ɄV₩Ӿ\Ƶ₳Ƀ€ƉɆ₣₲ĦƗɈԞⱠM₦Ø₱QɌ$₮ɄV₩Ӿ\Ƶ1234567890",
"font13": "äḅċďệḟġḧïjḳl·ṃńöṗqŕṩẗüṿẅẍÿẓÄḄĊĎỆḞĠḦÏJḲL·ṂŃÖṖQŔṨṮÜṾẄẌŸẒ1234567890",
"font14": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font15": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font16": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font17": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font18": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font19": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font20": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font21": "🅐🅑🅒🅓🅔🅕🅖🅗🅘🅙🅚🅛🅜🅝🅞🅟🅠🅡🅢🅣🅤🅥🅦🅧🅨🅩🅐🅑🅒🅓🅔🅕🅖🅗🅘🅙🅚🅛🅜🅝🅞🅟🅠🅡🅢🅣🅤🅥🅦🅧🅨🅩❶❷❸❹❺❻❼❽❾⓿",
"font22": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font23": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font24": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font25": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font26": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font27": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font28": "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890",
"font29": "🅰🅱🅲🅳🅴🅵🅶🅷🅸🅹🅺🅻🅼🅽🅾🅿🆀🆁🆂🆃🆄🆅🆆🆇🆈🆉🅰🅱🅲🅳🅴🅵🅶🅷🅸🅹🅺🅻🅼🅽🅾🅿🆀🆁🆂🆃🆄🆅🆆🆇🆈🆉1234567890",
"font30": "ꋫꃃꏸꁕꍟꄘꁍꑛꂑꀭꀗ꒒ꁒꁹꆂꉣꁸ꒓ꌚ꓅ꐇꏝꅐꇓꐟꁴꋫꃃꏸꁕꍟꄘꁍꑛꂑꀭꀗ꒒ꁒꁹꆂꉣꁸ꒓ꌚ꓅ꐇꏝꅐꇓꐟꁴ1234567890",
"font31": "ᗩᗷᑕᗪEᖴGᕼIᒍKᒪᗰᑎOᑭᑫᖇᔕTᑌᐯᗯ᙭YᘔᗩᗷᑕᗪEᖴGᕼIᒍKᒪᗰᑎOᑭᑫᖇᔕTᑌᐯᗯ᙭Yᘔ1234567890",
"font32": "ДБCDΞFGHIJҜLMИФPǪЯSΓЦVЩЖУZДБCDΞFGHIJҜLMИФPǪЯSΓЦVЩЖУZ1234567890",
"font33": "ąβȼď€ƒǥhɨjЌlʍɲ๏ρǭя$ţμ˅ώж\ƶąβȼď€ƒǥhɨjЌlʍɲ๏ρǭя$ţμ˅ώж\ƶ1234567890",
"font34": "ÃβČĎẸƑĞĤĮĴЌĹϻŇỖƤǪŘŜŤǗϋŴЖЎŻÃβČĎẸƑĞĤĮĴЌĹϻŇỖƤǪŘŜŤǗϋŴЖЎŻ1234567890",
"font35": "ABcDEfGHIJKLMNOPδRsTUvWxγzABcDEfGHIJKLMNOPδRsTUvWxγz1234567890"}

Here is the entire Code

javascript react.js react-native

default