React-native-tab-view: How can I use renderIndicator, please help

[vinhnvfabbi]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

[BunHouth]

@vinhnvfabbi you can custom renderIndicator to make exactly the same what you want.
If you need a tab width, you can use this function to get it getTabWidth

Example: https://github.com/react-native-community/react-native-tab-view/blob/master/example/src/CustomIndicatorExample.tsx#L162

[wowtrxqn]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

can you share your code，really like it

[BunHouth]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

can you share your code，really like it

you can check this https://github.com/BunHouth/RNTabExample/blob/feature/indicator-gradient/Home.js#L41

it similar to that images

[wowtrxqn]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

can you share your code，really like it

you can check this https://github.com/BunHouth/RNTabExample/blob/feature/indicator-gradient/Home.js#L41

it similar to that images

thanks very much！

[wowtrxqn]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

can you share your code，really like it

you can check this https://github.com/BunHouth/RNTabExample/blob/feature/indicator-gradient/Home.js#L41

it similar to that images

import React, { Component, useEffect, useRef } from 'react';
import { StyleSheet, Dimensions, Animated, Text, View } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import LinearGradient from "react-native-linear-gradient";
import MyApplication from '../../components/MyApplication';
import Shop from '../../components/Shop';
import _ from "lodash";
import { ButtonGroup } from 'react-native-elements'

const styles = StyleSheet.create({
tabView: {
backgroundColor: 'white',
},
tabbar: {
backgroundColor: 'white',
overflow: 'hidden',
// height: 50,
marginBottom: 10,
elevation: 0,
shadowColor: 'white',
shadowOpacity: 0,
shadowRadius: StyleSheet.hairlineWidth,
shadowOffset: {
height: 0,
width: 0,
},
marginLeft: 10
},
tabStyle: {
flexDirection: 'row',
color: '#263238',
width: 'auto',
// borderWidth: 1,
// borderColor: 'black',
// borderRadius: 50,
// paddingLeft: 20,
// paddingRight: 20,
},
labelStyle: {
color: '#263238',
fontSize: 16,
},
// indicatorStyle: {
// backgroundColor: 'black'
// },
fn: {
position: 'absolute',
right: 0,
top: 0,
flexDirection: 'row'
}
});

const TabIndicator = props => {
const { width, tabWidth, index } = props;
const marginLeftRef = useRef(new Animated.Value(index ? tabWidth : 0))
.current;
useEffect(() => {
Animated.timing(marginLeftRef, {
toValue: tabWidth,
duration: 400
}).start();
}, [tabWidth]);

return (
    <Animated.View
        style={{
            justifyContent: "flex-end",
            alignItems: "center",
            flex: 1,
            width: width,
            marginLeft: marginLeftRef
        }}
    >
        <LinearGradient
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            colors={["#50b0ea", "#80a2ed", "#a797f2", "#e981f4"]}
            style={{ height: 2, width: "100%" }}
        />
    </Animated.View>
);

}

class Application extends Component {

constructor(props) {
    super(props)
    this.state = {
        index: 0,
        routes: [
            {
                key: 'MyApplication',
                title: 'My App',
                icon: 'view-compact-outline',
                color: [244, 67, 54]
            },
            {
                key: 'Shop',
                title: 'Store',
                icon: 'store',
                color: [244, 67, 54]
            },
        ],
    }
}

renderIndicator = ({ getTabWidth }) => {
    const tabWidth = _.sum([...Array(this.state.index).keys()].map(i => getTabWidth(i)));

    return (
        <TabIndicator
            width={getTabWidth(this.state.index)}
            tabWidth={tabWidth}
            index={this.state.index}
        />
    );
}


renderScene = SceneMap({
    MyApplication,
    Shop
});

renderIcon = ({ route, color, size }) => (
    <Icon
        type='material-community'
        name={route.icon}
        size={25}
        color='#263238'
    />
);

renderLabel = ({ route, focused, color }) => (
    <Text
        style={styles.labelStyle}>
        {route.title}
    </Text>
)

renderTabBar = props => (
    <TabBar
        {...props}
        renderIcon={this.renderIcon}
        style={styles.tabbar}
        labelStyle={styles.labelStyle}
        tabStyle={styles.tabStyle}
        indicatorStyle={styles.indicatorStyle}
    />
);

render() {
    const { selectedIndex } = this.state
    return (
        <TabView
            style={styles.tabView}
            lazy
            navigationState={this.state}
            renderScene={this.renderScene}
            renderTabBar={this.renderTabBar}
            renderIndicator={this.renderIndicator}
            onIndexChange={index => this.setState({ index })}
        // initialLayout={{ width: Dimensions.get('window').width }}
        />
    );
}

}

export default Application;

not work ，is any mistake？

[BunHouth]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

can you share your code，really like it

you can check this https://github.com/BunHouth/RNTabExample/blob/feature/indicator-gradient/Home.js#L41
it similar to that images

import React, { Component, useEffect, useRef } from 'react';
import { StyleSheet, Dimensions, Animated, Text, View } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import LinearGradient from "react-native-linear-gradient";
import MyApplication from '../../components/MyApplication';
import Shop from '../../components/Shop';
import _ from "lodash";
import { ButtonGroup } from 'react-native-elements'

const styles = StyleSheet.create({
tabView: {
backgroundColor: 'white',
},
tabbar: {
backgroundColor: 'white',
overflow: 'hidden',
// height: 50,
marginBottom: 10,
elevation: 0,
shadowColor: 'white',
shadowOpacity: 0,
shadowRadius: StyleSheet.hairlineWidth,
shadowOffset: {
height: 0,
width: 0,
},
marginLeft: 10
},
tabStyle: {
flexDirection: 'row',
color: '#263238',
width: 'auto',
// borderWidth: 1,
// borderColor: 'black',
// borderRadius: 50,
// paddingLeft: 20,
// paddingRight: 20,
},
labelStyle: {
color: '#263238',
fontSize: 16,
},
// indicatorStyle: {
// backgroundColor: 'black'
// },
fn: {
position: 'absolute',
right: 0,
top: 0,
flexDirection: 'row'
}
});

const TabIndicator = props => {
const { width, tabWidth, index } = props;
const marginLeftRef = useRef(new Animated.Value(index ? tabWidth : 0))
.current;
useEffect(() => {
Animated.timing(marginLeftRef, {
toValue: tabWidth,
duration: 400
}).start();
}, [tabWidth]);

return (
    <Animated.View
        style={{
            justifyContent: "flex-end",
            alignItems: "center",
            flex: 1,
            width: width,
            marginLeft: marginLeftRef
        }}
    >
        <LinearGradient
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            colors={["#50b0ea", "#80a2ed", "#a797f2", "#e981f4"]}
            style={{ height: 2, width: "100%" }}
        />
    </Animated.View>
);

}

class Application extends Component {

constructor(props) {
    super(props)
    this.state = {
        index: 0,
        routes: [
            {
                key: 'MyApplication',
                title: 'My App',
                icon: 'view-compact-outline',
                color: [244, 67, 54]
            },
            {
                key: 'Shop',
                title: 'Store',
                icon: 'store',
                color: [244, 67, 54]
            },
        ],
    }
}

renderIndicator = ({ getTabWidth }) => {
    const tabWidth = _.sum([...Array(this.state.index).keys()].map(i => getTabWidth(i)));

    return (
        <TabIndicator
            width={getTabWidth(this.state.index)}
            tabWidth={tabWidth}
            index={this.state.index}
        />
    );
}


renderScene = SceneMap({
    MyApplication,
    Shop
});

renderIcon = ({ route, color, size }) => (
    <Icon
        type='material-community'
        name={route.icon}
        size={25}
        color='#263238'
    />
);

renderLabel = ({ route, focused, color }) => (
    <Text
        style={styles.labelStyle}>
        {route.title}
    </Text>
)

renderTabBar = props => (
    <TabBar
        {...props}
        renderIcon={this.renderIcon}
        style={styles.tabbar}
        labelStyle={styles.labelStyle}
        tabStyle={styles.tabStyle}
        indicatorStyle={styles.indicatorStyle}
    />
);

render() {
    const { selectedIndex } = this.state
    return (
        <TabView
            style={styles.tabView}
            lazy
            navigationState={this.state}
            renderScene={this.renderScene}
            renderTabBar={this.renderTabBar}
            renderIndicator={this.renderIndicator}
            onIndexChange={index => this.setState({ index })}
        // initialLayout={{ width: Dimensions.get('window').width }}
        />
    );
}

}

export default Application;

not work ，is any mistake？

can you just show the error? did you able to run my example?

[wowtrxqn]

I'm trying to custom indicator like the picture below but I have a problem is the indicator lose animation and it doesn't work when I press on the second tab :'( , what should I do now ? please help

can you share your code，really like it

you can check this https://github.com/BunHouth/RNTabExample/blob/feature/indicator-gradient/Home.js#L41
it similar to that images

import React, { Component, useEffect, useRef } from 'react';
import { StyleSheet, Dimensions, Animated, Text, View } from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import LinearGradient from "react-native-linear-gradient";
import MyApplication from '../../components/MyApplication';
import Shop from '../../components/Shop';
import _ from "lodash";
import { ButtonGroup } from 'react-native-elements'
const styles = StyleSheet.create({
tabView: {
backgroundColor: 'white',
},
tabbar: {
backgroundColor: 'white',
overflow: 'hidden',
// height: 50,
marginBottom: 10,
elevation: 0,
shadowColor: 'white',
shadowOpacity: 0,
shadowRadius: StyleSheet.hairlineWidth,
shadowOffset: {
height: 0,
width: 0,
},
marginLeft: 10
},
tabStyle: {
flexDirection: 'row',
color: '#263238',
width: 'auto',
// borderWidth: 1,
// borderColor: 'black',
// borderRadius: 50,
// paddingLeft: 20,
// paddingRight: 20,
},
labelStyle: {
color: '#263238',
fontSize: 16,
},
// indicatorStyle: {
// backgroundColor: 'black'
// },
fn: {
position: 'absolute',
right: 0,
top: 0,
flexDirection: 'row'
}
});
const TabIndicator = props => {
const { width, tabWidth, index } = props;
const marginLeftRef = useRef(new Animated.Value(index ? tabWidth : 0))
.current;
useEffect(() => {
Animated.timing(marginLeftRef, {
toValue: tabWidth,
duration: 400
}).start();
}, [tabWidth]);

return (
    <Animated.View
        style={{
            justifyContent: "flex-end",
            alignItems: "center",
            flex: 1,
            width: width,
            marginLeft: marginLeftRef
        }}
    >
        <LinearGradient
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            colors={["#50b0ea", "#80a2ed", "#a797f2", "#e981f4"]}
            style={{ height: 2, width: "100%" }}
        />
    </Animated.View>
);

}
class Application extends Component {

constructor(props) {
    super(props)
    this.state = {
        index: 0,
        routes: [
            {
                key: 'MyApplication',
                title: 'My App',
                icon: 'view-compact-outline',
                color: [244, 67, 54]
            },
            {
                key: 'Shop',
                title: 'Store',
                icon: 'store',
                color: [244, 67, 54]
            },
        ],
    }
}

renderIndicator = ({ getTabWidth }) => {
    const tabWidth = _.sum([...Array(this.state.index).keys()].map(i => getTabWidth(i)));

    return (
        <TabIndicator
            width={getTabWidth(this.state.index)}
            tabWidth={tabWidth}
            index={this.state.index}
        />
    );
}


renderScene = SceneMap({
    MyApplication,
    Shop
});

renderIcon = ({ route, color, size }) => (
    <Icon
        type='material-community'
        name={route.icon}
        size={25}
        color='#263238'
    />
);

renderLabel = ({ route, focused, color }) => (
    <Text
        style={styles.labelStyle}>
        {route.title}
    </Text>
)

renderTabBar = props => (
    <TabBar
        {...props}
        renderIcon={this.renderIcon}
        style={styles.tabbar}
        labelStyle={styles.labelStyle}
        tabStyle={styles.tabStyle}
        indicatorStyle={styles.indicatorStyle}
    />
);

render() {
    const { selectedIndex } = this.state
    return (
        <TabView
            style={styles.tabView}
            lazy
            navigationState={this.state}
            renderScene={this.renderScene}
            renderTabBar={this.renderTabBar}
            renderIndicator={this.renderIndicator}
            onIndexChange={index => this.setState({ index })}
        // initialLayout={{ width: Dimensions.get('window').width }}
        />
    );
}

}
export default Application;
not work ，is any mistake？

can you just show the error? did you able to run my example?

no effect ，the final view is default effect，i can't find where wrong

[satya164]

renderIndicator is a prop on TabBar. You're passing it to TabView

[wowtrxqn]

renderIndicator is a prop on TabBar. You're passing it to TabView

it worked，thanks boss