Closed bobmulder closed 6 years ago
@bobmulder Hey sorry for the confusion, scrollToIndex is a number and should be state
. Not sure if having it as state is good or bad but for now it works.
Can you please drop me a code example?
Setup your initial state:
state = { indexToScrollTo = 0 }
Then pass that state to scrollToIndex
prop:
<ParallaxSwiper scrollToIndex={this.state.indexToScrollTo}>
...
</ParallaxSwiper>
Now just set this.state.indexToScrollTo
to the index you want to scroll to.
Thank you for the example! I've implemented it, but unfortunately no success... At this moment I get the following view:
The part of the image you see is part of the first one (index 0) while I wanted to scroll to index 1...
My code still looks like:
<ParallaxSwiper
ref="parallax"
speed={0.75}
dividerWidth={6}
dividerColor="black"
backgroundColor="black"
animatedValue={this.animated}
scrollToIndex={this.state.parallaxIndex}
showsHorizontalScrollIndicator={true}
>
...
</ParallaxSwiper>
Hint; changing the
speed
value made the black gap bigger/smaller...
Thanks again or your help and time!
Hmm, not sure why you’re having this issue without seeing the rest of the code. Can you paste your entire file and what device/version your testing on?
Versions: react-native-cli: 2.0.1 react-native: 0.49.3 testing on: Android 6
Code (removed some useless code):
class TimelineContentScreen extends Component {
constructor(props) {
super(props)
this.state = {
foreground: true,
scrollIndex: 1
}
this.animated = new Animated.Value(0);
}
componentDidMount() {
}
getIndex() {
const {items, id} = this.props
let res = 0;
items.forEach((item, key) => {
if(item.id === id) {
res = key
}
})
return res
}
renderBackgroundItem(item) {
return (
<Image style={styles.image} source={item.source_url} />
)
}
renderForegroundItem(item) {
return (
<Animatable.View style={styles.container}>
<View style={styles.headSection}></View>
<Animatable.View ref={(ref) => {this._contextSection = ref}} style={styles.contextSection}>
{_contextIcon}
{_contextTitle}
</Animatable.View>
</Animatable.View>
)
}
renderItem(item) {
const background = this.renderBackgroundItem(item)
const foreground = this.renderForegroundItem(item)
return (
<ParallaxSwiperPage
key={item.id}
BackgroundComponent={background}
ForegroundComponent={foreground}
/>
)
}
renderItems(items) {
if (items.length > 0) {
return items.map((item, index) => this.renderItem(item));
}
}
render() {
const {navigation, items, id} = this.props;
const index = this.getIndex();
return (
<ParallaxSwiper
ref="parallax"
speed={0.75}
dividerWidth={6}
dividerColor="black"
backgroundColor="black"
animatedValue={this.animated}
scrollToIndex={this.state.scrollIndex}
showsHorizontalScrollIndicator={true}
>
{this.renderItems.bind(this, items)()}
</ParallaxSwiper>
);
}
}
@bobmulder I think your index issue will be resolved with #10, but for now this should do the trick:
componentDidMount() {
this.setState({ scrollIndex: 1 });
}
Unfortunately the issue isn't solved updating and using #10. Still getting the same screen as I posted above (when the index is not 0
).
I will restructure my code first, and try to post a clean example...
No progress so far. I discovered that changing the speed
attribute changes the black box as I showed above... Any idea how this is possible?
What Android device are you using? Also post all of your code, as I will copy, paste, and run it to try and debug this.
Fixed in v1.1.4.
Again a poorly commented and motivated issue, but I'm trying to do my best within my expensive, little hours ;)
So, I migrated to your new version (1.x), and had to get feeling with the new changes of the naming changes of the props, and the
Pager
.However the option
scrollToIndex
seems not to work. I tried different things:Implementation 1
Using
scrollToIndex
as a prop:Implementation 2
Adding to my component:
Both implementations are not working. Is this a bug or am I doing something wrong? Your help is really appreciated!