React-native-deck-swiper is not displaying first card with images fetched from firebase. Basically I fetch the image urls from firebase. Then I put them into the array currentPageIconArray as sources for the FastImage plugin elements inside touchableOpacity . Then I set the array as data for FlatGrid. If I just put local image sources on FastImage like that source={require('./1.png')} into the currentPageIconArray it works fine but as soon I fetch the urls a from firebase and put the source as an uri uri: urlArray[i] then it's not displaying anymore. If I swipe to the next card it's starting to display images as soon I see the NEXT label (so it re-renders when the NEXT Overlay is getting visible?). I think it's a re-render issue or something because I see the images appearing as soon as the NEXT label is showing up during the swipe but the card is still not completely swiped away.
As cardindex I use a simple global variable not a state because otherwise it messes up the index. Then I would get indexes twice like 0,0,1,1,2,2,... and see the cards twice after swiping. So I fixed that.
displayImages I call in the useEffect hook once.
const [state, setState] = React.useState({
cards: [...range(0, 29)],
swipedAllCards: false,
swipeDirection: ''
});
const getFirebaseIcons = async (page) => {
return storage.ref().child('pages/' + page).listAll()
.then(res => {
if (res.items.length > 0) {
let sortedUrls = sortUrls(res.items);
return getIconURLS('pages/' + page, sortedUrls)
.then(urlArray => {
return urlArray;
})
.catch(err => {
alert(err.message);
})
} else {
currentPageIconArray.length = 0;
return null;
}
})
.catch(err => {
alert(err.message);
})
}
const displayImages = async() => {
let urlArray = await getFirebaseIcons(0);
for (let i = 0; i < numberOfImages; i++) {
{
if (urlArray[i] != null) {
currentPageIconArray.push(
<TouchableOpacity
onPress={() => {
}
}>
<FastImage
style={{ width: squareSize, height: squareSize }}
source={{
uri: urlArray[i],
headers: { Authorization: 'someAuthToken' },
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
</TouchableOpacity>
);
} else {
currentPageIconArray.push(
<TouchableOpacity
onPress={() => {
}}>
<FastImage
style={{ width: squareSize, height: squareSize }}
source={require('./1.png')}
resizeMode={FastImage.resizeMode.contain}
/>
</TouchableOpacity>
)
}
}
}
<View style={styles.container} key={cardIndex}>
<Swiper
ref={swpr => swiper = swpr}
infinite={true}
showSecondCard={false}
keyExtractor={(cardidx) => {
//console.log("CARDINDEX = ", cardIndex);
//cardIndex = cardidx
}}
goBackToPreviousCardOnSwipeLeft={true}
onSwiped={(idx) => onSwiped('general', idx)}
onSwipedLeft={(idx) => onSwipedLeft(idx)}
onSwipedRight={(idx) => onSwipedRight(idx)}
onSwipedTop={() => onSwiped('top')}
onSwipedBottom={() => onSwiped('bottom')}
onTapCard={swipeLeft}
cards={state.cards}
cardIndex={cardIndex}
cardVerticalMargin={10}
renderCard={renderCard}
onSwipedAll={onSwipedAllCards}
stackSize={1}
stackSeparation={15}
overlayLabels={{
bottom: {
title: '',
style: {
label: {
backgroundColor: '',
borderColor: '',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}
}
},
left: {
title: 'PREVIOUS',
style: {
label: {
backgroundColor: 'red',
borderColor: 'black',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 30,
marginLeft: -30
}
}
},
right: {
title: 'NEXT',
style: {
label: {
backgroundColor: 'red',
borderColor: 'black',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 30,
marginLeft: 30
}
}
},
top: {
title: '',
style: {
label: {
backgroundColor: '',
borderColor: '',
color: 'white',
borderWidth: 1
},
wrapper: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}
}
}
}}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard={false}
>
</Swiper>
<StatusBar style="auto" />
</View>
const renderCard = (card, index) => {
return (
<View style={styles.card}>
<FlatGrid
itemDimension={squareSize}
maxItemsPerRow={10}
adjustGridToStyles={true}
data={**currentPageIconArray**}
style={styles.gridView}
spacing={4}
renderItem={({ item }) => (
<View>
{item}
</View>
)}
/>
</View>
)
};
const onSwiped = (type, index) => {
cardIndex = index;
getFirebaseIcons(cardIndex);
}
```
