react native, swiping views while staying in the same navigation

August 14, 2023

I’m trying to design welcome slides for new users that gives them a little summary of the app when they first login. On clicking the arrow button, the screen should slide horizontally just as it does when navigating, only it doesn’t change where they are in the app (they’ll remain in the ‘home’ directory).

Is this possible?

>Solution :

There are a number of ways to achieve it. One way is by using React Swiper.

You can create a component which would return Swiper.

... //Other imports
import Swiper from 'react-native-swiper'

const YourOnboardingSlides = () => {
    return (
        <Swiper style={<...yourStyles>} showsButtons={true}>
            <YourSliderView text={"This is slide 1"} />
            <YourSliderView text={"This is slide 2"} />
            <YourSliderView text={"This is slide 3"} />
        </Swiper>
    );
};

You could, also, create different components to display the desired outcome i.e., YourSliderView:

const YourSliderView = ({text}) => {
    return (<View>
        <Text>{text}</Text>
    </View>);
};

Creating such structure would allow you to easily expand the number of slides or adjust their content by simply adding or modifying the YourSliderView components within the Swiper component.