<OptIn/> Subscribing users to push notifications involves several steps: requesting permission, tracking the user’s permission status, designing an engaging UI to encourage opt-in, and integrating with the Pushbase SDK. To simplify this process, the Pushbase SDK offers a pre-built <OptIn /> component. It manages the technical complexities behind permission handling and subscription flow. This component is fully customizable to align with your app’s color scheme and UI guidelines, ensuring a seamless user experience.
import { OptIn } from "@pushbase/sdk";

export default function HomeScreen() {
  return (
    <View>
      <OptIn
        /* We recommend including your app user’s profile information—such as id, name, email,
         or phone—at the time of subscription. This allows you to easily identify which user is associated with 
         each subscribed device in the Pushbase dashboard. */
        externalIdentity={{
          id: "2287a92f-867c-408e-bdc4-c3777be68c7b",
          name: "George Washington",
          email: "washington@wh.gov",
          phone: "202-456-1111",
        }}
        /** Parent component style example */
        containerStyle={{
          backgroundColor: "#ecf3fe",
          borderColor: "#4285f4",
          borderWidth: 1,
        }}
        title="Stay Updated"
        subtitle="Subscribe to notifications to stay informed about important updates and announcements."
        titleStyle={{}}
        subtitleStyle={{}}
        /* Label for the primary button.
         * When pressed, it initiates the subscription process for the user's device.
         */
        primaryButtonLabel="Subscribe Now"
        /* Label for the secondary button.
         * When pressed, it hides the banner and schedules the subscription request for a later time.
         */
        secondaryButtonLabel="Maybe Later"
        /* Primary color used for styling the background of the primary button */
        primaryColor="#4285f4"
        /* Secondary color used for styling the background of the secondary button */
        secondaryColor="#F1F4FF"
        /** Primary button style */
        primaryButtonStyle={{}}
        primaryButtonLabelStyle={{}}
        secondaryButtonLabelStyle={{}}
        secondaryButtonStyle={{}}
        activityIndicator="#ffffff"
        enableNotificationLabel="Missed something? Enable notifications in settings and restart the app to stay in the loop."
        enableNotificationButtonLabel="Go to Settings"
        enableNotificationContainerStyle={{}}
        enableNotificationLabelStyle={{}}
        enableNotificationButtonStyle={{}}
        enableNotificationButtonLabelStyle={{}}
        /*When the user taps the secondary button, the subscription request is skipped and scheduled for a later time.
         * Use this setting to define the number of days to wait before prompting the user again.
         */
        retrySubscriptionIntervalDays={7}
      />
    </View>
  );
}
Having trouble setting up or configuring the SDK? Our support team is here to help — feel free to reach out