Issue
I would like to put the slider at the top of my screen.
Playing with the styles
have no effect on its position.
Here is my code:
import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import Swiper from 'react-native-swiper';
import SexScreen from './SexScreen';
import NameScreen from './NameScreen';
import BirthDateScreen from './BirthDateScreen';
import BirthLocationScreen from './BirthLocationScreen';
import BirthTimeScreen from './BirthTimeScreen';
// import other necessary components and styles
const OnboardingSwiper = () => {
const swiperRef = useRef(null);
const goToNextSlide = () => {
swiperRef.current?.scrollBy(1);
};
const goToPreviousSlide = () => {
swiperRef.current?.scrollBy(-1);
};
return (
<View style={styles.container}>
<Swiper
loop={false}
showsPagination={true}
index={0}
scrollEnabled={false}
ref={swiperRef}
activeDotColor="white"
style={styles.swiper}
>
<SexScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
<NameScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
<BirthDateScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
<BirthLocationScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
<BirthTimeScreen onNext={goToNextSlide} onBack={goToPreviousSlide} />
</Swiper>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start', // Ensure content is aligned to the top
},
swiper: {
height: 'auto', // Adjust height as needed
},
// Other styles...
});
const OnboardingScreen = () => {
return <OnboardingSwiper />;
};
export default OnboardingScreen;
Solution
react-native-swiper
hasn't been updated for 4 years now. It's generally not advised to use packages which is not actively being maintained. You can try giving react-native-swiper-flatlist
a try.
Now, for react-native-swiper
you can use one of their props paginationStyle
and give some styling to it according to you.
<Swiper
loop={false}
showsPagination={true}
index={0}
scrollEnabled={false}
ref={swiperRef}
activeDotColor="white"
style={styles.swiper}
paginationStyle={{ top: "-80%" }} // add this
>
I have checked with style and adding top: "-80%"
will move your dot slider to the top of the screen.
Answered By - Vibhor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.