0

I have written the above reusable component for modal but when I click on outside the modal I want to close the Modal, for that I have used TouchableWithoutFeedback but onPress I have added props, I don't want to use props I want to add logic in this code itself so that I don't have to call that props wherever I'll be using this component. please let me know how I can achieve this

import React, { FunctionComponent, useState } from 'react';
import { Modal, FlatList,TouchableWithoutFeedback } from 'react-native';

interface Props {
  visible: boolean;
  onClose: () => void;
}
const BottomSheet: FunctionComponent<Props> = (props) => {
  const [showBottomSheet,setBottomSheet]=useState(true);

  if (!showBottomSheet) 
    return null
    return (
      <Modal animationType={ANIMATIONS.SlideType} transparent={true} visible={props.visible}>
        <TouchableWithoutFeedback onPress={() => setBottomSheet(false)}>
          <View style={Styles.opacityContainer}></View>
        </TouchableWithoutFeedback>
        <View style={Styles.container}>
          <View style={Styles.headerContainer}>
            <View style={[Styles.header, Styles.directionRow]}>
              <View>
                <Text style={Styles.headerText}>Add</Text>
              </View>
              <View style={Styles.iconContainer}>
                <Icon
                  name={cancel}
                  size={18}
                  onPress={props.onClose}
                />
              </View>
            </View>
          </View>
          <View style={Styles.viewContainer}>
            <SafeAreaView>
              <FlatList
                horizontal={false}
                data={props.navData}
                renderItem={renderActions}
                keyExtractor={(item) => item.id}
              />
            </SafeAreaView>
          </View>
        </View>
      </Modal>
    );
};

This is the other file where I am using the above reusable component

const [showBottomSheet, setShowBottomSheet] = useState(false);
  const hideBottomSheet = () => {
    setShowBottomSheet(false);
  };


 <View style={Styles.profileContainer}>
    <AddNewButton
      onButtonPress={() => {
        setShowBottomSheet(true);
      }}
      buttonStyle={Styles.plusButton}
      iconObject={{
        iconName: plus,
        iconSize: Sizes.plusLargeSize,
        iconStyle: Styles.Icon,
      }}
    />
    <BottomSheet
      visible={showBottomSheet}
      onClose={hideBottomSheet}
   />
  </View>
POOJA
  • 23
  • 4
  • Does this answer your question? [Close react native modal by clicking on overlay?](https://stackoverflow.com/questions/40483034/close-react-native-modal-by-clicking-on-overlay) – Guruparan Giritharan Feb 28 '21 at 16:42
  • @GuruparanGiritharan It is not working properly when I click on button to open a Modal it gets opened and when I click outside it gets closed till here it is working properly but when again I click on a button to open Modal it is not getting opened can you please check the above code I have edit it. – POOJA Mar 03 '21 at 07:03
  • In TouchableWithoutFeedback onPress={() => setBottomSheet(false)} you should call props.onClose() not setBottomSheet no need for a local state here – Guruparan Giritharan Mar 03 '21 at 07:15
  • @GuruparanGiritharan I can't use props in TouchableWithoutFeedback as I directly want to add the logic in this file itself so that I don't have to call props while using this component, is there any other way to execute this without using props. – POOJA Mar 03 '21 at 08:43
  • You are making your own modal and the parent component should manage the visibility not the component itself – Guruparan Giritharan Mar 03 '21 at 11:56

0 Answers0