0

How do I make a tabbar as in the picture using react-navigation with react native? As in the picture , How do I do circle tab menu? react-native-svg path should I use?

Image Here

I tried this code :

export default class TabNavigatorComponent extends Component {
constructor(props) {
    super(props);
}
render() {
    return (
        <View style={styles.wrapper}>
            <View style={styles.container}>
                <View style={styles.tabContainer}>
                    <Text>Tab1</Text>
                </View>
                <View style={styles.tabContainer}>
                    <Text>Tab2</Text>
                </View>
                <View style={styles.tabContainer}>
                    <Text>Tab3</Text>
                </View>
            </View>
        </View>
    )
  }
 }

My style code :

const styles=StyleSheet.create({
  wrapper:{
    flex:1,
    display: 'flex',
    justifyContent:'flex-end',
    alignItems:'center',
    backgroundColor:colors.white,
},
  container:{
    flexDirection:'row',
  justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: colors.green01,
    height:50,
    width:screenInfo.width,
},
  tabContainer:{

    height:80,
    width:80,
    borderRadius:70,
    borderColor:colors.white,
    borderWidth: 1,
    marginBottom: 20,
    backgroundColor: colors.green01,
},

});
FurkanG.
  • 63
  • 1
  • 5
  • these might help: https://github.com/wix/react-native-navigation/issues/1126, https://github.com/facebook/react-native/issues/2157 – sdn404 Sep 02 '18 at 12:00
  • thank you @sdn404 , I couldn't find the exact answer I was looking for, unfortunately, but it was still helpful. – FurkanG. Sep 02 '18 at 19:19

1 Answers1

0

you should read this guide from react navigation specially tab navigation. then you can get style to it like this library or others.

eureka
  • 141
  • 14
  • I did this, but my problem was I couldn't design the picture.As in the picture , How do I do circle tab menu? react-native-svg path should I use? – FurkanG. Sep 02 '18 at 10:18