'Make curve in Bottom Tab navigation React native
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.
import Svg, { Path } from 'react-native-svg';
import * as shape from 'd3-shape';
const { width } = Dimensions.get('window');
const height = 64;
const tabWidth = width / 4;
const AnimatedSvg = Animated.createAnimatedComponent(Svg)
const left = shape.line()
.x(d => d.x)
.y(d => d.y)
([
{ x: 0, y: 0 },
{ x: width, y: 0 }
]);
const right = shape.line()
.x(d => d.x)
.y(d => 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 => d.x)
.y(d => 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 = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, backgroundColor: '#ea3345', justifyContent: 'flex-end' }}>
<View style={{ height }}>
<AnimatedSvg
style={{
transform:[
{
translateX:-100
}
]
}}
width={width*2}
{...{height}}>
<Path {...{ d }} fill="white" />
</AnimatedSvg>
</View>
</View>
</SafeAreaView>
)
}
export default Test
Please help me to achieve this kind of design. Thanks in advance.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

