diff --git a/.eslintrc.js b/.eslintrc.js index 5a52661..3d94522 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,11 +1,27 @@ module.exports = { - parser: 'babel-eslint', - extends: 'airbnb', - plugins: ['react', 'react-native'], - rules: { - 'react/jsx-filename-extension': 0, - 'no-use-before-define': 0, - 'import/no-unresolved': ['error', { ignore: ['^react'] }], - 'import/extensions': ['error', { ignore: ['^react'] }] + "parser": "@typescript-eslint/parser", + "plugins": ["@typescript-eslint", "prettier"], + "extends": [ + "airbnb", + "plugin:@typescript-eslint/recommended", + "prettier", + "prettier/@typescript-eslint", + "prettier/react" + ], + "settings": { + "import/resolver": { + "node": { + "extensions": [".js", ".jsx", ".ts", ".tsx"] + } + } }, -}; + "rules": { + "react/jsx-filename-extension": ["error", { "extensions": [".ts", ".tsx", ".js", ".jsx"] }], + "import/prefer-default-export": 0, + "import/no-default-export": 2, + "prettier/prettier": "error", + "react/destructuring-assignment": 0, + "@typescript-eslint/explicit-function-return-type": 0, + "@typescript-eslint/no-explicit-any": 0 + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 3c3629e..7c82ca9 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ node_modules +package-lock.json +lib \ No newline at end of file diff --git a/README.md b/README.md index 9728b14..a4affb0 100644 --- a/README.md +++ b/README.md @@ -1,180 +1,78 @@ -## React Native Modal Controller +## React Native Modal Controller 🕹 -Modals can be fiddly in React Native. Lets say for example you have a mostly-fullscreen modal with a form in it and you want to show an error modal after an incorrect submission - you'd have to close the form modal and once `onDismiss` is called open the error modal. +A more ergonomic interface for opening and managing modals in your react native +app. -React Native Modal Controller aims to solve this by providing a control component that manages your one or many modals. It does this by opening a single React Native Modal with a single backdrop. +- 🎣 Uses React hooks +- 🍆 Written in TypeScript +- 💥 Open multiple modals at once (tray and an alert, or whatever) +- 🎩 Fancy animations using `react-native-animatable` -For example, you might want to have a modal and a tray with a picker in it: +For example, you might want to have a modal and a tray: -The code for the above looks like: - -```js -import React from 'react'; -import { StyleSheet, Text, View, Button } from 'react-native'; -import showModal, { PRIORITIES, ModalController } from 'react-native-modal-controller'; -import AlertModal from './components/alert'; -import TrayModal from './components/tray'; - -export default class App extends React.Component { - handleShowtray = () => { - showModal({ - name: 'TRAY', - priority: PRIORITIES.OVERRIDE, - modalProps: { - message: 'Hey tray.', - onOpenAlert: () => this.handleOpen(PRIORITIES.STANDARD), - }, - }); - }; - handleOpen = (priority) => { - showModal({ - name: 'ALERT', - priority: priority || PRIORITIES.OVERRIDE, - modalProps: { - message: 'Hello, modal.', - onOpenAnother: this.handleOpen, - onOpenTray: this.handleShowtray - }, - }); - }; - - render() { - return ( - -