react native page indicator with tab navigaton

Question

Previously i have developed a dot page indicator like this:

const [sliderState, setSliderState] = useState({currentPage: 0});
const setSliderPage = (event) => {
const {currentPage} = sliderState;
const {x} = event.nativeEvent.contentOffset;
const indexOfNextScreen = Math.floor(x / width);

if (indexOfNextScreen !== currentPage) {
  setSliderState({
    ...sliderState,
    currentPage: indexOfNextScreen,
  });
}
};

const {currentPage: pageIndex} = sliderState;

 <SafeAreaView style={{flex: 1}}>
    <ScrollView
      style={{flex: 1}}
      horizontal={true}
      scrollEventThrottle={16}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      onScroll={(event) => {
        setSliderPage(event);
      }}>
      <View style={{width, height}}>
        <Component1  />
      </View>

      <View style={{width, height}}>
        <Component2 />
      </View>

      <View style={{width, height}}>
        <Component3 />
      </View>
    </ScrollView>
    <View style={styles.paginationWrapper}>
      {Array.from(Array(3).keys()).map((key, index) => (
        <View
          style={[
            styles.paginationDots,
            {opacity: pageIndex === index ? 1 : 0.3},
          ]}
          key={index}
        />
      ))}
    </View>
  </SafeAreaView>

Instead now I would like to achieve this with navigation, so that each screen is seperated in the tab navigator stack, and not a single screen with multiple components being rendered out:

const SwipeTabNavigator = () => {
return (
  <Tab.Navigator>
    <Tab.Screen name="Component1" component={Component1} />
    <Tab.Screen name="Component2" component={Component2} />
    <Tab.Screen name="Component3" component={Component3} />
  </Tab.Navigator>
);
};

if that makes any sense whatsoever :D, any suggestions are appreciated