Skip to content

Instantly share code, notes, and snippets.

@col3name
Created November 20, 2025 10:49
Show Gist options
  • Select an option

  • Save col3name/5ee800760d1e425df197feb943630b37 to your computer and use it in GitHub Desktop.

Select an option

Save col3name/5ee800760d1e425df197feb943630b37 to your computer and use it in GitHub Desktop.
import React, {useRef} from 'react';
import {View, StyleSheet} from 'react-native';
import KinestexSDK from 'kinestex-sdk-react-native';
import {
IntegrationOption,
PlanCategory,
KinesteXSDKCamera,
IPostData,
} from 'kinestex-sdk-react-native/src/types';
import {API_KEY, USER_ID, COMPANY_NAME} from '../config';
interface MainComponentProps {
onMessage: (type: string, data: {[key: string]: any}) => void;
}
const MainComponent: React.FC<MainComponentProps> = ({onMessage}) => {
const kinestexSDKRef = useRef<KinesteXSDKCamera>(null);
const postData: IPostData = {
key: 'olLLS63iNc3ah2CSZdiE96C8RiTL7Eu3',
userId: '1234',
company: 'Con',
planCategory: PlanCategory.Cardio,
style: {
style: 'dark', // dark or light theme (customizable in the admin dashboard)
// themeName: company name - by default we create you a theme with your company name, but if you create other themes, you can pass in their names here
loadingBackgroundColor: '000000', // value in hex (without #) to customize bg for initial loading screen
// loadingStickmanColor: string // value in hex (without #) to customize strickman color for initial loading screen
// loadingTextColor: string // value in hex (without #) to customize text color for initial loading screen
},
};
return (
<View style={styles.container}>
<KinestexSDK
ref={kinestexSDKRef}
data={postData}
integrationOption={IntegrationOption.MAIN}
handleMessage={onMessage}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default MainComponent;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment