4

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:

enter image description here

How can I display my svg component inside the tabbar from react-native-router-flux?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
David Geismar
  • 3,152
  • 6
  • 41
  • 80

1 Answers1

1

I found the answer.

Use the renderTitle like this, and when you can put any kind of svg inside.

<Scene
   key="emaillogin"
   component={LoginEmail}
   renderTitle={() => (
       <View style={styles.headerLogoView}>
          <Logo />
       </View>
   )}
/>

const styles = {
    headerLogoView: {
    flexDirection: 'row',
    paddingLeft: 5,
    paddingTop: 5,
    width: '100%', 
    height: '100%', 
},

};

When make a file with your svg

Friis1978
  • 1,179
  • 9
  • 16