title: Make curve in Bottom Tab navigation React native
body: <p><a href="https://i.stack.imgur.com/sYipx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sYipx.png" alt="Curved Bottom Tab Bar" /></a></p>
  <blockquote>
  <p>I want to implement this design using React Native. For navigation
  purpose I am using React Navigation 5. I tried using react-native SVG. Not having good knowledge in svg designing.
  Here is the sample code.</p>
  </blockquote>
  <pre><code>import Svg, { Path } from 'react-native-svg';
  import * as shape from 'd3-shape';
  </code></pre>
  <p>const { width } = Dimensions.get('window');</p>
  <pre><code>const height = 64;
  
  const tabWidth = width / 4;
  
  const AnimatedSvg = Animated.createAnimatedComponent(Svg)
  
  const left = shape.line()
      .x(d =&gt; d.x)
      .y(d =&gt; d.y)
      ([
          { x: 0, y: 0 },
          { x: width, y: 0 }
      ]);
  
  const right = shape.line()
      .x(d =&gt; d.x)
      .y(d =&gt; d.y)
      ([
          { x: width + tabWidth, y: 0 },
          { x: width * 2, y: 0 },
          { x: width * 2, y: height },
          { x: 0, y: height },
          { x: 0, y: 0 },
      ])
  
  const tab = shape.line()
      .x(d =&gt; d.x)
      .y(d =&gt; d.y)
      .curve(shape.curveBasis)
      ([
          { x: width, y: 0 },
          { x: width + 5, y: 0 },
          { x: width + 10, y: 0 },
          { x: width + 15, y: height },
          { x: width + tabWidth - 15, y: height },
          { x: width + tabWidth - 10, y: 10 },
          { x: width + tabWidth -5, y: 0 },
      ])
  
  const d = `${right} ${left} ${tab}`;
  
  
  const Test = () =&gt; {
      return (
          &lt;SafeAreaView style={{ flex: 1 }}&gt;
              &lt;View style={{ flex: 1, backgroundColor: '#ea3345', justifyContent: 'flex-end' }}&gt;
                  &lt;View style={{ height }}&gt;
                      &lt;AnimatedSvg
                          style={{
                              transform:[
                                  {
                                      translateX:-100
                                  }
                              ]
                          }} 
                          width={width*2} 
                          {...{height}}&gt;
                          &lt;Path {...{ d }} fill=&quot;white&quot; /&gt;
                      &lt;/AnimatedSvg&gt;
                      
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/SafeAreaView&gt;
      )
  }
  
  export default Test
  </code></pre>
  <blockquote>
  <p>Please help me to achieve this kind of design. Thanks in advance.</p>
  </blockquote>