search

web-ridge / react-native-paper-tabs

Smooth and fast cross platform Material Design Tabs for React Native Paper
https://reactnativepapertabs.com
MIT License
190 stars 34 forks source link

Option to disable empty space before 1st tab when using scrollable #6

Closed Ulan4eg closed 3 years ago

Ulan4eg commented 3 years ago

image

const tabsTheme = {
        colors: {
            primary: '#fff'
        }
    }

< View>
            < Appbar.Header>
                < Appbar.Action icon='chevron-left' size={34} onPress={() => goBack()}/>
                < Appbar.Content title='Задача'/>
                < Appbar.Action icon="calculator" onPress={() => openCalc()} />
            < /Appbar.Header>
<Tabs
                theme={tabsTheme} // works the same as AppBar in react-native-paper
                mode="scrollable" // fixed, scrollable | default=fixed
            >
                < TabScreen label='Инфо'>
                    <View style={{ backgroundColor: 'blue', flex:1 }} />
                < / TabScreen>
                < TabScreen label='При'>
                    <View style={{ backgroundColor: 'red', flex:1 }} />
                < / TabScreen >
                < TabScreen label='123' >
                    <View style={{ backgroundColor: 'green', flex:1 }} />
                < / TabScreen >
            </Tabs>
< / View>
RichardLindhout commented 3 years ago

It's in the material design specification

RichardLindhout commented 3 years ago

I will accept a PR which will disable the space with a prop

Ulan4eg commented 3 years ago

thnx!

RichardLindhout commented 3 years ago

You can now disable with showLeadingSpace={false}

<Tabs
               showLeadingSpace={false} //  (default=true) show leading space in scrollable tabs inside the header
                theme={tabsTheme} // works the same as AppBar in react-native-paper
                mode="scrollable" // fixed, scrollable | default=fixed
            >
                < TabScreen label='Инфо'>
                    <View style={{ backgroundColor: 'blue', flex:1 }} />
                < / TabScreen>
                < TabScreen label='При'>
                    <View style={{ backgroundColor: 'red', flex:1 }} />
                < / TabScreen >
                < TabScreen label='123' >
                    <View style={{ backgroundColor: 'green', flex:1 }} />
                < / TabScreen >
            </Tabs>