Question

54

create a curved bottom navigation (before after implementation)

rated 0 times [ 56] [ 2] / answers: 1 / hits: 9296 / 4 Years ago, wed, july 1, 2020, 12:00:00

How can I achieve this in react native?

So far I have this and I want to implement the middle curve. I don't know to either handle it with a transparent view or switch to SVG completely

and this the tabBar component

/* eslint-disable react/prop-types */

import React, { Component } from 'react'

import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'

import { Colors } from 'App/Theme'



export default class TabBar extends Component {

  render() {

    let {

      renderIcon,

      getLabelText,

      activeTintColor,

      inactiveTintColor,

      onTabPress,

      onTabLongPress,

      getAccessibilityLabel,

      navigation,

      showLabel,

    } = this.props



    let { routes, index: activeRouteIndex } = navigation.state



    return (

      <View style={styles.tabBar}>

        {routes.map((route, routeIndex) => {

          let isRouteActive = routeIndex === activeRouteIndex

          let tintColor = isRouteActive ? activeTintColor : inactiveTintColor



          return (

            <TouchableOpacity

              key={routeIndex}

              style={styles.tab}

              onPress={() => {

                onTabPress({ route })

              }}

              onLongPress={() => {

                onTabLongPress({ route })

              }}

              accessibilityLabel={getAccessibilityLabel({ route })}

            >

              {renderIcon({ route, focused: isRouteActive, tintColor })}

              {showLabel ? <Text>{getLabelText({ route })}</Text> : null}

            </TouchableOpacity>

          )

        })}

      </View>

    )

  }

}



const styles = StyleSheet.create({

  tab: {

    alignItems: 'center',

    flex: 1,

    justifyContent: 'center',

  },

  tabBar: {

    alignSelf: 'center',

    backgroundColor: Colors.primary,

    borderRadius: 50,

    bottom: 10,

    elevation: 2,

    flexDirection: 'row',

    height: 65,

    position: 'absolute',

    width: '95%',

  },

  infinity: {

    width: 80,

    height: 100,

  },

  infinityBefore: {

    position: 'absolute',

    top: 0,

    left: 0,

    width: 0,

    height: 0,

    borderWidth: 20,

    borderColor: 'red',

    borderStyle: 'solid',

    borderTopLeftRadius: 50,

    borderTopRightRadius: 50,

    borderBottomRightRadius: 50,

    borderBottomLeftRadius: 0,

    transform: [{ rotate: '-135deg' }],

  },

  infinityAfter: {

    position: 'absolute',

    top: 0,

    right: 0,

    width: 0,

    height: 0,

    borderWidth: 20,

    borderColor: 'red',

    borderStyle: 'solid',

    borderTopLeftRadius: 50,

    borderTopRightRadius: 0,

    borderBottomRightRadius: 50,

    borderBottomLeftRadius: 50,

    transform: [{ rotate: '-135deg' }],

  },

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

collinisaaka

Add To Favorites

Follow

Total Points: 194

Total Questions: 105

Total Answers: 104

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

collinisaaka questions

1 Compare two arrays of objects, and remove if object value is equal

Wed, Mar 2, 22, 00:00, 2 Years ago

1 REACTJS giving the following error: TypeError: navigate.push is not a function

Tue, Nov 23, 21, 00:00, 3 Years ago

1 ReferenceError: Cannot access before initialization circular dependency

Fri, Jul 9, 21, 00:00, 3 Years ago

1 React Hook useEffect to fetch data from local json file to create a details page

Tue, Sep 15, 20, 00:00, 4 Years ago

1 Is there a replacement for document.execCommand? (or is it safe to use document.execCommand?)

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 4 Years ago destiney · Accepted Answer

here is a demo: https://snack.expo.io/@nomi9995/cf371e

you need to use react-native-svg

yarn add react-native-svg

import React, { Component } from "react";

import {

  Text,

  StyleSheet,

  View,

  Dimensions,

  TouchableHighlight,

} from "react-native";

import Svg, { Circle, Path } from "react-native-svg";



const tabs = [1, 2, 3, 4, 5];

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      pathX: "357",

      pathY: "675",

      pathA: "689",

      pathB: "706",

    };

  }

  render() {

    return (

      <View style={[styles.container]}>

        <View style={[styles.content]}>

          <View style={styles.subContent}>

            {tabs.map((_tabs, i) => {

              return (

                <TouchableHighlight

                  key={i}

                  underlayColor={"transparent"}

                  onPress={() => console.log("onPress")}

                >

                  <View>

                  </View>

                </TouchableHighlight>

              );

            })}

          </View>

          <Svg

            version="1.1"

            id="bottom-bar"

            x="0px"

            y="0px"

            width="100%"

            height="100"

            viewBox="0 0 1092 260"

            space="preserve"

          >

            <Path

              fill={"#373A50"}

              stroke={"#373A50"}

              d={`M30,60h${this.state.pathX}.3c17.2,0,31,14.4,30,31.6c-0.2,2.7-0.3,5.5-0.3,8.2c0,71.2,58.1,129.6,129.4,130c72.1,0.3,130.6-58,130.6-130c0-2.7-0.1-5.4-0.2-8.1C${this.state.pathY}.7,74.5,${this.state.pathA}.5,60,${this.state.pathB}.7,60H1062c16.6,0,30,13.4,30,30v94c0,42-34,76-76,76H76c-42,0-76-34-76-76V90C0,73.4,13.4,60,30,60z`}

            />

            <Circle

              fill={"#7EE6D2"}

              stroke={"#7EE6D2"}

              cx="546"

              cy="100"

              r="100"

            />

          </Svg>

        </View>

      </View>

    );

  }

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    overflow: "hidden",

  },

  content: {

    flexDirection: "column",

    zIndex: 0,

    width: Dimensions.get("window").width - 30,

    marginBottom: "4%",

    left: "4%",

    right: "4%",

    position: "absolute",

    bottom: "1%",

  },

  subContent: {

    flexDirection: "row",

    marginLeft: 15,

    marginRight: 15,

    marginBottom: 10,

    zIndex: 1,

    position: "absolute",

    bottom: 5,

  }

});

i hope this will help you.