0

I am working on a react native project and i want to remove a view from the screen when the user clicks outside it's boundaries, Kinda like this but in react native Similar example with vanilla JS on web

For example clicking outside the pink box should remove the box but clicking any of the pink box's children should not.

import * as React from 'react';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
      <View style={styles.child}></View>
      <View style={styles.child}></View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center'},
  box: {backgroundColor: 'pink', width: 200, aspectRatio: '1/1', justifyContent: "space-around"}, 
  child: {backgroundColor: "indigo", height: 40}
});

Joe
  • 1

0 Answers0