Rerender swiper about react-native-web-swiper

[Jorge-Luis-Rangel-Peralta]

Why not simply use a key change as a workaround?, i agree it is unacceptable that it does not change when the props change, but in the mind-time the key change works:

const Component = ({ children }) => {
    const keyValue = useMemo(() => someKeyGenerator(), [children])

    return (
        <Swiper key={keyValue}>{children}</Swiper>
    )
}

It's not pretty but works

[sakhmedbayev]

What??? This is not good behavior. Why in the world Swiper does not rerender???

[Shing-Ho]

Thanks @Jorge-Luis-Rangel-Peralta this is working as great.
I add uuidv4 into key and it's working well.

[oxyii]

@YevheniiShabelnykkk How to reproduce it? Please make a snack with issue

[YevheniiShabelnykkk]

Hm, I am afraid I can't do it snack; But I can write code here:
Main screen, where I import Carousel;

import React from 'react';

import { View, Text, Image } from 'react-native';

import { connect } from 'react-redux';

import ViewWrapper from '../../../shared/ViewWrapper';
import Button from '../../../components/onboarding/Button';
import FooterButton from '../../../components/claims/FooterButton';

import { openIntercom } from '../../../helpers/openIntercom';

import Carousel from '../../../components/claims/Carousel';

import styles from './styles';

class ClaimsScreen extends React.Component {
_onLetsDoThisButtonPress = () => {
this.props.navigation.navigate('ClaimsList');
};

_onGetHelpButtonPress = () => {
openIntercom();
};

render() {
const { claims } = this.props;

console.info('claims', claims);

const isDisabledButton = !Boolean(this.props.policies.length);

return (
  <ViewWrapper
    padding
    style={styles.viewWrapper}
    contentContainerStyle={styles.contentContainerStyle}
  >
    <View style={styles.container}>
      {claims && claims.length ? (
        <Carousel claims={claims} />
      ) : (
        <React.Fragment>
          <Text style={styles.title}>Claims</Text>

          <Text style={styles.subTitle}>Submit your claim</Text>

          <View style={styles.timeWrapper}>
            <Image
              source={require('../../../assets/icons/watch-icon-white.png')}
            />
            <Text style={styles.timeText}>Around 9 minutes</Text>
          </View>

          <Button
            title="Let's do this!"
            onPress={this._onLetsDoThisButtonPress}
            isDisabled={isDisabledButton}
          />
        </React.Fragment>
      )}
    </View>

    {claims && claims.length && (
      <FooterButton
        title="Start a new claim"
        subTitle="Submit a claim in less than 10 mins"
        onPress={this._onLetsDoThisButtonPress}
      />
    )}

    <FooterButton
      title="Get some help"
      subTitle="Not sure if you should make a claim? Have another question?"
      onPress={this._onGetHelpButtonPress}
    />
  </ViewWrapper>
);

}
}

const mapStateToProps = state => ({
policies: state.user.policies,
claims: state.claims
});

export default connect(mapStateToProps)(ClaimsScreen);

`

And screen with Carousel:

import React from 'react';

import { View } from 'react-native';

import Slide from '../Slide';

import Swiper from 'react-native-web-swiper';

import styles from './styles';

const Carousel = ({ claims }) => {
return (

<Swiper
controlsProps={{
prevTitle: null,
nextTitle: null,
dotActiveStyle: styles.dotActiveStyle
}}
controlsEnabled={claims.length > 1}
slideWrapperStyle={styles.slideWrapperStyle}
>
{claims.map((claim, index) => {
return (
<Slide
key={${claim.category}${index}}
category={claim.category}
status={claim.status}
dateSubmitted={claim.created}
reference={claim.reference}
/>
);
})}


);
};

export default Carousel;

You can see, I work with redux, and when claim.length is changed, I want to rerender Carousel component.

[YevheniiShabelnykkk]

I saw in Swiper file in library, you have only constructor so it renders only one time and then not rerender;
Maybe, you need to add ComponentDidUpdate method?

[oxyii]

@YevheniiShabelnykkk I will try to look into this. You can check this for now. I think it helps

[YevheniiShabelnykkk]

No, its not help, you wrote about rerender slide, but I need to add new slide in Swiper;
For example, I have 3 slides and after some changes I click button and want to see new slide 4 in Swiper

Thanks!

[dhirajanand014]

This is really needed for us

[kopax]

@Jorge-Luis-Rangel-Peralta what about if I want to get the isSwiping state using onAnimationStart and onAnimationEnd, and update the content of the view ? I keep having no rerender of the cards as I am not editing children which is passed upper in the JSX tree. Did anyone found a workaround for this?

I have tried to get the switching state but forcing the whole rerendering break it all and it's not swipeable:

  const keyValue = useMemo(() => Math.random(), [props.cards, swiping])

[jorgezerpa]

Why not simply use a key change as a workaround?, i agree it is unacceptable that it does not change when the props change, but in the mind-time the key change works:

const Component = ({ children }) => {
    const keyValue = useMemo(() => someKeyGenerator(), [children])

    return (
        <Swiper key={keyValue}>{children}</Swiper>
    )
}

It's not pretty but works

Why not simply use a key change as a workaround?, i agree it is unacceptable that it does not change when the props change, but in the mind-time the key change works:

const Component = ({ children }) => {
    const keyValue = useMemo(() => someKeyGenerator(), [children])

    return (
        <Swiper key={keyValue}>{children}</Swiper>
    )
}

It's not pretty but works

This works perfectly for me!! thanks a lot @Jorge-Luis-Rangel-Peralta