React Native - Android position absolute buttons are untappable - react-native

Question

I have a react native component that handles comunication between two peers using WebRTC.
Everything works perfectly on ios but on android the buttons are unclickable and i am pretty sure its because of the position:absolute, the buttons rendering somewhere behind a element and because of that they are untappable.
My question is ... what am i doing wrong? Why are they rendering but they are untappable on android?
The buttons are: End call positioned center bottom and switch camera positioned right bottom.
PS: I removed most of the component logic as it was irelevant to the question.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { RTCView } from 'react-native-webrtc';
import WebSocketWrapper from '../components/generic/WebSocketWrapper/WebSocketWrapper';
import { Image, StyleSheet, View, Text, Platform, ActivityIndicator, Dimensions } from 'react-native';
import RNSecureStorage, { ACCESSIBLE } from 'rn-secure-storage';
import WebRtcPeer from 'react-native-kurento-utils';
import { COLORS } from '../styles/colors';
import { SafeAreaView } from 'react-navigation';
import axios from 'axios';
import Toast from 'react-native-root-toast';
import Icon from 'react-native-vector-icons/MaterialIcons';
import IconIonicons from 'react-native-vector-icons/Ionicons';
import { TouchableOpacity } from 'react-native-gesture-handler';
import logger from '#/logging.service';
import utils from '#/utils.service';
const BTN_CIRCLE_SIZE = 60;
const ICON_CIRCLE_SIZE = BTN_CIRCLE_SIZE / 2;
const styles = StyleSheet.create({
rtcViewsContainer: {},
remoteView: {
alignSelf: 'center',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: '#000000'
},
selfView: {
position: 'absolute',
alignSelf: 'flex-start',
width: 150,
height: 150,
left: 16,
bottom: 32,
borderWidth: 0.5
},
textContainer: {
flex: 1,
padding: 32,
width: '100%',
alignItems: 'center',
justifyContent: 'center'
},
introductionText: {
justifyContent: 'center',
alignItems: 'center',
fontSize: 13,
lineHeight: 22,
textAlign: 'center'
},
logo: {
alignSelf: 'center',
height: 70,
width: 150
},
logoContainer: {
height: 70,
position: 'absolute',
top: 0,
left: 0,
right: 0,
justifyContent: 'center',
alignItems: 'center'
},
endCallIconContainer: {
position: 'absolute',
zIndex: 100,
bottom: 32,
width: BTN_CIRCLE_SIZE,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row'
},
endCallIconTouchable: {
width: BTN_CIRCLE_SIZE,
height: BTN_CIRCLE_SIZE,
borderRadius: BTN_CIRCLE_SIZE / 2,
alignSelf: 'center',
zIndex: 110,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
switchCameraIconTouchable: {
width: BTN_CIRCLE_SIZE,
height: BTN_CIRCLE_SIZE,
borderRadius: BTN_CIRCLE_SIZE / 2,
alignSelf: 'flex-end',
zIndex: 110,
justifyContent: 'center',
alignItems: 'center'
},
switchCameraIcon: {
width: BTN_CIRCLE_SIZE,
height: BTN_CIRCLE_SIZE
},
endCallIcon: {
alignSelf: 'center'
}
});
export default class VideoCallIdentification extends Component {
static navigationOptions = {
header: null
};
displayRTCViews() {
return !!(this.state.remoteURL && this.state.videoURL);
}
getText() {
if (this.state.CALL_STATE === this.CALL_STATES.FINISHED_CALL) {
return 'Please wait ...';
} else if (this.state.REGISTERED_STATE === this.CALL_STATES.REGISTERED) {
return 'An agent will be with you soon. You will be prompted to give access to your microphone and camera in order for the video call to proceed!';
}
}
componentWillUnmount() {
this.stopCommunication();
}
getRemoveViewDimensions() {
return {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
};
}
onSocketError(e) {
logger.log('!!!!!!!!!!!!!!! Socket Erorr!', e);
utils.toast('An unexpected error has ocurred!');
this.stopWebRtc();
this.props.navigation.navigate('CompleteAccountPage');
}
getEndCallBarSize() {
return {
left: Dimensions.get('window').width / 2 - BTN_CIRCLE_SIZE / 2,
height: BTN_CIRCLE_SIZE
};
}
getSwitchCameraBarSize() {
return {
right: 32,
height: BTN_CIRCLE_SIZE
};
}
changeCamera() {
this.webRtcConnection.toggleCamera();
}
render() {
return (
<View
style={{ marginTop: 0, paddingLeft: 0, paddingRight: 0, marginBottom: 0, flex: 1, width: '100%', ...this.getRemoveViewDimensions() }}
containerStyle={{ flex: 1, width: '100%', ...this.getRemoveViewDimensions() }}
>
<SafeAreaView style={{ ...this.getRemoveViewDimensions(), position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
{this.displayRTCViews() ? (
<View>
<View style={{ ...styles.rtcViewsContainer, ...this.getRemoveViewDimensions() }}>
<RTCView streamURL={this.state.remoteURL} style={{ ...styles.remoteView, ...this.getRemoveViewDimensions() }} />
<RTCView streamURL={this.state.videoURL} style={styles.selfView} />
</View>
<View style={{ ...styles.endCallIconContainer, ...this.getEndCallBarSize() }}>
<TouchableOpacity style={styles.endCallIconTouchable} onPress={() => this.stopCommunication(true).bind(this)}>
<Icon style={styles.endCallIcon} size={ICON_CIRCLE_SIZE} name="call-end" color="#ffffff" />
</TouchableOpacity>
</View>
<View style={{ ...styles.endCallIconContainer, ...this.getSwitchCameraBarSize() }}>
<TouchableOpacity style={styles.switchCameraIconTouchable} onPress={() => this.changeCamera(true)}>
<IconIonicons style={styles.endCallIcon} size={BTN_CIRCLE_SIZE} name="ios-reverse-camera" color="#ffffff" />
</TouchableOpacity>
</View>
</View>
) : (
<View style={styles.textContainer}>
<View style={styles.logoContainer}>
<Image source={require('../assets/images/logoAndNameColored.png')} style={styles.logo} resizeMode="contain" />
</View>
<Text style={styles.introductionText}>{this.getText()}</Text>
<ActivityIndicator style={{ marginTop: 22 }} size="large" color={COLORS.APP_PURPLE} />
</View>
)}
<WebSocketWrapper
ref={ref => {
if (!this.state.socket) {
this.setState({ socket: ref });
}
}}
onError={this.onSocketError.bind(this)}
onOpen={this.onSocketOpen.bind(this)}
url={this.state.socketUrl}
onMessage={this.onmessage.bind(this)}
/>
</SafeAreaView>
</View>
);
}
}
VideoCallIdentification.propTypes = {
navigation: PropTypes.object
};