diff --git a/demos/react-native-supabase-todolist/android/gradle.properties b/demos/react-native-supabase-todolist/android/gradle.properties
index a955bf8c..dded52cd 100644
--- a/demos/react-native-supabase-todolist/android/gradle.properties
+++ b/demos/react-native-supabase-todolist/android/gradle.properties
@@ -38,7 +38,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
-newArchEnabled=false
+newArchEnabled=true
# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
diff --git a/demos/react-native-supabase-todolist/app.config.ts b/demos/react-native-supabase-todolist/app.config.ts
index 9cbb05e1..47d54e8d 100644
--- a/demos/react-native-supabase-todolist/app.config.ts
+++ b/demos/react-native-supabase-todolist/app.config.ts
@@ -59,14 +59,14 @@ const config: ExpoConfig = {
{
ios: {
deploymentTarget: '13.4',
- newArchEnabled: false
+ newArchEnabled: true
},
android: {
minSdkVersion: 23,
compileSdkVersion: 34,
targetSdkVersion: 34,
buildToolsVersion: '34.0.0',
- newArchEnabled: false
+ newArchEnabled: true
}
}
],
diff --git a/demos/react-native-supabase-todolist/app/index.tsx b/demos/react-native-supabase-todolist/app/index.tsx
index 3f7b7d22..7624da01 100644
--- 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 (
-
-
-
+
+
+
+
+
);
};
diff --git a/demos/react-native-supabase-todolist/app/register.tsx b/demos/react-native-supabase-todolist/app/register.tsx
index a2143299..25ac6465 100644
--- a/demos/react-native-supabase-todolist/app/register.tsx
+++ b/demos/react-native-supabase-todolist/app/register.tsx
@@ -6,7 +6,7 @@ import { router } from 'expo-router';
import { useSystem } from '../library/powersync/system';
import { TextInputWidget } from '../library/widgets/TextInputWidget';
import { SignInStyles } from './signin';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
export default function Register() {
const { supabaseConnector } = useSystem();
diff --git a/demos/react-native-supabase-todolist/app/signin.tsx b/demos/react-native-supabase-todolist/app/signin.tsx
index d9e74961..1030dc0e 100644
--- a/demos/react-native-supabase-todolist/app/signin.tsx
+++ b/demos/react-native-supabase-todolist/app/signin.tsx
@@ -5,7 +5,7 @@ import { router } from 'expo-router';
import { useSystem } from '../library/powersync/system';
import { Button } from 'react-native';
import { TextInputWidget } from '../library/widgets/TextInputWidget';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
export default function Signin() {
const { supabaseConnector } = useSystem();
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
index 66824a68..3d80897d 100644
--- 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 = () => {
{
diff --git a/demos/react-native-supabase-todolist/app/views/todos/lists.tsx b/demos/react-native-supabase-todolist/app/views/todos/lists.tsx
index 441b2c17..10225a55 100644
--- 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 = () => {
{
diff --git a/demos/react-native-supabase-todolist/ios/Podfile.lock b/demos/react-native-supabase-todolist/ios/Podfile.lock
index 7a88a350..0ef02985 100644
--- a/demos/react-native-supabase-todolist/ios/Podfile.lock
+++ b/demos/react-native-supabase-todolist/ios/Podfile.lock
@@ -1030,7 +1030,71 @@ PODS:
- ReactCommon/turbomodule/core
- Yoga
- react-native-safe-area-context (4.10.5):
+ - DoubleConversion
+ - glog
+ - hermes-engine
+ - RCT-Folly (= 2024.01.01.00)
+ - RCTRequired
+ - RCTTypeSafety
+ - React-Codegen
+ - React-Core
+ - React-debug
+ - React-Fabric
+ - React-featureflags
+ - React-graphics
+ - React-ImageManager
+ - react-native-safe-area-context/common (= 4.10.5)
+ - react-native-safe-area-context/fabric (= 4.10.5)
+ - React-NativeModulesApple
+ - React-RCTFabric
+ - React-rendererdebug
+ - React-utils
+ - ReactCommon/turbomodule/bridging
+ - ReactCommon/turbomodule/core
+ - Yoga
+ - react-native-safe-area-context/common (4.10.5):
+ - DoubleConversion
+ - glog
+ - hermes-engine
+ - RCT-Folly (= 2024.01.01.00)
+ - RCTRequired
+ - RCTTypeSafety
+ - React-Codegen
+ - React-Core
+ - React-debug
+ - React-Fabric
+ - React-featureflags
+ - React-graphics
+ - React-ImageManager
+ - React-NativeModulesApple
+ - React-RCTFabric
+ - React-rendererdebug
+ - React-utils
+ - ReactCommon/turbomodule/bridging
+ - ReactCommon/turbomodule/core
+ - Yoga
+ - react-native-safe-area-context/fabric (4.10.5):
+ - DoubleConversion
+ - glog
+ - hermes-engine
+ - RCT-Folly (= 2024.01.01.00)
+ - RCTRequired
+ - RCTTypeSafety
+ - React-Codegen
- React-Core
+ - React-debug
+ - React-Fabric
+ - React-featureflags
+ - React-graphics
+ - React-ImageManager
+ - react-native-safe-area-context/common
+ - React-NativeModulesApple
+ - React-RCTFabric
+ - React-rendererdebug
+ - React-utils
+ - ReactCommon/turbomodule/bridging
+ - ReactCommon/turbomodule/core
+ - Yoga
- React-nativeconfig (0.74.5)
- React-NativeModulesApple (0.74.5):
- glog
@@ -1325,8 +1389,9 @@ PODS:
- React-utils
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
+ - RNScreens/common (= 3.31.1)
- Yoga
- - RNVectorIcons (10.2.0):
+ - RNScreens/common (3.31.1):
- DoubleConversion
- glog
- hermes-engine
@@ -1342,6 +1407,7 @@ PODS:
- React-ImageManager
- React-NativeModulesApple
- React-RCTFabric
+ - React-RCTImage
- React-rendererdebug
- React-utils
- ReactCommon/turbomodule/bridging
@@ -1430,7 +1496,6 @@ DEPENDENCIES:
- RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
- RNReanimated (from `../../../node_modules/react-native-reanimated`)
- RNScreens (from `../../../node_modules/react-native-screens`)
- - RNVectorIcons (from `../../../node_modules/react-native-vector-icons`)
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
SPEC REPOS:
@@ -1585,8 +1650,6 @@ EXTERNAL SOURCES:
:path: "../../../node_modules/react-native-reanimated"
RNScreens:
:path: "../../../node_modules/react-native-screens"
- RNVectorIcons:
- :path: "../../../node_modules/react-native-vector-icons"
Yoga:
:path: "../node_modules/react-native/ReactCommon/yoga"
@@ -1602,9 +1665,9 @@ SPEC CHECKSUMS:
ExpoFont: 00756e6c796d8f7ee8d211e29c8b619e75cbf238
ExpoHead: fcb28a68ed4ba28f177394d2dfb8a0a8824cd103
ExpoKeepAwake: 3b8815d9dd1d419ee474df004021c69fdd316d08
- ExpoModulesCore: 0e7d4d5c13169bbbd53496721d811adbcc5d600a
+ ExpoModulesCore: 260ee156852434da26e782bbb993093186c5aade
ExpoSecureStore: 060cebcb956b80ddae09821610ac1aa9e1ac74cd
- EXSplashScreen: 17a656c08a0095be15b620c52e61dfdb665863d2
+ EXSplashScreen: 10b116117c9bb6a272ba782706f21dadc23f44d9
FBLazyVector: ac12dc084d1c8ec4cc4d7b3cf1b0ebda6dab85af
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
@@ -1635,16 +1698,16 @@ SPEC CHECKSUMS:
React-logger: 257858bd55f3a4e1bc0cf07ddc8fb9faba6f8c7c
React-Mapbuffer: 6c1cacdbf40b531f549eba249e531a7d0bfd8e7f
react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
- react-native-quick-sqlite: 9244f46798e83dd5526a5bcc303b5fceaea4c8e4
- react-native-safe-area-context: a240ad4b683349e48b1d51fed1611138d1bdad97
+ react-native-quick-sqlite: 32a5687a042a40f9c820605fe4dc06dfa3bd31e9
+ react-native-safe-area-context: afa5d614d6b1b73b743c9261985876606560d128
React-nativeconfig: ba9a2e54e2f0882cf7882698825052793ed4c851
React-NativeModulesApple: 8d11ff8955181540585c944cf48e9e7236952697
React-perflogger: ed4e0c65781521e0424f2e5e40b40cc7879d737e
React-RCTActionSheet: 49d53ff03bb5688ca4606c55859053a0cd129ea5
React-RCTAnimation: 07b4923885c52c397c4ec103924bf6e53b42c73e
- React-RCTAppDelegate: 316e295076734baf9bdf1bfac7d92ab647aed930
+ React-RCTAppDelegate: fc766c91b215650b9dd0dc7e19cb846165662d9f
React-RCTBlob: 85c57b0d5e667ff8a472163ba3af0628171a64bb
- React-RCTFabric: 97c1465ded4dc92841f5376a39e43e1b2c455f40
+ React-RCTFabric: 7058f9ea5584364af58ba384312c7c3880631d28
React-RCTImage: b965c85bec820e2a9c154b1fb00a2ecdd59a9c92
React-RCTLinking: 75f04a5f27c26c4e73a39c50df470820d219df79
React-RCTNetwork: c1a9143f4d5778efc92da40d83969d03912ccc24
@@ -1661,10 +1724,9 @@ SPEC CHECKSUMS:
React-utils: f242eb7e7889419d979ca0e1c02ccc0ea6e43b29
ReactCommon: f7da14a8827b72704169a48c929bcde802698361
RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
- RNGestureHandler: 2282cfbcf86c360d29f44ace393203afd5c6cff7
- RNReanimated: 35f9ac9c3ac42d0497ebd1cce5c39d7687a8493e
- RNScreens: b32a9ff15bea7fcdbe5dff6477bc503f792b1208
- RNVectorIcons: 845eda5c7819bd29699cafd0fc98c9d4afe28c96
+ RNGestureHandler: 156548e18203327173a764c6932a3f52e90cb9cd
+ RNReanimated: 58a768c2c17a5589ef732fa6bd8d7ed0eb6df1c1
+ RNScreens: 63fe8222c172a79f5c30dd1aefaeb369c6eb57b6
SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
diff --git a/demos/react-native-supabase-todolist/ios/Podfile.properties.json b/demos/react-native-supabase-todolist/ios/Podfile.properties.json
index eeb93f1f..ff68afa6 100644
--- a/demos/react-native-supabase-todolist/ios/Podfile.properties.json
+++ b/demos/react-native-supabase-todolist/ios/Podfile.properties.json
@@ -2,7 +2,7 @@
"expo.jsEngine": "hermes",
"EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
"ios.deploymentTarget": "13.4",
- "newArchEnabled": "false",
+ "newArchEnabled": "true",
"apple.extraPods": "[]",
"apple.ccacheEnabled": "false",
"apple.privacyManifestAggregationEnabled": "true"
diff --git a/demos/react-native-supabase-todolist/ios/powersyncexample.xcodeproj/project.pbxproj b/demos/react-native-supabase-todolist/ios/powersyncexample.xcodeproj/project.pbxproj
index c92dad1c..b2859f03 100644
--- a/demos/react-native-supabase-todolist/ios/powersyncexample.xcodeproj/project.pbxproj
+++ b/demos/react-native-supabase-todolist/ios/powersyncexample.xcodeproj/project.pbxproj
@@ -296,25 +296,6 @@
"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Feather.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome6_Brands.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome6_Regular.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/FontAwesome6_Solid.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Foundation.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Octicons.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf",
- "${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Zocial.ttf",
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
);
name = "[CP] Copy Pods Resources";
@@ -322,25 +303,6 @@
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Feather.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Brands.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Regular.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome5_Solid.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome6_Brands.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome6_Regular.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FontAwesome6_Solid.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Fontisto.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Foundation.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Ionicons.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialCommunityIcons.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MaterialIcons.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Octicons.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SimpleLineIcons.ttf",
- "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Zocial.ttf",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
);
runOnlyForDeploymentPostprocessing = 0;
diff --git a/demos/react-native-supabase-todolist/library/widgets/CameraWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/CameraWidget.tsx
index bc0cda87..a0a77e8a 100644
--- 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,9 @@ import {
ActivityIndicator,
Platform
} from 'react-native';
-import { Button, Icon } from 'react-native-elements';
+import { Button, Icon } from '@rneui/themed';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { CameraType } from 'expo-camera/build/legacy/Camera.types';
export interface Props {
onCaptured: (photo: CameraCapturedPicture) => void;
@@ -19,10 +21,11 @@ export interface Props {
const isAndroid = Platform.OS === 'android';
export const CameraWidget: React.FC = (props) => {
- const cameraRef = React.useRef(null);
+ const cameraRef = useRef(null);
const [permission, requestPermission] = useCameraPermissions();
const [ready, setReady] = React.useState(false);
const [loading, setLoading] = React.useState(false);
+ const [facing, setFacing] = React.useState(CameraType.back);
// Getting width and height of the screen
const { width } = useWindowDimensions();
@@ -54,6 +57,10 @@ export const CameraWidget: React.FC = (props) => {
}
};
+ const onFlipPress = () => {
+ setFacing(facing === CameraType.back ? CameraType.front : CameraType.back);
+ };
+
if (!permission) {
// Camera permissions are still loading
return ;
@@ -70,47 +77,71 @@ export const CameraWidget: React.FC = (props) => {
}
return (
-
+
+
+
+
+
+
+
+
+
+
-
-
+ facing={facing}
+ onCameraReady={onReady}>
+
+
+
-
-
-
-
-
-
-
+
+
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
- justifyContent: 'center'
+ flexDirection: 'column',
+ justifyContent: 'center',
+ backgroundColor: 'transparent'
},
- backButton: {
- position: 'absolute',
- top: 16,
- left: 16
+ topBarContainer: {
+ flex: 0,
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ padding: 20,
+ width: '100%',
+ backgroundColor: 'black',
+ height: 80
+ },
+ topBarCloseIcon: {
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-start'
+ },
+ topBarFlipIcon: {
+ flex: 1,
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-end'
},
camera: {
flex: 1
},
bottomCamera: {
- flex: 1,
- alignSelf: 'stretch',
+ flex: 0,
+ // alignSelf: 'stretch',
alignItems: 'flex-end',
justifyContent: 'center',
flexDirection: 'row',
columnGap: 30,
- backgroundColor: 'transparent'
+ backgroundColor: 'black',
+ minHeight: 100
},
shutterButton: {
width: 70,
diff --git a/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx
index a07847e6..f8af67d3 100644
--- a/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx
+++ b/demos/react-native-supabase-todolist/library/widgets/HeaderWidget.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import { Alert, Text } from 'react-native';
-import { Icon } from 'react-native-elements';
import { useNavigation } from 'expo-router';
-import { Header } from 'react-native-elements';
+import { Icon, Header } from '@rneui/themed';
import { useStatus } from '@powersync/react';
import { DrawerActions } from '@react-navigation/native';
import { useSystem } from '../powersync/system';
diff --git a/demos/react-native-supabase-todolist/library/widgets/ListItemWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/ListItemWidget.tsx
index 88a54d87..3e38e55c 100644
--- 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;
@@ -17,13 +17,23 @@ export const ListItemWidget: React.FC = ({ title, descripti
onPress={() => onPress?.()}
rightContent={