Let external state change swipter items

[joker-777]

Hi,

I created a small example where when clicking on each option should add it to a delectable array. Depending on if an item is in this array or not, it should show a yellow border and also an external button should be displayed. How can I do this with the current version of react-native-web-swipter?

https://codesandbox.io/s/react-native-web-swiper-with-outside-state-not-working-7qtbd?file=/src/App.js

Thanks a lot for this library!

p.d.: I now you wrote "The Swiper will not be re-rendered if slides state or props have changed. Slides must control their condition." which is probably the reason for this problem but I think my case is not very uncommon and I think there should be a solution for this.

[boulinb]

Hi,

I just had a similar problem: I have a TextInput in the render of one of the components but the TextInput was not updated (although the state was up to date).

Here is the solution I found:

Instead of rendering the component with a state at the Swiper call level, I export the component and use an internal state that allows me to rehydrate my input without any problem.

Parent :

const Parent: FunctionComponent<IParent> = () => {
  const [firstname, setFirstname] = useState<string>("");

  return (
    <Swiper>
      <Children1 onChangeText={onChangeText} />
    </Swiper>
  )
}

Children :

/*
  If I add the attribute "firstname" to "Children1" and use it in the TextInput, the props of "Children1" will not be rehydrated so 
  the state will be updated but the TextInput will remain empty.
*/

const Children1: FunctionComponent<{
  onChangeText: (text: string) => void;
}> = ({ onChangeText }) => {
  const [firstname, setFirstname] = useState("");

  const onUpdateText = (text: string) => {
    setFirstname(text);
    onChangeText(text);
  };

  return (
      <TextInput
        text={firstname}
        onChangeText={onUpdateText}
      />
  );
};

I don't think this is the most optimal solution, but it should help if you're still stuck :)

[jarvisluong]

Fixed in #51