GithubHelp home page GithubHelp logo

muhammeddeniz / rn-popup-modal Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 0.0 2.88 MB

Toast and modal for react native projects

License: MIT License

JavaScript 10.68% TypeScript 89.32%
react-native typescript

rn-popup-modal's Introduction

license version type

rn-toast-modal

Popup and modal for react native projects

Installation

yarn add rn-toast-modal
npm install rn-toast-modal

this package use svg for that make sure you have react-native-svg package.

yarn add react-native-svg

install pods for ios

cd ios && pod install



Toast


Success Error Warning Info




Modal


Success Error




Toast Usage


import React, { useState } from 'react';
import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import { Toast, Base } from 'rn-toast-modal';

// ...

export default function App() {
  const [showToast, setShowToast] = useState<boolean>(false);

  const showToastFunc = () => setShowToast(true);

  return (
    <Base>
      <View style={styles.container}>
        <TouchableOpacity onPress={showToastFunc}>
          <Text>Call Toast</Text>
        </TouchableOpacity>
      </View>

      <Toast type="Info" showToast={showToast} setShowToast={setShowToast} />
    </Base>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});


Default duration value is 3000ms. If you don`t want to toast disapare set duration props to -1.

<Toast
  type="Info"
  showToast={showToast}
  setShowToast={setShowToast}
  duration={-1}
/>




Modal Usage


import React, { useState } from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { Modal, Base } from 'rn-toast-modal';

// ...

export default function App() {
  const [showModal, setShowModal] = useState<boolean>(false);

  const showModalFunc = () => setShowModal(true);

  return (
    <Base>
      <View style={styles.container}>
        <TouchableOpacity onPress={showModalFunc}>
          <Text>Call Modal</Text>
        </TouchableOpacity>
      </View>

      <Modal modalType="Error" visible={showModal} setVisible={setShowModal} />
    </Base>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});




Toast Props


Name Default Value Type
title Default string
text Default string
backgroundColor undefined string
duration 2000 number
showToast false boolean
setShowToast () => {} Function (useState set function)
type "Success" 'Success' | 'Info' | 'Warning' | 'Error'




Modal Props


Name Default Value Type
title Default string
text Default string
leftButtonText Cancel string
rightButtonText Default string
visible false boolean
setVisible () => {} Function (useState set function)
onRightButtonPress () => {} Function
modalType "Success" 'Success' | 'Error'





Contributing

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


Author

Muhammed Deniz


License

MIT

rn-popup-modal's People

Contributors

muhammeddeniz avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.