SVG Tab Bottom , we can add it in React Native , but install library svg
5 TAB : width = 500px
1 TAB : width = 100px
tabWidth = width / 5: Chia thanh tab thành 5 phần bằng nhau (tương ứng với 5 icon).
center = width / 2: Tọa độ X tại điểm chính giữa màn hình.
notchRadius = tabWidth / 2: Bán kính của vùng lõm.
notchDepth = 40: Độ sâu của vết lõm xuống phía dưới.
<hr>
<pre><code>M0 0
H${center - notchRadius - 25} =&gt; 250 - 50 - 25 = H175
C${center - notchRadius + 10} 0 =&gt; 250 - 50 + 10 = C210 0
${center - notchRadius + 10} ${notchDepth} =&gt; 250 - 50 + 10 = 210 40
${center} ${notchDepth} =&gt; 250 40
C${center + notchRadius - 10} ${notchDepth} = &gt; 250 + 50 - 10 = C290 40
${center + notchRadius - 10} 0 = &gt; 250 + 50 - 10 = 290 0
${center + notchRadius + 25} 0 = 325 0
H${width}
V80
H0
Z
</code></pre>
Code SVG
<pre><code>&lt;svg width=&quot;500&quot; height=&quot;500&quot; viewbox=&#x27;0 0 500 500&#x27;&gt;
 &lt;path d=&quot;M0 0 H175 C210 0 210 40 250 40 C290 40 290 0 325 0 H500 V60 H0 Z&quot; stroke=&quot;white&quot; fill=&quot;#fff&quot;/&gt;
&lt;/svg&gt;
</code></pre>
We can add in React Native
<pre><code class="language-javascript"> &lt;Svg
 width={width}
 height={80}
 viewBox={`0 0 ${width} 80`}
 preserveAspectRatio=&quot;none&quot;
 &gt;
 &lt;Path
 d={`
 M0 0
 H${center - notchRadius - 25}

 C${center - notchRadius + 10} 0
 ${center - notchRadius + 10} ${notchDepth}
 ${center} ${notchDepth}

 C${center + notchRadius - 10} ${notchDepth}
 ${center + notchRadius - 10} 0
 ${center + notchRadius + 25} 0

 H${width}
 V80
 H0
 Z
 `}
 fill=&quot;#fff&quot;
 /&gt;
</code></pre>
But we can install library “react-native-svg”

Building a Custom Curved Bottom Tab Bar with SVG Path in React Native & Web