fixed keyboard visibility handler for android and iOS

Author: mCodex

README.md

@@ -1,6 +1,6 @@
 <img alt="RNRooster" src="./cover.png" />
 
-An elegant Toast solution for react-native apps. Built using Typescript, hooks, contexts and providers. It works on Android and iOS platforms
+An elegant Toast solution for react-native apps. Built using Typescript, hooks and context. It works on Android and iOS platforms
 
 <p align="center">
   <img alt="Demo" src="./demo.gif" />
@@ -10,18 +10,17 @@ An elegant Toast solution for react-native apps. Built using Typescript, hooks,
 
 I've been working on React-Native projects for a long time and I use toast very often, but I still haven't found a library that is flexible enough for handling toasts. So, I decided to work on this to build a flexible and functional Toast library powerful like [react-toastify](https://github.com/fkhadra/react-toastify)
 
+## ⬇️ Installation
 
-## 📦 Features
+```bash
+yarn add react-native-rooster styled-components
+```
 
-- [x] Automatically keyboard listener. If keyboard is open the toast will not be hidden by it
+or
 
-- [x] Support for different types of toasts (success, info, warning)
-- [ ] Support for different positions (top, center, top-left, top-right and so on...)
-- [ ] Support for icons
-- [ ] Support for multiple toasts being shown at the same time
-- [ ] Support for toasts be used inside regular functions not only components' functions
-
-Have more ideas? Put it here!
+```bash
+npm i react-native-rooster styled-components
+```
 
 ## 🛠 How it works
 
@@ -41,7 +40,8 @@ Now you can use our hooks to show your toasts:
 import { useToast } from 'react-native-rooster';
 
 addToast({
-  title: 'Error',
+  type: 'success', //optional - default: info
+  title: 'Error', //optional - default: none
   message: 'An error ocurred'
 })
 ```
@@ -64,10 +64,14 @@ Removes the last toast from screen.
 
 You can change some configs globally. Right now, we only support `bgColor` for each type of toast. The default colors for each type of toast are:
 
-* <p style="color:#7890f0;">Info: #7890f0</p> 
-* <p style="color:#35d0ba;">Success: #35d0ba</p> 
-* <p style="color:#ff9100;">Warning: #ff9100</p> 
-* <p style="color:#d92027;">Error: #d92027</p> 
+- ![#7890f0](https://via.placeholder.com/15/7890f0/000000?text=+) `Info: #7890f0`
+
+- ![#35d0ba](https://via.placeholder.com/15/35d0ba/000000?text=+) `Success: #35d0ba`
+
+- ![#ff9100](https://via.placeholder.com/15/ff9100/000000?text=+) `Warning: #ff9100`
+
+- ![#d92027](https://via.placeholder.com/15/d92027/000000?text=+) `Error: #d92027`
+
 
 For example:
 
@@ -81,6 +85,18 @@ addToast({
 })
 ```
 
+## 📦 Features
+
+- [x] Automatically keyboard listener. If keyboard is open the toast will not be hidden by it
+
+- [x] Support for different types of toasts (success, info, warning)
+- [ ] Support for different positions (top, center, top-left, top-right and so on...)
+- [ ] Support for icons
+- [ ] Support for multiple toasts being shown at the same time
+- [ ] Support for toasts be used inside regular functions not only components' functions
+
+Have more ideas? Put it here!
+
 ## 🤝 Contributing
 
 You can clone this repository and just run:

demo.gif

@@ -39,7 +39,7 @@
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react": "^7.20.4",
     "eslint-plugin-react-hooks": "^4.0.8",
     "jest": "^26.1.0",
     "metro-react-native-babel-preset": "^0.61.0",

example/package.json

@@ -2,7 +2,7 @@
   "version": "v1",
   "packages": {
     "react-native-rooster": {
-      "signature": "d1a5cabae7fc1734e46439e949739b0b",
+      "signature": "7e82ec7ac183ad6321c085bf0463484e",
       "file": true
     }
   }

example/yalc.lock

@@ -2802,10 +2802,10 @@ eslint-plugin-react-hooks@^4.0.8:
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.8.tgz#a9b1e3d57475ccd18276882eff3d6cba00da7a56"
   integrity sha512-6SSb5AiMCPd8FDJrzah+Z4F44P2CdOaK026cXFV+o/xSRzfOiV1FNFeLl2z6xm3yqWOQEZ5OfVgiec90qV2xrQ==
 
-eslint-plugin-react@^7.20.3:
-  version "7.20.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.3.tgz#0590525e7eb83890ce71f73c2cf836284ad8c2f1"
-  integrity sha512-txbo090buDeyV0ugF3YMWrzLIUqpYTsWSDZV9xLSmExE1P/Kmgg9++PD931r+KEWS66O1c9R4srLVVHmeHpoAg==
+eslint-plugin-react@^7.20.4:
+  version "7.20.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.4.tgz#c14d2631221ec694ddd84557d7152f44b66e4aa0"
+  integrity sha512-y4DOQ0LrzuDQFEAnYFGjJMRHQQqfTco02qiWI00eGQYikHTzC15S5aRHGWSffnThv8sBpsmFBLky3K5keniAJg==
   dependencies:
     array-includes "^3.1.1"
     array.prototype.flatmap "^1.2.3"
@@ -5916,7 +5916,7 @@ react-native-reanimated@^1.10.1:
     fbjs "^1.0.0"
 
 "react-native-rooster@file:.yalc/react-native-rooster":
-  version "1.0.0-65dd391c"
+  version "1.0.0"
 
 react-native-safe-area-context@^3.1.1:
   version "3.1.1"

example/yarn.lock

@@ -5,7 +5,13 @@
   "main": "build/index.js",
   "module": "build/index.es.js",
   "jsnext:main": "build/index.es.js",
-  "keywords": [],
+  "keywords": [
+    "react-native",
+    "react-native-rooster",
+    "ios",
+    "android",
+    "toast"
+  ],
   "author": "mCodex",
   "license": "MIT",
   "homepage": "https://github.com/mcodex/react-native-rooster",

package.json

@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { KeyboardAvoidingView, Platform } from 'react-native';
 
-import useKeyboard from 'hooks/useKeyboard';
 import useToast from 'hooks/useToast';
+import useKeyboard from 'hooks/useKeyboard';
 
 import { Container, Title, Message } from './styles';
 
@@ -29,20 +30,29 @@ const Toast: React.FC<IToastComponent> = (props) => {
     });
   }, [messages, removeToast]);
 
+  /**
+   * @TODO find a better way to handle Toast's visibility when keyboard is opened.
+   * On Android KeyboardAvoidingView works perfectly, but not on iOS.
+   * On the other hand, the useKeyboard works perfectly on iOS, but not on Android which gives wrong calculation
+   */
+  const handleBottomPadding = useMemo(() => {
+    return Platform.OS === 'ios' ? keyboardHeight : 20;
+  }, [keyboardHeight]);
+
   return (
-    <>
+    <KeyboardAvoidingView>
       {messages.map(({ id, title, message, type }) => (
         <Container
           key={id}
-          bottom={keyboardHeight}
+          bottom={handleBottomPadding}
           type={type}
           bgColor={bgColor}
         >
           {title && <Title>{title}</Title>}
           <Message>{message}</Message>
         </Container>
       ))}
-    </>
+    </KeyboardAvoidingView>
   );
 };