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-sdkrun pod installyourClientId
Pass your clientId received from Conscent.ai
yourContentId
Unique id of each content
scroll-Y
Pass the scroll depth of your content screen
userAgent
Pass userAgent of your device
ApiEnv
ApiEnv can be set as :
SANDBOX
LIVE
currentStackName = {'Content'}
This key-value pair accepts a string value and redirects to the specified URL provided by the client.
Initialize the paywall
Define these states on the content screen
const paywallRef = useRef(null);
const [scrollY, setScrollY] = useState(0);
const [showContent, setShowContent] = useState(false);Call the Paywall 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 >
)call removePage() in useFocusEffect
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.
DEMO APP Link
Last updated