alexbrillant / react-native-deck-swiper

tinder like react-native deck swiper
ISC License
1.57k stars 464 forks source link

reRender #377

Open jackimatin opened 2 years ago

jackimatin commented 2 years ago

hi I have a question how can I force swiper to reRender?

(I change my state that I use for swiper data but it does not reRender)

truongbit commented 2 years ago

I also had the same problem as you. Have you fixed it yet?

abhilashiic commented 2 years ago

same problem here!!

when I change the card-data, it does not get re-render

ghost commented 2 years ago

same issue here, any updates for this issue?

mickaelcornelli commented 2 years ago

You can check a similar issue here : # https://github.com/alexbrillant/react-native-deck-swiper/issues/153

You can pass a function in param from the parent to the child to render again the component like :

PARENT COMPONENT

import SwiperChild from "../SwiperChild"
const ParentComponent = (props) => {

const refresh = () =>{
     // here your code to refresh 
}

   return (
    <SwiperChild
                      index={index}
                      data={your data}
                      onRefresh={refresh}
   />
   )
}
export default ParentComponent 

CHILD

import Swiper from "react-native-deck-swiper";
import { Text, TouchableOpacity} from 'react-native'
const SwiperChild = ({ index, data, onRefresh }) => {
   return(
      <Swiper 
      cardIndex={index}
      cards={data}
      renderCard={(card, index) =>
      // An example to refresh
      <TouchableOpacity 
          onPress={()=>{
           // Call onRefresh here
          }}
       >
       <Text>REFRESH</Text>
      </TouchableOpacity>
      }
      />
   )
}
export default SwiperChild

Well, this is a rapid example , there is more complex swiper component but i hope u 'll understand the way to render again your component

TheDevelolper commented 1 year ago

I need to be able to re-render swiper in a react component so that I can change the effect based on screen size.