2

I'm using Expo av combined with a flatlist to render a bunch of videos in the learn section of my app.

For some reason, some of the videos start to disappear after initial loading (it's like you see the cover of the video and suddenly it disappears, you can see the empty spot of the video but nothing is shown there).

In addition, I should mention that this works well on the simulator and only happens on physical devices, also if you clear catch of the app and load it again at the start it shows the videos and starts to disappear again.

Here is my code:

<FlatList
        data={learnVideo?.data}
        keyExtractor={(item, index) => index.toString()}
        scrollEnabled
        refreshing={refreshing}
        onRefresh={onRefresh}
        renderItem={({ item }) => {
          return (
            <>
              <View>
                <TouchableOpacity
                  style={{
                    //alignItems: "center",
                    paddingVertical: 20,
                    borderColor: "#363C57",
                    borderWidth: 1,
                    flexDirection: "column",
                  }}
                >
                  <Video
                    ref={video}
                    useNativeControls
                    resizeMode="cover"
                    isLooping={false}
                    progressUpdateIntervalMillis="500"
                    loadAsync={(downloadFirst = true)}
                    style={{
                      width: "90%",
                      height: 150,
                      alignSelf: "center",
                    }}
                    source={{ uri: item.video }}
                  />
                  <Text
                    style={{
                      color: "white",
                      fontSize: 20,
                      fontWeight: "500",
                      marginLeft: 20,
                      textAlign: "left",
                      paddingTop: 20,
                    }}
                  >
                    {item.title}
                  </Text>
                </TouchableOpacity>
              </View>
            </>
          );
        }}
      />

Any help will be appreciated.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
navidabasi
  • 161
  • 1
  • 10
  • Does this answer your question (https://stackoverflow.com/questions/60223501/how-can-i-show-multiple-videos-with-react-native-video-in-react-native) – carlosdafield Dec 13 '21 at 17:01
  • @carlosdafield I'm actually using useState to capture an array of videos from my API call do you mean to add another one and store the array of data again? – navidabasi Dec 14 '21 at 09:30

0 Answers0