How to draw over other apps in React-native - react-native

Question

I was trying to create facebook messenger like chat heads in my react-native app .I used pan responder to create the dragging effect and collapsing to side effect but I am not able to figure out how to make the chat heads visible over other apps or the home screen of the phone.My app has the SYSTEM_ALERT_WINDOW permission included.Here is my code for the chat heads so far.Any lead would be appreciated.
const width = Dimensions.get('window').width
const widthFactor = width / 375
const heightFactor = (Dimensions.get('window').height - 75) / 667
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
showDraggable: true,
dropZoneValues: null,
pan: new Animated.ValueXY(),
}
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{
dx: this.state.pan.x,
dy: this.state.pan.y,
},
]),
onPanResponderRelease: (e, gesture) => {
if (this.isDropZone(gesture)) {
this.setState({
showDraggable: false,
})
} else {
const k =
gesture.dx > 0
? Window.width / 2 - CIRCLE_RADIUS
: 0 - (Window.width / 2 - CIRCLE_RADIUS)
if (gesture.moveY > Window.height - 2 * CIRCLE_RADIUS) {
Animated.spring(this.state.pan, {
toValue: { x: k, y: Window.height - 2 * CIRCLE_RADIUS },
}).start()
} else {
const y = gesture.dy
Animated.spring(this.state.pan, { toValue: { x: k, y } }).start()
}
}
},
})
}
isDropZone(gesture) {
const dz = this.state.dropZoneValues
return gesture.moveY > dz.y && gesture.moveY < dz.y + dz.height
}
renderDraggable() {
if (this.state.showDraggable) {
return (
<View style={styles.draggableContainer}>
<Animated.View
{...this.panResponder.panHandlers}
style={[this.state.pan.getLayout(), styles.circle]}
>
<Text style={styles.text}>Drag me!</Text>
</Animated.View>
</View>
)
}
}
setDropZoneValues(event) {
this.setState({
dropZoneValues: event.nativeEvent.layout,
})
}
render() {
that = this
return (
<View style={styles.mainContainer}>
<View
onLayout={this.setDropZoneValues.bind(this)}
style={styles.dropZone}
>
<Text style={styles.text}>Drop me here!</Text>
</View>
{this.renderDraggable()}
</View>
)
}
}