chore: sort test screens by test number (#2814)

## Description

Adds sorting of test screens in the menu to example apps.

## Changes

- add sorting of test screens before rendering example app menu

## Screenshots / GIFs

### Before
![Simulator Screenshot - iPhone 16 Pro - 2025-03-28 at 10 31
08](https://github.com/user-attachments/assets/b6718d26-6223-41e1-b478-c26f214ca813)

### After
![Simulator Screenshot - iPhone 16 Pro - 2025-03-28 at 10 30
49](https://github.com/user-attachments/assets/115667e5-6864-49c8-b05f-08b0c74f8c6c)

## Test code and steps to reproduce

Open example app.

## Checklist

- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes

Author: kligarski

apps/Example.tsx

@@ -148,18 +148,34 @@ if (isTestSectionEnabled()) {
   });
 }
 
-
 const screens = Object.keys(SCREENS);
 const examples = screens.filter(name => SCREENS[name].type === 'example');
 const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
-const tests = isTestSectionEnabled() ? screens.filter(name => SCREENS[name].type === 'test') : [];
+const tests = isTestSectionEnabled()
+  ? screens
+      .filter(name => SCREENS[name].type === 'test')
+      .sort((name1, name2) => {
+        const testNumber1 = Number(name1.substring(4));
+        const testNumber2 = Number(name2.substring(4));
+
+        if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
+          return 0;
+        } else if (Number.isNaN(testNumber1)) {
+          return 1;
+        } else if (Number.isNaN(testNumber2)) {
+          return -1;
+        } else {
+          return testNumber1 - testNumber2;
+        }
+      })
+  : [];
 
 type RootStackParamList = {
   Main: undefined;
   Tests: undefined;
 } & {
-    [P in keyof typeof SCREENS]: undefined;
-  };
+  [P in keyof typeof SCREENS]: undefined;
+};
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -210,17 +226,19 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
           disabled={!isPlatformReady(name)}
         />
       ))}
+      {isTestSectionEnabled() && (
+        <ThemedText style={styles.label}>Tests</ThemedText>
+      )}
       {isTestSectionEnabled() &&
-        <ThemedText style={styles.label}>Tests</ThemedText>}
-      {isTestSectionEnabled() && tests.map(name => (
-        <ListItem
-          key={name}
-          testID={`root-screen-tests-${name}`}
-          title={SCREENS[name].title}
-          onPress={() => navigation.navigate(name)}
-          disabled={false}
-        />
-      ))}
+        tests.map(name => (
+          <ListItem
+            key={name}
+            testID={`root-screen-tests-${name}`}
+            title={SCREENS[name].title}
+            onPress={() => navigation.navigate(name)}
+            disabled={false}
+          />
+        ))}
     </ScrollView>
   );
 };
@@ -245,8 +263,9 @@ const ExampleApp = (): React.JSX.Element => {
               <Stack.Screen
                 name="Main"
                 options={{
-                  title: `${Platform.isTV ? '📺' : '📱'
-                    } React Native Screens Examples`,
+                  title: `${
+                    Platform.isTV ? '📺' : '📱'
+                  } React Native Screens Examples`,
                 }}
                 component={MainScreen}
               />