chore: Package upgrades and improvements

powersync-ja · Oct 10, 2024 · 63ad984 · 63ad984
1 parent a50b32b
commit 63ad984
Show file tree

Hide file tree

Showing 8 changed files with 17,486 additions and 21,071 deletions.
diff --git a/demos/react-native-supabase-todolist/app/index.tsx b/demos/react-native-supabase-todolist/app/index.tsx
@@ -5,6 +5,12 @@ import { useSystem } from '../library/powersync/system';
 import { router } from 'expo-router';
 import Logger from 'js-logger';
 
+import { ThemeProvider, createTheme } from '@rneui/themed';
+
+const theme = createTheme({
+  mode: 'light'
+});
+
 /**
  * This is the entry point when the app loads.
  * Checks for a Supabase session.
@@ -32,9 +38,11 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <View key={`loader`} style={{ flex: 1, flexGrow: 1, alignContent: 'center', justifyContent: 'center' }}>
-      <ActivityIndicator />
-    </View>
+    <ThemeProvider theme={theme}>
+      <View key={`loader`} style={{ flex: 1, flexGrow: 1, alignContent: 'center', justifyContent: 'center' }}>
+        <ActivityIndicator />
+      </View>
+    </ThemeProvider>
   );
 };
 

diff --git a/demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx b/demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx
@@ -4,8 +4,8 @@ import { CameraCapturedPicture } from 'expo-camera';
 import _ from 'lodash';
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { ScrollView, View, Text } from 'react-native';
-import { FAB } from 'react-native-elements';
+import { ScrollView, View } from 'react-native';
+import { FAB, Text } from '@rneui/themed';
 import { Stack, useLocalSearchParams } from 'expo-router';
 import prompt from 'react-native-prompt-android';
 import { TODO_TABLE, TodoRecord, LIST_TABLE } from '../../../../library/powersync/AppSchema';
@@ -136,6 +136,7 @@ const TodoView: React.FC = () => {
       <FAB
         style={{ zIndex: 99, bottom: 0 }}
         icon={{ name: 'add', color: 'white' }}
+        color="#aa00ff"
         size="small"
         placement="right"
         onPress={() => {

diff --git a/demos/react-native-supabase-todolist/app/views/todos/lists.tsx b/demos/react-native-supabase-todolist/app/views/todos/lists.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { ScrollView, View } from 'react-native';
-import { FAB, Text } from 'react-native-elements';
+import { FAB, Text } from '@rneui/themed';
 import prompt from 'react-native-prompt-android';
 
 import { router, Stack } from 'expo-router';
@@ -61,6 +61,7 @@ const ListsViewWidget: React.FC = () => {
       <FAB
         style={{ zIndex: 99, bottom: 0 }}
         icon={{ name: 'add', color: 'white' }}
+        color="#aa00ff"
         size="small"
         placement="right"
         onPress={() => {

diff --git a/demos/react-native-supabase-todolist/library/widgets/CameraWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/CameraWidget.tsx
@@ -1,5 +1,5 @@
-import { CameraCapturedPicture, CameraView, useCameraPermissions } from 'expo-camera';
-import React from 'react';
+import { CameraView, useCameraPermissions, CameraCapturedPicture } from 'expo-camera';
+import React, { useRef } from 'react';
 import {
   StyleSheet,
   Text,
@@ -9,7 +9,7 @@ import {
   ActivityIndicator,
   Platform
 } from 'react-native';
-import { Button, Icon } from 'react-native-elements';
+import { Button, Icon } from '@rneui/themed';
 
 export interface Props {
   onCaptured: (photo: CameraCapturedPicture) => void;
@@ -19,7 +19,7 @@ export interface Props {
 const isAndroid = Platform.OS === 'android';
 
 export const CameraWidget: React.FC<Props> = (props) => {
-  const cameraRef = React.useRef<CameraView>(null);
+  const cameraRef = useRef<CameraView>(null);
   const [permission, requestPermission] = useCameraPermissions();
   const [ready, setReady] = React.useState(false);
   const [loading, setLoading] = React.useState(false);
@@ -75,17 +75,18 @@ export const CameraWidget: React.FC<Props> = (props) => {
         ref={cameraRef}
         style={{ ...styles.camera, height: height, width: '100%' }}
         facing="back"
-        onCameraReady={onReady}
-        ratio={isAndroid ? '16:9' : undefined}>
-        <TouchableOpacity onPress={props.onClose} style={styles.backButton}>
-          <Icon name={'chevron-left'} type={'font-awesome'} color={'white'} />
-        </TouchableOpacity>
+        onCameraReady={onReady}>
         <View style={styles.bottomCamera}>
           <TouchableOpacity disabled={loading} style={styles.shutterButton} onPress={captureImageAsync}>
             <ActivityIndicator animating={loading} />
           </TouchableOpacity>
         </View>
       </CameraView>
+      <View style={styles.backButtonContainer}>
+        <TouchableOpacity onPress={props.onClose} style={styles.backButton}>
+          <Icon name={'close'} type={'material'} color={'white'} size={32} />
+        </TouchableOpacity>
+      </View>
     </View>
   );
 };
@@ -95,10 +96,19 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center'
   },
-  backButton: {
+  backButtonContainer: {
     position: 'absolute',
-    top: 16,
-    left: 16
+    top: 0,
+    left: 0,
+    width: '100%',
+    backgroundColor: 'rgba(52, 52, 52, 0.5)'
+  },
+  backButton: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginLeft: 10,
+    marginTop: 10
   },
   camera: {
     flex: 1

diff --git a/demos/react-native-supabase-todolist/library/widgets/ListItemWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/ListItemWidget.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, View } from 'react-native';
-import { ListItem, Icon, Button } from 'react-native-elements';
+import { ListItem, Icon, Button } from '@rneui/themed';
 
 export interface ListItemWidgetProps {
   title: string;

diff --git a/demos/react-native-supabase-todolist/library/widgets/TodoItemWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/TodoItemWidget.tsx
@@ -1,7 +1,7 @@
 import { CameraCapturedPicture } from 'expo-camera';
 import React from 'react';
 import { ActivityIndicator, Alert, View, Modal, StyleSheet } from 'react-native';
-import { ListItem, Button, Icon, Image } from 'react-native-elements';
+import { ListItem, Button, Icon, Image } from '@rneui/themed';
 import { CameraWidget } from './CameraWidget';
 import { TodoRecord } from '../powersync/AppSchema';
 import { AttachmentRecord } from '@powersync/attachments';
@@ -35,13 +35,23 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
         bottomDivider
         rightContent={
           <Button
+            buttonStyle={{
+              flexDirection: 'column',
+              alignContent: 'center',
+              borderColor: 'transparent',
+              minHeight: '100%'
+            }}
             containerStyle={{
               flex: 1,
+              flexGrow: 1,
+              height: '100%',
               justifyContent: 'center',
-              backgroundColor: '#d3d3d3'
+              backgroundColor: 'rgba(240, 15, 15, 0.9)'
             }}
+            title="Delete"
+            titleStyle={{ color: 'white' }}
             type="clear"
-            icon={{ name: 'delete', color: 'red' }}
+            icon={{ name: 'trash', type: 'font-awesome', color: 'white' }}
             onPress={() => {
               Alert.alert(
                 'Confirm',
@@ -68,11 +78,22 @@ export const TodoItemWidget: React.FC<TodoItemWidgetProps> = (props) => {
           />
         )}
         <ListItem.Content style={{ minHeight: 80 }}>
-          <ListItem.Title>{record.description}</ListItem.Title>
+          <ListItem.Title style={{ fontSize: 20 }}>{record.description}</ListItem.Title>
         </ListItem.Content>
         {AppConfig.supabaseBucket &&
           (record.photo_id == null ? (
-            <Icon name={'camera'} type="font-awesome" onPress={() => setCameraVisible(true)} />
+            <Button
+              type="outline"
+              buttonStyle={{ borderColor: 'transparent' }}
+              onPress={() => setCameraVisible(true)}
+              icon={{
+                name: 'camera',
+                type: 'font-awesome',
+                color: 'black',
+                size: 28
+              }}>
+              {/* <Icon name={'camera'} type="material" color={'black'} size={32} /> */}
+            </Button>
           ) : photoAttachment?.local_uri != null ? (
             <Image
               source={{ uri: system.attachmentQueue?.getLocalUri(photoAttachment.local_uri) }}

diff --git a/demos/react-native-supabase-todolist/package.json b/demos/react-native-supabase-todolist/package.json
@@ -18,9 +18,11 @@
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.0.0",
-    "@supabase/supabase-js": "^2.33.1",
+    "@rneui/base": "4.0.0-rc.8",
+    "@rneui/themed": "4.0.0-rc.8",
+    "@supabase/supabase-js": "~2.33.1",
     "base64-arraybuffer": "^1.0.2",
-    "expo": "51.0.34",
+    "expo": "51.0.37",
     "expo-build-properties": "~0.12.1",
     "expo-camera": "~15.0.16",
     "expo-constants": "~16.0.2",
@@ -36,23 +38,21 @@
     "metro": "~0.80.8",
     "react": "18.2.0",
     "react-native": "0.74.5",
-    "react-native-elements": "^3.4.2",
     "react-native-encrypted-storage": "^4.0.3",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-prompt-android": "^1.1.0",
-    "react-native-reanimated": "~3.15.0",
+    "react-native-reanimated": "~3.10.1",
     "react-native-reanimated-table": "^0.0.2",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "~3.31.1",
-    "react-native-vector-icons": "^10.0.0",
     "react-navigation-stack": "^2.10.4"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
     "@babel/plugin-transform-async-generator-functions": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@types/lodash": "^4.14.202",
-    "@types/react": "~18.2.57",
+    "@types/react": "~18.2.79",
     "babel-preset-expo": "^11.0.5",
     "prettier": "^3.2.5",
     "typescript": "^5.3.3"