How to Make Carousel View of Screens without Navigation in React Native - reactjs

Question

I would like to implement a dynamic carousel view of screens (similar to Swiper). I was thinking of creating a View with conditional rendering that would display a screen by selectedId corresponding to each screen, but that would cause a re-render on every screen, unless I have a state for each one of them.
Is there any better solution to make a carousel view of screens without using navigation and keep the data on the screen saved?

Answer 1

I have used react-native-progress-steps for this solution. I have modified the config file a little and wrote a dummy data template for it.
Dummy data:
const reviewData = [
{
id: "1",
serviceID: 0,
},
{
id: "2",
serviceID: 1,
},
{
id: "3",
serviceID: 2,
},
];
render (disregard colors):
<View style={styles.container}>
<ProgressSteps
activeStepIconColor={defaultColors.white}
completedProgressBarColor={settings.colors.primary}
progressBarColor={defaultColors.light}
activeStepIconBorderColor={settings.colors.primary}
completedStepIconColor={settings.colors.primary}
disabledStepIconColor={defaultColors.light}
activeStepNumColor={defaultColors.dark}
disabledStepNumColor={defaultColors.mediumLight}
>
{reviewData.map((item, index) => (
<ProgressStep
nextBtnStyle={styles.nextButtonStyle}
previousBtnStyle={
index === 0
? styles.disabledButton
: styles.prevButtonStyle
}
nextBtnTextStyle={styles.nextButtonTextStyle}
previousBtnTextStyle={styles.prevButtonTextStyle}
previousBtnText={`Назад`}
nextBtnText={`Дальше`}
finishBtnText={`Завершить`}
previousBtnDisabled={index === 0 ? true : false}
>
<View style={{ alignItems: "left" }}>
<AppText>
{item.serviceID},{index}
</AppText>
</View>
</ProgressStep>
))}
</ProgressSteps>
</View>
I am satisfied with the solution, but if you have any other solutions, please let me know :)