Nativebase: Deck Swiper Flashing Content

[brodus13]

Hi there! I checked around and didn't notice any existing issues open for this.

I'm having an issue where I have quite a bit of content inside of my deck swiper cards, and random parts of the content seem to flash from invisible to visible at random intervals when the cards are being swiped, or moved around.

Is this something I'm doing wrong? It seems like a bug to me. I'd opened a question about it in the forms to ask if it was an issue with something on my end, but I had no replies, and one person comment saying the same thing was happening to them. I'll link this below...
http://discuss.nativebase.io/t/deck-swiper-content-flashing/407

I don't have an example of it on hand, but I could probably create one if there isn't an easy answer for this.

Thanks so much for your time!

[SupriyaKalghatgi]

@brodus13 What version of React Native and NativeBase are you on?
It would be good if you could post the snippet with output here

[SupriyaKalghatgi]

866

[SupriyaKalghatgi]

334

[brodus13]

Hi there @SupriyaKalghatgi , sorry for the delayed response, here's the versions I'm working on.
"native-base": "2.1.0-rc.2",
"react": "~15.4.0",
"react-native": "0.42.3",

[mdebo]

Hi!
I'm facing the same issue using react-native 0.44.3 and native-base 2.1.4
Any news about it?

Thanks!

[flieks]

i'm having the same issue on IOS. Please look at my video in referenced issue

[pallavbakshi]

Hey! I haven't checked out the code of GeekyAnts Nativebase package but generally my images flash when I re-render a component from View tag to Animated.View tag. So basically, you should use even for the cards that are not at the top of the stack.

[CliveTeow]

Yes. I followed a deck swiper component creation online tutorial. After use for the cards that are not at the top of the stack, the image flashing is gone.

[carocad]

Hey guys, I am having this same issue.

The Animated.View approach didnt work for me though :(

However I was able to find something out. The content flickers because it is being re-rendered several times. By putting a simple log statement in the renderItems function you can see everytime that the card is swipe the item is re-rendered between 5 to 8 times.

I would expect a single re-render since it is basically switching from one item to the next.

Hope it helps

[ojathelonius]

@carocad How did you fix the re-rendering issue then ? Did you have to override the shouldComponentUpdate method ?

[carocad]

@ojathelonius I couldnt find a solution for it. I just stopped using using after I found what the problem was and switched to a more basic approach :/

[ojathelonius]

@carocad I'll give it a try, there may be a way to prevent rendering the component (let alone the thumbnail inside) while swiping.

Out of curiosity, did you try the other swipe cards libraries out there ? I need the same look and feel and would then seek another solution to retain the same behavior.

[carocad]

@ojathelonius no I didnt try the other libraries. I simply created a View which I re-render whenever the user request the next item.

[ojathelonius]

@carocad
Alright, thanks !

[e11i0t]

I got the issue that local images were loading properly, but external images were flickering. Using FastImage from https://github.com/DylanVann/react-native-fast-image fixed the issue for me

[akhil-geekyants]

Checked this. Not present in the latest version (2.4.4).

Code

import React, { Component } from 'react';
import { Image } from 'react-native';
import { Container, Header, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body, Icon } from 'native-base';
const cards = [
  {
    text: 'Google',
    name: 'Alphabet',
    uri: "https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",
    description: "Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware."
  },
  {
    text: 'React',
    name: 'Facebook',
    uri: "https://cdn-images-1.medium.com/max/512/1*qUlxDdY3T-rDtJ4LhLGkEg.png",
    description: "React is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations."
  },
  {
    text: 'NativeBase',
    name: 'GeekyAnts',
    uri: "https://nativebase.io/assets/img/front-page-icon.png",
    description: "NativeBase is an open source framework to build React Native apps over a single JavaScript codebase for Android and iOS."
  },

];
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header />
        <View>
          <DeckSwiper
            dataSource={cards}
            renderItem={item =>
              <Card style={{ elevation: 3 }}>
                <CardItem>
                  <Left>
                    <Thumbnail source={{ uri: item.uri }} resizeMode="contain" fadeDuration={0} />
                    <Body>
                      <Text>{item.text}</Text>
                      <Text note>{item.name}</Text>
                    </Body>
                  </Left>
                </CardItem>
                <CardItem cardBody>
                  <Image style={{ height: 300, flex: 1 }} source={{ uri: item.uri }} resizeMode="contain" fadeDuration={0}
                  />
                </CardItem>
                <CardItem>
                  <Icon name="heart" style={{ color: '#ED4A6A' }} />
                  <Text>{item.name}</Text>
                </CardItem>
                <CardItem>
                  <Text>{item.description}</Text>
                </CardItem>
              </Card>
            }
          />
        </View>
      </Container>
    );
  }
}

Gif

Closing this due to no activity.
Let us know if you are still facing any issue.

[aravi365]

i am having a serious performance issue while using the deckswiper of nativebase. When the data increases the deckswiper seems to be responding very poor and is also flashing.

[felix-lambert]

Same for me