give scrollview to top bar navigation in react navigation

Question

my tabs currently look like this, i'm using react navigation to make the tabs.

and I'm trying to give a gap between the tabs, this is my code

const ScheduleScreen = () => {
  return (
    <TopTab.Navigator
      tabBarOptions= {{
        tabStyle: {
          width: 120,
          justifyContent: "center",
        }
      }}
    >
      <TopTab.Screen
        name="Monday"
        component={MondayAnime}
      />
      <TopTab.Screen
        name="Tuesday"
        component={TuesdayAnime}
      />
      <TopTab.Screen
        name="Wednesday"
        component={WednesdayAnime}
      />
      <TopTab.Screen
        name="Thursday"
        component={ThursdayAnime}
      />
      <TopTab.Screen
        name="Friday"
        component={FridayAnime}
      />
      <TopTab.Screen
        name="Saturday"
        component={SaturdayAnime}
      />
      <TopTab.Screen
        name="Sunday"
        component={SundayAnime}
      />
    </TopTab.Navigator>
  )
}

and now my tabs look like this

I don't know if that the efficient way or not, but now I got another problem, my tabs can't scroll horizontally. I've been trying to give ScrollView but it didn't works. Can someone tell me how can i do that? and is there a more efficient way than my code to give gap between the tabs?

thank you for any help, i'll appreciate that

question from:https://stackoverflow.com/questions/65713714/give-scrollview-to-top-bar-navigation-in-react-navigation

Answer 1

Waitting for answers