Android only: Image not displayed for the first time or alternatively
meetajhu opened this issue · comments
Is this a bug report or a feature request?
Bug Report
Have you read the guidelines regarding bug report?
Yes
Have you read the documentation in its entirety?
Yes
Have you made sure that your issue hasn't already been reported/solved?
Reported before but not what i'm experiencing.
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
Android
Is the bug reproducible in a production environment (not a debug one)?
Yes it happens on both debug as well as production release build
Have you been able to reproduce the bug in the provided example?
Yes
Environment
Environment:
React: 16.0.0
React native: 0.51.0
react-native-snap-carousel: 3.4.0
Target Platform:
Android (7.1.1)
iOS (11.2)
Steps to Reproduce
(Write your steps here:)
- Using Parallax example1 from react-native-snap-carousel/example/src/index.js
- When i launch the app it loads snap-carousel but does not render the image.
- But when i minimize the app by pressing the back button and opening the app again from task switcher or app drawer on android it reloads the app and snap-carousel renders the image properly
- Doing 3rd step again it does not render again. So it happens alternatively.
Expected Behavior
Should render image on the first load
Actual Behavior
When i launch the app it should render or show the images set in entries.js.
Reproducible Demo
https://github.com/archriss/react-native-snap-carousel/tree/master/example
Any way i can share a video demo on github?
Have the same issue on android. Both production and debug builds.
Hi @meetajhu,
Unfortunately, I think it has to do with how the FlatList
component works. I'm currently implementing an option that would let users choose between FlatList
and ScrollView
(way less bugs, but not usable with huge numbers of items).
I'll let you know when it's done and then we will be able to run some tests together.
as i can see this is a tmp solution https://stackoverflow.com/questions/45736887/react-native-images-are-not-getting-rendered/45751391#45751391. Also you can add this prop to flatlist component "removeClippedSubviews={true}".
@Artem-Klyuev Have you tried the SO solution and does it solves the issue? Because I'm pretty sure that this a FlatList
rendering issue rather than an image issue.
I guess removeClippedSubviews
will do the trick, but I do not recommend using it if you have more than a few slides as this would go against the main purpose of the FlatList
component.
tried "removeClippedSubviews={true}" on ScrollView component. Still no difference. Facing the same issue
@meetajhu It should work if you set it to false
.
This issue is really driving me mad!
I've tried using a ScrollView
component instead of a FlatList
one, and it works... but only if the initialization is delayed with a 0
timeout. Moreover, when using a FlatList
, it works only if apparitionDelay
is set to 0
. This makes absolutely no sense at all and is just the result and the miscellaneous ScrollView
/FlatList
bugs.
Anyway, I'm currently hacking my way around it...
Ok, you can now try branch 3.5.0
. See this note about using a commit not already published on npm.
A new prop useScrollView
has been implemented. As the name suggests, it will make the carousel render a ScrollView
instead of the default FlatList
(less overall bugs, but no optimizations whatsoever; do not activate this when displaying many items).
You shouldn't have to set useScrollView
to true
to see the issue go away, but I would appreciate if you could try both cases anyway ;-)
Tried branch 3.5.0 works properly!
@meetajhu Thanks for letting me know. They are a few more things I want to implement before publishing version 3.5.0
. I'll let you know as soon as it's done!
@bd-arc Thanks!
Version 3.5.0
has been published ;-)
I can't get my images to load using ParallaxImage even if I set useScrollView to true
_renderItem({ item, index }, parallaxProps) {
return (
<View style={styles.slide}>
<ParallaxImage
source={require('../../images/logo.png')}
parallaxFactor={0.4}
{...parallaxProps}
/>
</View>
);
}
render() {
return (
<Carousel
renderItem={this._renderItem}
data={this.props.data}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
hasParallaxImages={true}
useScrollView={true}
/>
);
}
@buchereli Go through the example properly.
https://github.com/archriss/react-native-snap-carousel/tree/master/example
@buchereli Please refer to the issue template to know which information you should provide to help us help you.
In particular:
- Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
- Have you been able to reproduce the bug in the provided example?
- Provide information about your current environment (RN version, plugin version...).
- Please share a project that reproduces the issue: create a new app using https://snack.expo.io/ and try to reproduce the issue in it.
i have got this problem in android and non of these solution works, the problem only goes away when i enable "Debug JS Remotly"
renderItem for ParallaxImage is little different _renderItemWithParallax ({item, index}, parallaxProps)
. you must add parallaxProps