@boneframework/native-components 1.0.2 → 1.0.4

package/README.md

@@ -5,5 +5,9 @@ React Native expo components for BoneFramework WIP
 @/config/settings
 @/config/cache
 ```
+## install these at root level:
+```
+expo-auth-session
+```
 
 

package/Screens.ts

@@ -0,0 +1,4 @@
+import RegisterScreen from './screens/RegisterScreen'
+import WelcomeScreen from './screens/WelcomeScreen'
+
+export default { RegisterScreen, WelcomeScreen }

package/components/ActivityIndicator.js

@@ -0,0 +1,48 @@
+import React, {useEffect, useRef} from 'react';
+import {View, StyleSheet} from "react-native";
+
+import Animation from "./Animation";
+import useStyle from "../hooks/useStyle";
+
+function ActivityIndicator({ visible = false , type="default"}) {
+    const defaultStyles = useStyle();
+
+    const styles = StyleSheet.create({
+        overlay: {
+            flex:1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: defaultStyles.backgroundColor,
+            height: '100%',
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            opacity: 0.8
+        },
+        default: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+        }
+    });
+
+    if (!visible) {
+        return null;
+    }
+
+    const style = type === 'default' ? styles.default : styles.overlay;
+
+    return (
+        <View style={style}>
+            <Animation
+                source={require('../assets/animations/loader.json')}
+                autoPlay={true}
+                loop={true}
+                style={{height: 100, width: 100, opacity: 1}}
+                speed={1.5}
+            />
+        </View>
+    );
+}
+
+export default ActivityIndicator;

package/components/Animation.js

@@ -0,0 +1,21 @@
+import React, {useEffect, useRef} from 'react';
+import LottieView from "lottie-react-native";
+
+function Animation({source, style, onAnimationFinish, autoPlay = true, loop = true, speed = 1.5}) {
+
+    const lottieRef = useRef(null);
+
+    return(
+        <LottieView
+            source={source}
+            autoPlay={autoPlay}
+            loop={loop}
+            style={style}
+            speed={speed}
+            onAnimationFinish={onAnimationFinish}
+            ref={lottieRef}
+        />
+    );
+}
+
+export default Animation;

package/components/ApiInterceptor.js

@@ -0,0 +1,104 @@
+import React, {useEffect} from 'react';
+
+import apiClient from "../api/client";
+import authStorage from "../auth/storage";
+import settings from "../config/settings";
+import useAuth from '../hooks/useAuth';
+
+// call to refresh an access token using our refresh token
+const refreshToken = async (token) => {
+    const formData = new FormData();
+    formData.append('client_id', settings.clientId);
+    formData.append('grant_type', 'refresh_token');
+    formData.append('refresh_token', token);
+    formData.append('scope', 'basic');
+
+    const result = await apiClient.post(settings.discovery.tokenEndpoint, formData, {
+        headers: {'Content-Type': 'multipart/form-data'}
+    });
+
+    const newToken = {
+        accessToken: result.data.access_token,
+        expiresIn: result.data.expires_in,
+        refreshToken: result.data.refresh_token,
+        tokenType: result.data.token_type,
+    };
+    authStorage.storeAuthToken(newToken);
+
+    return newToken;
+}
+
+function ApiInterceptor(props) {
+    const {user, logout} = useAuth();
+    let refreshing = null;
+
+    const addTransformers = () => {
+
+        const requestTransformers = apiClient.asyncRequestTransforms.length;
+        const responseTransformers = apiClient.asyncResponseTransforms.length;
+        const transformersAdded = requestTransformers + responseTransformers > 1;
+
+        if (!transformersAdded) {
+            apiClient.addAsyncRequestTransform(async request => {
+                const authToken = await authStorage.getAuthToken();
+
+                if (!authToken) {
+                    return;
+                }
+
+                if (settings.xDebugHeader === true) {
+                    if (!request.params) {
+                        request.params = [];
+                    }
+                    request.params['XDEBUG_SESSION'] = 'PHPSTORM';
+                }
+
+                request.headers['Authorization']  = 'Bearer ' + authToken.accessToken;
+            });
+
+            // check for a 401 response (expired access token), use refresh token to fetch new access token, retry request
+            apiClient.addAsyncResponseTransform(async response => {
+                if (response.ok) {
+                    return response.data;
+                }
+
+                if (response.problem) {
+                    const originalConfig = response.config;
+
+                    //Access Token was expired, grab a fresh one using the refresh token and try again
+                    if (originalConfig.url !== settings.discovery.authEndpoint && response.status === 401 && !originalConfig.retry) {
+                        // settimng retry flag to allow retrying once and not loop infinitely
+                        originalConfig.retry = true;
+                        try {
+                            const token = await authStorage.getAuthToken();
+                            if (token) {
+                                // first request to refresh will call the method, all the other requests will await the promise
+                                // so only one call to refresh will be made in the case of multile async 401s
+                                refreshing = refreshing ? refreshing : refreshToken(token.refreshToken);
+                                await refreshing;
+                                refreshing = null;
+
+                                return apiClient.any(originalConfig);
+                            } else {
+                                return logout();
+                            }
+                        } catch (_error) {
+                            // if we get here, the refresh token has also expired, log the user out.
+                            return logout();
+                        }
+                    }
+
+                    return Promise.reject(response.problem);
+                }
+            });
+        }
+    }
+
+    useEffect( () => {
+        addTransformers();
+    }, []);
+
+    return null;
+}
+
+export default ApiInterceptor;

package/components/Button.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View, StyleSheet, Platform, TouchableOpacity, TouchableHighlight} from "react-native";
+
+import Text from '../components/Text'
+import colors from '../config/colors'
+import defaultStyles from '../config/styles'
+
+function Button({title, onPress, color, textColor}) {
+    return (
+        <TouchableHighlight style={[styles.roundbutton, {
+            backgroundColor: color ? colors[color]: styles.roundbutton.color,
+        }]} onPress={onPress}>
+            <Text style={[styles.text, {
+                color: textColor ? colors[textColor] : styles.text.color}]
+            }>{title}</Text>
+        </TouchableHighlight>
+    );
+}
+
+const styles = StyleSheet.create({
+    roundbutton: {
+        width: '100%',
+        height: 70,
+        borderRadius: 35,
+        backgroundColor: colors.primary,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginVertical: 10,
+        color: colors.black
+    },
+    text: {
+        fontFamily: defaultStyles.text.fontFamily,
+        color: colors.white,
+        fontSize: 18,
+        textTransform: 'uppercase',
+        fontWeight: 'bold'
+    }
+});
+
+export default Button;

package/components/Card.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import {Image} from 'react-native-expo-image-cache';
+
+import Text from './Text'
+import colors from '../config/colors'
+import useStyle from "../hooks/useStyle";
+
+function Card({title, subtitle, imageUrl, onPress, thumbnaiilUrl}) {
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        card: {
+            borderRadius: 15,
+            backgroundColor: style.box.backgroundColor,
+            marginBottom: 20,
+            overflow: "hidden"
+        },
+        image: {
+            width: '100%',
+            height: 200,
+        },
+        detailsContainer: {
+            padding: 20,
+        },
+        title: {
+          color: style.text.color
+        },
+        subtitle: {
+            color: style.errorText.color
+        }
+    });
+
+    return (
+        <TouchableWithoutFeedback onPress={onPress} >
+            <View style={styles.card}>
+                <Image
+                    style={styles.image}
+                    uri={imageUrl}
+                    preview={{uri: thumbnaiilUrl}}
+                    tint={'light'}
+                />
+                <View style={styles.detailsContainer}>
+                    <Text style={styles.title} numberOfLines={1}>
+                        {title}
+                    </Text>
+                    <Text style={styles.subtitle} numberOfLines={5}>
+                        {subtitle}
+                    </Text>
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+export default Card;

package/components/CategoryPickerItem.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View, StyleSheet, TouchableOpacity} from "react-native";
+
+import Text from '../components/Text'
+import Icon from '../components/Icon'
+import useStyle from "../hooks/useStyle";
+
+function CategoryPickerItem({item, onPress}) {
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingVertical: 15,
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        label: {
+            paddingTop: 5,
+            textAlign: 'center',
+            color: style.text.color
+        }
+    })
+
+    return <TouchableOpacity onPress={onPress} style={styles.container}>
+        <Icon backgroundColor={item.backgroundColor} name={item.icon} size={80}/>
+        <Text style={styles.label}>{item.label}</Text>
+    </TouchableOpacity>;
+}
+export default CategoryPickerItem;

package/components/DateTimePicker.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+import RNDateTimePicker from "@react-native-community/datetimepicker";
+
+function DateTimePicker({ ...props } ) {
+
+    return (
+        <RNDateTimePicker {...props} />
+    );
+}
+
+export default DateTimePicker;

package/components/Icon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {View, StyleSheet} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+function Icon({name, size = 40, backgroundColor, borderRadius , iconColor = 'white'}) {
+    borderRadius = borderRadius ? borderRadius : size /2;
+
+    const styles = StyleSheet.create({
+        icon: {
+            width: size,
+            height: size,
+            borderRadius: borderRadius,
+            backgroundColor: backgroundColor,
+            justifyContent: "center",
+            alignItems: "center"
+        }
+    });
+
+    return (
+        <View style={styles.icon}>
+            <MaterialCommunityIcons name={name} color={iconColor} size={size / 2} />
+        </View>
+    );
+}
+
+
+
+export default Icon;

package/components/Image.js

@@ -0,0 +1,61 @@
+import React, {useContext, useEffect, useState} from 'react';
+import {Image as RNImage, StyleSheet, View} from "react-native";
+
+import storage from '../auth/storage';
+import * as Notifications from "expo-notifications";
+import useAuth from "../hooks/useAuth";
+import authStorage from "../auth/storage";
+import settings from '../config/api';
+import AuthContext from "../auth/context";
+
+function Image({style, uri, onPress, handleError, source}) {
+    const {user, setUser} = useContext(AuthContext);
+
+    const tryAgain = async error => {
+        if (handleError !== null) {
+            handleError();
+        }
+        setTimeout(() => {
+
+        }, 1000);
+    };
+    let imageSource;
+    let protectedUri = false;
+
+    if (typeof source === 'object' && 'uri' in source !== null && (typeof source.uri === 'string' || source.uri instanceof String)) {
+        imageSource = source;
+
+        if (source.uri.startsWith(settings.baseURL)) {
+            imageSource = { headers: {Authorization: 'Bearer ' + user.authToken.accessToken }, uri: source.uri};
+            protectedUri = true;
+        }
+    }
+    else if (uri) {
+        imageSource = {uri: uri}
+
+        if (uri.startsWith(settings.baseURL)) {
+            imageSource = { headers: {Authorization: 'Bearer ' + user.authToken.accessToken }, uri: uri};
+            protectedUri = true;
+        }
+    } else if (source) {
+        imageSource = source;
+    }
+
+    if ((null !== user.authToken.accessToken && protectedUri == true) || protectedUri == false) {
+        return (
+            <RNImage
+                source={imageSource}
+                style={style}
+                onError={tryAgain}
+            ></RNImage>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {}
+})
+
+export default Image;
+
+

package/components/ImageInput.tsx

@@ -0,0 +1,97 @@
+import React, {useEffect} from 'react';
+import {Alert, Image, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+
+import colors from '../config/colors'
+import Icon from './Icon';
+import useCamera from '../hooks/useCamera';
+import usePhotos from '../hooks/usePhotos';
+import useStyle from "../hooks/useStyle";
+
+function ImageInput({imageUri, onChangeImage, onCancel = () => {}, mode = 'both'}) {
+
+    const camera = useCamera();
+    const photos = usePhotos();
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            backgroundColor: style.formInput.backgroundColor,
+            color: style.formInput.color,
+            borderRadius: 15,
+            justifyContent: 'center',
+            height: 100,
+            width: 100,
+            overflow: 'hidden'
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+        }
+    })
+
+    const handlePress = async () => {
+        if (!imageUri) {
+            switch (mode) {
+                case 'camera':
+                    selectImage('camera')
+                    break;
+                case 'photos':
+                    selectImage('photos');
+                    break;
+                case 'both':
+                default:
+                    Alert.alert(
+                        'Please choose',
+                        null,
+                        [
+                            { text: 'Photos', onPress: () => selectImage('photos') },
+                            { text: 'Camera', onPress: () => selectImage('camera') },
+                            { text: 'Cancel', style: 'cancel' }
+                        ]
+                    );
+            }
+
+        } else {
+            Alert.alert('Remove', 'are you sure you want to remove this image?', [
+                { text: 'Yes', onPress: () => onChangeImage(null)},
+                { text: 'No'},
+            ]);
+        }
+    };
+
+    const selectImage = async (pickerType) => {
+        try {
+            if (pickerType === 'camera') {
+                const result = await camera.takePhoto({
+                    allowsEditing: true,
+                    quality: 0.5
+                });
+                result.canceled ? onCancel() : onChangeImage(result.assets[0].uri);
+            } else {
+                const result = await photos.selectImage({
+                    quality: 0.5
+                });
+                result.canceled ? onCancel() : onChangeImage(result.assets[0].uri);
+            }
+
+        } catch (error) {
+            Alert.alert('Image error', 'Error reading image');
+            console.log(error);
+        }
+    };
+
+    return (
+        <TouchableWithoutFeedback onPress={handlePress}>
+            <View style={styles.container}>
+                {!imageUri ? (
+                    <Icon name="camera" size={75} iconColor={colors.medium} />
+                ) : (
+                    <Image source={{ uri: imageUri }} style={styles.image} />
+                )}
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+export default ImageInput;

package/components/ImageInputList.tsx

@@ -0,0 +1,34 @@
+import React, {useRef} from 'react';
+import {FlatList, Image, ScrollView, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import ImageInput from "./ImageInput";
+
+function ImageInputList({imageUris = [], onAddImage, onRemoveImage}) {
+    const scrollView = useRef();
+
+    return <View>
+        <ScrollView ref={scrollView} horizontal onContentSizeChange={ () => scrollView.current.scrollToEnd() } >
+            <View style={styles.container}>
+                { imageUris.map( uri => (
+                    <View key={uri} style={styles.image}>
+                        <ImageInput imageUri={uri} onChangeImage={ () => onRemoveImage(uri)} />
+                    </View>
+                )) }
+                <ImageInput onChangeImage={ uri => onAddImage(uri) } />
+            </View>
+        </ScrollView>
+    </View>;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row'
+    },
+    image: {
+        marginRight: 5
+    },
+    list: {
+        backgroundColor: 'yellow'
+    }
+})
+
+export default ImageInputList;

package/components/ListItemDeleteAction.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+
+import colors from '../config/colors'
+
+function ListItemDeleteAction({onPress}) {
+    return (
+        <TouchableWithoutFeedback onPress={onPress}>
+            <View style={styles.deleteBox} >
+                <MaterialCommunityIcons
+                    name="trash-can"
+                    size={35}
+                    color={colors.white}
+                />
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+const styles = StyleSheet.create({
+    deleteBox: {
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: colors.danger,
+        width: 70
+    }
+})
+
+export default ListItemDeleteAction;

package/components/ListItemFlipswitch.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+import ToggleSwitch from "toggle-switch-react-native";
+import Image from "./Image";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import Text from '../components/Text'
+import colors from "../config/colors";
+import useStyle from "../hooks/useStyle";
+
+function ListItemFlipswitch({title, subtitle, IconComponent, isOn, onColor, offColor, onToggle = () => {}}) {
+    const style = useStyle();
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 15,
+            backgroundColor: style.box.backgroundColor
+        },
+        detailsContainer: {
+            flex: 1,
+            marginLeft: 10,
+            justifyContent: "center"
+        },
+        image: {
+            width: 70,
+            height: 70,
+            borderRadius: 35,
+        },
+        title: {
+            color: style.text.color,
+            fontWeight: "500",
+        },
+        subtitle: {
+            color: colors.medium
+        }
+    });
+
+    onColor = onColor ? onColor : style.flipswitch.onColor
+    offColor = offColor ? offColor : style.flipswitch.offColor
+
+    return (
+        <View style={styles.container}>
+            {IconComponent}
+            <View style={styles.detailsContainer}>
+                <Text style={styles.title} numberOfLines={1}>{title}</Text>
+                {subtitle && <Text numberOfLines={2} style={styles.subtitle}>{subtitle}</Text> }
+            </View>
+            <ToggleSwitch
+                isOn={isOn}
+                onColor={onColor}
+                offColor={offColor}
+                size="large"
+                onToggle={onToggle}
+            />
+        </View>
+    );
+}
+
+export default ListItemFlipswitch;

package/components/ListItemSeparator.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+
+import colors from '../config/colors'
+import useStyle from "../hooks/useStyle";
+
+function ListItemSeparator() {
+    const style = useStyle();
+
+    const styles = StyleSheet.create({
+        separator: {
+            width: '100%',
+            height: 1,
+            backgroundColor: style.backgroundColor
+        }
+    })
+
+    return (
+        <View style={styles.separator} />
+    );
+}
+
+export default ListItemSeparator;

package/components/ListItemSwipable.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {StyleSheet, TouchableHighlight, View} from "react-native";
+import Swipeable from 'react-native-gesture-handler/Swipeable';
+
+import Image from '../components/Image'
+import Text from '../components/Text'
+import colors from '../config/colors'
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+import useStyle from "../hooks/useStyle";
+
+function ListItemSwipable({title, subtitle, image, IconComponent, onPress, renderRightActions, displayCheverons}) {
+    const style = useStyle();
+
+    if (!title && subtitle) {
+        title = subtitle;
+        subtitle = null;
+    }
+
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 15,
+            backgroundColor: style.box.backgroundColor
+        },
+        detailsContainer: {
+            flex: 1,
+            marginLeft: 10,
+            justifyContent: "center"
+        },
+        image: {
+            width: 70,
+            height: 70,
+            borderRadius: 35,
+        },
+        title: {
+            color: style.text.color,
+            fontWeight: "500"
+        },
+        subtitle: {
+            color: colors.medium
+        }
+    });
+
+    return (
+        <Swipeable renderRightActions={renderRightActions}>
+            <TouchableHighlight underlayColor={colors.light} onPress={onPress} >
+                <View style={styles.container}>
+                    { IconComponent }
+                    { image && <Image style={styles.image} source={image}></Image> }
+                    <View style={styles.detailsContainer}>
+                        <Text style={styles.title} numberOfLines={1}>
+                            { title }
+                        </Text>
+                        {subtitle && <Text numberOfLines={2} style={styles.subtitle}>{subtitle}</Text> }
+                    </View>
+                    { displayCheverons && <MaterialCommunityIcons name={'chevron-right'} size={25} color={colors.medium}/> }
+                </View>
+            </TouchableHighlight>
+        </Swipeable>
+    );
+}
+
+export default ListItemSwipable;

package/components/OfflineNotice.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+import {useNetInfo} from "@react-native-community/netinfo";
+
+import colors from "../config/colors";
+import Text from "./Text";
+
+function OfflineNotice(props) {
+    const netInfo = useNetInfo();
+
+    if (netInfo.type !== 'unkown' && netInfo.isInternetReachable === false) {
+        return(
+            <View style={styles.container}>
+                <Text style={styles.text}>No Internet connection</Text>
+            </View>
+        );
+    }
+
+    return null;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: colors.primary,
+        color: colors.white,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 10,
+        paddingTop: 20
+    },
+    text: {
+        color: colors.white,
+    }
+})
+
+export default OfflineNotice;

package/components/Picker.tsx

@@ -0,0 +1,87 @@
+import React, {useState} from 'react';
+import {FlatList, Modal, StyleSheet, TextInput, TouchableWithoutFeedback, View} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import Button from './Button'
+import Text from './Text'
+import PickerItem from './PickerItem'
+import PickerItemComponent from './PickerItemComponent'
+import Screen from './Screen'
+import useStyle from "../hooks/useStyle";
+
+function Picker({
+   icon,
+   items,
+   onSelectItem,
+   PickerItemComponent = PickerItem,
+   placeholder,
+   selectedItem,
+   width = '100%',
+   numColumns = 1
+}) {
+    const [modalVisible, setModalVisible] = useState(false);
+    const defaultStyles = useStyle();
+
+    const style = StyleSheet.create({
+        container: {
+            backgroundColor: defaultStyles.formInput.backgroundColor,
+            borderRadius: 25,
+            flexDirection: 'row',
+            width: '100%',
+            padding: 15,
+            marginVertical: 10,
+        },
+        icon: {
+            marginRight: 10
+        },
+        modal: {
+            flex: 1,
+            padding: 15,
+            backgroundColor: defaultStyles.backgroundColor,
+            color: defaultStyles.text.color
+        },
+        placeholder: {
+            flex: 1,
+            color: defaultStyles.colors.medium
+        },
+        text: {
+            flex: 1
+        }
+    })
+
+    return (
+        <View>
+            <TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
+                <View style={[style.container, {width: width}]}>
+                    {icon && <MaterialCommunityIcons name={icon} size={25} color={defaultStyles.colors.medium} style={style.icon} />}
+                    <Text style={selectedItem ? [defaultStyles.text, style.text] : [defaultStyles.text, style.placeholder] } >
+                        { selectedItem ? selectedItem.label : placeholder }
+                    </Text>
+                    <MaterialCommunityIcons name="chevron-down" size={25} color={defaultStyles.colors.medium} />
+                </View>
+            </TouchableWithoutFeedback>
+
+            <Modal visible={modalVisible}  animationType="slide">
+                <Screen style={style.modal}>
+                    <Button title="Close" onPress={() => setModalVisible(false)}/>
+                    <FlatList
+                        data={items}
+                        keyExtractor={item => item.value}
+                        numColumns={numColumns}
+                        renderItem={({item}) =>
+                            <PickerItemComponent
+                                item={item}
+                                label={item.label}
+                                onPress={() => {
+                                    setModalVisible(false);
+                                    onSelectItem(item);
+                                }}
+                            />
+                    } />
+                </Screen>
+            </Modal>
+        </View>
+    );
+}
+
+export default Picker;

package/components/PickerItem.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View} from "react-native";
+
+import Text from './Text';
+
+function PickerItem({ item, onPress }) {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <Text style={styles.text}>{item.label}</Text>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    text: {
+        padding: 20
+    }
+});
+
+export default PickerItem;

package/components/PickerItemComponent.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {StyleSheet, View} from "react-native";
+
+function PickerItemComponent({item, onPress}) {
+    return <View style={styles.container}></View>;
+}
+
+const styles = StyleSheet.create({
+    container: {
+
+    }
+})
+
+export default PickerItemComponent;

package/components/RoundIconButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {StyleSheet, TouchableOpacity, View} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import colors from '../config/colors'
+
+function RoundIconButton({ icon, onPress = () => {}, style }) {
+    const combinedStyle =  { ...styles.container, ...style };
+
+    return (
+        <TouchableOpacity onPress={ onPress } >
+            <View style={combinedStyle}>
+                <MaterialCommunityIcons style={styles.icon} name={icon} size={40}/>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.primary,
+        borderColor: colors.white,
+        borderWidth: 5,
+        borderRadius: 40,
+        height: 80,
+        width: 80,
+        bottom: 25
+    },
+    icon: {
+        color: colors.white
+    }
+})
+
+export default RoundIconButton;

package/components/Screen.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {SafeAreaView, StyleSheet, View} from "react-native";
+import Constants from "expo-constants";
+
+function Screen({children, style}) {
+    return (
+        <SafeAreaView style={[style, styles.screen]}>
+            <View style={[style, styles.view]}>
+                {children}
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    screen: {
+        paddingTop: Constants.statusBarHeight,
+        flex: 1,
+        height: '100%'
+    },
+    view: {
+        flex: 1
+    }
+})
+
+export default Screen;

package/components/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Text as NativeText, StyleSheet} from "react-native";
+
+import defaultStyles from '../config/styles'
+import colors from "../config/colors";
+
+function Text({children, style, ...otherProps}) {
+    return (
+        <NativeText style={[defaultStyles.text, style]} {...otherProps} >
+            {children}
+        </NativeText>
+    )
+}
+
+export default Text;

package/components/TextInput.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {StyleSheet, TextInput as NativeTextInput, View} from "react-native";
+import {MaterialCommunityIcons} from "@expo/vector-icons";
+
+import useStyle from "../hooks/useStyle";
+
+function TextInput({ icon, width = '100%', ...otherProps }) {
+    const defaultStyles = useStyle();
+
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: defaultStyles.formInput.backgroundColor,
+            borderRadius: 25,
+            flexDirection: 'row',
+            padding: 15,
+            marginVertical: 10,
+        },
+        input: {
+            flex: 1,
+            color: defaultStyles.formInput.color,
+        },
+        icon: {
+            marginRight: 10
+        },
+    })
+
+    return (
+        <View style={ [styles.container, {width}] }>
+            {icon && <MaterialCommunityIcons name={icon} size={25} color={defaultStyles.colors.medium} style={styles.icon} />}
+            <NativeTextInput
+                placeholderTextColor={defaultStyles.colors.medium}
+                style={[styles.input, defaultStyles.text]}
+                {...otherProps}
+            />
+        </View>
+    );
+}
+
+export default TextInput;

package/hooks/useApi.js

@@ -0,0 +1,20 @@
+import {useState} from "react";
+
+export default useApi = (apiFunc) => {
+    const [error, setError] = useState(false);
+    const [headers, setHeaders] = useState([]);
+    const [data, setData] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    const request = async (...args) => {
+        setLoading(true);
+        const response = await apiFunc(...args);
+        setLoading(false);
+        setError(!response.ok);
+        setHeaders(response.headers);
+        setData(response.data);
+        return response;
+    }
+
+    return {data, error, headers, loading, request}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -31,8 +31,10 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.24.0",
     "apisauce": "^3.0.1",
+    "expo-auth-session": "^5.5.2",
     "expo-secure-store": "^13.0.2",
     "jwt-decode": "^4.0.0",
-    "react": "18.2.0"
+    "react": "18.2.0",
+    "yup": "^1.4.0"
   }
 }

package/screens/RegisterScreen.tsx

@@ -0,0 +1,87 @@
+import { router } from 'expo-router';
+import React, {useState} from 'react';
+import {Image, ImageBackground, Keyboard, StyleSheet, TouchableOpacity, View} from "react-native";
+import * as Yup from 'yup'
+
+import ActivityIndicator from "@/components/ActivityIndicator";
+import useApi from "@/hooks/useApi";
+import usersApi from '@/api/users';
+import {ErrorMessage, FormField, Form, SubmitButton} from '../components/forms'
+import Icon from "@/components/Icon";
+
+const validationSchema = Yup.object().shape({
+    email: Yup.string().required().email().label('Email'),
+});
+
+function RegisterScreen({postRegisterUrl}) {
+    const registerApi = useApi(usersApi.register);
+    const [error, setError] = useState();
+    const onClose = () => router.back();
+
+    const handleSubmit = async userInfo => {
+        Keyboard.dismiss();
+        const result = await registerApi.request(userInfo);
+
+        if (!result.ok) {
+            if (result.data) {
+                setError(result.data.error);
+            } else {
+                setError('An unexpected error occured');
+                console.error(result);
+            }
+
+            return;
+        }
+
+        router.navigate(postRegisterUrl);
+    };
+
+    return (
+        <>
+        <ActivityIndicator visible={registerApi.loading} type={'overlay'}/>
+        <ImageBackground blurRadius={10} style={styles.background} source={require('../assets/background.png')} >
+            <View style={styles.container}>
+                <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
+                    <Icon size={75} name={'close'} />
+                </TouchableOpacity>
+                <Image style={styles.logo} source={require('../assets/logo.png')} />
+
+                <Form
+                    initialValues={{ email: ''}}
+                    onSubmit={handleSubmit}
+                    validationSchema={validationSchema}
+                >
+                    <ErrorMessage error={error} visible={error} />
+                    <FormField
+                        name="email"
+                        icon="email"
+                        placeholder="Email"
+                        autoCapitalize="none"
+                        keyboardType="email-address"
+                        textContentType="emailAddress"
+                    />
+                    <SubmitButton color="primary" title="Register" />
+                </Form>
+            </View>
+        </ImageBackground>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 20,
+    },
+    logo: {
+        width: 150,
+        height: 105,
+        alignSelf: "center",
+        marginTop: 50,
+        marginBottom: 20,
+    },
+    background: {
+        height: '100%'
+    }
+})
+
+export default RegisterScreen;

package/screens/WelcomeScreen.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
+import {exchangeCodeAsync, makeRedirectUri, useAuthRequest} from "expo-auth-session";
+
+import Button from '@/components/Button'
+import colors from '@/config/colors'
+
+function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}}) {
+    return (
+        <ImageBackground blurRadius={10} style={styles.background} source={require('@/assets/background.png')} >
+            <View style={styles.logoContainer}>
+                <Image style={styles.logo} source={require('@/assets/logo.png')} />
+                <Text style={styles.tagline}>BONE FRAMEWORK</Text>
+            </View>
+            <View style={styles.buttonContainer}>
+                <Button title="login" color="primary" onPress={loginOnPress} ></Button>
+                <Button title="register" color="secondary" onPress={registerOnPress}></Button>
+            </View>
+        </ImageBackground>
+    );
+}
+const styles = StyleSheet.create({
+    background: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    logo: {
+        width: 150,
+        height: 105
+    },
+    logoContainer: {
+        position: 'absolute',
+        top: 70,
+        alignItems: "center"
+    },
+    buttonContainer: {
+        width: "100%",
+        padding: 20
+    },
+    tagline: {
+        fontSize: 50,
+        fontWeight: 'bold',
+        paddingTop: 10,
+        color: colors.white,
+        textAlign: 'center'
+    },
+});
+
+export default WelcomeScreen;

package/src/Screens.ts

@@ -1 +0,0 @@
-export default {}