How to implement curved-start only bottom navigation bar in react/react-native?

Question

I want to make such bottom navigation bar, the curve is fixed there and does not move when you press the tab buttons, tried both svg paths and d3-shapes But could not manage to find the correct points/dimensions to make the end curve

Edit: The provided answer does not suit my case, as it heavily uses absolutely positioned elements and its not flexible with different screens, following that way will cause the bottom navigation bar (which heavily needs a relative layout) to have a-lot of layout and visual bugs

Does this answer your question? How to create a folder-shaped element — jbutler483
– jbutler483, Commented Aug 3, 2022 at 21:14
@jbutler483 not fully since the behaviour of a bottom navigation bar is different from that user needed help with — Extreme Geek
– Extreme Geek, Commented Aug 5, 2022 at 11:41
As always, edit your question with details as to why you think that the duplicate does not answer your question. See the help center article on duplicates for more. Don't just add a bounty to prevent people from closing the question. — Heretic Monkey
– Heretic Monkey, Commented Aug 5, 2022 at 11:46
@DaveNewton that is true, however the answer contained way too many absolutely positioned elements, using this as a bottom navigation bar in an app (that heavily needs relative position) will cause alot of visual and layout bugs — Extreme Geek
– Extreme Geek, Commented Aug 5, 2022 at 11:47

hamzaahzam · Accepted Answer · 2022-08-12 07:55:48Z

You should use 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,
  }
});

The above code will make a rounded view you can update it according to your requirement.

tpliakas · Accepted Answer · 2022-08-07 10:41:27Z

0

You'll have to create your own svg then. Use a tool to help you with the path, like: https://yqnn.github.io/svg-path-editor/ , to create the curves that you need.

and for path start maybe with

M 0 600 Q 500 600 800 600 L 800 250 Q 531 240 500 250 Q 454 250 329 439 Q 250 600 0 600

answered Aug 7, 2022 at 10:41

tpliakas

1,1291 gold badge9 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to implement curved-start only bottom navigation bar in react/react-native?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related