Solvedreact native deck swiper Flickering with image content

No description provided.

32 Answers

โœ”๏ธAccepted Answer

+1 same problem here
It is not a fundamental solution, but I have solved it by using react-native-fast-image.
Hope it works!

Other Answers:

Hello i just add unique key from card on view (renderFirstCard, renderSecondCard, renderSwipeBackCard).

Swiper.js :

renderFirstCard = () => {
   const { firstCardIndex } = this.state
   const { cards } = this.props

   const swipableCardStyle = this.calculateSwipableCardStyle()
   const firstCardContent = cards[firstCardIndex]
   const firstCard = this.props.renderCard(firstCardContent)
   const renderOverlayLabel = this.renderOverlayLabel()

   const notInfinite = !this.props.infinite
   if (notInfinite && this.state.swipedAllCards) {
     return <Animated.View />

   return (

 renderSecondCard = () => {
   const { secondCardIndex } = this.state
   const { cards, renderCard, showSecondCard } = this.props

   const secondCardZoomStyle = this.calculateSecondCardZoomStyle()
   const secondCardContent = cards[secondCardIndex]
   const secondCard = renderCard(secondCardContent)

   const notInfinite = !this.props.infinite
   const lastCardOrSwipedAllCards =
     secondCardIndex === 0 || this.state.swipedAllCards
   if (notInfinite && lastCardOrSwipedAllCards) {
     return <Animated.View />

   return (
     <Animated.View key={secondCardContent.product__id} style={secondCardZoomStyle}>
       {showSecondCard ? secondCard : null}

 renderSwipeBackCard = () => {
   const { previousCardIndex } = this.state
   const { cards } = this.props
   const previousCardContent = cards[previousCardIndex]
   const previousCardStyle = this.calculateSwipeBackCardStyle()
   const previousCard = this.props.renderCard(previousCardContent)
   return (
     <Animated.View key={previousCardContent.product__id} style={previousCardStyle}>

Work for you ?

Related Issues:

react native deck swiper Module react-native-view-overflow does not exist in the Haste module map
I fixed this issue by npm install --save react-native-view-overflow So funny ๐Ÿ˜„ Now demo works on IO...
react native deck swiper Flickering with image content
+1 same problem here It is not a fundamental solution but I have solved it by using react-native-fas...
react native vector icons [Xcode 11] 'Multiple commands produce' error when building with new Xcode build system
Removing duplicate font files in Copy Bundle Resources worked for me Review the documentation: https...
react native keychain SDK Build Tools revision (23.0.1) is too low for project :react-native-keychain.
Ok I found a solution to this For people facing the same problem in the future Hey there ...
react navigation screenIsActive prop / componentDidFocus event for TabNavigator items
It probably makes sense to add lifecycle hooks to screens In one of my Tabs i need to load Data from...
react native gesture handler Unsupported top level event type "onGestureHandlerStateChange" dispatched
Because my navigators were created asynchronously the handler was registered too late and thus throw...
react swipeable views lazy loading is useless right now
Normally React wants to keep the UI consistent with what you told it to render Lazy loading should m...
react native maps Blank Map
Ok I think I just find the problem Upon running it all I get is an empty box with red outline. ...
react native gesture handler Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'
@zmGitHub npm i jetifier npx jetify fixed it for me on rn 0.6 I am fixing a incompatibility issue re...
react navigation Send data back from child screen?
@itswaze You can do something along these lines to pass back from the child screen ...
react navigation How to goBack from nested StackNavigator?
@dhruvparmar372 According to the NOTE in the doc a navigator's navigation prop may not have the help...
react native image picker AAPT: No resource found that matches the given name: attr 'android:keyboardNavigationCluster'
We can force Gradle to build all the dependencies with our main project SDK version and tools versio...
amplify js Uncaught ReferenceError: global is not defined in latest Angular 6 RC
Just for reference I have passed through this issue with adding these lines on my index.html head: ...
discussions and proposals "What do you dislike about React Native?" June 2019 Edition
Navigation Library React Native doesn't have a proper native navigation library built in! It should ...
react navigation Best pattern for a 'Save' button in the header
Try setting your component instance's handleSave function as a navigation state parameter after the ...
lottie react native Could not find
you are right there is also something else your other build.gradle file add maven url 'https://maven...
react native navigation [V3][Android] FATAL EXCEPTION: create_react_context
OK after a good night of sleep I've found why I was having this issue In the I ...
react native template typescript can not run npx react-native init MyApp --template react-native-template-typescript
Just remember to npm uninstall -g react-native-cli and yarn global add @react-native-community/cli s...
formik Recommended way to set initialValues from async api call
@dem0nbruce Just have a default value for user so you will always have an object as initialValues. ...
react hook form How to submit the form outside the form
For those who come across this issue like I did and found it didn't quite address the question ...
react navigation Reset to nested route, "There is no route defined for..."
A quick workaround (not heavily tested): set the key property to null on your action. ...
react native vector icons Error: Multiple commands produce in Xcode 10
Thank you for using the template Environment React Native Environment Info: System: OS: macOS 10.14 ...
react native camera Cannot choose between the following variants of project :react-native-camera:
@medicmilos @wimva @MeisterTea have you added the following to android/app/build.gradle?: Step 4 her...
react native image picker open failed: EACCES (Permission denied) on Android 29 every time (I am certain it's setup properly) - works in Android 28
Seems this is due to a change in Android 29 - found some more info in this stackoverflow post: Start...
react native gesture handler null is not an object ( evaluating 'RNGestureHandlerModule.default.Direction')
pod install on ios folder works for me I'm having this issue in Android with react-nagivation and re...
react native mapbox gl No static method toHumanReadableAscii
here is workaround: build.gradle got the following error on runtime: java.lang.NoSuchMethodError: No...
react native camera Could not find method compileOnly()
Just went through this myself Which implementation are you using RNCamera Steps to reproduce init a ...
react native gesture handler Warning: Accesing view manager configs for getConstants
Edit you can now use expo install react-native-gesture-handler It will take care of everything I lis...
expo cli Expo fails to start the project: error Invalid regular expression: /(.*\\__fixtures__
Got this issue today on windows but don't need to downgrade node Description I just initialize a new...
react navigation Drawer changes in #1803 causes undocumented breaking changes to drawernavigators
Adding to the drawer configs fixed the issue for me. Current Behavior create a single drawer navigat...
formik How to validate formik & Yup validation with file type and size ?
After following this tutorial to integrate a file upload component in my form
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
NativeBase Needs to tap twice to fire onPress function when keyboard is open
@bm-software Use keyboardShouldPersistTaps={'handled'} and will works fine. react-native ...
react hook form Ability to disable submit button until valid form
Add formState api then in your button Is your feature request related to a problem? Please describe ...
react native image picker Camera doesn't open and error "Couldn't get file path for photo" is reported
I was able to fix it by adding android:requestLegacyExternalStorage=true to application tag in Andro...
react native image picker Build problem: A problem occurred configuring project ':react-native-image-picker'.
If you don't want to wait until this library will release fixed version Description I tried to run r...
react navigation Android header is overlapped
Yes @rockingskier I had a chat with the Expo guys Looks like we need to explicitly add padding for A...
react native debugger It looks like you are passing several store enhancers to createStore()
I've just had this same problem with almost exactly the same code and have managed to fix it Instead...
react native firebase ๐Ÿ”ฅ(Android) Program type already present: io.invertase.firebase.BuildConfig
I think I found my ultimate error here In my package.json file I had at some point earlier ...
typeorm Error: RepositoryNotFoundError: No repository for [Enitity] was found. Looks like this entity is not registered in current "default" connection? Issue type: [x] question [x] bug r...
react native maps How get latitudeDelta and longitudeDelta from any region?
Given an array of coordinates coords this function returns the region (lat lng and deltas) to contai...
react native modal The statusbar turns white when the modal is open (only on certain devices)
statusBarTranslucent property has been added to Modal of RN 0.62 I think this problem has been solve...
react navigation How to navigate in a redux-action ?
From daose/react-native-template#1 #153 You can import { NavigationActions } from 'react-navigation'...
expo cli XDLError: ValidationError: "scheme" is not allowed
can you try removing the .expo directory? rm -rf .expo in your project Description I'm having this e...