Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 66 additions & 0 deletions .agent/rules/rules.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
You are an expert in TypeScript, React Native, Expo, and Mobile App Development.

Code Style and Structure:

- Write concise, type-safe TypeScript code.
- Use functional components and hooks over class components.
- Ensure components are modular, reusable, and maintainable.
- Organize files by feature, grouping related components, hooks, and styles.
- This is a mobile application, so ensure all components are mobile friendly and responsive and support both iOS and Android platforms and ensure that the app is optimized for both platforms.

Naming Conventions:

- Use camelCase for variable and function names (e.g., `isFetchingData`, `handleUserInput`).
- Use PascalCase for component names (e.g., `UserProfile`, `ChatScreen`).
- Directory and File names should be lowercase and hyphenated (e.g., `user-profile`, `chat-screen`).

TypeScript Usage:

- Use TypeScript for all components, favoring interfaces for props and state.
- Enable strict typing in `tsconfig.json`.
- Avoid using `any`; strive for precise types.
- Utilize `React.FC` for defining functional components with props.

Performance Optimization:

- Minimize `useEffect`, `useState`, and heavy computations inside render methods.
- Use `React.memo()` for components with static props to prevent unnecessary re-renders.
- Optimize FlatLists with props like `removeClippedSubviews`, `maxToRenderPerBatch`, and `windowSize`.
- Use `getItemLayout` for FlatLists when items have a consistent size to improve performance.
- Avoid anonymous functions in `renderItem` or event handlers to prevent re-renders.

UI and Styling:

- Use consistent styling leveraging `gluestack-ui`. If there isn't a Gluestack component in the `components/ui` directory for the component you are trying to use consistently style it either through `StyleSheet.create()` or Styled Components.
- Ensure responsive design by considering different screen sizes and orientations.
- Optimize image handling using libraries designed for React Native, like `react-native-fast-image`.

Best Practices:

- Follow React Native's threading model to ensure smooth UI performance.
- Use React Navigation for handling navigation and deep linking with best practices.
- Create and use Jest to test to validate all generated components
- Generate tests for all components, services and logic generated. Ensure tests run without errors and fix any issues.
- The app is multi-lingual, so ensure all text is wrapped in `t()` from `react-i18next` for translations with the dictonary files stored in `src/translations`.
- Ensure support for dark mode and light mode.
Comment on lines +9 to +45
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Fix minor wording/typos in the new rules doc.

These are small but user-facing documentation issues.

✍️ Suggested edits
-- This is a mobile application, so ensure all components are mobile friendly and responsive and support both iOS and Android platforms and ensure that the app is optimized for both platforms.
+- This is a mobile application, so ensure all components are mobile-friendly and responsive, support both iOS and Android platforms, and are optimized for both platforms.

-- Create and use Jest to test to validate all generated components
+- Create and use Jest tests to validate all generated components.

-- The app is multi-lingual, so ensure all text is wrapped in `t()` from `react-i18next` for translations with the dictonary files stored in `src/translations`.
+- The app is multilingual, so ensure all text is wrapped in `t()` from `react-i18next` for translations with the dictionary files stored in `src/translations`.
🧰 Tools
🪛 LanguageTool

[grammar] ~9-~9: Use a hyphen to join words.
Context: ...ion, so ensure all components are mobile friendly and responsive and support both...

(QB_NEW_EN_HYPHEN)


[style] ~43-~43: Consider using a different verb for a more formal wording.
Context: ...ed. Ensure tests run without errors and fix any issues. - The app is multi-lingual,...

(FIX_RESOLVE)


[grammar] ~44-~44: Ensure spelling is correct
Context: ...eact-i18nextfor translations with the dictonary files stored insrc/translations`. - E...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents
In @.agent/rules/rules.md around lines 9 - 45, The rules document contains
several wording and typo issues—fix wording like "Directory and File names
should be lowercase and hyphenated" to "directory and file names should be
lowercase and hyphenated", correct "dictonary" to "dictionary", change "Create
and use Jest to test to validate" to "Create and run Jest tests to validate",
and rephrase awkward sentences such as "If there isn't a Gluestack component in
the `components/ui` directory for the component you are trying to use
consistently style it either through `StyleSheet.create()` or Styled Components"
to a clearer instruction referencing `gluestack-ui` and `components/ui`; also
ensure consistent capitalization for terms like `TypeScript`, `React.FC`,
`tsconfig.json`, `react-native-fast-image`, `getItemLayout`, and `t()` (from
`react-i18next`) throughout the file. Ensure the list items use consistent
punctuation and grammar and update "iOS and Android platforms and ensure that
the app is optimized" to a smoother phrasing mentioning both platforms once.

- Ensure the app is accessible, following WCAG guidelines for mobile applications.
- Make sure the app is optimized for performance, especially for low-end devices.
- Handle errors gracefully and provide user feedback.
- Implement proper offline support.
- Ensure the user interface is intuitive and user-friendly and works seamlessly across different devices and screen sizes.
- This is an expo managed project that uses prebuild, do not make native code changes outside of expo prebuild capabilities.

Additional Rules:

- Use `yarn` as the package manager.
- Use Expo's secure store for sensitive data
- Implement proper offline support
- Use `zustand` for state management
- Use `react-hook-form` for form handling
- Use `react-query` for data fetching
- Use `react-i18next` for internationalization
- Use `react-native-mmkv` for local storage
- Use `axios` for API requests
- Use `@rnmapbox/maps` for maps, mapping or vehicle navigation
- Use `lucide-react-native` for icons and use those components directly in the markup and don't use the gluestack-ui icon component
- Use ? : for conditional rendering and not &&
1 change: 1 addition & 0 deletions app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
'@config-plugins/react-native-callkeep',
'./customGradle.plugin.js',
'./customManifest.plugin.js',
'./plugins/withInCallAudioModule.js',
['app-icon-badge', appIconBadgeConfig],
],
extra: {
Expand Down
60 changes: 60 additions & 0 deletions jest-setup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,43 @@ jest.mock('react-native', () => {
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
},

// NativeEventEmitter
NativeEventEmitter: class {
addListener = jest.fn();
removeListener = jest.fn();
removeAllListeners = jest.fn();
},

// NativeModules
NativeModules: {
InCallAudioModule: {
initializeAudio: jest.fn(),
loadSound: jest.fn(),
playSound: jest.fn(),
cleanup: jest.fn(),
},
LivekitReactNativeModule: {
// Add stub methods as needed
configureAudio: jest.fn(),
startAudioSession: jest.fn(),
stopAudioSession: jest.fn(),
showAudioRoutePicker: jest.fn(),
},
PlatformConstants: {
forceTouchAvailable: false,
},
ImageLoader: {
getSize: jest.fn((url) => Promise.resolve({ width: 0, height: 0 })),
prefetchImage: jest.fn(),
},
SettingsManager: {
settings: {
AppleLocale: 'en_US',
AppleLanguages: ['en'],
},
},
},
};
});

Expand Down Expand Up @@ -402,6 +439,29 @@ jest.mock('livekit-client', () => ({
},
}));

jest.mock('@livekit/react-native', () => ({
AudioSession: {
startAudioSession: jest.fn().mockResolvedValue(undefined),
stopAudioSession: jest.fn().mockResolvedValue(undefined),
configureAudio: jest.fn().mockResolvedValue(undefined),
},
useRoom: jest.fn().mockReturnValue({
room: null,
participants: [],
audioTracks: [],
}),
useParticipant: jest.fn().mockReturnValue({
cameraPublication: null,
microphonePublication: null,
screenSharePublication: null,
}),
MediaStreamTrack: class {},
mediaDevices: {
enumerateDevices: jest.fn().mockResolvedValue([]),
getUserMedia: jest.fn().mockResolvedValue({}),
},
}));

jest.mock('react-native-permissions', () => ({
PERMISSIONS: {
ANDROID: {
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"postinstall": "patch-package",
"prebuild": "cross-env EXPO_NO_DOTENV=1 yarn expo prebuild",
"android": "cross-env EXPO_NO_DOTENV=1 expo run:android",
"ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios",
"ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios --device",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

Expo run:ios --device flag physical device requirement CLI documentation

💡 Result:

npx expo run:ios --device is intended for running on a connected physical Apple device (iPhone/iPad/Apple TV, depending on scheme). Expo’s CLI docs describe it as “Build directly on connected devices … using the --device flag” and note that to run on your device you “connect it” and run npx expo run:ios --device, then select the connected device. [1]

If you don’t have a physical device connected, use npx expo run:ios (no --device) to build/run on an iOS Simulator instead. [1]

Note: Even when targeting a physical device, Expo CLI may still query Simulator.app for available “devices” and can error if no simulators are installed (for example: No iOS devices available in Simulator.app). [2]

Sources: [1] Expo CLI docs, [2] expo/expo GitHub issue #27316


Avoid forcing physical device for the default iOS script.

The --device flag requires a connected physical device. Without it, expo run:ios runs on the iOS Simulator. This change breaks the simulator workflow for developers and CI environments. Keep the default simulator-friendly and add a separate device script instead.

Suggested script split
-    "ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios --device",
+    "ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios",
+    "ios:device": "cross-env EXPO_NO_DOTENV=1 expo run:ios --device",
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
"ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios --device",
"ios": "cross-env EXPO_NO_DOTENV=1 expo run:ios",
"ios:device": "cross-env EXPO_NO_DOTENV=1 expo run:ios --device",
🤖 Prompt for AI Agents
In `@package.json` at line 12, The current npm script named "ios" forces a
physical device by including "--device", which breaks simulator and CI
workflows; change the "ios" script (the "ios" entry) to run "cross-env
EXPO_NO_DOTENV=1 expo run:ios" without "--device" so it defaults to the
simulator, and add a new script (e.g., "ios:device") that runs "cross-env
EXPO_NO_DOTENV=1 expo run:ios --device" for developers who need a physical
device; update any docs or references that call the old "ios" script if
necessary.

"web": "cross-env EXPO_NO_DOTENV=1 expo start --web",
"xcode": "xed -b ios",
"doctor": "npx expo-doctor@latest",
Expand Down
Loading