Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

What is the most efficient way to load a large JSON file in React Native (Expo)

$
0
0

I am developing an app with React Native using Expo, I have a large JSON file with about 250 arrays of data. Upon the user tapping to enter this page that displays the data, it takes about 5-8 seconds to load, which I feel is too long for the app to hang there while it loads. I would like to add that I am just starting to adventure into React Native, there are most likely a lot of things I have yet to discover.

  • Apologies if this is a duplicate question I wasn't able to find a sound answer after doing some research.

Question

Can anyone recommend or demonstrate a better way of transitioning to the page, then display a Spinner indicating the loading of the data, I was thinking possibly with an onComponentMount however after testing it did not seem like much had changed. Can anyone also recommend a way to show a Spinner whenever the user searches for something?

Code

import {    Badge,    Box,    Button,    Center,    Divider,    Heading,    HStack,    Input,    ScrollView,    Spinner,    Text,  } from "native-base";  import React from "react";  import quest from '../../assets/data/quests.json'  type item = {    id: string;    name: string;    task: {      name: string;    };    trader: {      name: string;      currency: {        id: string;        name: string;      };    };    map: {      id: string;      name: string;      raidDuration: string;      players: string;      bosses: {        name: string;        // spawnChance: string;        // spawnTime: string;        spawnLocations: {          name: string;          chance: Float32Array;        };      };    };    objectives: {      id: string;      type: string;      description: string;      optional: boolean;    };    experience: string;    minPlayerLevel: string;    factionName: string;  };  export const TEST1 = ({ navigation }) => {    const quest1 = require('../../assets/data/quests.json')    const [searchValue, setSearchValue] = React.useState("");    console.log(quest)    return (<ScrollView><Input m={5} type="text" variant={'rounded'} size={'lg'} value={searchValue} onChangeText={setSearchValue}  placeholder="Search" />        {quest1          .filter((quest1: any) =>            quest1.title.match(new RegExp(searchValue, "i"))          )          .map((quest1 : any) => {            return (<>              {searchValue === null ? <Spinner /> : null}<Center><Box                    m={5}                    w={"300px"}                    h={"200px"}                    bgColor={"gray.200"}                    borderRadius={"3xl"}                    shadow={"5"}                    key={quest1.id}><Box m={"2"} key={quest1.id}><Center><Heading>{quest1.title}</Heading><Divider /></Center><HStack mt={2} space={2}><Badge>Trader:</Badge><Text>{quest1.giver === 0 ? 'Prapor' : null }</Text><Text>{quest1.giver === 1 ? 'Therapist' : null }</Text><Text>{quest1.giver === 2 ? 'Skier' : null }</Text><Text>{quest1.giver === 3 ? 'Peacekeeper' : null }</Text><Text>{quest1.giver === 4 ? 'Mechanic' : null }</Text><Text>{quest1.giver === 5 ? 'Ragman' : null }</Text><Text>{quest1.giver === 6 ? 'Jaeger' : null }</Text><Text>{quest1.giver === 7 ? 'Fence' : null }</Text><Badge>Exp:</Badge><Text>{quest1.exp}</Text></HStack></Box><Button                      borderRadius={'full'}                      m={2}                      onPress={() =>                        navigation.navigate("TASK Details", {                          taskName: quest1.title,                          traderName: quest1.giver,                          //traderCurrency: tasks.trader.currency.name,                          //mapId: tasks.map?.id,                          //mapName: tasks.map?.name,                          //mapRaidDuration: tasks.map?.raidDuration,                          //mapPlayers: tasks.map?.players,                          //mapBosses: tasks.map?.bosses,                          taskObjectives: quest1.objectives,                          taskExp: quest1.exp,                          //mapBossLocation: tasks.map?.bosses?.spawnLocations,                        })                      }>                      Details</Button></Box></Center></>            );          })}</ScrollView>    );  };

Screenshot of app hanging while it loads the JSON file

  • As you can see in the screenshot the text stays highlighted to indicate it was pressed for the above mentioned 5-8 secondstransition to page

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>