Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Deckswiper not re rendering straight away when datasource changes

See original GitHub issue

react-native, react and native-base version

0.50.3, 16.0.0, 2.3.3

Expected behaviour

When the dataSource passed to the DeckSwiper changes the DeckSwiper should re render straight away.

Actual behaviour

When the dataSource changes the cards don’t re-render straight away, it only re renders once a card has been swiped from the deck.

Steps to reproduce (code snippet or screenshot)

import React from "react";
import { Platform, Image } from "react-native";
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  Icon,
  Text,
  Right,
  Body,
  Left,
  Picker,
  Form,
  View,
  DeckSwiper,
  Card,
  CardItem,
  Item as FormItem
} from "native-base";

const Item = Picker.Item;

const topics = [
  { label: "topic 1", value: "1" },
  { label: "topic 2", value: "2" },
  { label: "topic 3", value: "3" }
];

const cards = [
  { text: "Card A", topicId: "1", name: "One" },
  { text: "Card B", topicId: "2", name: "Two" },
  { text: "Card C", topicId: "3", name: "Three" },
  { text: "Card D", topicId: "1", name: "Four" },
  { text: "Card E", topicId: "2", name: "Five" },
  { text: "Card F", topicId: "3", name: "Six" }
];

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "1",
      topics: topics,
      cards: cards
    };
  }
  onValueChange(value: string) {
    this.setState({
      selected: value,
      cards: cards.filter(item => item.topicId === value)
    });
  }
  render() {
    console.log(this.state.cards)
    return (
      <Container>
        <Header />
        <Content>
          <Form>
            <Picker
              iosHeader="Select one"
              mode="dropdown"
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
            >
              {this.state.topics.map((topic, i) => {
                return <Item label={topic.label} value={topic.value} key={i} />;
              })}
            </Picker>
          </Form>
          <View>
            <DeckSwiper
              ref={c => (this._deckSwiper = c)}
              dataSource={this.state.cards}
              renderItem={item => (
                <Card style={{ elevation: 3 }}>
                  <CardItem>
                    <Left>
                      <Body>
                        <Text>{item.text}</Text>
                        <Text>Topic{item.topicId}</Text>
                      </Body>
                    </Left>
                  </CardItem>
                  <CardItem cardBody>
                    <Image
                      style={{ height: 300, flex: 1 }}
                      source={{
                        uri:
                          "http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"
                      }}
                    />
                  </CardItem>
                </Card>
              )}
            />
          </View>
        </Content>
        <View style={{ flexDirection: "row", flex: 1, position: "absolute", bottom: 50, left: 0, right: 0, justifyContent: 'space-between', padding: 15 }}>
        <Button iconLeft onPress={() => this._deckSwiper._root.swipeLeft()}>
          <Text>Swipe Left</Text>
        </Button>
        <Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
          <Text>Swipe Right</Text>
        </Button>
      </View>
      </Container>
    );
  }
}

Screenshot of emulator/device

Link to GIF demonstrating issue http://gph.is/2iqA9o4

Is the bug present in both ios and android or in any one of them?

Only checking on ios so don’t know if it’s also happening in android.

Any other additional info which would help us debug the issue quicker.

I have looked at other issues on here that discuss a similar problem but have not found any solutions in any of the comments.

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:20 (1 by maintainers)

Top GitHub Comments

6reactions

oscar-gallogcommented, Jun 2, 2019

This problem has two years and there is no solution yet?, great job.

4reactions

GokulDharumarcommented, Jul 19, 2018

We also have the same issue, when we fetch details from API its not loading the cards. But when we hardcode the values it works. I think when the state is changing the deck swiper is not getting the latest one. Any update will help us