Neapolitan Pizza Margherita

    react-native-backdrop

    2.1.2 • Public • Published

    React Native Backdrop

    React Native Backdrop component built with material guidelines for android and ios

    | Without closedHeight | With closedHeight |

    Installation

    $ npm install react-native-backdrop --save

    Usage

    import { Backdrop } from "react-native-backdrop";
     
    const App = () => {
      const [visible, setVisible] = useState(false);
      
      const handleOpen = () => {
        setVisible(true);
      };
      
      const handleClose = () => {
        setVisible(false);
      };
     
      return (
        <Fragment>
          <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <TouchableOpacity
              onPress={() => setVisible(true)}
              style={{
                width: 200,
                height: 40,
                justifyContent: 'center',
                alignItems: 'center',
                elevation: 1,
                backgroundColor: '#fff',
              }}>
              <Text>Handle Backdrop</Text>
            </TouchableOpacity>
          </View>
          <Backdrop
            visible={visible}
            handleOpen={handleOpen}
            handleClose={handleClose}
            onClose={() => {}}
            swipeConfig={{
              velocityThreshold: 0.3,
              directionalOffsetThreshold: 80,
            }}
            animationConfig={{
              speed: 14,
              bounciness: 4,
            }}
            overlayColor="rgba(0,0,0,0.32)"
            backdropStyle={{
              backgroundColor: '#fff',
            }}>
            <View>
              <Text>Backdrop Content</Text>
            </View>
          </Backdrop>
        );
    }
     
     

    Backdrop Properties

    Prop Description Default
    children Content of backdrop (required)
    visible Whether the backdrop is visible (required, boolean) false
    handleOpen Function to open backdrop (required, function) () => {}
    handleClose Function to close backdrop (required, function) () => {}
    beforeClose Callback that is called before close animation () => {}
    afterClose Callback that is called after close animation () => {}
    beforeOpen Callback that is called before open animation () => {}
    afterOpen Callback that is called after open animation () => {}
    animationConfig Configures Open and Close Animation speed and bounciness {speed: 14, bounciness: 4}
    swipeConfig Configures Swipe Gesture to close backdrop {velocityThreshold: 0.3, directionalOffsetThreshold: 80}
    backdropStyle Style object for backdrop styling {}
    containerStyle Style object for container styling { backgroundColor: "#fff" }
    overlayColor Color of backdrop overlay rgba(0, 0, 0, 0.32)
    header Display custom header in backdrop () => (<View style={styles.closePlateContainer}><View style={styles.closePlate} /></View>)
    closedHeight Height of closed backdrop that will be visible and touchable 0
    closeOnBackButton Close backdrop on back button press on android false

    velocityThreshold - Velocity that has to be breached in order for swipe to be triggered (vx and vy properties of gestureState) directionalOffsetThreshold - Absolute offset that shouldn't be breached for swipe to be triggered (dy for horizontal swipe, dx for vertical swipe)

    License

    MIT License. © Alexander Bogdanov 2019-

    Install

    npm i react-native-backdrop

    DownloadsWeekly Downloads

    112

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    114 MB

    Total Files

    1601

    Last publish

    Collaborators

    • tmmgn