I am using react-native-router-flux for navigation in my app. I have tab navigation in which I'd like to include some svg as tabicon. I use react-native-svg to deal with svg file.
Here's my router code for my tabs:
import Chrono from './components/assets/Chrono'
const ChronoIcon = () => {
return (
<Chrono style={{width:10, height: 10}} fill="#8CCDF8"/>
);
};
<Scene key='root' tabs={true} tabBarPosition='top'>
<Scene key='chrono' hideNavBar tabBarLabel={'Something'} component={Starter} icon={ChronoIcon}/>
<Scene key='time' hideNavBar title='TIME' component={TimeCardList} icon={TabIcon}/>
<Scene key='client' hideNavBar title='CLIENT' component={ClientList} icon={TabIcon}/>
<Scene key='project' hideNavBar title='PROJECT' component={ProjectList} icon={TabIcon}/>
<Scene key='info' hideNavBar title='INFO' component={Info} icon={TabIcon}/>
</Scene>
As you can see I would like my first scene to be a tab displaying my Chrono through ChronoIcon function. Here's the code for Chrono Component:
import React, { Component } from 'react';
import Svg,{
Circle,
Ellipse,
G,
LinearGradient,
RadialGradient,
Line,
Path,
Polygon,
Polyline,
Rect,
Symbol,
Text,
Use,
Defs,
Stop
} from 'react-native-svg';
class Chrono extends Component {
render() {
return (
<Svg
style={this.props.style}
viewBox="0 0 75 87.5"
>
<Path
fill={this.props.fill}
d="M66.8,26.76A37.41,37.41,0,1,1,37.5,12.5a38.13,38.13,0,0,1,23.44,8.4l5.86-6.06a41.61,41.61,0,0,1,5.86,5.86ZM37.5,79.3A29.2,29.2,0,1,0,8.4,50,29.09,29.09,0,0,0,37.5,79.3ZM50,0V8.4H25V0Z"/>
<Polyline
fill={this.props.fill}
points="31.9 63.35 31.9 37.35 50.1 50.35"/>
</Svg>
);
}
}
export default Chrono;
However nothing seems to work, the only thing that is displayed is the tabBarLabel:
How can I display my svg component inside the tabbar from react-native-router-flux?