Question 302035 in React native Question posted in
The official React Native documentation can be found here.

React Native: Slider position at the top

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;

enter image description here

Tags:

2

Answers


  1. 0

    The library you are using, react-native-swiper, has not had a release in over 3 years. If you read the documentation, it does not state that there is an option to move the dots to be above the content instead of below.

    If you want this behavior, you either have to:

    • Change the code inside the library itself to make it work based on your needs
    • Develop something that fits your demand from scratch
    • Use a different library (for example)
    Login or Signup to reply.
  2. 0

    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 you 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 addint top: "-80%" will move your dot slider to the top of the screen.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search