This is a big task and it is broken down into subtasks:
[x] add react-navigation to the examples/objectdetection project. Familiarize yourself with how to use a native stack navigator and to create screens here
[x] take what is currently in App.tsx and move it to a new screen (react-navigation concept) called Main.tsx
[x] Create a new App.tsx which contains a native stack navigator and two screens, Main and Photo.
[x] Add a button (<Pressable>) to the main screen at the bottom and have the onPress handler navigate to the Photo screen
[x] Create placeholders for photo and settings screens
[x] Create a new photo screen that whenever it is navigated to, prompts the user to pick a photo
[x] For photo picking, you will use react-native-camera-roll . be sure to follow the instructions to set it up including changing the manifest files to request the appropriate permissions, as we did for accessing the camera.
[ ] Once the user has selected a photo, then do inference on the photo, using the detectImage on the object returned from useObjectDetection().
[ ] render the selected photo, as well as rectangles and a label similar to the camera detection code.
Extra credit: implement the ability to save and share the photo with more buttons.
[ ] You will need to save the file to the camera roll. react-native-camera-roll provides this functionality.
[ ] This will require you to create an image with the drawn skia elements. See this page for some hints how to do this.
cdiddy77
commented
6 months ago
This is a big task and it is broken down into subtasks:
<Pressable>) to the main screen at the bottom and have the onPress handler navigate to the Photo screendetectImageon the object returned fromuseObjectDetection().Extra credit: implement the ability to save and share the photo with more buttons.