@trycourier/courier-react-native 5.4.2 → 5.5.0

package/lib/example/src/Home.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Alert, Button } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import Auth from './pages/Auth';
+import Push from './pages/Push';
+import Inbox from './pages/Inbox';
+import Courier from '@trycourier/courier-react-native';
+import PreferencesStack from './pages/PreferencesStack';
+import Tests from './pages/Tests';
+const Tab = createBottomTabNavigator();
+const Home = () => {
+    const [unreadCount, setUnreadCount] = useState(0);
+    useEffect(() => {
+        const setupInbox = async () => {
+            // Setup Push
+            Courier.setIOSForegroundPresentationOptions({ options: ['sound', 'badge', 'list', 'banner'] });
+            const pushListener = Courier.shared.addPushNotificationListener({
+                onPushNotificationClicked(push) {
+                    console.log(push);
+                    Alert.alert('👆 Push Notification Clicked', JSON.stringify(push));
+                },
+                onPushNotificationDelivered(push) {
+                    console.log(push);
+                    Alert.alert('📬 Push Notification Delivered', JSON.stringify(push));
+                }
+            });
+            // Setup Inbox
+            await Courier.shared.setInboxPaginationLimit(100);
+            const inboxListener = await Courier.shared.addInboxListener({
+                onUnreadCountChanged(unreadCount) {
+                    setUnreadCount(unreadCount);
+                },
+            });
+            return { pushListener, inboxListener };
+        };
+        const listeners = setupInbox();
+        return () => {
+            listeners.then(({ pushListener, inboxListener }) => {
+                pushListener.remove();
+                inboxListener.remove();
+            });
+        };
+    }, []);
+    const inboxOptions = () => {
+        const badgeCount = () => {
+            return unreadCount > 0 ? unreadCount : undefined;
+        };
+        return {
+            headerRight: () => (React.createElement(Button, { onPress: () => Courier.shared.readAllInboxMessages(), title: "Read All" })),
+            tabBarBadge: badgeCount(),
+            tabBarIcon: ({ color, size }) => (React.createElement(MaterialCommunityIcons, { name: 'bell', color: color, size: size }))
+        };
+    };
+    const icon = (icon) => {
+        return {
+            tabBarIcon: ({ color, size }) => (React.createElement(MaterialCommunityIcons, { name: icon, color: color, size: size }))
+        };
+    };
+    return (React.createElement(Tab.Navigator, null,
+        React.createElement(Tab.Screen, { name: "Auth", component: Auth, options: icon('account-circle') }),
+        React.createElement(Tab.Screen, { name: "Push", component: Push, options: icon('message-badge') }),
+        React.createElement(Tab.Screen, { name: "Inbox", component: Inbox, options: inboxOptions() }),
+        React.createElement(Tab.Screen, { name: "Preferences", component: PreferencesStack, options: { ...icon('wrench'), headerShown: false } }),
+        React.createElement(Tab.Screen, { name: "Tests", component: Tests, options: icon('test-tube') })));
+};
+export default Home;

package/lib/example/src/Poke.js

@@ -0,0 +1,75 @@
+import React, { useState, useEffect, useMemo, createContext, useContext } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+const PokeContext = createContext(undefined);
+export const usePoke = () => {
+    const context = useContext(PokeContext);
+    if (!context) {
+        throw new Error('usePoke must be used within a PokeProvider');
+    }
+    return context;
+};
+export const Poke = ({ children, initialEnabled = true, initialIndicatorStyle, initialTouchTimeout = 150, }) => {
+    const [enabled, setEnabled] = useState(initialEnabled);
+    const [indicatorStyle, setIndicatorStyle] = useState(initialIndicatorStyle || {});
+    const [touchTimeout, setTouchTimeout] = useState(initialTouchTimeout);
+    const contextValue = useMemo(() => ({
+        setEnabled,
+        setIndicatorStyle,
+        setTouchTimeout,
+    }), []);
+    return (React.createElement(PokeContext.Provider, { value: contextValue },
+        React.createElement(TouchIndicator, { enabled: enabled, indicatorStyle: indicatorStyle, touchTimeout: touchTimeout }, children)));
+};
+const TouchIndicator = ({ children, indicatorStyle, enabled, touchTimeout }) => {
+    const [latestTouch, setLatestTouch] = useState(null);
+    const indicatorSize = indicatorStyle?.size || 50;
+    const indicatorColor = indicatorStyle?.color || 'rgba(0, 122, 255, 0.4)'; // Default blue color
+    useEffect(() => {
+        if (latestTouch) {
+            const timer = setTimeout(() => {
+                setLatestTouch(null);
+            }, touchTimeout);
+            return () => clearTimeout(timer);
+        }
+        return () => { }; // Add this line
+    }, [latestTouch, touchTimeout]);
+    const handleTouch = (event) => {
+        if (!enabled)
+            return;
+        const touch = event.nativeEvent.touches[0]; // Get only the latest touch
+        if (touch) {
+            const newTouch = {
+                id: `${touch.identifier}-${Date.now()}`,
+                x: touch.pageX,
+                y: touch.pageY,
+                timestamp: Date.now(),
+                animation: new Animated.Value(1),
+            };
+            Animated.timing(newTouch.animation, {
+                toValue: 0,
+                duration: touchTimeout,
+                useNativeDriver: true,
+                easing: Easing.out(Easing.cubic),
+            }).start();
+            setLatestTouch(newTouch);
+        }
+    };
+    const touchIndicatorStyle = useMemo(() => ({
+        position: 'absolute',
+        width: indicatorSize,
+        height: indicatorSize,
+        borderRadius: indicatorSize / 2,
+        backgroundColor: indicatorColor,
+        zIndex: 9999,
+    }), [indicatorSize, indicatorColor]);
+    return (React.createElement(View, { style: StyleSheet.absoluteFill, onTouchStart: handleTouch, onTouchMove: handleTouch, onTouchEnd: handleTouch },
+        children,
+        enabled && latestTouch && (React.createElement(Animated.View, { key: latestTouch.id, style: [
+                touchIndicatorStyle,
+                {
+                    left: latestTouch.x - indicatorSize / 2,
+                    top: latestTouch.y - indicatorSize / 2,
+                    opacity: latestTouch.animation,
+                },
+            ] }))));
+};

package/lib/example/src/Tabs.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+export const Tab = ({ title, isSelected, onPress }) => (React.createElement(TouchableOpacity, { onPress: onPress, style: [styles.tabButton, isSelected && styles.selectedTabButton] },
+    React.createElement(Text, { style: [styles.tabText, isSelected && styles.selectedTabText] }, title)));
+export const TabControl = ({ tabs, selectedTab, setSelectedTab }) => (React.createElement(View, { style: styles.segmentedControl }, tabs.map((tab) => (React.createElement(Tab, { key: tab.key, title: tab.title, isSelected: selectedTab === tab.key, onPress: () => setSelectedTab(tab.key) })))));
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    segmentedControl: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        width: '100%',
+    },
+    content: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+    tabButton: {
+        padding: 16,
+        flex: 1,
+        alignItems: 'center',
+        borderBottomWidth: 2,
+        borderBottomColor: 'transparent',
+    },
+    selectedTabButton: {
+        borderBottomColor: 'blue',
+    },
+    tabText: {
+        color: 'black',
+    },
+    selectedTabText: {
+        fontWeight: 'bold',
+    },
+});

package/lib/example/src/Utils.js

@@ -0,0 +1,71 @@
+export class ExampleServer {
+    static async generateJwt(props) {
+        return new Promise((resolve, reject) => {
+            const url = 'https://api.courier.com/auth/issue-token';
+            const request = {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${props.authKey}`
+                },
+                body: JSON.stringify({
+                    scope: `user_id:${props.userId} write:user-tokens inbox:read:messages inbox:write:events read:preferences write:preferences read:brands`,
+                    expires_in: '2 days'
+                })
+            };
+            fetch(url, request)
+                .then(response => response.json())
+                .then((data) => {
+                resolve(data.token);
+            })
+                .catch(error => {
+                reject(error);
+            });
+        });
+    }
+    static async sendTest(props) {
+        const url = 'https://api.courier.com/send';
+        const headers = {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${props.authKey}`,
+        };
+        const body = JSON.stringify({
+            'message': {
+                'to': {
+                    'user_id': props.userId
+                },
+                'content': {
+                    'title': props.title ?? 'Test',
+                    'body': props.body ?? 'Body',
+                },
+                'routing': {
+                    'method': 'all',
+                    'channels': [props.channel],
+                },
+            },
+        });
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: headers,
+            body: body,
+        });
+        if (response.status === 202) {
+            const json = await response.json();
+            return json['requestId'] ?? 'Error';
+        }
+        else {
+            throw new Error('Failed to send test message');
+        }
+    }
+}
+export class Utils {
+    static generateUUID() {
+        let uuid = '';
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        const charactersLength = characters.length;
+        for (let i = 0; i < 16; i++) {
+            uuid += characters.charAt(Math.floor(Math.random() * charactersLength));
+        }
+        return uuid;
+    }
+}

package/lib/example/src/pages/Auth.js

@@ -0,0 +1,224 @@
+import Courier from "@trycourier/courier-react-native";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Button, Modal, Platform, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import Env from "../Env";
+import { ExampleServer } from "../Utils";
+import { usePoke } from '../Poke';
+const Auth = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [userId, setUserId] = useState();
+    const [tenantId, setTenantId] = useState();
+    useEffect(() => {
+        const initAuth = async () => {
+            const authListener = await Courier.shared.addAuthenticationListener({
+                onUserChanged: async (userId) => {
+                    setUserId(userId);
+                    setTenantId(await Courier.shared.getTenantId());
+                    console.log(`User changed: ${userId}`);
+                    console.log(`Tenant changed: ${await Courier.shared.getTenantId()}`);
+                }
+            });
+            const userId = await Courier.shared.getUserId();
+            const tenantId = await Courier.shared.getTenantId();
+            console.log(`Initial user: ${userId}`);
+            console.log(`Initial tenant: ${tenantId}`);
+            refreshJWT(userId, tenantId);
+            return authListener;
+        };
+        let listener;
+        initAuth().then(result => {
+            listener = result;
+        });
+        return () => {
+            if (listener) {
+                listener.remove();
+            }
+        };
+    }, []);
+    async function refreshJWT(userId, tenantId) {
+        console.log('Refreshing JWT');
+        if (!userId) {
+            console.log(`No user found`);
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            console.log(`User ID: ${userId}`);
+            await Courier.shared.signOut();
+            const token = await ExampleServer.generateJwt({
+                authKey: Env.authKey,
+                userId: userId,
+            });
+            console.log(`New token: ${token}`);
+            await Courier.shared.signIn({
+                accessToken: token,
+                userId: userId,
+                tenantId: tenantId,
+            });
+        }
+        catch (e) {
+            console.error(e);
+        }
+        setIsLoading(false);
+    }
+    async function signIn(userId, tenantId) {
+        console.log('Signing User In');
+        console.log(`User ID: ${userId}`);
+        console.log(`Tenant ID: ${tenantId}`);
+        setIsLoading(true);
+        try {
+            const token = await ExampleServer.generateJwt({
+                authKey: Env.authKey,
+                userId: userId,
+            });
+            console.log(`New token: ${token}`);
+            await Courier.shared.signIn({
+                accessToken: token,
+                userId: userId,
+                tenantId: tenantId.length ? tenantId : undefined
+            });
+            setUserId(await Courier.shared.getUserId());
+            setTenantId(await Courier.shared.getTenantId());
+        }
+        catch (e) {
+            console.error(e);
+        }
+        setIsLoading(false);
+    }
+    async function signOut() {
+        await Courier.shared.signOut();
+        setUserId(await Courier.shared.getUserId());
+        setTenantId(await Courier.shared.getTenantId());
+    }
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        text: {
+            marginBottom: 10,
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontSize: 16,
+        },
+    });
+    const AuthButton = (props) => {
+        const [modalVisible, setModalVisible] = useState(false);
+        const [userId, setUserId] = useState('');
+        const [tenantId, setTenantId] = useState('');
+        const inputRef = useRef(null);
+        const styles = StyleSheet.create({
+            button: {
+                backgroundColor: 'lightgray',
+                padding: 10,
+                borderRadius: 5,
+            },
+            buttonText: {
+                fontSize: 16,
+                fontFamily: Platform.select({
+                    ios: 'Courier',
+                    android: 'monospace',
+                    default: 'monospace',
+                }),
+            },
+            modalContainer: {
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            },
+            modalContent: {
+                backgroundColor: 'white',
+                padding: 20,
+                borderRadius: 5,
+                elevation: 5,
+                minWidth: 300,
+            },
+            input: {
+                borderWidth: 1,
+                borderColor: 'gray',
+                borderRadius: 5,
+                padding: 10,
+                marginBottom: 10,
+            },
+        });
+        useEffect(() => {
+            if (modalVisible) {
+                inputRef.current.focus();
+            }
+        }, [modalVisible]);
+        const handleButtonPress = async () => {
+            if (await Courier.shared.getUserId()) {
+                await signOut();
+            }
+            else {
+                setModalVisible(true);
+            }
+        };
+        const handleModalClose = () => {
+            setModalVisible(false);
+        };
+        const handleUserIdInputChange = (text) => {
+            setUserId(text);
+        };
+        const handleTenantIdInputChange = (text) => {
+            setTenantId(text);
+        };
+        const handleSaveButtonPress = () => {
+            signIn(userId, tenantId);
+            setModalVisible(false);
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Modal, { visible: modalVisible, animationType: "slide", transparent: true },
+                React.createElement(View, { style: styles.modalContainer },
+                    React.createElement(View, { style: styles.modalContent },
+                        React.createElement(Text, null, "Set Courier User Id:"),
+                        React.createElement(TextInput, { ref: inputRef, style: styles.input, value: userId, autoCapitalize: "none", autoCorrect: false, onChangeText: handleUserIdInputChange }),
+                        React.createElement(Text, null, "Set Tenant Id:"),
+                        React.createElement(TextInput, { style: styles.input, value: tenantId, autoCapitalize: "none", autoCorrect: false, onChangeText: handleTenantIdInputChange }),
+                        React.createElement(Button, { title: "Sign In", onPress: handleSaveButtonPress }),
+                        React.createElement(Button, { title: "Cancel", onPress: handleModalClose })))),
+            React.createElement(TouchableOpacity, { style: styles.button, onPress: handleButtonPress },
+                React.createElement(Text, { style: styles.buttonText }, props.buttonText))));
+    };
+    const ToggleTouchesButton = () => {
+        const styles = StyleSheet.create({
+            button: {
+                backgroundColor: 'lightgray',
+                padding: 10,
+                borderRadius: 5,
+                marginTop: 10, // Add some space between buttons
+            },
+            buttonText: {
+                fontSize: 16,
+                fontFamily: Platform.select({
+                    ios: 'Courier',
+                    android: 'monospace',
+                    default: 'monospace',
+                }),
+            },
+        });
+        const [enabled, setEnabledState] = useState(false);
+        const { setEnabled } = usePoke();
+        const handleToggle = () => {
+            const newEnabled = !enabled;
+            setEnabledState(newEnabled);
+            setEnabled(newEnabled);
+        };
+        return (React.createElement(TouchableOpacity, { style: styles.button, onPress: handleToggle },
+            React.createElement(Text, { style: styles.buttonText }, enabled ? 'Hide Touches' : 'Show Touches')));
+    };
+    return (React.createElement(View, { style: styles.container },
+        isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
+        !isLoading && (React.createElement(React.Fragment, null,
+            userId && React.createElement(Text, { style: styles.text }, userId),
+            tenantId && React.createElement(Text, { style: styles.text }, tenantId),
+            React.createElement(AuthButton, { buttonText: userId ? 'Sign Out' : 'Sign In' }),
+            React.createElement(ToggleTouchesButton, null)))));
+};
+export default Auth;

package/lib/example/src/pages/Inbox.js

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import InboxDefault from './inbox/InboxDefault';
+import InboxStyled from './inbox/InboxStyled';
+import InboxCustom from './inbox/InboxCustom';
+import { TabControl } from '../Tabs';
+const tabs = [
+    { title: 'Default', key: 'Default' },
+    { title: 'Styled', key: 'Styled' },
+    { title: 'Custom', key: 'Custom' },
+];
+const Inbox = () => {
+    const [selectedTab, setSelectedTab] = useState('Default');
+    const renderContent = () => {
+        switch (selectedTab) {
+            case 'Default':
+                return React.createElement(InboxDefault, null);
+            case 'Styled':
+                return React.createElement(InboxStyled, null);
+            case 'Custom':
+                return React.createElement(InboxCustom, null);
+            default:
+                return null;
+        }
+    };
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(TabControl, { tabs: tabs, selectedTab: selectedTab, setSelectedTab: setSelectedTab }),
+        React.createElement(View, { style: styles.content }, renderContent())));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+    },
+});
+export default Inbox;

package/lib/example/src/pages/Preferences.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import PreferencesCustom from './preferences/PreferencesCustom';
+import PreferencesDefault from './preferences/PreferencesDefault';
+import PreferencesStyled from './preferences/PreferencesStyled';
+const Tab = createMaterialTopTabNavigator();
+const PreferencesTab = () => {
+    return (React.createElement(Tab.Navigator, null,
+        React.createElement(Tab.Screen, { name: "Default", component: PreferencesDefault }),
+        React.createElement(Tab.Screen, { name: "Styled", component: PreferencesStyled }),
+        React.createElement(Tab.Screen, { name: "Custom", component: PreferencesCustom })));
+};
+export default PreferencesTab;

package/lib/example/src/pages/PreferencesStack.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import Preferences from './Preferences';
+import PreferencesDetail from './preferences/PreferencesDetail';
+const Stack = createStackNavigator();
+const PreferencesStack = () => {
+    return (React.createElement(Stack.Navigator, null,
+        React.createElement(Stack.Screen, { name: "PreferencesTab", component: Preferences }),
+        React.createElement(Stack.Screen, { name: "PreferencesDetail", component: PreferencesDetail })));
+};
+export default PreferencesStack;

package/lib/example/src/pages/Push.js

@@ -0,0 +1,93 @@
+import Courier, { CourierPushProvider } from '@trycourier/courier-react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Clipboard, ActivityIndicator, Platform } from 'react-native';
+const Push = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [tokens, setTokens] = useState(new Map());
+    useEffect(() => {
+        setExampleToken();
+    }, []);
+    const refreshTokens = async () => {
+        const tokensMap = await Courier.shared.getAllTokens();
+        setTokens(tokensMap);
+    };
+    const setExampleToken = async () => {
+        setIsLoading(true);
+        const requestStatus = await Courier.requestNotificationPermission();
+        console.log('Request Notification Status: ' + requestStatus);
+        console.log('Get Notification Status: ' + await Courier.getNotificationPermissionStatus());
+        // Example of setting an expo token
+        await Courier.shared.setTokenForProvider({
+            provider: CourierPushProvider.EXPO,
+            token: 'example_expo_token'
+        });
+        setIsLoading(false);
+        refreshTokens();
+    };
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            gap: 20,
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: 20,
+        },
+        button: {
+            backgroundColor: 'lightgray',
+            padding: 10,
+            borderRadius: 5,
+        },
+        buttonText: {
+            fontSize: 16,
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+        },
+        itemContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 8,
+        },
+        keyText: {
+            flex: 1,
+            textAlign: 'left',
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontWeight: 'bold',
+            fontSize: 16,
+        },
+        valueText: {
+            flex: 1,
+            textAlign: 'right',
+            fontFamily: Platform.select({
+                ios: 'Courier',
+                android: 'monospace',
+                default: 'monospace',
+            }),
+            fontSize: 16,
+        },
+    });
+    const handleCopyToClipboard = (value) => {
+        Clipboard.setString(value);
+    };
+    const handleButtonPress = () => {
+        Courier.requestNotificationPermission();
+    };
+    return (React.createElement(View, { style: styles.container },
+        isLoading && (React.createElement(ActivityIndicator, { size: "small" })),
+        !isLoading && (React.createElement(React.Fragment, null,
+            Array.from(tokens).map(([key, value]) => (React.createElement(TouchableOpacity, { key: key, onPress: () => handleCopyToClipboard(value), style: styles.itemContainer },
+                React.createElement(Text, { style: styles.keyText }, key),
+                React.createElement(Text, { style: styles.valueText }, value)))),
+            React.createElement(TouchableOpacity, { style: styles.button, onPress: refreshTokens },
+                React.createElement(Text, { style: styles.buttonText }, "Refresh Tokens")),
+            React.createElement(TouchableOpacity, { style: styles.button, onPress: handleButtonPress },
+                React.createElement(Text, { style: styles.buttonText }, "Request Permissions"))))));
+};
+export default Push;

package/lib/example/src/pages/Styles.js

@@ -0,0 +1,26 @@
+import { Platform } from "react-native";
+export const Styles = (isDark) => {
+    return {
+        Fonts: {
+            heading: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf',
+            title: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf',
+            subtitle: Platform.OS === 'ios' ? 'Avenir Medium' : 'fonts/poppins_regular.otf'
+        },
+        Colors: {
+            heading: isDark ? '#9747FF' : '#9747FF',
+            title: isDark ? '#FFFFFF' : '#000000',
+            subtitle: isDark ? '#9A9A9A' : '#BEBEBE',
+            warning: isDark ? '#C32F27' : '#C32F27',
+            option: isDark ? '#1F1F1F' : '#F0F0F0',
+            action: isDark ? '#9747FF' : '#9747FF',
+        },
+        TextSizes: {
+            heading: 24,
+            title: 18,
+            subtitle: 16,
+        },
+        Corners: {
+            button: 100
+        }
+    };
+};