React Native: How to create a button in the header that overlays the screen content which works on Android and iOs - react-native

Question

I am trying to achieve this layout*. And I've done it, but unfortunately, it is working only on iOs devices. On Android devices, when I press the button in the zone where it overlays the part of the screen which is not in the header doesn't work, even if it is displayed. Also, on Android this property "borderRightColor": ' doesn't seem to work properly. I didn't manage to find if those are some known bugs of the react-native framework or if is something wrong with my code. What can I do to create this layout on both platforms? I've created this snack with my code so far on this issue: https://snack.expo.io/#ivy.mihai/header-with-button-overlaying-the-screen
*Desired layout
How it looks what I've done on Android
How it looks what I've done on iOs

Answer 1

Put the semiCircle View before the button, and avoid zIndex.
The bottom of the button is out of its parent View, so when you touch this part of the button it doesn't work. The only workaround I could find online is to use the TouchableWithoutFeedback (or any Touchable) from the "react-native-gesture-handler" library.
This Touchable renders a bit differently, so I had to change a few things
Then I would add a few advises to go a little further :
Avoid TouchableWithoutFeedback for a button, user needs a Feedback. Prefer TouchableOpacity for ios and TouchableNativeFeedback for android.
Avoid circular icons for buttons. Prefer an icon on a circle View, the background of this View will be used for the ripple effect on android
I clarified the stylesheet and it gives the code below :
import React, { Component } from 'react'
import {
View,
StyleSheet,
Dimensions,
Platform,
TouchableNativeFeedback as RNTouchableNativeFeedback,
} from 'react-native'
import {
TouchableWithoutFeedback,
TouchableOpacity,
TouchableNativeFeedback,
} from 'react-native-gesture-handler'
import { Ionicons } from '#expo/vector-icons'
import { Button } from './src/components/BergamotUI'
const windowWidth = Dimensions.get('window').width
export default class App extends Component {
render() {
const color1 = 'red'
const color2 = 'yellow'
const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableNativeFeedback })
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.buttonContainer}>
<View style={styles.semiCircle} />
<View style={styles.button}>
<Touchable onPress={() => console.log('I am doing something')} useForeground={true}>
<View style={styles.iconWrapper}>
<Ionicons name="ios-add" color={'white'} size={34} />
</View>
</Touchable>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
button: {
overflow: 'hidden',
borderRadius: 50,
},
iconWrapper: {
backgroundColor: 'grey',
width: 50,
height: 50,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.select({ ios: 4, android: 0 }),
paddingLeft: Platform.select({ ios: 2, android: 0 }),
overflow: 'hidden',
},
header: {
width: windowWidth,
height: 108,
borderWidth: 1,
borderColor: 'red',
alignItems: 'flex-end',
justifyContent: 'flex-end',
marginTop: Platform.OS === 'ios' ? Dimensions.StatusBarHeight : 0,
},
buttonContainer: {
position: 'absolute',
right: 10,
width: 80,
height: 40,
borderColor: 'transparent',
flex: 1,
alignItems: 'center',
paddingTop: 15,
//backgroundColor: 'blue',
},
semiCircle: {
position: 'absolute',
bottom: 0,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 1,
width: 80,
height: 40,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
borderBottomWidth: 1,
borderBottomColor: 'white',
},
buttonContainer2: {
borderRadius: 50,
height: 50,
overflow: 'hidden',
},
button2: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
height: 50,
paddingHorizontal: 5,
},
})
Edit 1 : Add the point about the Touchable outside its parents, add TouchableNativeFeedback and TouchableOpacity and rewrote some style