From 0bce3354ad6d7daff48fc9449ce160b67a706630 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Wed, 6 Dec 2023 19:58:28 +0330 Subject: [PATCH 01/11] chore: add safeArea for handling inset top and bottom --- package.json | 3 ++- src/useToast.ts | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 81135fe6d..c70bf65a8 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,8 @@ }, "peerDependencies": { "react": "*", - "react-native": "*" + "react-native": "*", + "react-native-safe-area-context": "^4.7.4" }, "importSort": { ".js, .jsx, .ts, .tsx": { diff --git a/src/useToast.ts b/src/useToast.ts index ae494db0a..c9ec13373 100644 --- a/src/useToast.ts +++ b/src/useToast.ts @@ -5,6 +5,7 @@ import { useTimeout } from './hooks'; import { ToastData, ToastOptions, ToastProps, ToastShowParams } from './types'; import { noop } from './utils/func'; import { mergeIfDefined } from './utils/obj'; +import {initialWindowMetrics} from 'react-native-safe-area-context'; export const DEFAULT_DATA: ToastData = { text1: undefined, @@ -16,8 +17,8 @@ export const DEFAULT_OPTIONS: Required = { position: 'top', autoHide: true, visibilityTime: 4000, - topOffset: 40, - bottomOffset: 40, + topOffset: initialWindowMetrics?.insets.top ?? 40, + bottomOffset: initialWindowMetrics?.insets.bottom ?? 40, keyboardOffset: 10, onShow: noop, onHide: noop, From 29b3d2626a9073c35c5d0187399a5d638ed147a9 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Wed, 6 Dec 2023 20:14:41 +0330 Subject: [PATCH 02/11] chore: update dependency --- package.json | 3 +++ yarn.lock | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index c70bf65a8..2db928a1b 100644 --- a/package.json +++ b/package.json @@ -60,5 +60,8 @@ "lint-staged": { "*.{js,jsx,ts,tsx,md}": "yarn prettier", "*.{js,jsx,ts,tsx}": "yarn lint" + }, + "dependencies": { + "react-native-safe-area-context": "^4.7.4" } } diff --git a/yarn.lock b/yarn.lock index 6fdd84993..a82a9e39b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4232,6 +4232,11 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== +react-native-safe-area-context@^4.7.4: + version "4.7.4" + resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz#3dd8438971e70043d76f2428ede75b8a9639265e" + integrity sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg== + react-refresh@^0.4.0: version "0.4.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53" From 4d8a1db676737a0b9817f229bb4856444b7aea20 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Wed, 6 Dec 2023 22:11:03 +0330 Subject: [PATCH 03/11] chore: update package.json --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 2db928a1b..0d8d8096a 100644 --- a/package.json +++ b/package.json @@ -48,8 +48,7 @@ }, "peerDependencies": { "react": "*", - "react-native": "*", - "react-native-safe-area-context": "^4.7.4" + "react-native": "*" }, "importSort": { ".js, .jsx, .ts, .tsx": { From 394480b357aff3d6b67cbf2b0d966ce2df67963c Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 00:41:56 +0330 Subject: [PATCH 04/11] feat: native module ios to calculate safeArea insets --- ios/SafeAreaModule.h | 5 ++++ ios/SafeAreaModule.mm | 27 ++++++++++++++++++++ package.json | 9 +++---- react-native-toast-message.podspec | 41 ++++++++++++++++++++++++++++++ src/hooks/index.ts | 1 + src/hooks/useSafeArea.ts | 25 ++++++++++++++++++ src/types/index.ts | 18 +++++++++++++ src/useToast.ts | 12 ++++----- src/utils/dimension.ts | 4 +++ yarn.lock | 5 ---- 10 files changed, 131 insertions(+), 16 deletions(-) create mode 100644 ios/SafeAreaModule.h create mode 100644 ios/SafeAreaModule.mm create mode 100644 react-native-toast-message.podspec create mode 100644 src/hooks/useSafeArea.ts create mode 100644 src/utils/dimension.ts diff --git a/ios/SafeAreaModule.h b/ios/SafeAreaModule.h new file mode 100644 index 000000000..1a55dc8ca --- /dev/null +++ b/ios/SafeAreaModule.h @@ -0,0 +1,5 @@ +#import + +@interface RNSafeAreaModule : NSObject + +@end diff --git a/ios/SafeAreaModule.mm b/ios/SafeAreaModule.mm new file mode 100644 index 000000000..ee30f12a4 --- /dev/null +++ b/ios/SafeAreaModule.mm @@ -0,0 +1,27 @@ +#import +#import +@interface SafeAreaModule : NSObject +@end + +@implementation SafeAreaModule +RCT_EXPORT_MODULE(); + +RCT_EXPORT_METHOD(getSafeAreaInsets:(RCTResponseSenderBlock)callback) { + UIViewController *rootViewController = [UIApplication sharedApplication].keyWindow.rootViewController; + UIEdgeInsets safeAreaInsets = UIEdgeInsetsZero; + + if (@available(iOS 11.0, *)) { + safeAreaInsets = rootViewController.view.safeAreaInsets; + } + + NSDictionary *result = @{ + @"top": @(safeAreaInsets.top), + @"bottom": @(safeAreaInsets.bottom), + @"left": @(safeAreaInsets.left), + @"right": @(safeAreaInsets.right) + }; + + callback(@[[NSNull null], result]); +} + +@end diff --git a/package.json b/package.json index 0d8d8096a..b3fc8a8c6 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "main": "./lib/index.js", "types": "./lib/index.d.ts", "files": [ - "/lib" + "/lib", + "ios", + "*.podspec" ], "repository": { "type": "git", @@ -16,7 +18,7 @@ "toast" ], "scripts": { - "prepare": "husky install", + "prepare": "bob build && husky install", "build": "rm -rf ./lib && tsc", "prettier": "./node_modules/.bin/prettier --write", "lint": "./node_modules/.bin/eslint --fix", @@ -59,8 +61,5 @@ "lint-staged": { "*.{js,jsx,ts,tsx,md}": "yarn prettier", "*.{js,jsx,ts,tsx}": "yarn lint" - }, - "dependencies": { - "react-native-safe-area-context": "^4.7.4" } } diff --git a/react-native-toast-message.podspec b/react-native-toast-message.podspec new file mode 100644 index 000000000..1204fa33a --- /dev/null +++ b/react-native-toast-message.podspec @@ -0,0 +1,41 @@ +require "json" + +package = JSON.parse(File.read(File.join(__dir__, "package.json"))) +folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' + +Pod::Spec.new do |s| + s.name = "react-native-toast-message" + s.version = package["version"] + s.summary = package["description"] + s.homepage = "https://github.com/calintamas/react-native-toast-message" + s.license = package["license"] + s.authors = package["author"] + + s.platforms = { :ios => "9.0" } + s.source = { :git => "https://github.com/calintamas/react-native-toast-message.git", :tag => "#{s.version}" } + + s.source_files = "ios/**/*.{h,m,mm,swift}" + + # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0. + # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79. + if respond_to?(:install_modules_dependencies, true) + install_modules_dependencies(s) + else + s.dependency "React-Core" + + # Don't install the dependencies when we run `pod install` in the old architecture. + if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then + s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1" + s.pod_target_xcconfig = { + "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"", + "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1", + "CLANG_CXX_LANGUAGE_STANDARD" => "c++17" + } + s.dependency "React-Codegen" + s.dependency "RCT-Folly" + s.dependency "RCTRequired" + s.dependency "RCTTypeSafety" + s.dependency "ReactCommon/turbomodule/core" + end + end +end diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 2840571eb..be6f968c4 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -3,3 +3,4 @@ export * from './useSlideAnimation'; export * from './useTimeout'; export * from './usePanResponder'; export * from './useKeyboard'; +export * from './useSafeArea'; diff --git a/src/hooks/useSafeArea.ts b/src/hooks/useSafeArea.ts new file mode 100644 index 000000000..e2e82bdf7 --- /dev/null +++ b/src/hooks/useSafeArea.ts @@ -0,0 +1,25 @@ +import {NativeModules, StatusBar} from 'react-native' +import {isIOS} from "../utils/platform"; +import {useEffect, useState} from "react"; +import {TSafeArea} from "../types"; +import {SCREEN_HEIGHT, WINDOW_HEIGHT} from "../utils/dimension"; +export const useSafeArea = () => { + const [safeAreaInsets, setSafeAreaInsets] = useState(null); + useEffect(() => { + if(isIOS()){ + NativeModules?.SafeAreaModule?.getSafeAreaInsets((error : Error, result: TSafeArea) => { + if (error) { + console.error(error); + } else { + setSafeAreaInsets(result) + } + }); + }else { + const statusBarHeight = StatusBar.currentHeight ?? 0 + const bottomInset = SCREEN_HEIGHT - WINDOW_HEIGHT - statusBarHeight; + setSafeAreaInsets({top: statusBarHeight, bottom: bottomInset, left: 0, right: 0}) + } + },[]) + + return {safeAreaInsets} +} diff --git a/src/types/index.ts b/src/types/index.ts index 14854253d..1c6f2cdb4 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -185,3 +185,21 @@ export type ToastProps = { */ onPress?: () => void; }; + +export type TSafeArea = { + top: number + bottom: number + left: number + right: number +} + +export type TNativeModulesSafeArea = { + SafeAreaInsetsModule: { + getSafeAreaInsets(p: (error: Error, result: TSafeArea) => void): Promise<{ + top: number; + bottom: number; + left: number; + right: number + }>; + }; +} diff --git a/src/useToast.ts b/src/useToast.ts index c9ec13373..37dfdd7c0 100644 --- a/src/useToast.ts +++ b/src/useToast.ts @@ -1,11 +1,10 @@ import React from 'react'; import { useLogger } from './contexts'; -import { useTimeout } from './hooks'; +import {useSafeArea, useTimeout} from './hooks'; import { ToastData, ToastOptions, ToastProps, ToastShowParams } from './types'; import { noop } from './utils/func'; import { mergeIfDefined } from './utils/obj'; -import {initialWindowMetrics} from 'react-native-safe-area-context'; export const DEFAULT_DATA: ToastData = { text1: undefined, @@ -17,8 +16,8 @@ export const DEFAULT_OPTIONS: Required = { position: 'top', autoHide: true, visibilityTime: 4000, - topOffset: initialWindowMetrics?.insets.top ?? 40, - bottomOffset: initialWindowMetrics?.insets.bottom ?? 40, + topOffset: 40, + bottomOffset: 40, keyboardOffset: 10, onShow: noop, onHide: noop, @@ -35,6 +34,7 @@ export function useToast({ defaultOptions }: UseToastParams) { const [isVisible, setIsVisible] = React.useState(false); const [data, setData] = React.useState(DEFAULT_DATA); + const {safeAreaInsets} = useSafeArea() const initialOptions = mergeIfDefined( DEFAULT_OPTIONS, @@ -63,6 +63,8 @@ export function useToast({ defaultOptions }: UseToastParams) { const show = React.useCallback( (params: ToastShowParams) => { log(`Showing with params: ${JSON.stringify(params)}`); + const topOffset = safeAreaInsets && safeAreaInsets.top > 0 ? safeAreaInsets.top : initialOptions.topOffset + const bottomOffset = safeAreaInsets && safeAreaInsets.bottom > 0 ? safeAreaInsets.bottom : initialOptions.bottomOffset const { text1 = DEFAULT_DATA.text1, text2 = DEFAULT_DATA.text2, @@ -70,8 +72,6 @@ export function useToast({ defaultOptions }: UseToastParams) { position = initialOptions.position, autoHide = initialOptions.autoHide, visibilityTime = initialOptions.visibilityTime, - topOffset = initialOptions.topOffset, - bottomOffset = initialOptions.bottomOffset, keyboardOffset = initialOptions.keyboardOffset, onShow = initialOptions.onShow, onHide = initialOptions.onHide, diff --git a/src/utils/dimension.ts b/src/utils/dimension.ts new file mode 100644 index 000000000..f61cb3165 --- /dev/null +++ b/src/utils/dimension.ts @@ -0,0 +1,4 @@ +import {Dimensions} from "react-native"; + +export const {height: WINDOW_HEIGHT} = Dimensions.get('window') +export const {height: SCREEN_HEIGHT} = Dimensions.get('screen') diff --git a/yarn.lock b/yarn.lock index a82a9e39b..6fdd84993 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4232,11 +4232,6 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== -react-native-safe-area-context@^4.7.4: - version "4.7.4" - resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz#3dd8438971e70043d76f2428ede75b8a9639265e" - integrity sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg== - react-refresh@^0.4.0: version "0.4.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.3.tgz#966f1750c191672e76e16c2efa569150cc73ab53" From 757d63f124afa57fb84c2944bd07ba596cb27eeb Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 01:39:47 +0330 Subject: [PATCH 05/11] chore: update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b3fc8a8c6..598bb29f4 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "toast" ], "scripts": { - "prepare": "bob build && husky install", + "prepare": "husky install", "build": "rm -rf ./lib && tsc", "prettier": "./node_modules/.bin/prettier --write", "lint": "./node_modules/.bin/eslint --fix", From 4ff5bb145a6f46452f5f6554cf9ff0dc0321a2f9 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 01:51:09 +0330 Subject: [PATCH 06/11] fix: unit tset --- src/__tests__/useToast.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/__tests__/useToast.test.ts b/src/__tests__/useToast.test.ts index 00a9c3e7c..83ef209b0 100644 --- a/src/__tests__/useToast.test.ts +++ b/src/__tests__/useToast.test.ts @@ -121,8 +121,8 @@ describe('test useToast hook', () => { position: 'bottom', autoHide: false, visibilityTime: 20, - topOffset: 120, - bottomOffset: 130, + topOffset: 40, + bottomOffset: 40, keyboardOffset: 5, onShow: jest.fn(), onHide: jest.fn(), From 02b3801d74c0e09ed41ed362fba4c1e92d3b5bc9 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 08:17:25 +0330 Subject: [PATCH 07/11] chore: update instruction for installation --- docs/quick-start.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/quick-start.md b/docs/quick-start.md index 1f941d0ee..eacf8f5ba 100644 --- a/docs/quick-start.md +++ b/docs/quick-start.md @@ -6,6 +6,7 @@ yarn add react-native-toast-message # or npm install --save react-native-toast-message +cd ios && pod install # for iOS ``` ## Usage From 83aae7fe192f5b783e6bbd28484df9fc007bd550 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 14:00:54 +0330 Subject: [PATCH 08/11] chore: update type location --- src/hooks/useSafeArea.ts | 19 ++++++++++++++++++- src/types/index.ts | 18 ------------------ 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/hooks/useSafeArea.ts b/src/hooks/useSafeArea.ts index e2e82bdf7..43fa9cc7d 100644 --- a/src/hooks/useSafeArea.ts +++ b/src/hooks/useSafeArea.ts @@ -1,8 +1,25 @@ import {NativeModules, StatusBar} from 'react-native' import {isIOS} from "../utils/platform"; import {useEffect, useState} from "react"; -import {TSafeArea} from "../types"; import {SCREEN_HEIGHT, WINDOW_HEIGHT} from "../utils/dimension"; + +type TSafeArea = { + top: number + bottom: number + left: number + right: number +} + +type TNativeModulesSafeArea = { + SafeAreaInsetsModule: { + getSafeAreaInsets(p: (error: Error, result: TSafeArea) => void): Promise<{ + top: number; + bottom: number; + left: number; + right: number + }>; + }; +} export const useSafeArea = () => { const [safeAreaInsets, setSafeAreaInsets] = useState(null); useEffect(() => { diff --git a/src/types/index.ts b/src/types/index.ts index 1c6f2cdb4..14854253d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -185,21 +185,3 @@ export type ToastProps = { */ onPress?: () => void; }; - -export type TSafeArea = { - top: number - bottom: number - left: number - right: number -} - -export type TNativeModulesSafeArea = { - SafeAreaInsetsModule: { - getSafeAreaInsets(p: (error: Error, result: TSafeArea) => void): Promise<{ - top: number; - bottom: number; - left: number; - right: number - }>; - }; -} From d812971110101e43260676f7da8d0ed7a039dd43 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 14:07:50 +0330 Subject: [PATCH 09/11] chore: yarn prettier --- src/hooks/useSafeArea.ts | 60 ++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/hooks/useSafeArea.ts b/src/hooks/useSafeArea.ts index 43fa9cc7d..bc8739664 100644 --- a/src/hooks/useSafeArea.ts +++ b/src/hooks/useSafeArea.ts @@ -1,42 +1,42 @@ import {NativeModules, StatusBar} from 'react-native' -import {isIOS} from "../utils/platform"; import {useEffect, useState} from "react"; +import {isIOS} from "../utils/platform"; import {SCREEN_HEIGHT, WINDOW_HEIGHT} from "../utils/dimension"; type TSafeArea = { - top: number - bottom: number - left: number - right: number + top: number + bottom: number + left: number + right: number } type TNativeModulesSafeArea = { - SafeAreaInsetsModule: { - getSafeAreaInsets(p: (error: Error, result: TSafeArea) => void): Promise<{ - top: number; - bottom: number; - left: number; - right: number - }>; - }; + SafeAreaInsetsModule: { + getSafeAreaInsets(p: (error: Error, result: TSafeArea) => void): Promise<{ + top: number; + bottom: number; + left: number; + right: number + }>; + }; } export const useSafeArea = () => { - const [safeAreaInsets, setSafeAreaInsets] = useState(null); - useEffect(() => { - if(isIOS()){ - NativeModules?.SafeAreaModule?.getSafeAreaInsets((error : Error, result: TSafeArea) => { - if (error) { - console.error(error); - } else { - setSafeAreaInsets(result) - } - }); - }else { - const statusBarHeight = StatusBar.currentHeight ?? 0 - const bottomInset = SCREEN_HEIGHT - WINDOW_HEIGHT - statusBarHeight; - setSafeAreaInsets({top: statusBarHeight, bottom: bottomInset, left: 0, right: 0}) - } - },[]) + const [safeAreaInsets, setSafeAreaInsets] = useState(null); + useEffect(() => { + if (isIOS()) { + NativeModules?.SafeAreaModule?.getSafeAreaInsets((error: Error, result: TSafeArea) => { + if (error) { + console.error(error); + } else { + setSafeAreaInsets(result) + } + }); + } else { + const statusBarHeight = StatusBar.currentHeight ?? 0 + const bottomInset = SCREEN_HEIGHT - WINDOW_HEIGHT - statusBarHeight; + setSafeAreaInsets({top: statusBarHeight, bottom: bottomInset, left: 0, right: 0}) + } + }, []) - return {safeAreaInsets} + return {safeAreaInsets} } From 4edf05b49403c4bcd8eaa8c3dd5e1effb2e0e2a9 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Fri, 15 Dec 2023 15:25:12 +0330 Subject: [PATCH 10/11] chore: yarn prettier --- src/useToast.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/useToast.ts b/src/useToast.ts index 37dfdd7c0..5e7060fbd 100644 --- a/src/useToast.ts +++ b/src/useToast.ts @@ -1,7 +1,7 @@ import React from 'react'; import { useLogger } from './contexts'; -import {useSafeArea, useTimeout} from './hooks'; +import { useSafeArea, useTimeout } from './hooks'; import { ToastData, ToastOptions, ToastProps, ToastShowParams } from './types'; import { noop } from './utils/func'; import { mergeIfDefined } from './utils/obj'; From de3ad8ad5fcc1f534270664fb243e9f7b3b98461 Mon Sep 17 00:00:00 2001 From: Seyed Mostafa Hasani Date: Thu, 2 May 2024 20:53:32 +0330 Subject: [PATCH 11/11] Update quick-start.md for expo project --- docs/quick-start.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/quick-start.md b/docs/quick-start.md index eacf8f5ba..f028c9ad9 100644 --- a/docs/quick-start.md +++ b/docs/quick-start.md @@ -1,6 +1,6 @@ # Quick start -## Install +## Install React Native Project ```sh yarn add react-native-toast-message @@ -9,6 +9,26 @@ npm install --save react-native-toast-message cd ios && pod install # for iOS ``` +## Install Expo Project +```sh +npx expo install react-native-toast-message +``` + +## Rebuild the project +Rebuild the project +```sh +# expo projects +npx expo run:android +npx expo run:ios + +# non-expo projects +npx react-native run-android +npx react-native run-ios +``` + +## Expo +- ❌ This library can't be used in the "Expo Go" app because it [requires custom native code](https://docs.expo.dev/workflow/customizing/). + ## Usage Render the `Toast` component in your app's entry file, as the **LAST CHILD** in the `View` hierarchy (along with any other components that might be rendered there):