Home > other >  Expo's refreshing limitation
Expo's refreshing limitation

Time:11-07

Good afternoon, I'm trying to make a push to update the request in my application by using expo's refreshing library but for some reason after a specific line of code refreshing won't work I have no idea why! I tried to make text fragments to see if it's a limitation on expo refreshing lib and it seems to be the problem, but is it really the limitation or am I taking something wrong here?


return (
    <View
      style={{
        height: "100%",
        width: "100%",
        //alignItems: "center",
      }}
    >
      <FlatList
        data={apidata}
        keyExtractor={(index) => index.toString()}
        scrollEnabled
        extraData={apidata}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item }) => {
          const image = { uri: "https://cryptoicons.org/api/white/btc/200" };
          return (
            <ScrollView
              refreshControl={
                <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
              }
            >
              <View
                style={{
                  alignSelf: "center",
                  marginVertical: 10,
                  width: "90%",
                  minHeight: 200,
                  flexDirection: "row",
                  marginLeft: "2%",
                }}
              >
                <LinearGradient
                  style={styles.collapsed}
                  colors={[
                    "(rgba(91, 118, 234, 0.053))",
                    "(rgba(41, 72, 170, 0.192))",
                  ]}
                >
                  <Text style={styles.SignalText}>{item.symbol}</Text>
                  <View style={{ flexDirection: "row", alignItems: "center" }}>
                    <View style={styles.statusBall} />
                    <Text style={styles.SignalText}>
                      Buy around : {item.enter}
                    </Text>
                  </View>
                  <View style={styles.cryptoLogo}>
                    <Image
                      style={{ width: "100%", height: "100%" }}
                      source={image}
                    />
                  </View>
                  <View>
                    <View
                      style={{ flexDirection: "row", alignItems: "center" }}
                    >
                      <Text style={styles.SignalText}>
                        Target 1 : {item.target_1}
                      </Text>
                      <View style={styles.statusBall} />
                    </View>
                    <View
                      style={{ flexDirection: "row", alignItems: "center" }}
                    >
                      <View style={styles.statusBall} />
                      <Text style={styles.SignalText}>
                        Target 2 : {item.target_2}
                      </Text>
                    </View>
                    <View
                      style={{ flexDirection: "row", alignItems: "center" }}
                    >
                      <View style={styles.statusBall} />
                      <Text style={styles.SignalText}>
                        Target 3 : {item.target_3}
                      </Text>
                    </View>
                    <View
                      style={{ flexDirection: "row", alignItems: "center" }}
                    >
                      <View style={styles.statusball2} />
                      <Text style={styles.SignalText}>
                        Stop loss : {item.stop_loss}
                      </Text>
                    </View>
                    <View
                      style={{ flexDirection: "row", alignItems: "center" }}
                    >
                      <View style={styles.statusBall3} />
                      <Text style={styles.SignalText}>
                        Leverage : {item.leverage}
                      </Text>
                    </View>              
                  </View>
                </LinearGradient>
              </View>
            </ScrollView>
          );
        }}
      />
    </View>
  );

it will break on {item.stop_loss} no idea why

any suggestions?

CodePudding user response:

So to all the people who may be stuck at same issue the way that I fixed it was removing all the refreshing properties (in addition to RefreshControl) from <ScrollView> and adding them to refreshing & onRefresh Props in flat list

you can see these props here.

you still need to have the scrollview inside of the flatlist.

Hope this helps people who may stuck at this same as I did.

  • Related