search

ptomasroos / react-native-scrollable-tab-view

Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar
https://www.npmjs.com/package/react-native-scrollable-tab-view
6.94k stars 2.29k forks source link

Underline style #1016

Open leon2835 opened 5 years ago

leon2835 commented 5 years ago

Hi there, how can i maximize the width of underline following the label container. Thank You <ScrollableTabView renderTabBar={() => } tabBarBackgroundColor="black" tabBarActiveTextColor="white" tabBarInactiveTextColor="white" tabBarUnderlineStyle={{ height: 2, backgroundColor: "red" }}>

            <ViewNotifcation tabLabel="View" />
            <ChatPage tabLabel="Chat" />
        </ScrollableTabView>

Capture

plimerence commented 5 years ago

https://github.com/plimerence/react-native-scrollable-tab-view the Repositories can solve u problem, just set <ScrollableTabBar underlineStyle={{ width: 20, }} style={{ borderWidth: 0 }} {...props} />

the core code is fixUnderLine = { left: Animated.add(dynamicTabUnderline.left, Animated.divide(Animated.add(dynamicTabUnderline.width, new Animated.Value(-underLineWidth)), 2)), width: new Animated.Value(underLineWidth), };