Take a look at the image showcasing what I aim to achieve with the green button in the layout: https://i.sstatic.net/cvzrK.png
Do you see the border above view B? My goal is to have a curved border around the bottom bar.
To accomplish this, I've structured views as follows -
import React from 'react'
import { Text, View } from 'react-native'
class OkScreen extends React.Component {
static navigationOptions = {
header: null
}
render () {
return (
<View
style={{
flexDirection: 'column',
alignSelf: 'stretch',
flexGrow: 1
}}
>
<View
style={{
backgroundColor: 'yellow',
flexGrow: 1
}}
/>
<View
style={{
borderWidth: 1
}}
/>
<View
style={{
backgroundColor: 'white',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
height: 150,
borderTopWidth: 10,
borderTopColor: 'white'
}}
>
<View
style={{
borderWidth: 10,
alignItems: 'center',
justifyContent: 'center',
height: 152,
width: 152,
borderRadius: 76,
bottom: 40
}}
>
<View
style={{
height: 150,
width: 150,
borderRadius: 75,
backgroundColor: 'green',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 10,
borderColor: 'white'
}}
>
<Text
style={{
fontSize: 40
}}
>
B
</Text>
</View>
</View>
</View>
</View>
)
}
}
export default OkScreen
Unfortunately, this method did not yield the desired result and it looks like this -
https://i.sstatic.net/kbGvN.png
If you have any suggestions on alternative approaches that could help me achieve my goal, please feel free to share them. Your input is greatly appreciated.