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 (
     <Animated.View
       style={swipableCardStyle}
       key={firstCardContent.product__id}
       {...this._panResponder.panHandlers}
     >
       {renderOverlayLabel}
       {firstCard}
     </Animated.View>
   )
 }

 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}
     </Animated.View>
   )
 }

 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}>
       {previousCard}
     </Animated.View>
   )
 }

Work for you ?

Related Issues:

11
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...
4
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...
1407
1138
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...
750
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 ...
568
517
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...
516
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...
442
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...
384
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. ...
376
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...
364
react navigation Send data back from child screen?
@itswaze You can do something along these lines to pass back from the child screen ...
358
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...
349
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...
328
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: ...
323
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 ...
317
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 ...
316
lottie react native Could not find com.android.support:appcompat-v7:26.1.0.
you are right there is also something else your other build.gradle file add maven url 'https://maven...
306
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 MainApplication.java I ...
280
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...
265
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. ...
255
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 ...
248
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. ...
247
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 ...
242
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...
205
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...
198
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...
195
react native mapbox gl No static method toHumanReadableAscii
here is workaround: build.gradle got the following error on runtime: java.lang.NoSuchMethodError: No...
194
react native camera Could not find method compileOnly()
Just went through this myself Which implementation are you using RNCamera Steps to reproduce init a ...
190
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...
184
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...
179
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...
175
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 https://hackernoon.com...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
169
NativeBase Needs to tap twice to fire onPress function when keyboard is open
@bm-software Use keyboardShouldPersistTaps={'handled'} and will works fine. react-native ...
169
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 ...
168
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...
167
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...
167
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...
164
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...
162
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 ...
161
typeorm Error: RepositoryNotFoundError: No repository for [Enitity] was found. Looks like this entity is not registered in current "default" connection?
https://typeorm.io/#/connection-options/common-connection-options Issue type: [x] question [x] bug r...
157
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...
156
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...
155
react navigation How to navigate in a redux-action ?
From daose/react-native-template#1 #153 You can import { NavigationActions } from 'react-navigation'...
152
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...