fix: remove snackbar context

README.md

@@ -24,7 +24,6 @@ We believe this is a better approach than the alternatives:
 **Note!** At the moment there exist some parallel solutions, a legacy one which uses react context and a newer one, which we recommend, using hooks (utilizes [zustand](https:/pmndrs/zustand) under the hood). They are:
 
 - `useSharedPortalArea`
-- `useSnackbar`
 
 The solutions based on react context may be removed in an upcoming major release.
 

src/components/SnackbarComponent.tsx

@@ -1,15 +1,10 @@
-import React, {
- useCallback,
-} from 'react'
+import React, { useCallback } from 'react'
 import {
- Platform,
- StyleSheet, Text, TouchableOpacity, View,
+ Platform, StyleSheet, Text, TouchableOpacity, View,
 } from 'react-native'
-import Animated, {
- FadeIn, FadeOut,
-} from 'react-native-reanimated'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 
-import type { Action, SnackbarConfig } from '../contexts/Snackbar'
+import type { Action, SnackbarConfig } from '../hooks/useSnackbarStore'
 import type { PropsWithChildren } from 'react'
 import type {
  StyleProp, ViewStyle, ColorValue, TextStyle,

src/components/SnackbarPresentationView.tsx

@@ -1,18 +1,14 @@
-import React, {
- useEffect,
-} from 'react'
-import {
- View,
-} from 'react-native'
+import React, { useEffect } from 'react'
+import { View } from 'react-native'
 
-import { SnackbarContext } from '../contexts/Snackbar'
+import useRemoveSnackbar from '../hooks/useRemoveSnackbar'
+import useSnackbarsToShow from '../hooks/useSnackbarsToShow'
+import useSnackbarWasPresented from '../hooks/useSnackbarWasPresented'
 import randomHexColorAlpha from '../utils/randomHexColor'
 import DefaultSnackbarComponent from './SnackbarComponent'
 
 import type { SnackbarComponentProps } from './SnackbarComponent'
-import type {
- StyleProp, ViewStyle,
-} from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
 
 export type SnackbarPresentationViewProps = {
  readonly Component?: React.FC<SnackbarComponentProps>,
@@ -23,17 +19,16 @@ export type SnackbarPresentationViewProps = {
 
 /**
  * This component should be placed where you want the snackbars to be shown.
- *
- * Do NOT use this component if you're using the hooks from `useSnackbar`,
- * this is to be used with `SnackbarContext`!
  */
 export const SnackbarPresentationView: React.FC<SnackbarPresentationViewProps> = ({
  Component = DefaultSnackbarComponent,
  isVisibleToUser = true,
  style,
  colorize,
 }) => {
- const { snackbarWasPresented, snackbarsToShow, removeSnackbar } = React.useContext(SnackbarContext)
+ const snackbarWasPresented = useSnackbarWasPresented()
+ const snackbarsToShow = useSnackbarsToShow()
+ const removeSnackbar = useRemoveSnackbar()
 
  useEffect(() => {
  if (isVisibleToUser) {

src/contexts/index.ts

@@ -1,6 +1,5 @@
 export * from './Auth'
 export * from './SharedPortalArea'
-export * from './Snackbar'
 export * from './Strings'
 export * from './Theme'
 export * from './Urql'

src/example-app/App.tsx

@@ -8,16 +8,18 @@ import { ActivityIndicator, Switch } from 'react-native-paper'
 import Animated, { CurvedTransition } from 'react-native-reanimated'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
 
+import { SnackbarPresentationView } from '../components'
 import NativePortal from '../components/NativePortal'
 import DefaultSnackbarComponent from '../components/SnackbarComponent'
 import { StringsProvider } from '../contexts/Strings'
-import { useIsKeyboardShown, useKeyboardHeight, useWillKeyboardBeShown } from '../hooks'
+import {
+ useAddSnackbar, useIsKeyboardShown, useKeyboardHeight, useWillKeyboardBeShown, useSnackbarSettings,
+} from '../hooks'
 import useAlert from '../hooks/useAlert'
 import useConfirm from '../hooks/useConfirm'
 import {
  SharedPortalAreaProvider, SharedPortalPresentationArea, useSharedPortalAreaInsets, useSharedPortalAreaSize,
 } from '../hooks/useSharedPortalArea'
-import { SnackbarPresentationView, useAddSnackbar, useSnackbarSettings } from '../hooks/useSnackbar'
 import Column from '../primitives/Column'
 import Row from '../primitives/Row'
 

src/hooks/index.ts

@@ -15,7 +15,11 @@ export * from './useIsStandalonePWA'
 export * from './useKeyboardHeight'
 export * from './useNullableState'
 export * from './usePrevious'
+export * from './useRemoveSnackbar'
 export * from './useRunIfMounted'
+export * from './useSnackbarSettings'
+export * from './useSnackbarsToShow'
+export * from './useSnackbarWasPresented'
 export * from './useTheme'
 export * from './useToggle'
 export * from './useToggleWithHaptics'

src/hooks/useAddSnackbar.tsx → src/hooks/useAddSnackbar.ts

@@ -1,15 +1,11 @@
-import { useCallback, useContext } from 'react'
+import { useCallback } from 'react'
 
-import { SnackbarContext } from '../contexts/Snackbar'
+import useSnackbarStore from './useSnackbarStore'
 
-import type { SnackbarConfig } from '../contexts/Snackbar'
+import type { SnackbarConfig } from './useSnackbarStore'
 
-/**
- * **Note!** This hook is to be used in conjunction with the Snackbar context, use
- * `useAddSnackbar` from `src/hooks/useSnackbar.tsx` if you are not using the Snackbar context.
- */
 export function useAddSnackbar<TMap extends Record<string, unknown> = Record<string, unknown>, T extends keyof TMap = keyof TMap>(defaultSnackbarConfig?: Omit<SnackbarConfig<TMap, T>, 'title'>) {
- const { addSnackbar } = useContext(SnackbarContext)
+ const addSnackbar = useSnackbarStore((state) => state.addSnackbar)
 
  return useCallback(function ShowSnackbar<TMapInner extends Record<string, unknown> = TMap, TInner extends keyof TMapInner = keyof TMapInner>(title: string, snackbarConfig?: Omit<SnackbarConfig<TMapInner, TInner>, 'title'>) {
  addSnackbar<TMapInner, TInner>({ ...defaultSnackbarConfig, ...snackbarConfig, title } as SnackbarConfig<TMapInner, TInner>)

src/hooks/useRemoveSnackbar.ts

@@ -0,0 +1,7 @@
+import useSnackbarStore from './useSnackbarStore'
+
+export function useRemoveSnackbar() {
+ return useSnackbarStore((state) => state.removeSnackbar)
+}
+
+export default useRemoveSnackbar