0.5.1 • Published 10 months ago

@knocklabs/react-native v0.5.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Knock React Native SDK

A set of components for integrating Knock in-app notifications into a React Native application.

Full documentation

Installation

Via NPM:

npm install @knocklabs/react-native

Via Yarn:

yarn add @knocklabs/react-native

Configuration

To configure the feed you will need:

  1. A public API key (found in the Knock dashboard)
  2. A user ID, and optionally an auth token for production environments
  3. If integrating an in-app feed, a feed channel ID (found in the Knock dashboard)

Usage

You can integrate the feed into your app as follows:

import {
  KnockProvider,
  KnockFeedProvider,
  NotificationFeedContainer,
} from "@knocklabs/react-native";

const YourAppLayout = () => {
  const [isVisible, setIsVisible] = useState(false);
  const notifButtonRef = useRef(null);

  return (
    <KnockProvider apiKey={process.env.KNOCK_PUBLIC_API_KEY} userId={userId}>
      {/* Optionally, use the KnockFeedProvider to connect an in-app feed */}
      <KnockFeedProvider feedId={process.env.KNOCK_FEED_ID}>
        <NotificationFeedContainer>
          <Text>Notifications go in here!</Text>
        </NotificationFeedContainer>
      </KnockFeedProvider>
    </KnockProvider>
  );
};

Headless usage

Alternatively, if you don't want to use our components you can render the feed in a headless mode using our hooks:

import {
  useAuthenticatedKnockClient,
  useNotifications,
} from "@knocklabs/react-native";
import create from "zustand";

const YourAppLayout = () => {
  const knockClient = useAuthenticatedKnockClient(
    process.env.KNOCK_PUBLIC_API_KEY,
    currentUser.id,
  );

  const notificationFeed = useNotifications(
    knockClient,
    process.env.KNOCK_FEED_ID,
  );

  const useNotificationStore = create(notificationFeed.store);
  const { metadata } = useNotificationStore();

  useEffect(() => {
    notificationFeed.fetch();
  }, [notificationFeed]);

  return <Text>Total unread: {metadata.unread_count}</Text>;
};

Related links

0.5.1-rc.0

10 months ago

0.5.0

10 months ago

0.5.1

10 months ago

0.4.0

10 months ago

0.3.1

10 months ago

0.3.0

11 months ago

0.2.12

12 months ago

0.2.11

12 months ago

0.2.10

12 months ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.9

1 year ago

0.2.8

1 year ago

0.2.3

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.2.2

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.20

1 year ago

0.1.19

1 year ago

0.1.18

1 year ago

0.1.17

1 year ago

0.1.15

1 year ago

0.1.16

1 year ago

0.1.13

1 year ago

0.1.14

1 year ago

0.1.12

1 year ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.9

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.6

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

2 years ago

0.1.0-rc1

2 years ago

0.1.0-rc0

2 years ago