Nativebase: Deck Swiper Not Update when change datasource

[huyta]

  constructor(props) {
    super(props);
      this.state = {
        dataSource: ['Init test'],
      };
    }

  render() {
        return (
            <Container>
                <StatusBar hidden={true} />
                <Header/>

                <Content>
                <Button success block onPress={() => this.setState({dataSource: ['Expect change but no thing happen']})}/>
                <DeckSwiper
                   ref= {(ref) => { this.desk = ref;}}
                   dataSource={this.state.dataSource}
                   renderItem={(item) => <Text>{item}</Text>}/>

                 </Content>
              </Container>);
    }

```

[gustavoadt]

I had the same issue but was able to workaround it by checking if the length of the array was greater than 1 before the return:

render() {
if (this.state.myArray.length > 1) {
return (

In my case my array is a state initialized this way on the constructor myArray: []
My DeckSwiper started with a blank card at the 0 position if I changed the state to [{}].
This way nothing appears at all, except if I check the length, then it shows correctly.

[SupriyaKalghatgi]

@huyta The length of your array, is it > 1?

[SupriyaKalghatgi]

Closing this due to inactivity

[angryanatole]

@SupriyaKalghatgi I have exactly the same issue when I'm trying to change my dataSource with data from async request. Length of my array is >1.
If I hardcode them, everything works fine. But when I try to change datasource after response (initial datasource is an empty array in my state), nothing shows up.

[SupriyaKalghatgi]

@angryanatole Though the length of your array is > 1, you said initial datasource is an empty array in my state.
In any case for Deck Swipe to render, the length of array should be > 1

[angryanatole]

@SupriyaKalghatgi got it, thank you for your help!

[gustavoadt]

I think the problem is with the DeckSwiper render.
When I click a button to set a new state to my state array (applied to DeckSwiper datasource), it does not render again, not changing the cards automatically. But if I swipe to left or right, it updates the cards...
Maybe it renders, but it does not update the cards by it's own.

[123lk]

Hi @gustavoadt did you find a solution to this? I'm having the same issue as you.

[abhishek0058]

+1
I only render my DeckSwiper when my data.length is >1 but still it is not refreshing

[SupriyaKalghatgi]

@gustavoadt @123lk @abhishek0058 Check this in NativeBase KitchenSink

[abhishek0058]

To check What ??

On Tue, Jan 16, 2018 at 11:55 AM, Supriya Kalghatgi <
[email protected]> wrote:

@gustavoadt https://github.com/gustavoadt @123lk
https://github.com/123lk @abhishek0058 https://github.com/abhishek0058
Check this in NativeBase KitchenSink

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/743#issuecomment-357865052,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXkoJFGXK2wrIp5TeG9Gmtd1qdJUx2Z5ks5tLEC8gaJpZM4M9o7N
.

[luigimassa]

Hi
I copied the source of DeckSwiper.js in my project
in method componentDidUpdate, I added the check

....
if (dataSource.length !== this.props.dataSource.length **|| dataSource[0] !== this.props.dataSource[0]**) {

With this the update of datasocurce now update the deks

[manidlou]

I had the same issue, and I added couple of simple console.log() to DeckSwiper.js::componentDidUpdate() https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/DeckSwiper.js#L31, and based on my experience seems like when your dataSource gets updated through this.setState() in your code, in the componentDidUpdate of DeckSwiper.js, this.props.dataSource is the updated one and not dataSource that is passed as a param to the componentDidUpdate method. So, if you change the DeckSwiper.js code to get the updated values from this.props.dataSource instead of dataSource param, it should work! At least it worked for me!

[NishargShah]

Why is closed? that is still not working :-1: