fix: status bar manager on fabric (#200)

Author: mateki0

README.md

@@ -31,6 +31,10 @@
 yarn add react-native-notificated
 ```
 
+## 🔥 New Architecture
+
+React-native-notificated is fully compatible with React new architecture on both Android and iOS.
+
 ## 📖 Documentation
 
 Check the docs here [Click](https://thewidlarzgroup.github.io/react-native-notificated/)

docs/docs/intro/intro.md

@@ -19,13 +19,11 @@ id: intro
 yarn add react-native-notificated
 ```
 
-:::info
-Starting from the latest beta version, you are expected to manually tell the library whether a device has notch or not. Use the `isNotch` prop in the config for it (you can use the `react-native-device-info` for instance).
+## 🔥 New Architecture
 
-We are currently working on improving this part of our API 💪
-:::
+React-native-notificated is fully compatible with React new architecture on both Android and iOS.
 
-### 🛸 Dependencies
+## 🛸 Dependencies
 
 This library requires these dependencies to be installed in your project:
 
@@ -41,7 +39,7 @@ yarn add react-native-reanimated react-native-gesture-handler
 **react-native-gesture-handler** requires additional installation steps: [guide here](https://docs.swmansion.com/react-native-gesture-handler/docs/) 👈
 :::
 
-## ❤️ Built With[](https://gorhom.github.io/react-native-bottom-sheet/#built-with-%EF%B8%8F)
+## ❤️ Built With
 
 - [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated)
 - [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler)

docs/docusaurus.config.js

@@ -24,15 +24,9 @@ const config = {
         docs: {
           sidebarCollapsible: false,
           sidebarPath: require.resolve('./sidebars.js'),
-          // Please change this to your repo.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         blog: {
           showReadingTime: true,
-          // Please change this to your repo.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
@@ -63,59 +57,13 @@ const config = {
             position: 'left',
             label: 'API Reference',
           },
-          // {to: '/blog', label: 'Blog', position: 'left'},
           {
             href: 'https://github.com/TheWidlarzGroup/react-native-notificated',
             label: 'GitHub',
             position: 'right',
           },
         ],
       },
-      // footer: {
-      //   style: 'dark',
-      //   links: [
-      //     {
-      //       title: 'Docs',
-      //       items: [
-      //         {
-      //           label: 'Tutorial',
-      //           to: '/docs/intro',
-      //         },
-      //       ],
-      //     },
-      //     {
-      //       title: 'Community',
-      //       items: [
-      //         {
-      //           label: 'Stack Overflow',
-      //           href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-      //         },
-      //         {
-      //           label: 'Discord',
-      //           href: 'https://discordapp.com/invite/docusaurus',
-      //         },
-      //         {
-      //           label: 'Twitter',
-      //           href: 'https://twitter.com/docusaurus',
-      //         },
-      //       ],
-      //     },
-      //     {
-      //       title: 'More',
-      //       items: [
-      //         {
-      //           label: 'Blog',
-      //           to: '/blog',
-      //         },
-      //         {
-      //           label: 'GitHub',
-      //           href: 'https://github.com/facebook/docusaurus',
-      //         },
-      //       ],
-      //     },
-      //   ],
-      //   copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
-      // },
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,

docs/src/pages/index.tsx

@@ -1,12 +1,15 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import styles from './index.module.css';
-import githubBlackIcon from '../../static/img/githubBlack.png';
-import githubWhiteIcon from '../../static/img/githubWhite.png';
-import isDarkTheme from '@docusaurus/theme-common';
+import React from 'react'
+import Layout from '@theme/Layout'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import styles from './index.module.css'
+import githubBlackIcon from '../../static/img/githubBlack.png'
+import githubWhiteIcon from '../../static/img/githubWhite.png'
+import { useColorMode } from '@docusaurus/theme-common'
 
 function HomepageHero() {
+  const themeData = useColorMode()
+  const isDarkTheme = themeData.colorMode === 'dark'
+
   const buttonStyle = isDarkTheme ? styles.heroButtonWhite : styles.heroButtonBlack
   const iconColor = isDarkTheme ? githubWhiteIcon : githubBlackIcon
   const leftLightningColor = isDarkTheme ? styles.whiteLightningLeft : styles.blackLightningLeft
@@ -20,35 +23,39 @@ function HomepageHero() {
         <div className={styles.heroText}>
           <h1 className={styles.heroTitle}>Blazingly super fast RN notification library</h1>
           <h2 className={styles.heroDescription}>Better than your delivery man!</h2>
-          <div className={styles.underline}/>
+          <div className={styles.underline} />
         </div>
         <div className={styles.heroButtons}>
-          <a href='docs/intro' className={buttonStyle}>OK, let's go</a>
-          <a href='https://github.com/TheWidlarzGroup/react-native-notificated' className={buttonStyle}>
-            <img src={iconColor} alt="github icon"  className={styles.githubIcon}/>
+          <a href="docs/intro" className={buttonStyle}>
+            OK, let's go
+          </a>
+          <a
+            href="https://github.com/TheWidlarzGroup/react-native-notificated"
+            className={buttonStyle}>
+            <img src={iconColor} alt="github icon" className={styles.githubIcon} />
             Github
           </a>
         </div>
       </div>
       <div className={styles.heroLogo}>
-        <div className={leftLightningColor}/>
-        <div className={leftLineColor}/>
-        <div className={styles.blueLineLeft}/>
-        <div className={styles.blueLineRight}/>
-        <div className={rightLineColor}/>
-        <div className={rightLightningColor}/>
+        <div className={leftLightningColor} />
+        <div className={leftLineColor} />
+        <div className={styles.blueLineLeft} />
+        <div className={styles.blueLineRight} />
+        <div className={rightLineColor} />
+        <div className={rightLightningColor} />
       </div>
     </div>
-  );
+  )
 }
 
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext()
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
       description="Description will go into a meta tag in <head />">
       <HomepageHero />
     </Layout>
-  );
+  )
 }

package.json

@@ -55,7 +55,7 @@
     "@twgdev/prettier-config": "^1.0.2",
     "@types/jest": "^26.0.0",
     "@types/react": "^16.9.19",
-    "@types/react-native": "0.66.9",
+    "@types/react-native": "0.68.4",
     "babel-plugin-module-resolver": "^4.1.0",
     "commitlint": "^11.0.0",
     "eslint": "^7.32.0",

src/core/hooks/useStatusBarHeightDetector.ts

@@ -5,14 +5,18 @@ type Props = {
   isPortraitMode: boolean
 }
 
+const NativeStatusBarManager = require('react-native/Libraries/Components/StatusBar/NativeStatusBarManagerIOS')
+
 export const useStatusBarHeightDetector = ({ isPortraitMode }: Props) => {
   const { StatusBarManager } = NativeModules
   const [barHeight, setBarHeight] = useState(0)
 
   useEffect(() => {
     if (Platform.OS !== 'ios') return setBarHeight(StatusBar.currentHeight ?? 0)
     // handling edge case when app is opened in landscape mode and barHeight = 0
-    StatusBarManager.getHeight(({ height }: { height: number }) =>
+    const StatusBarManagerModule = NativeStatusBarManager || StatusBarManager
+
+    StatusBarManagerModule.getHeight(({ height }: { height: number }) =>
       setBarHeight(isPortraitMode && height !== 0 ? height : 50)
     )
   }, [StatusBarManager, isPortraitMode])

yarn.lock

@@ -2482,26 +2482,26 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/react-native@0.66.9":
-  version "0.66.9"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.66.9.tgz#a051d1f1f3cd03df4b4870e91e416b71377a8b7a"
-  integrity sha512-lve1rgQadbOM82ZRiw6CvvManUeidDhlFtiXA+dErI7a7/NNxLM7kZVYDNKd/QQc5FgLlQ0Uof2QInup7OwsBg==
+"@types/react-native@0.68.4":
+  version "0.68.4"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.68.4.tgz#2495a94ae5949511e85beb64792ebeb722c56ce6"
+  integrity sha512-rPz7HRMNhwPMrzaMtG5QtFpKuIH4XlBkrVSZICqCtHTbaixdtStSyAp9GxkBJAQmmK2McO28mmqDiyqKOoOL5Q==
   dependencies:
-    "@types/react" "*"
+    "@types/react" "^17"
 
-"@types/react@*":
-  version "17.0.38"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
-  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
+"@types/react@^16.9.19":
+  version "16.14.21"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
+  integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^16.9.19":
-  version "16.14.21"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.21.tgz#35199b21a278355ec7a3c40003bd6a334bd4ae4a"
-  integrity sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==
+"@types/react@^17":
+  version "17.0.53"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.53.tgz#10d4d5999b8af3d6bc6a9369d7eb953da82442ab"
+  integrity sha512-1yIpQR2zdYu1Z/dc1OxC+MA6GR240u3gcnP4l6mvj/PJiVaqHsQPmWttsvHsfnhfPbU2FuGmo0wSITPygjBmsw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -9974,9 +9974,9 @@ typedarray@^0.0.6:
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
 typescript@^4.1.3:
-  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
-  integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 ua-parser-js@^0.7.30:
   version "0.7.33"