react-native-dialog-view v1.0.12

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

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

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