bug swipe animation when adding new cards after renderNoMoreCards

[dengue8830]

first load cards

adding cards after renderNoMoreCards shows this when swipping first card (second and later swipes fine)

my code

async onNuevaSolicitud(solicitudDeViajeId: string) {
    const res = await http.get<{ solicitud: ISolicitudDeViajeAttrs }>(`${APIs.CHOFER_BUSCA_NUEVA_SOLICITUD}/${solicitudDeViajeId}`);
    this.setState({
      solicitudes: this.state.solicitudes.concat(SolicitudDeViaje.parseItem(res.data.solicitud))
    });
  }

  onCardRemoved(index: number) {
    this.setState({
      solicitudes: this.state.solicitudes.slice(1, this.state.solicitudes.length)
    });
  }

...

<SwipeCards
                    cards={this.state.solicitudes}
                    renderCard={
                      (item: SolicitudDeViaje) =>
                        <TarjetaSolicitudViajeErrorBoundary key={item.id}>
                          <TarjetaSolicitudViaje
                            perfilUrl={item.viaje!.pasajero!.fotoPerfilUrl}
                            nombre={item.viaje!.pasajero!.nombre!}
                            tiempoPasado={item.createdAt!.fromNow()}
                            // distanciaAlPasajero={'3km'}
                            calleOrigen={item.viaje!.origen!.calle!}
                          />
                        </TarjetaSolicitudViajeErrorBoundary>
                    }
                    renderNoMoreCards={() => <CartelVacio texto='xSin solicitudes por el momento, espera un momento a que lleguen' />}
                    handleYup={this.onAceptarSolicitud}
                    cardRemoved={this.onCardRemoved}
                    onClickHandler={() => { }} // Evitamos el alert de la lib -.-
                    yupView={
                      <Row style={{ paddingLeft: 10, flex: 1, alignContent: 'center', justifyContent: 'center' }}>
                        <Text textStyle={{ alignSelf: 'center', color: '#7764CA' }}>Aceptar</Text>
                        <Icon iconStyle={{ alignSelf: 'center', paddingLeft: 5 }} color='#7764CA' name='ios-return-right-outline' />
                      </Row>
                    }
                    noView={
                      <Row style={{ paddingLeft: 10, flex: 1, alignContent: 'center', justifyContent: 'center' }}>
                        <Icon iconStyle={{ alignSelf: 'center' }} color='#757575' name='ios-return-left-outline' />
                        <Text textStyle={{ alignSelf: 'center', paddingLeft: 5, color: '#757575' }}>Rechazar</Text>
                      </Row>
                    }
                    loop={false}
                    nopeStyle={{ borderWidth: 0 }}
                    yupStyle={{ borderColor: '#7764CA' }}
                    // para stack: you need to set the stackOffsetX and you will be good try out stackOffsetX={2}
                  />

[dengue8830]

temporally fixed forcing a unmount/mount with a second state

this.setState({estadoCarga: EstadoCarga.Cargando});
      this.setState({
        estadoCarga: EstadoCarga.Ocioso,
        solicitudes: this.state.solicitudes.concat(SolicitudDeViaje.parseItem(res.data.solicitud))
      });

...

{
            this.state.estadoCarga === EstadoCarga.Cargando &&
            <CartelCargando />
          }
          {
            this.state.estadoCarga === EstadoCarga.Ocioso &&
            <Swiper ... />
          }
}

[dengue8830]

better solution: reset the buggy state

if (!this.state.solicitudes.length) { // wrap it in a if to avoid the unnecessary animation if it still have cards 
 this.swiper && this.swiper._resetState();
}
this.setState({
  solicitudes: this.state.solicitudes.concat(SolicitudDeViaje.parseItem(res.data.solicitud))
});

...

<SwipeCards
 ref={ref => this.swiper = ref!}
 ...
/>

[sleroy]

Thanks!