React Native UI/Design Fix — Match Figma Designs (RTL Arabic App)

We're looking for an experienced React Native developer with a strong eye for pixel-perfect UI implementation to review and fix our existing mobile app screens so they match our Figma designs exactly on both mobile phones and tablets, ensuring fully responsive layouts.

About the Project
This is a League module for a social/gaming app (Ballot) built with:

Expo SDK 53 with expo-router
TypeScript (strict mode)
React Native StyleSheet (no Tailwind/NativeWind)
RTL layout with Arabic UI text
Apollo Client (GraphQL) for data
React Redux for state management
The module handles league creation, leaderboards, match views, champion displays, league chat, and gift/award features.

What You'll Be Doing
1. Figma vs Code Comparison (Mobile & Tablet)
Perform a side-by-side comparison between Figma designs and current app output for every screen
Create a comparison document/spreadsheet listing each screen with:
Screenshot from Figma (Mobile)
Screenshot from Figma (Tablet)
Screenshot from App (Mobile)
Screenshot from App (Tablet)
List of differences/issues found
Priority level (Critical / Medium / Low)
2. Responsive Design Implementation
Ensure all screens adapt properly across two breakpoints:
Mobile (< 768pt width)
Tablet (≥ 768pt width)
Implement responsive scaling for:
Font sizes
Spacing (padding, margins, gaps)
Component dimensions (cards, modals, buttons)
Grid layouts (e.g., leaderboard, league list — more columns on tablet)
Modal/bottom sheet widths (constrained max-width on tablets)
Icon sizes
Use useWindowDimensions or a responsive utility to handle breakpoint detection
Ensure RTL layout works correctly on both mobile and tablet
No horizontal overflow or cut-off content on either device type
3. Pixel-Perfect Fixes
Fix spacing, padding, margins, font sizes, colors, border radius, shadows, and alignment
Match exact colors, typography (Almarai Bold/Regular fonts), and iconography from Figma
Ensure smooth transitions, modals, and bottom sheets match the designs
Fix tablet-specific layout issues (e.g., centered content, max-width containers)
Screens & Components to Fix (~25+ components)
League Creation Flow:

Feature selection modal & cards
Gift section & gift cards
League settings modals
Session settings & time picker
Voice chat modal
Winner award display
Diamond/money display components
League View:

Leaderboard screen
Champions display
Match view
League overview & plan
League chat interface
League list items & CTA buttons
Gradient text components
Shared/Repeated:

User cards & avatar components
Header profile cards
Friend list components
Chat messages & player menus
Requirements
3+ years of React Native experience
Strong experience with pixel-perfect UI from Figma
Proven experience building responsive layouts for mobile and tablet
Experience with RTL layouts (Arabic/Hebrew apps)
Familiarity with Expo ecosystem
Understanding of React Native StyleSheet API
TypeScript proficiency
Experience with SVG icons (react-native-svg)
Knowledge of responsive techniques: useWindowDimensions, flexbox, breakpoint strategies
Nice to Have
Experience with Arabic typography (Almarai font family)
Familiarity with GraphQL / Apollo Client
Experience with modular/monorepo React Native projects
Deliverables
Comparison Document: Side-by-side screenshots (Figma vs App) for every screen on mobile and tablet, with listed differences
Each screen/component updated to match Figma designs exactly
Responsive behavior verified on two breakpoints:
Mobile (< 768pt)
Tablet (≥ 768pt)
Before/after screenshots for each breakpoint
Tested on both iOS and Android (phone and tablet)
Clean, minimal code changes — no unnecessary refactoring
How to Apply
Please include in your proposal:

Links to 2-3 React Native projects with pixel-perfect Figma-to-code work on mobile and tablet
An example of a responsive layout you've built in React Native
Any experience with RTL/Arabic apps
Your estimated timeline for 25+ components (mobile + tablet)
Your hourly rate or fixed price
Figma access will be provided upon hiring.