react-native-toast-message 1.4.9 → 2.0.0-beta.2

package/package.json

@@ -1,58 +1,60 @@
 {
   "name": "react-native-toast-message",
-  "version": "1.4.9",
+  "version": "2.0.0-beta.2",
   "description": "Toast message component for React Native",
-  "main": "index.js",
-  "scripts": {
-    "hooks:install": "node ./node_modules/husky/bin/install",
-    "lint": "./node_modules/.bin/eslint . --ext=jsx --ext=js",
-    "lint-staged": "./node_modules/.bin/lint-staged",
-    "prettier": "./node_modules/.bin/prettier . --write",
-    "test": "./node_modules/.bin/jest"
-  },
-  "lint-staged": {
-    "**/*.js": [
-      "prettier --write",
-      "eslint"
-    ]
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "/lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/calintamas/react-native-toast-message.git"
   },
   "keywords": [
     "react-native",
     "toast"
   ],
-  "author": "Calin Tamas <calinntamas@gmail.com>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/calintamas/react-native-toast-message.git"
+  "scripts": {
+    "prepare": "husky install",
+    "build": "rm -rf ./lib && tsc",
+    "prettier": "./node_modules/.bin/prettier --write",
+    "lint": "./node_modules/.bin/eslint --fix",
+    "lint-staged": "./node_modules/.bin/lint-staged",
+    "test": "./node_modules/.bin/jest"
   },
+  "author": "Calin Tamas <calintamas2@gmail.com>",
+  "license": "MIT",
   "devDependencies": {
-    "@testing-library/jest-native": "^3.4.3",
-    "@testing-library/react-native": "^7.1.0",
-    "@types/jest": "^26.0.20",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.10.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.2.0",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^4.0.0",
-    "eslint-plugin-react-native-a11y": "^2.0.4",
-    "husky": "^3.1.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.2.2",
-    "metro-react-native-babel-preset": "^0.65.0",
-    "prettier": "2.2.1",
-    "react-test-renderer": "^17.0.1"
+    "@babel/core": "^7.15.8",
+    "@testing-library/jest-native": "^4.0.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react-native": "^8.0.0",
+    "@types/jest": "^27.0.1",
+    "@types/react-native": "^0.66.2",
+    "eslint-config-backpacker-react-ts": "^0.1.0",
+    "husky": "^7.0.2",
+    "import-sort-style-module": "^6.0.0",
+    "jest": "^27.1.1",
+    "lint-staged": "^11.1.2",
+    "metro-react-native-babel-preset": "^0.66.2",
+    "prettier": "^2.4.1",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "react-test-renderer": "^17.0.2",
+    "typescript": "^4.4.3"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.2",
+    "react-native": ">=0.64.2"
   },
-  "dependencies": {
-    "prop-types": "^15.7.2"
+  "importSort": {
+    ".js, .jsx, .ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md}": "yarn prettier",
+    "*.{js,jsx,ts,tsx}": "yarn lint"
   }
 }

package/.github/workflows/publish.yml

@@ -1,22 +0,0 @@
-name: publish
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - run: npm install -g yarn
-      - name: Install dependencies
-        run: yarn
-      - id: publish
-        uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/tag.yml

@@ -1,16 +0,0 @@
-name: Create Tag
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: Klemensas/action-autotag@stable
-        with:
-          GITHUB_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
-          tag_prefix: 'v'

package/.github/workflows/tests.yml

@@ -1,44 +0,0 @@
-name: tests
-
-on: [push, pull_request]
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v1
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Restore yarn cache
-        uses: actions/cache@v2
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn --prefer-offline
-
-      - name: Setup React Native environment
-        run: |
-          yarn add react-native@0.63.4
-          yarn add react@16.13.1
-
-      - name: Run tests
-        run: yarn test --coverage
-
-      - name: Coveralls
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset']
-};

package/index.d.ts

@@ -1,67 +0,0 @@
-import React from 'react';
-import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native'
-
-declare module 'react-native-toast-message' {
-  interface AnyObject {
-    [key: string]: any;
-  }
-
-  export type ToastPosition = 'top' | 'bottom'
-
-  export interface BaseToastProps {
-    leadingIcon?: ImageSourcePropType,
-    trailingIcon?: ImageSourcePropType,
-    text1?: string,
-    text2?: string,
-    onPress?: () => void,
-    onTrailingIconPress?: () => void,
-    onLeadingIconPress?: () => void,
-    style?: ViewStyle,
-    leadingIconContainerStyle?: ViewStyle,
-    trailingIconContainerStyle?: ViewStyle,
-    leadingIconStyle?: ViewStyle,
-    trailingIconStyle?: ViewStyle,
-    contentContainerStyle?: ViewStyle,
-    text1Style?: TextStyle,
-    text2Style?: TextStyle,
-    activeOpacity?: number,
-    text1NumberOfLines: number,
-    text2NumberOfLines: number,
-  }
-  export const BaseToast: React.FC<BaseToastProps>
-
-  export interface ToastProps {
-    ref: (ref: any) => any;
-    config?: AnyObject,
-    style?: ViewStyle,
-    topOffset?: number,
-    bottomOffset?: number,
-    keyboardOffset?: number,
-    visibilityTime?: number,
-    autoHide?: boolean,
-    height?: number,
-    position?: ToastPosition,
-    type?: string
-  }
-
-  export default class Toast extends React.Component<ToastProps> {
-    static show(options: {
-      type: string,
-      position?: ToastPosition,
-      text1?: string,
-      text2?: string,
-      visibilityTime?: number,
-      autoHide?: boolean,
-      topOffset?: number,
-      bottomOffset?: number,
-      props?: AnyObject,
-      onShow?: () => void,
-      onHide?: () => void,
-      onPress?: () => void
-    }): void;
-
-    static hide(): void;
-
-    static setRef(ref: any): any;
-  }
-}

package/index.js

@@ -1,4 +0,0 @@
-import Toast from './src';
-
-export { default as BaseToast } from './src/components/base';
-export default Toast;

package/jest.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  preset: 'react-native',
-  setupFiles: ['./jest.setup.js'],
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect']
-};

package/jest.setup.js

@@ -1 +0,0 @@
-/* eslint-env jest */

package/src/assets/index.js

@@ -1,15 +0,0 @@
-/* eslint-disable global-require */
-
-const assets = {
-  icons: {
-    success: require('./icons/success.png'),
-    error: require('./icons/error.png'),
-    info: require('./icons/info.png'),
-    close: require('./icons/close.png')
-  }
-};
-
-const { icons } = assets;
-
-export { icons };
-export default assets;

package/src/colors/index.js

@@ -1,10 +0,0 @@
-const colors = {
-  white: '#FFF',
-  blazeOrange: '#FE6301',
-  mantis: '#69C779',
-  alto: '#D8D8D8',
-  dustyGray: '#979797',
-  lightSkyBlue: '#87CEFA'
-};
-
-export default colors;

package/src/components/base/index.js

@@ -1,134 +0,0 @@
-import React from 'react';
-import { View, TouchableOpacity, Text } from 'react-native';
-import PropTypes from 'prop-types';
-
-import Icon from '../icon';
-import { icons } from '../../assets';
-import { stylePropType } from '../../utils/prop-types';
-import styles, { HEIGHT } from './styles';
-
-function BaseToast({
-  leadingIcon,
-  trailingIcon,
-  text1,
-  text2,
-  onPress,
-  onLeadingIconPress,
-  onTrailingIconPress,
-  style,
-  leadingIconContainerStyle,
-  trailingIconContainerStyle,
-  leadingIconStyle,
-  trailingIconStyle,
-  contentContainerStyle,
-  text1Style,
-  text2Style,
-  activeOpacity,
-  text1NumberOfLines,
-  text2NumberOfLines
-}) {
-  return (
-    <TouchableOpacity
-      testID='rootView'
-      style={[styles.base, styles.borderLeft, style]}
-      onPress={onPress}
-      activeOpacity={onPress ? activeOpacity : 1}>
-      {leadingIcon && (
-        <TouchableOpacity
-          testID='leadingIcon'
-          style={[styles.leadingIconContainer, leadingIconContainerStyle]}
-          onPress={onLeadingIconPress}
-          activeOpacity={onLeadingIconPress ? activeOpacity : 1}>
-          <Icon
-            style={{ ...styles.leadingIcon, ...leadingIconStyle }}
-            source={leadingIcon}
-          />
-        </TouchableOpacity>
-      )}
-
-      <View
-        testID='contentContainer'
-        style={[styles.contentContainer, contentContainerStyle]}>
-        {text1?.length > 0 && (
-          <View>
-            <Text
-              testID='text1'
-              style={[styles.text1, text1Style]}
-              numberOfLines={text1NumberOfLines}>
-              {text1}
-            </Text>
-          </View>
-        )}
-        {text2?.length > 0 && (
-          <View>
-            <Text
-              testID='text2'
-              style={[styles.text2, text2Style]}
-              numberOfLines={text2NumberOfLines}>
-              {text2}
-            </Text>
-          </View>
-        )}
-      </View>
-
-      {trailingIcon && (
-        <TouchableOpacity
-          testID='trailingIcon'
-          style={[styles.trailingIconContainer, trailingIconContainerStyle]}
-          onPress={onTrailingIconPress}
-          activeOpacity={onTrailingIconPress ? activeOpacity : 1}>
-          <Icon
-            style={{ ...styles.trailingIcon, ...trailingIconStyle }}
-            source={trailingIcon}
-          />
-        </TouchableOpacity>
-      )}
-    </TouchableOpacity>
-  );
-}
-
-BaseToast.HEIGHT = HEIGHT;
-
-BaseToast.propTypes = {
-  leadingIcon: Icon.propTypes.source,
-  trailingIcon: Icon.propTypes.source,
-  text1: PropTypes.string,
-  text2: PropTypes.string,
-  onPress: PropTypes.func,
-  onTrailingIconPress: PropTypes.func,
-  onLeadingIconPress: PropTypes.func,
-  style: stylePropType,
-  leadingIconContainerStyle: stylePropType,
-  trailingIconContainerStyle: stylePropType,
-  leadingIconStyle: stylePropType,
-  trailingIconStyle: stylePropType,
-  contentContainerStyle: stylePropType,
-  text1Style: stylePropType,
-  text2Style: stylePropType,
-  activeOpacity: PropTypes.number,
-  text1NumberOfLines: PropTypes.number,
-  text2NumberOfLines: PropTypes.number
-};
-
-BaseToast.defaultProps = {
-  leadingIcon: undefined,
-  trailingIcon: icons.close,
-  text1: undefined,
-  text2: undefined,
-  onPress: undefined,
-  onLeadingIconPress: undefined,
-  onTrailingIconPress: undefined,
-  style: undefined,
-  leadingIconContainerStyle: undefined,
-  trailingIconContainerStyle: undefined,
-  leadingIconStyle: undefined,
-  trailingIconStyle: undefined,
-  contentContainerStyle: undefined,
-  text1Style: undefined,
-  text2Style: undefined,
-  activeOpacity: 0.8,
-  text1NumberOfLines: 1,
-  text2NumberOfLines: 2
-};
-
-export default BaseToast;

package/src/components/base/styles.js

@@ -1,54 +0,0 @@
-import { StyleSheet } from 'react-native';
-import colors from '../../colors';
-
-export const HEIGHT = 60;
-
-export default StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    height: HEIGHT,
-    width: '90%',
-    borderRadius: 6,
-    backgroundColor: colors.white,
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 2
-  },
-  borderLeft: {
-    borderLeftWidth: 5,
-    borderLeftColor: colors.alto
-  },
-  leadingIconContainer: {
-    width: 50,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  contentContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'flex-start' // in case of rtl the text will start from the right
-  },
-  trailingIconContainer: {
-    width: 40,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  leadingIcon: {
-    width: 20,
-    height: 20
-  },
-  trailingIcon: {
-    width: 9,
-    height: 9
-  },
-  text1: {
-    fontSize: 12,
-    fontWeight: 'bold',
-    marginBottom: 3
-  },
-  text2: {
-    fontSize: 10,
-    color: colors.dustyGray
-  }
-});

package/src/components/error.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import BaseToast from './base';
-import { icons } from '../assets';
-import colors from '../colors';
-
-function ErrorToast(props) {
-  return (
-    <BaseToast
-      {...props}
-      style={{ borderLeftColor: colors.blazeOrange }}
-      leadingIcon={icons.error}
-    />
-  );
-}
-
-ErrorToast.propTypes = BaseToast.propTypes;
-
-export default ErrorToast;

package/src/components/icon/index.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Image } from 'react-native';
-import PropTypes from 'prop-types';
-
-import { stylePropType } from '../../utils/prop-types';
-import styles from './styles';
-
-function Icon({ source, style }) {
-  if (!source) {
-    return null;
-  }
-
-  return (
-    <Image
-      testID='icon'
-      source={source}
-      style={[styles.base, style]}
-      resizeMode='contain'
-    />
-  );
-}
-
-const imageSourcePropType = PropTypes.oneOfType([
-  PropTypes.number,
-  PropTypes.shape({
-    uri: PropTypes.string
-  })
-]);
-
-Icon.propTypes = {
-  source: imageSourcePropType,
-  style: stylePropType
-};
-
-Icon.defaultProps = {
-  source: undefined,
-  style: undefined
-};
-
-export default Icon;

package/src/components/icon/styles.js

@@ -1,8 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-export default StyleSheet.create({
-  base: {
-    height: 16,
-    width: 16
-  }
-});

package/src/components/info.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import BaseToast from './base';
-import { icons } from '../assets';
-import colors from '../colors';
-
-function InfoToast(props) {
-  return (
-    <BaseToast
-      {...props}
-      style={{ borderLeftColor: colors.lightSkyBlue }}
-      leadingIcon={icons.info}
-    />
-  );
-}
-
-InfoToast.propTypes = BaseToast.propTypes;
-
-export default InfoToast;

package/src/components/success.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import BaseToast from './base';
-import { icons } from '../assets';
-import colors from '../colors';
-
-function SuccessToast(props) {
-  return (
-    <BaseToast
-      {...props}
-      style={{ borderLeftColor: colors.mantis }}
-      leadingIcon={icons.success}
-    />
-  );
-}
-
-SuccessToast.propTypes = BaseToast.propTypes;
-
-export default SuccessToast;