react-native-dialog-view

The react-native-dialog-view is an animated overlay that can help you to display on the screen a pop-up/modal/dialog-view. This is a more straightforward solution to the react-native-modal. This implementation is a simpler solution for a modal that is not using the react-native-modal and it uses the react-native-reanimated for a simple animation and the react-native-portal to be above everything. You can display more DialogView modals over each other. Default animation Slide Up Fade/Slide Down Fade.

Installation

npm install react-native-dialog-view

or

yarn add react-native-dialog-view

Packages

Package	Version
react-native-reanimated	^3.7.1
react-native-portal	^1.0.14
react-native-screens	^3.20.0

Setup

Add the DialogViewProvider to your App.ts files

import { DialogViewProvider } from 'react-native-dialog-view';

// ...

<Provider store={store}>
  <DialogViewProvider>
    <NavigationProvider>
      <MainNavigator />
    </NavigationProvider>
  </DialogViewProvider>
</Provider>;

Usage

import { DialogView } from 'react-native-dialog-view';

// ...

<DialogView
  visible={isVisible}
  animationTime={300} // default
  hideModal={hideModal}
>
  <YourDesignedModal />
</DialogView>;

Props

Name	Required	Type	Description
visible	required	boolean	This variable is used to display the overview
children	required	ReactNode	-
animationTime	optional	number	This variable is used to set the speed of the entrance/exit animation of the overlay
animationIn	optional	number	This variable is used to set entry animation for the overlay. Default FadeIn. For more animations check reanimated.
animationOut	optional	number	This variable is used to set exit animation for the overlay. Default FadeOut. For more animations check reanimated.
onPressBackdrop	optional	function	This function is called when the use presses on the overlay
backdropColor	optional	string	This variable is used to change the background color of the overlay
overlayStyle	optional	ViewStyle	This prop can be used to change the style of the overlay

Example

import React, { useMemo, useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { DialogView } from 'react-native-dialog-view';

const HomeScreen = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  return (
    <View style={{flex: 1}}>
      <TouchableOpacity
        style={{
          with:100,
          height:100
        }}
        onPress={() => setIsModalVisible(true)}
      >
        <Text>{Show modal}</Text>
      </TouchableOpacity>
      <DialogView
        visible={isModalVisible}
        backdropColor={'rgba(0, 0, 0, 0.2)'}
        overlayStyle={{ justifyContent: 'center' }}
        onPressBackdrop={() => setIsModalVisible(true)}
      >
        <View style={{
          width: 100,
          height: 100
        }}>
          <Text style={styles.text}>{This is a modal}</Text>
          <TouchableOpacity
            style={{
              with:100,
              height:100
            }}
            onPress={() => setIsModalVisible(false)}
          >
            <Text style={styles.text}>{Hide Modal}</Text>
          </TouchableOpacity>
        </View>
      </DialogView>
    </View>
  );
};

export default HomeScreen;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library