feat: add benchmark page to example app

example/.gitignore

@@ -73,3 +73,8 @@ yarn-error.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Expo
+.expo
+dist/
+web-build/

example/App.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { StatusBar, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { StatusBar, StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { ActionPanel } from './src/components/action-panel';
+import { BenchmarkPage } from './src/components/benchmark-page';
 import { DirectoryNavigation } from './src/components/directory-navigation';
 import { FileEditor } from './src/components/file-editor';
 import { FileList } from './src/components/file-list';
@@ -10,7 +11,10 @@ import { ProgressIndicator } from './src/components/progress-indicator';
 import { useFileSystem } from './src/hooks/use-file-system';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 
+type Tab = 'explorer' | 'benchmark';
+
 const AppContent = () => {
+  const [activeTab, setActiveTab] = useState<Tab>('explorer');
   const {
     currentPath,
     files,
@@ -44,50 +48,75 @@ const AppContent = () => {
 
       <Header />
 
-      <DirectoryNavigation
-        currentPath={currentPath}
-        onNavigate={navigateToDirectoryType}
-      />
+      <View style={styles.tabBar}>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 'explorer' && styles.tabActive]}
+          onPress={() => setActiveTab('explorer')}
+        >
+          <Text style={[styles.tabText, activeTab === 'explorer' && styles.tabTextActive]}>
+            Explorer
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 'benchmark' && styles.tabActive]}
+          onPress={() => setActiveTab('benchmark')}
+        >
+          <Text style={[styles.tabText, activeTab === 'benchmark' && styles.tabTextActive]}>
+            Benchmark
+          </Text>
+        </TouchableOpacity>
+      </View>
+
+      {activeTab === 'explorer' ? (
+        <>
+          <DirectoryNavigation
+            currentPath={currentPath}
+            onNavigate={navigateToDirectoryType}
+          />
 
-      <PathDisplay currentPath={currentPath} onNavigateBack={navigateBack} />
+          <PathDisplay currentPath={currentPath} onNavigateBack={navigateBack} />
 
-      <ProgressIndicator
-        uploadProgress={uploadProgress}
-        downloadProgress={downloadProgress}
-      />
+          <ProgressIndicator
+            uploadProgress={uploadProgress}
+            downloadProgress={downloadProgress}
+          />
 
-      <FileList
-        files={files}
-        loading={loading}
-        selectedFile={selectedFile}
-        onSelectFile={setSelectedFile}
-        onNavigateToDirectory={navigateToDirectory}
-        onReadFile={readFile}
-        onDeleteFile={deleteItem}
-      />
+          <FileList
+            files={files}
+            loading={loading}
+            selectedFile={selectedFile}
+            onSelectFile={setSelectedFile}
+            onNavigateToDirectory={navigateToDirectory}
+            onReadFile={readFile}
+            onDeleteFile={deleteItem}
+          />
 
-      <ActionPanel
-        selectedFile={selectedFile}
-        loading={loading}
-        onCreateFile={createFile}
-        onCreateDirectory={createDirectory}
-        onUploadFile={uploadFile}
-        onDownloadFile={downloadFile}
-        onGetPathInfo={getPathInfo}
-        onCheckExists={checkExists}
-        onCopyItem={copyItem}
-        onRenameItem={renameItem}
-        onBase64Encoding={base64Encoding}
-        onCopyImagesFromDCIMToCache={copyImagesFromDCIMToCache}
-        onPickDocument={pickDocument}
-      />
+          <ActionPanel
+            selectedFile={selectedFile}
+            loading={loading}
+            onCreateFile={createFile}
+            onCreateDirectory={createDirectory}
+            onUploadFile={uploadFile}
+            onDownloadFile={downloadFile}
+            onGetPathInfo={getPathInfo}
+            onCheckExists={checkExists}
+            onCopyItem={copyItem}
+            onRenameItem={renameItem}
+            onBase64Encoding={base64Encoding}
+            onCopyImagesFromDCIMToCache={copyImagesFromDCIMToCache}
+            onPickDocument={pickDocument}
+          />
 
-      <FileEditor
-        selectedFile={selectedFile}
-        loading={loading}
-        onSaveFile={saveFile}
-        onReadFile={readFile}
-      />
+          <FileEditor
+            selectedFile={selectedFile}
+            loading={loading}
+            onSaveFile={saveFile}
+            onReadFile={readFile}
+          />
+        </>
+      ) : (
+        <BenchmarkPage />
+      )}
     </SafeAreaView>
   );
 };
@@ -105,6 +134,36 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#f8f9fa',
   },
+  tabBar: {
+    flexDirection: 'row',
+    marginHorizontal: 12,
+    marginVertical: 8,
+    backgroundColor: '#e9ecef',
+    borderRadius: 10,
+    padding: 3,
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: 8,
+    alignItems: 'center',
+    borderRadius: 8,
+  },
+  tabActive: {
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#6c757d',
+  },
+  tabTextActive: {
+    color: '#007AFF',
+  },
 });
 
 export default App;

example/babel.config.js

@@ -4,7 +4,7 @@ const pak = require('../package.json');
 module.exports = api => {
   api.cache(true);
   return {
-    presets: ['module:@react-native/babel-preset'],
+    presets: ['babel-preset-expo'],
     plugins: [
       [
         'module-resolver',

example/metro.config.js

@@ -1,4 +1,5 @@
-const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const { getDefaultConfig } = require('expo/metro-config');
+const { mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
 const root = path.resolve(__dirname, '..');
 

example/package.json

@@ -11,6 +11,9 @@
         "pod": "bundle install && bundle exec pod install --project-directory=ios"
     },
     "dependencies": {
+        "@dr.pogodin/react-native-fs": "^2.37.0",
+        "expo": "~54.0.0",
+        "expo-file-system": "~19.0.21",
         "react": "19.1.0",
         "react-native": "0.81.5",
         "react-native-nitro-document-picker": "^1.2.0",
@@ -32,6 +35,7 @@
         "@types/react": "^19.1.0",
         "@types/react-test-renderer": "^19.1.0",
         "babel-plugin-module-resolver": "^5.0.2",
+        "babel-preset-expo": "~54.0.10",
         "eslint": "^8.19.0",
         "jest": "^29.6.3",
         "prettier": "2.8.8",