npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

csc-react-native-sdk

v2.1.5

Published

React-native sdk provides paywalling and analytics

Downloads

591

Readme

csc-react-native-sdk

This is a step by step guide to include Conscent.ai package in your app. This package is developed in TypeScript and JavaScript.

Installation

npm install csc-react-native-sdk

Initialize SDK

In your App.js file include ConscentWebView component in Stack.Navigator

//PACKAGES
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AsyncStorage from '@react-native-async-storage/async-storage';

import { ConscentWebView, StorageKeys, conscentLogger } from 'csc-react-native-sdk';

export default function App() {

    AsyncStorage.setItem(StorageKeys.ClientId, '661907c2487ae1aba956dcc4')
    AsyncStorage.setItem(StorageKeys.ApiEnv, 'SANDBOX')

    // Configure the logger
    conscentLogger.configure({
        enableLog: true,
        enableAllLog: true,
        enableError: true,
        enableWarn: true, // Disable warnings
        logEnvironment: 'development',
    });

    return (
        <NavigationContainer>
        <Stack.Navigator initialRouteName="your_initial_route">
            ...
            <Stack.Screen 
                name="ConscentWebView" 
                component={ConscentWebView}
                options={{
                    headerShown: false
                }} />
        </Stack.Navigator>
        </NavigationContainer>

    );
};

Initialize the paywall

  • yourClientId : Pass your clientId received from Conscent.ai.
  • yourContentId : Unique id of each content
  • ApiEnv can be set as : SANDBOX LIVE
  • scroll-Y : Pass the scroll depth of your content screen
  • userAgent : Pass userAgent of your device
  • call removePage() in useFocusEffect

Event Listener

implement EventRegister method in your component

  • UNLOCK: Unlocks the content and hides the paywall.
  • PAYWALL_VIEW: Locks the content and displays the paywall.
  • JOURNEY_FAILURE: Handles errors while displaying the paywall.
  • USER_GO_BACK: Triggered when the user navigates back from ConscentWebView.
  • USER_PROFILE_UPDATE : Triggered when the user updates the profile.
  • LOGIN_SUCCESS: Triggered when the user successfully logs in to Conscent system
  • LOGIN_FAILED: Triggered when the user logout successfully into the Conscent system
  • USER_DELETE_ACCOUNT_SUCCESS: Triggered when the user’s user deletes the account.
  • LOGOUT_SUCCESS: Triggered when the user logs out successfully
  • LOGOUT_FAILED: Triggered when the user logs out failed.
  • USER_NOT_LOGIN: Triggered when the user is not logged in.
  • SUBS_SUCCESS: Handles successful subscription.
  • PAYEMENT_SUCCESS: Handles successful subscription payment.
  • RZP_CROSS_BTN_CLICKED: Triggered when the Razorpay cross button is clicked.
  • onPurchaseStarted: Triggered when the user starts purchase
  • onPurchaseCompleted: Triggered when the user Purchase Completed and sends Purchase Success Response.
  • onPurchaseError: Triggered when the user's fails to Purchase
  • onPurchaseCancelled: Triggered when the user's Cancelled Purchase
  • onDismiss: Triggered when the user's Dismiss Purchase

Define these states on content screen

    const paywallRef = useRef(null);
    const [scrollY, setScrollY] = useState(0);
    const [showContent, setShowContent] = useState(false);

Call Paywall and Pop-Up on top of your content screen

//PACKAGES
import {
    pageExist,
    getEventsEnvDetails,
    PopUp,
    PayWall,
} from 'csc-react-native-sdk';
import { EventRegister } from 'react-native-event-listeners';

// Content Screen
const userAgent = await DeviceInfo.getUserAgent();

useFocusEffect(
        React.useCallback(() => {
            const CONSCENT_MESSAGE_LISTENER = EventRegister.addEventListener(
                "CONSCENT_MESSAGE",
                (data) => {
                    console.log('CONSCENT_MESSAGE', data);
                }
            );
            const CONSCENT_SUCCESS_LISTENER = EventRegister.addEventListener(
                "CONSCENT_SUCCESS",
                (data) => {
                    if (data?.message === 'UNLOCK') {
                        setShowContent(true);
                    }
                    console.log('CONSCENT_SUCCESS', data);
                }
            );
            const CONSCENT_FAILURE_LISTENER = EventRegister.addEventListener(
                "CONSCENT_FAILURE",
                (data) => {
                    console.warn('CONSCENT_FAILURE', data);
                }
            );
            return () => {
                removePage();
                if (typeof CONSCENT_MESSAGE_LISTENER === 'string') {
                    EventRegister.removeEventListener(CONSCENT_MESSAGE_LISTENER);
                }
                if (typeof CONSCENT_SUCCESS_LISTENER === 'string') {
                    EventRegister.removeEventListener(CONSCENT_SUCCESS_LISTENER);
                }
                if (typeof CONSCENT_FAILURE_LISTENER === 'string') {
                    EventRegister.removeEventListener(CONSCENT_FAILURE_LISTENER);
                }
            };
        }, [])
    );

async function removePage() {
        await pageExist(
            getEventsEnvDetails('SANDBOX'),
            clientId,
            contentId,
            scrollY
        );
    }

const goBack = () => {
    // Go back to the previous screen
    props?.navigation.goBack();
}

return (
        <SafeAreaView style={styles.container}>
            <ScrollView
                onScroll={(e) => {
                    setScrollY(e.nativeEvent.contentOffset.y)
                }}>
                <Text>{'showContent your locked content'}</Text>
                <View>
                    <PayWall
                        ref={paywallRef}
                        clientId={clientId}
                        contentId={contentId}
                        title={contentTitle}
                        contentUrl={'url'}
                        authorName={'name'}
                        publicationDate={'2024-07-17T11:57:27.312Z'}
                        categories={['category1', 'category2']}
                        tags={['free', 'premium', 'metered']}
                        sections={['section1', 'section2', 'section3']}
                        apiEnv={mode}
                        fontFamily={'PlayfairDisplay-Regular'}
                        userAgent={
                            'Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'
                        }
                        currentStackName={'Content'}
                        navigation={props?.navigation}
                        scrollY={scrollY}
                        goBack={() => {
                            goBack();
                        }}
                    />
                </View>
                {
                    showContent ? <><Text>{'showContent your full content'}</Text></> :
                        <><Text>{'showContent your locked content'}</Text></>
                }
            </ScrollView>
                

            <View>
                <MeterBanner
                    ref={paywallRef}
                    clientId={clientId}
                    contentId={contentId}
                    title={contentTitle}
                    contentUrl={'url'}
                    authorName={'name'}
                    publicationDate={'2024-07-17T11:57:27.312Z'}
                    categories={['category1', 'category2']}
                    tags={['free', 'premium', 'metered']}
                    sections={['section1', 'section2', 'section3']}
                    apiEnv={mode}
                    fontFamily={'PlayfairDisplay-Regular'}
                    userAgent={
                        'Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148'
                    }
                    currentStackName={'Content'}
                    navigation={props?.navigation}
                    scrollY={scrollY}
                    goBack={() => {
                        goBack();
                    }}
                />
            </View>
                <PopUp
                    apiEnv={'SANDBOX'}
                    currentStackName={'Your_current_stack_name'}
                    navigation={props?.navigation}
                    scrollY={scrollY}
                />

        </SafeAreaView >
    )

ConsCent Event Listener for login, logout, userProfile

useEffect(() => {
    const CONSCENT_MESSAGE_LISTENER = EventRegister.addEventListener(
      "CONSCENT_MESSAGE",
      (data) => {
        console.log('CONSCENT_MESSAGE', data);
      }
    );
    const CONSCENT_SUCCESS_LISTENER = EventRegister.addEventListener(
      "CONSCENT_SUCCESS",
      (data) => {
        console.log('CONSCENT_SUCCESS', data);
      }
    );
    const CONSCENT_FAILURE_LISTENER = EventRegister.addEventListener(
      "CONSCENT_FAILURE",
      (data) => {
        console.warn('CONSCENT_FAILURE', data);
      }
    );
    return () => {
      if (typeof CONSCENT_MESSAGE_LISTENER === 'string') {
        EventRegister.removeEventListener(CONSCENT_MESSAGE_LISTENER);
      }
      if (typeof CONSCENT_SUCCESS_LISTENER === 'string') {
        EventRegister.removeEventListener(CONSCENT_SUCCESS_LISTENER);
      }
      if (typeof CONSCENT_FAILURE_LISTENER === 'string') {
        EventRegister.removeEventListener(CONSCENT_FAILURE_LISTENER);
      }
    };
  });

Login Functionality

The client can use ConsCent Login, Logout System using this functionality:

    await login('Your_current_stack_name', props.navigation)

    await logOut('Your_current_stack_name', props?.navigation)

Google Login Process (Android)

📝 Note: Share the Google ClientID .

Google Login Process (iOS)

📝 Note: Share the Google ClientID .

  • To use Google login functionality you need to install pod in your project.
  • run pod install
  • Add your OAuth client ID and custom URL scheme

Update your app's Info.plist file to add your OAuth client ID and a custom URL scheme based on the reversed client ID.

The reversed client ID is your client ID with the order of the dot-delimited fields reversed. This is also shown under "iOS URL scheme" when selecting an existing iOS OAuth client in the Cloud console. For example: com.googleusercontent.apps.1234567890-abcdefg

<key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID</string>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
    </array>
  </dict>
</array>

To enable Apple login follow these steps:

Xcode Steps:
  • Open Xcode project.
  • Go to Target Settings → Signing & Capabilities.
  • Add "Sign in with Apple" capability.
  • Verify entitlements.
  • Ensure proper signing.
App Store Connect Steps:
  • Go to App Store Connect.
  • Select the app under "My Apps."
  • Go to "App Information."
  • Add "Sign in with Apple" information (privacy policy and terms of service URLs).
  • Enable "Sign in with Apple."
  • Submit changes for review.

User Profile Functionality

The client can use ConsCent User Profile System using this functionality:

    await openUserProfile('Your_current_stack_name', props.navigation,)

The client can get user details using this functionality:

    const userdetails = await getUserDetails();

Demo app Link

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library