@boneframework/native-components 1.0.9 → 1.0.11

package/components/ActivityIndicator.js

@@ -35,7 +35,7 @@ function ActivityIndicator({ visible = false , type="default"}) {
     return (
         <View style={style}>
             <Animation
-                source={require('../../../../assets/animations/loader.json')}
+                source={require.main.require('assets/animations/loader.json')}
                 autoPlay={true}
                 loop={true}
                 style={{height: 100, width: 100, opacity: 1}}

package/components/ApiInterceptor.js

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react';
 
 import apiClient from "../api/client";
 import authStorage from "../auth/storage";
-import settings from "../config/settings";
+import settings from "../../../../config/settings";
 import useAuth from '../hooks/useAuth';
 
 // call to refresh an access token using our refresh token

package/components/Card.js

@@ -3,7 +3,7 @@ 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 colors from '../../../../config/colors'
 import useStyle from "../hooks/useStyle";
 
 function Card({title, subtitle, imageUrl, onPress, thumbnaiilUrl}) {

package/components/Image.js

@@ -5,7 +5,7 @@ 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 settings from '../../../../config/api';
 import AuthContext from "../auth/context";
 
 function Image({style, uri, onPress, handleError, source}) {

package/components/ImageInput.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import {Alert, Image, StyleSheet, TouchableWithoutFeedback, View} from "react-native";
 
-import colors from '../config/colors'
+import colors from '../../../../config/colors'
 import Icon from './Icon';
 import useCamera from '../hooks/useCamera';
 import usePhotos from '../hooks/usePhotos';

package/components/ListItemDeleteAction.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet, TouchableWithoutFeedback, View} from "react-native";
 import {MaterialCommunityIcons} from '@expo/vector-icons';
 
-import colors from '../config/colors'
+import colors from '../../../../config/colors'
 
 function ListItemDeleteAction({onPress}) {
     return (

package/components/ListItemFlipswitch.tsx

@@ -5,7 +5,7 @@ import Image from "./Image";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 
 import Text from '../components/Text'
-import colors from "../config/colors";
+import colors from '../../../../config/colors';
 import useStyle from "../hooks/useStyle";
 
 function ListItemFlipswitch({title, subtitle, IconComponent, isOn, onColor, offColor, onToggle = () => {}}) {

package/components/ListItemSeparator.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleSheet, View} from "react-native";
 
-import colors from '../config/colors'
+import colors from '../../../../config/colors'
 import useStyle from "../hooks/useStyle";
 
 function ListItemSeparator() {

package/components/ListItemSwipable.tsx

@@ -4,7 +4,7 @@ import Swipeable from 'react-native-gesture-handler/Swipeable';
 
 import Image from '../components/Image'
 import Text from '../components/Text'
-import colors from '../config/colors'
+import colors from '../../../../config/colors'
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import useStyle from "../hooks/useStyle";
 

package/components/OfflineNotice.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet, View} from "react-native";
 import {useNetInfo} from "@react-native-community/netinfo";
 
-import colors from "../config/colors";
+import colors from '../../../../config/colors';
 import Text from "./Text";
 
 function OfflineNotice(props) {

package/components/RoundIconButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {StyleSheet, TouchableOpacity, View} from "react-native";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 
-import colors from '../config/colors'
+import colors from '../../../../config/colors'
 
 function RoundIconButton({ icon, onPress = () => {}, style }) {
     const combinedStyle =  { ...styles.container, ...style };

package/components/Text.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import {Text as NativeText, StyleSheet} from "react-native";
 
-import defaultStyles from '../config/styles'
-import colors from "../config/colors";
+import defaultStyles from '../../../../config/styles'
+import colors from "../../../../config/colors";
 
 function Text({children, style, ...otherProps}) {
     return (

package/components/forms/FormDateTimePicker.js

@@ -1,8 +1,9 @@
 import RNDateTimePicker from '@react-native-community/datetimepicker';
 import React from 'react';
+import {StyleSheet} from "react-native";
 import {Field, useFormikContext} from "formik";
+
 import DateTimePicker from "../DateTimePicker";
-import {StyleSheet} from "react-native";
 import useStyle from "../../hooks/useStyle";
 
 function FormDateTimePicker ({...props}) {

package/hooks/useCamera.js

@@ -0,0 +1,29 @@
+import {useEffect} from "react";
+import { Camera } from 'expo-camera';
+import * as ImagePicker from "expo-image-picker";
+
+export default useCamera = () => {
+
+    const requestPermission = async () => {
+        const { granted } = await Camera.requestCameraPermissionsAsync();
+
+        if (!granted) {
+            Alert.alert(
+                'Device settings alert',
+                'You need to allow camera permissions for this to work'
+            );
+        }
+    }
+
+    const takePhoto = async (options) => {
+        options = {mediaTypes: ImagePicker.MediaTypeOptions.Images, ...options };
+
+        return await ImagePicker.launchCameraAsync(options);
+    }
+
+    useEffect(() => {
+        requestPermission();
+    }, []);
+
+    return {takePhoto};
+};

package/hooks/usePhotos.js

@@ -0,0 +1,28 @@
+import {useEffect} from "react";
+import * as ImagePicker from "expo-image-picker";
+
+export default usePhotos = () => {
+
+    const requestPermission = async () => {
+        const { granted} = await ImagePicker.requestMediaLibraryPermissionsAsync();
+
+        if (!granted) {
+            Alert.alert(
+                'Device settings alert',
+                'You need to allow media library permissions for this to work'
+            );
+        }
+    }
+
+    const selectImage = async (options) => {
+        options = {mediaTypes: ImagePicker.MediaTypeOptions.Images, ...options };
+
+        return await ImagePicker.launchImageLibraryAsync(options);
+    }
+
+    useEffect(() => {
+        requestPermission();
+    }, []);
+
+    return {selectImage};
+};

package/hooks/useStyle.js

@@ -1,8 +1,8 @@
 import {useEffect, useState} from "react";
 import {Platform, useColorScheme} from "react-native";
 
-import colors from "@/config/colors";
-import logger from "@/utility/logger";
+import colors from "../../../../config/colors";
+import logger from "../utilities/logger";
 
 export default useStyle = () => {
     const colorScheme = useColorScheme();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boneframework/native-components",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Expo Components for Bone Framework",
   "main": "src/Bone.ts",
   "scripts": {
@@ -30,8 +30,10 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.24.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
     "apisauce": "^3.0.1",
     "expo-auth-session": "^5.5.2",
+    "expo-image-picker": "^15.0.7",
     "expo-secure-store": "^13.0.2",
     "formik": "^2.4.6",
     "jwt-decode": "^4.0.0",

package/screens/RegisterScreen.tsx

@@ -39,12 +39,12 @@ function RegisterScreen({postRegisterUrl}) {
     return (
         <>
         <ActivityIndicator visible={registerApi.loading} type={'overlay'}/>
-        <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
+        <ImageBackground blurRadius={10} style={styles.background} source={require.main.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')} />
+                <Image style={styles.logo} source={require.main.require('assets/logo.png')} />
 
                 <Form
                     initialValues={{ email: ''}}

package/screens/WelcomeScreen.tsx

@@ -7,9 +7,9 @@ import colors from '../../../../config/colors'
 
 function WelcomeScreen({loginOnPress = () => {}, registerOnPress = () => {}, title = 'BONE FRAMEWORK'}) {
     return (
-        <ImageBackground blurRadius={10} style={styles.background} source={require('../../../../assets/background.png')} >
+        <ImageBackground blurRadius={10} style={styles.background} source={require.main.require('assets/background.png')} >
             <View style={styles.logoContainer}>
-                <Image style={styles.logo} source={require('../../../../assets/logo.png')} />
+                <Image style={styles.logo} source={require.main.require('assets/logo.png')} />
                 <Text style={styles.tagline}>{ title }</Text>
             </View>
             <View style={styles.buttonContainer}>

package/utilities/logger.ts

@@ -0,0 +1,26 @@
+// import Bugsnag from '@bugsnag/expo';
+// or sentry, whatever
+
+import {object} from "prop-types";
+
+const log = (message: any) => {
+    console.log(message);
+    // Bugsnag.notify(error);
+};
+
+const logObject = (json: object)=> {
+    console.log(JSON.stringify(json, undefined, 4));
+};
+
+const logJson = (json: string)=> {
+    const jsonObject = JSON.parse(json);
+    console.log(JSON.stringify(jsonObject, undefined, 4));
+};
+
+const start = () => {
+  // Bugsnag.start();
+};
+
+export default {
+    log, start, logJson
+}