Scrollable, indicatorHeight and indicatorColor not working

Question

Scrollable, indicatorHeight and indicatorColor not working

sineus opened this issue 9 years ago · comments

Hey,

First of all congratulations for this plugin, it saves me a lot of life. Unfortunately there is a problem attribute, the three are mentioned in the title. Thanks !

Ayoub Adib · Answer 1 · Sun Feb 28 2016 19:52:52 GMT+0800 (China Standard Time)

Hey Sineus,

Can you, please, copy/paste the TabLayoutAndroid/TabAndroid(s) part of your JSX code?
What react-native version do you use in your project?

KUBLER David · Answer 2 · Sun Feb 28 2016 20:28:40 GMT+0800 (China Standard Time)

Thanks for you quick response,

I use react native 0.20 and this is my JSX code:

<DrawerLayoutAndroid
drawerWidth={300}
ref='drawer'
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>

            <ToolbarAndroid style={styles.toolbar}
                title={this.props.title}
                navIcon={{uri: 'ic_menu_white_24dp', isStatic: true}}
                onIconClicked={this.props.navigator.pop}
                titleColor={'#FFFFFF'}/>

            <View style={{flex: 1}}>
                <TabLayoutAndroid
                    style={{height:48}}
                    backgroundColor='#1E1E1E'
                    indicatorColor={'#86BC29'}
                    indicatorTabHeight={2}
                    scrollable={true}
                    center={false}
                    onPageSelected={this._onSelectedTab}>

                    <TabAndroid
                        style={styles.tabInner}
                        text='News'
                        textSize={14}
                        textColor="#989898"
                        selectedTextColor='#ffffff'>

                        <ParallaxView
                            ref={component => this._scrollView =

component}
backgroundSource={{uri: 'cover', isStatic:
true}}
windowHeight={200}
header={HEADER}>

                            <View style={{padding: 20}}>
                                <AccentColoredRaisedButton

onPress={this._eventToast}>
{'Action toast'}

{'Share'}

yeah! Le
Lorem Ipsum est simplement du faux texte employé dans la composition et la
mise en page avant impression. Le Lorem Ipsum est le faux texte standard de
limprimerie depuis les années 1500, quand un peintre anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices
de texte. Il na pas fait que survivre cinq siècles, mais sest aussi adapté
à la bureautique informatique, sans que son contenu nen soit modifié. Il a
été popularisé dans les années 1960 grâce à la vente de feuilles Letraset
contenant des passages du Lorem Ipsum, et, plus récemment, par son
inclusion dans des applications de mise en page de texte, comme Aldus
PageMaker.
Le Lorem
Ipsum est simplement du faux texte employé dans la composition et la mise
en page avant impression. Le Lorem Ipsum est le faux texte standard de
limprimerie depuis les années 1500, quand un peintre anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices
de texte. Il na pas fait que survivre cinq siècles, mais sest aussi adapté
à la bureautique informatique, sans que son contenu nen soit modifié. Il a
été popularisé dans les années 1960 grâce à la vente de feuilles Letraset
contenant des passages du Lorem Ipsum, et, plus récemment, par son
inclusion dans des applications de mise en page de texte, comme Aldus
PageMaker.
Le Lorem
Ipsum est simplement du faux texte employé dans la composition et la mise
en page avant impression. Le Lorem Ipsum est le faux texte standard de
limprimerie depuis les années 1500, quand un peintre anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices
de texte. Il na pas fait que survivre cinq siècles, mais sest aussi adapté
à la bureautique informatique, sans que son contenu nen soit modifié. Il a
été popularisé dans les années 1960 grâce à la vente de feuilles Letraset
contenant des passages du Lorem Ipsum, et, plus récemment, par son
inclusion dans des applications de mise en page de texte, comme Aldus
PageMaker.
Le Lorem
Ipsum est simplement du faux texte employé dans la composition et la mise
en page avant impression. Le Lorem Ipsum est le faux texte standard de
limprimerie depuis les années 1500, quand un peintre anonyme assembla
ensemble des morceaux de texte pour réaliser un livre spécimen de polices
de texte. Il na pas fait que survivre cinq siècles, mais sest aussi adapté
à la bureautique informatique, sans que son contenu nen soit modifié. Il a
été popularisé dans les années 1960 grâce à la vente de feuilles Letraset
contenant des passages du Lorem Ipsum, et, plus récemment, par son
inclusion dans des applications de mise en page de texte, comme Aldus
PageMaker.

                        </ParallaxView>

                    </TabAndroid>

                    <TabAndroid
                        text='Library'
                        textSize={14}
                        textColor='#989898'
                        selectedTextColor='#ffffff'
                        ref="libTab">

                        <View>
                            <View style={theme.cardStyle}>
                                <Image source={{uri: 'cover', isStatic:

true}} style={theme.cardImageStyle}/>
<Text style={[theme.cardTitleStyle,
{color: 'white'}]}>{'Card #1'}
<View style={{ padding : 15}}>
<Text
style={[theme.cardContentStyle, {padding:0}]}>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Mauris sagittis pellentesque
lacus eleifend lacinia...

{'Hey'}

                                <View style={[theme.cardActionStyle,

{padding: 0, flex: 1, justifyContent: 'flex-start', flexDirection: 'row'}]}>

                                    <MKIconToggle
                                        checked={false}

onCheckedChange={this._onChecked}
onPress={this._onToggleClicked}>
<Image style={styles.cardIcon}
source={{uri: 'ic_favorite_border_black_24dp', isStatic: true}}/>
<Image state_checked={true}
style={styles.cardIcon} source={{uri: 'ic_favorite_black_24dp', isStatic:
true}}/>

                                    <MKIconToggle
                                        checked={false}

onCheckedChange={this._onChecked}
onPress={this._onToggleClicked}>
<Image style={styles.cardIcon}
source={{uri: 'ic_favorite_border_black_24dp', isStatic: true}}/>
<Image state_checked={true}
style={styles.cardIcon} source={{uri: 'ic_favorite_black_24dp', isStatic:
true}}/>

                    </TabAndroid>
                </TabLayoutAndroid>
            </View>

            <Animated.View
                style={[styles.fabContainer, {transform: [{scale:

this.state.fabScale}], opacity: this.state.fabOpacity}]}>

<Image pointerEvents="none" style={styles.fabIcon}
source={{uri: 'ic_bookmark_border_white_24dp', isStatic: true}} />

</Animated.View>

Thanks again and good day !

2016-02-28 12:52 GMT+01:00 Ayoub ADIB notifications@github.com:

Hey Sineus,

Can you, please, copy/paste the TabLayoutAndroid/TabAndroid(s) part of
your JSX code?
What react-native version do you use in your project?

—
Reply to this email directly or view it on GitHub
#3 (comment)
.

Cordialement,

Ayoub Adib · Answer 3 · Mon Feb 29 2016 02:45:18 GMT+0800 (China Standard Time)

Hey,

Firstly, you must use indicatorTabColor instead of indicatorColor (for more details about all available props, see https://github.com/ayoubdev/react-native-android-kit#props)

Secondly, for scrollable prop, it's a normal behaviour (from android support design) since you haven't much tabs (only two) and their labels (text prop) aren't short. The scrollable mode only takes effect if and only if you have more tabs than your parent view can accept: in your case disable it to show equally share parent width view between your tabs.

Finally, for indicatorTabHeight, it seems to work on my app example. See:

Corresponding jsx code:

<TabLayoutAndroid style={{height:60}} backgroundColor='#009688' indicatorTabColor='#000000'
                                  indicatorTabHeight={15} scrollable={true} center={false}>
                    <TabAndroid text='Long label Tab: Scrollable' textSize={16} textColor="white" selectedTextColor='#ffc400'
                                icon='ic_home_black_24dp' iconPosition='left'>
                        <Text>ButtonAndroid Examples</Text>
                    </TabAndroid>
                    <TabAndroid text='Tab2' textSize={16} textColor='white' selectedTextColor='#ffc400'
                                icon='ic_important_devices_black_24dp' iconPosition='left'>
                        <Text>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        </Text>
                    </TabAndroid>
                    <TabAndroid text='Tab3' textSize={16} textColor="white" selectedTextColor="#ffc400"
                                icon='ic_build_black_24dp' iconPosition='left'>
                        <Text>Hello, I'm the last tab: nothing to show</Text>
                    </TabAndroid>

                </TabLayoutAndroid>

KUBLER David · Answer 4 · Mon Feb 29 2016 03:30:45 GMT+0800 (China Standard Time)

Thanks for you quick answer ! Sorry, in made in my example I deleted the
other tabs because it will not work. Anyway thank you very much.

2016-02-28 19:45 GMT+01:00 Ayoub ADIB notifications@github.com:

Hey,

Firstly, you must use indicatorTabColor instead of indicatorColor (for
more details about all available props, see
https://github.com/ayoubdev/react-native-android-kit#props)

Secondly, for scrollable prop, it's a normal behaviour (from android
support design) since you haven't much tabs (only two) and their labels
(text prop) aren't short. The scrollable mode only takes effect if and only
if you have more tabs than your parent view can accept: in your case
disable it to show equally share parent width view between your tabs.

Finally, for indicatorTabHeight, it seems to work on my app example. See:

[image: test]
https://cloud.githubusercontent.com/assets/10498826/13381116/728e7d5e-de53-11e5-8f74-2ea30eb7c71c.png

Corresponding jsx code:

` indicatorTabHeight={15} scrollable={true} center={false}>
            <TabAndroid text='Long label Tab: Scrollable' textSize={16} textColor="white" selectedTextColor='#ffc400'
                        icon='ic_home_black_24dp' iconPosition='left'>
                <Text>ButtonAndroid Examples</Text>
            </TabAndroid>
            <TabAndroid text='Tab2' textSize={16} textColor='white' selectedTextColor='#ffc400'
                        icon='ic_important_devices_black_24dp' iconPosition='left'>
                <Text>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </Text>
            </TabAndroid>
            <TabAndroid text='Tab3' textSize={16} textColor="white" selectedTextColor="#ffc400"
                        icon='ic_build_black_24dp' iconPosition='left'>
                <Text>Hello, I'm the last tab: nothing to show</Text>
            </TabAndroid>

        </TabLayoutAndroid>`
—
Reply to this email directly or view it on GitHub
#3 (comment)
.

Cordialement,

Ayoub Adib · Answer 5 · Tue Mar 01 2016 06:35:47 GMT+0800 (China Standard Time)

No problem.

Closed.