swaplet / react-native-swipe-cards-deck

A swipping cards deck (similar to Tinder)
MIT License
46 stars 19 forks source link

[BUG] `Warning: Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`SwipeCards`). ` #26

Open hristowwe opened 2 years ago

hristowwe commented 2 years ago

I tried ti ran following code

        <SwipeCards
          ref={sheetRef}
          cards={cards}
          renderCard={(cardData) => <Card data={cardData.text} />}
          keyExtractor={(cardData) => String(cardData.text)}
          renderNoMoreCards={() => {
            navigation.navigate("CardsPage");
          }}
          actions={{
            nope: { onAction: handleNope, text: "Не" },
            yup: { onAction: handleYup, text: "Да" },
          }}
          hasMaybeAction={false}
          // If you want a stack of cards instead of one-per-one view, activate stack mode
          // stackDepth={3}
        />

But i got error Warning: Cannot update a component (ForwardRef(BaseNavigationContainer)) while rendering a different component (SwipeCards). To locate the bad setState() call insideSwipeCards, follow the stack trace as described in https://reactjs.org/link/setstate-in-render It is happened when i use navigation.navigate in renderNoMoreCards. How can i fix that? Or i cant use navigate like that?

eyalabs commented 2 years ago

renderNoMoreCards expects a react view to render whenever the cards are empty. Currently there is no event handler for empty cards, but you can implement a custom component for renderNoMoreCards and put the navigate side effect on useEffect. This could work.