How to stopPropagation correctly in ReactNative (Expo CLI)

Question

At this point Im having an issue with one modal. This is basically the idea:

I want to open a MODAL to have filters availables, the user can use this filters and find their results. The problem is , every time a button of filter is press or to remove any filter, the modal is closing. I tried using

onTouchEnd={(e) => {
     e.stopPropagation();
   }}

But is not working or maybe i am placing the code in a wrong place. My experience with React Native Expo CLI is not so big. Here is a visual help:

Visual Filters Modal

This is the parent element code (MODAL):

<>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert('Modal has been closed.');
                    setModalVisible(!modalVisible);
                }}>
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        <Text style={styles.modalText}>Hello World!</Text>
                        <ScrollView
                            style={styles.filterBoxContainer}>
                            <Filter data={category} primary={true} text="Select category:" />
                            <Filter data={cuisine} text="Select cuisine:" />
                            <Filter data={tags} large={true} text="Select your preferences:" />
                            <View style={styles.moreFilters}>
                                <Text style={styles.text} onPress={toggleMoreFilters}>Use {moreFilters ? "less" : "more"} filters
                                    {" "}
                                    <AntDesign name={moreFilters ? "up" : "down"} size={16} color="black" />
                                </Text>

                            </View>
                            {
                                moreFilters
                                    ? <>
                                        <Filter data={mealType} text="Select meal time:" />
                                        <Filter data={district} large={true} text="Select district:" />
                                    </>
                                    : <Text></Text> //?Should close with a Text Component. RN things.
                            }
                        </ScrollView>
                        {
                            activeFilter.primary !== "" || activeFilter.secondary.length !== 0
                                ? <>
                                    <ActiveBox data={activeFilter} />
                                    <Text style={[styles.text, styles.found]}>{
                                        filteredLocations.length === 1
                                            ? '1 location'
                                            : `${filteredLocations.length} locations`
                                    } found matching your {isPremium ? '' : 'FREE '}search </Text>
                                </>
                                : <Text></Text>
                        }
                        <Pressable
                            style={[styles.button, styles.buttonClose]}
                            onPress={() => setModalVisible(!modalVisible)}>
                            <Text style={styles.textStyle}>Hide Modal</Text>
                        </Pressable>
                    </View>
                </View>
            </Modal>
            <Pressable style={[styles.button, styles.buttonOpen]} onPress={() => setModalVisible(true)}>
                <Text style={styles.textStyle}>Search</Text>
            </Pressable>
        </>

This is the filter code (for activeFitler box i will do what you guys recommend).

<View style={styles.container}>
      <Text style={styles.title}>{props.text}</Text>
      <FlatList
        horizontal
        showsHorizontalScrollIndicator={false} //? Ugly bar out!
        data={data}
        initialScrollIndex={0} //? This allow the menu start in the end.
        //? Need more work.
        getItemLayout={(data, index) => (
            {length: 100, offset: 40 * index, index}
  )}
        //? "item" is CORE name. 
        keyExtractor={item => item}
        //? BODY
        renderItem={({ item, index }) => {
          let isActive = allFilters.includes(item)
          return (
            <View style={
              isActive
                ? [styles.option, styles.active, { width: props.large ? 100 : 100 }]
                : [styles.option, styles.inactive, { width: props.large ? 100 : 100 }]}>
              <Text
                onPress={() => {
                  props.primary
                    ? dispatch(locationsAction.togglePrimaryFilter(item))
                    : dispatch(locationsAction.toggleSecondaryFilter(item))
                }}
                
                style={isActive ? [styles.active, styles.textTag] : [styles.inactive, styles.textTag]} key={index}>{item}
              </Text>
            </View>

          )
        }}
      />
    </View>

Answer 1

Sorry for the missleading problem.

Actually the source of my problem , was my redux rerendering the locations that were found, thats why my modal was closing all the time.

So I did extra research and the appoach to take is to make a screen that simulates an MODAL.

Here i share the blog ---> https://itnext.io/change-react-native-screen-animation-direction-with-react-navigation-8cec0f66f22