Density changes.

components/screen-media-browser/screen-media-browser.component.jsx

@@ -18,6 +18,7 @@ import JobSpaceAvailable from "../job-space-available/job-space-available.compon
 import UploadProgressLocal from "../upload-progress-local/upload-progress-local.component";
 import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
 import UploadProgress from "../upload-progress/upload-progress.component";
+import { SegmentedButtons } from "react-native-paper";
 // import * as ImagePicker from "expo-image-picker";
 // import { Button } from "react-native-paper";
 // import * as MediaLibrary from "expo-media-library";
@@ -40,6 +41,7 @@ export function ImageBrowserScreen({
 }) {
   const { t } = useTranslation();
   const [uploads, setUploads] = useState(null);
+  const [density, setDensity] = useState(3);
   const [tick, setTick] = useState(0);
   // const [medialLibraryPermissionStatus, requestmediaLibraryPermission] =
   //   ImagePicker.useMediaLibraryPermissions();
@@ -87,10 +89,10 @@ export function ImageBrowserScreen({
       assetsType: [MediaType.photo, MediaType.video],
       minSelection: 1,
       // maxSelection: 3,
-      portraitCols: 4,
-      landscapeCols: 4,
+      portraitCols: density,
+      landscapeCols: density,
     }),
-    []
+    [density]
   );
 
   const widgetNavigator = useMemo(
@@ -175,6 +177,26 @@ export function ImageBrowserScreen({
         <JobSpaceAvailable jobid={selectedCameraJobId} key={`${tick}-space`} />
       )}
       <UploadDeleteSwitch />
+
+      <SegmentedButtons
+        value={density}
+        onValueChange={(value) => {
+          setDensity(value);
+          forceRerender();
+        }}
+        buttons={[
+          {
+            value: 4,
+            label: "Small",
+          },
+          {
+            value: 3,
+            label: "Normal",
+          },
+          { value: 2, label: "Large" },
+        ]}
+      />
+
       {!selectedCameraJobId && (
         <View
           style={{