Skip to main content

Contributing Guide

Code standards, best practices, and contribution guidelines for ZÈYA Mobile App.

Code Standards​

1. Follow React Native Conventions​

  • Use functional components with hooks
  • Follow React Native naming conventions
  • Use TypeScript/JavaScript consistently
  • Follow Expo best practices

2. Component Structure​

✅ Good:

import { View, Text } from 'react-native';

export default function ProductCard({ product }) {
  return (
    <View>
      <Text>{product.title}</Text>
    </View>
  );
}

❌ Bad:

// Class components (avoid)
class ProductCard extends React.Component {
  // ...
}

3. Use Context for Global State​

✅ Good:

const { apiCall } = useContext(ApiContext);

❌ Bad:

// Direct API calls without context
import axios from 'axios';

4. Use Translations​

✅ Good:

const { t } = useTranslation();
<Text>{t('welcome.message')}</Text>

❌ Bad:

<Text>Welcome</Text> // Hardcoded string

5. Error Handling​

✅ Good:

try {
  const data = await apiCall('endpoint');
} catch (error) {
  console.error('Error:', error);
  Alert.alert('Error', 'Something went wrong');
}

❌ Bad:

const data = await apiCall('endpoint'); // No error handling

Development Workflow​

1. Create Feature Branch​

git checkout -b feature/your-feature-name

2. Make Changes​

  • Follow coding standards
  • Write clean, readable code
  • Add comments where necessary
  • Keep components small and focused

3. Test Changes​

  • Test on iOS device/simulator
  • Test on Android device/emulator
  • Test all user flows
  • Check for console errors

4. Format Code​

npm run lint

5. Commit Changes​

Use conventional commit messages:

feat: add product search feature
fix: resolve authentication bug
docs: update API documentation
refactor: improve product component
test: add product tests
chore: update dependencies

6. Push and Create PR​

git push origin feature/your-feature-name

Code Review Checklist​

Before submitting a PR, ensure:

  • Code follows React Native conventions
  • Components are functional with hooks
  • API calls use ApiContext
  • Translations are used (no hardcoded strings)
  • Error handling is implemented
  • Code is linted
  • Tested on iOS and Android
  • No console.logs left
  • Performance considerations addressed

File Organization​

Components​

  • Location: src/components/
  • Naming: PascalCase
  • Example: ProductCard.jsx

Screens​

  • Location: src/app/ (Expo Router)
  • Naming: kebab-case for files
  • Example: product-details.jsx

Utilities​

  • Location: src/share/
  • Naming: camelCase
  • Example: api.js, storage.js

Context Providers​

  • Location: src/context/
  • Naming: PascalCase + Context or Provider
  • Example: ApiProvider.js

Common Patterns​

Component Pattern​

import { View, Text, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';

export default function MyComponent({ data }) {
  const { t } = useTranslation();
  
  return (
    <View style={styles.container}>
      <Text>{t('key')}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Screen Pattern​

import { View } from 'react-native';
import { useRouter } from 'expo-router';

export default function MyScreen() {
  const router = useRouter();
  
  return (
    <View>
      {/* Screen content */}
    </View>
  );
}

API Call Pattern​

import { useContext } from 'react';
import { ApiContext } from '../context/ApiProvider';

function MyComponent() {
  const { apiCall } = useContext(ApiContext);
  
  const fetchData = async () => {
    try {
      const response = await apiCall('endpoint', {
        method: 'GET',
      });
      return response.data;
    } catch (error) {
      console.error('Error:', error);
      throw error;
    }
  };
}

Best Practices​

1. Component Size​

// ✅ Good: Small, focused components
function ProductCard({ product }) {
  return <View>...</View>;
}

// ❌ Bad: Large, complex components
function ProductCard({ product }) {
  // 200+ lines of code
}

2. State Management​

// ✅ Good: Use Context for global state
const { user } = useContext(AuthContext);

// ✅ Good: Use hooks for local state
const [count, setCount] = useState(0);

// ❌ Bad: Prop drilling
function Parent() {
  return <Child user={user} />;
}

3. Performance​

// ✅ Good: Use FlatList for lists
<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
/>

// ❌ Bad: Map with ScrollView
<ScrollView>
  {items.map(item => <Item key={item.id} />)}
</ScrollView>

4. Image Optimization​

// ✅ Good: Use Expo Image
import { Image } from 'expo-image';

<Image source={{ uri: url }} />

// ❌ Bad: React Native Image (less optimized)
import { Image } from 'react-native';

What to Avoid​

❌ Never Do These:​

  1. NO class components - Use functional components
  2. NO direct API calls - Use ApiContext
  3. NO hardcoded strings - Use translations
  4. NO inline styles - Use StyleSheet
  5. NO console.logs in production - Remove before commit
  6. NO large components - Split into smaller components
  7. NO prop drilling - Use Context
  8. NO missing error handling - Always handle errors
  9. NO performance issues - Optimize lists and images
  10. NO missing translations - Add all strings to locale files

Testing Guidelines​

Manual Testing​

  • Test on iOS device/simulator
  • Test on Android device/emulator
  • Test all user flows
  • Test error scenarios
  • Test offline scenarios

Code Quality​

  • Run linter before committing
  • Fix all linting errors
  • Follow code style guide
  • Write readable code