robertherber / react-native-telegraph

This library aims to simplify in-app message orchestration. More specifically dealing with messages that makes sense to show across views and where multiple messages could appear to the user at once. It provides Snackbars, Banners and Dialogs.

react-native-telegraph!

This library aims to simplify in-app message orchestration in React-Native (iOS, Android and web supported). More specifically dealing with messages that makes sense to show across views and where multiple messages could appear to the user at once. It all revolves around three main types of messages:

Snackbars

You can choose whether you want multiple Snackbars to stack (default is showing one at a time, as recommended) and whether they should be persistent (default is a timeout of 5s). You can choose whether you want the Snackbars to appear on the bottom or top of the screen. You can easily override the animation with any of the ones available here, provide a custom Snackbar component to the <SnackbarProvider /> and send custom data to your custom component.

import { useSnackbar, useUpdateSnackbarInsets, useShowsnackbar } from 'react-native-telegraph';

// simply use useShowsnackbar

const showSnackbar = useShowsnackbar();

const onPressHandler = () => {
  showSnackbar('Something happened');
}

// if you want more control, there is useSnackbar
const [showSnackbar, hideSnackbar] = useSnackbar();

const onPress = useCallback(async () => {
  showSnackbar('Simple snack');
  const { buttonId, status } = await showSnackbar('Some new information is available', {
    persistent: true,
    actions: [{
      buttonId: 'reload',
      label: 'Reload'
    }, {
      buttonId: 'hide',
      label: 'Hide'
    }]
  }).response
}, [])


// Hide somewhere else in the code
const snackbarId = showSnackbar('lets hide this in another way');

// ...
hideSnackbar(snackbarId)

// control insets of the Snackbar in a specific view
useSetSnackbarInsetOffset({ bottom: 50 })

Dialogs (based on react-native-paper)

Dialogs take up the entire focus of the user - requesting action to continue. They'll always show up one at a time - but just as with the Banners and Snackbars - if more are presented they'll show when the user has interacted with the previous ones.

import { useDialog } from 'react-native-telegraph';

const [showDialog] = useDialog();

const onPress = useCallback(async () => {
  const { buttonId } = await showDialog('We need your approval to continue', {
    actions: [{
      buttonId: 'maybe-later',
      label: 'Maybe later'
    }, {
      buttonId: 'ok',
      label: 'OK'
    }]
  }).response

  console.log('You pressed button: ' + buttonId)
}, []);

Provider

The easiest way to get started is to use a single TelegraphProvider wrapping your app. For more options and flexibility you could use and configure DialogProvider, SnackbarProvider and BannerProvider independently.

import { TelegraphProvider } from 'react-native-telegraph';


const App = ({ children }) => {
  return <TelegraphProvider>
    { children }
  </TelegraphProvider>
}

Customizability

Theming is applied automatically through react-native-paper (read more).

Made by Kingstinct AB

react-native-telegraph's Issues

Type fixes

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-telegraph/Banner.tsx b/node_modules/react-native-telegraph/Banner.tsx
index 7f0ae16..4d34278 100644
--- a/node_modules/react-native-telegraph/Banner.tsx
+++ b/node_modules/react-native-telegraph/Banner.tsx
@@ -1,10 +1,10 @@
 import React, {
   createContext, useCallback, useContext, useEffect, useMemo, useState,
 } from 'react';
-import { IconSource } from 'react-native-paper/lib/typescript/components/Icon';
+import type { IconSource } from 'react-native-paper/lib/typescript/components/Icon';
 
 
-import {
+import type {
   Action, RawAction,
 } from './types';
 import { getNanoID, mapActionToRawAction, useDeepMemo } from './utils';
diff --git a/node_modules/react-native-telegraph/Dialog.tsx b/node_modules/react-native-telegraph/Dialog.tsx
index 06e6514..e03c2be 100644
--- a/node_modules/react-native-telegraph/Dialog.tsx
+++ b/node_modules/react-native-telegraph/Dialog.tsx
@@ -7,7 +7,7 @@ import {
 import 'react-native-get-random-values';
 import { nanoid } from 'nanoid';
 
-import {
+import type {
   Action, RawAction,
 } from './types';
 import {
diff --git a/node_modules/react-native-telegraph/Snackbar.tsx b/node_modules/react-native-telegraph/Snackbar.tsx
index e4ad8c2..44b3ff9 100644
--- a/node_modules/react-native-telegraph/Snackbar.tsx
+++ b/node_modules/react-native-telegraph/Snackbar.tsx
@@ -11,7 +11,7 @@ import {
 import * as Animatable from 'react-native-animatable';
 import { Transition, Transitioning, TransitioningView } from 'react-native-reanimated';
 
-import {
+import type {
   Action, RawAction,
 } from './types';
 import {
diff --git a/node_modules/react-native-telegraph/tsconfig.json b/node_modules/react-native-telegraph/tsconfig.json
new file mode 100644
index 0000000..c2d7ede
--- /dev/null
+++ b/node_modules/react-native-telegraph/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "importsNotUsedAsValues": "preserve",
+    "resolveJsonModule": true,
+    "strictNullChecks": true,
+    "alwaysStrict": true,
+  },
+  "exclude": ["node_modules/*"],
+  "extends": "expo/tsconfig.base"
+}
diff --git a/node_modules/react-native-telegraph/utils.ts b/node_modules/react-native-telegraph/utils.ts
index 718e670..9eb72a9 100644
--- a/node_modules/react-native-telegraph/utils.ts
+++ b/node_modules/react-native-telegraph/utils.ts
@@ -2,7 +2,7 @@ import 'react-native-get-random-values';
 import { nanoid } from 'nanoid';
 import { useRef } from 'react';
 
-import { Action, RawAction } from './types';
+import type { Action, RawAction } from './types';
 
 
 export function mapActionToRawAction<T = unknown>(onPressHide: RawAction['onPress'], resolve: (value: T | PromiseLike<T> | undefined) => void) {

This issue body was partially generated by patch-package.