Overview
Open Mushaf Native supports iOS deployment through Expo. This guide covers the build process, requirements, and configuration for iOS.
Prerequisites
macOS Required
iOS builds require macOS for development. Cloud builds via EAS can be done from any platform.
Install Xcode
Download and install Xcode from the Mac App Store (required for local builds).
iOS Configuration
The iOS configuration is defined in app.json:
{
"expo": {
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.adelpro.openmushafnative",
"requireFullScreen": true
}
}
}
Key Settings
- Bundle Identifier:
com.adelpro.openmushafnative
- Tablet Support: Enabled for iPad devices
- Full Screen: Required for immersive Quran reading experience
Development Builds
For local development and testing on iOS devices or simulators:
yarn ios
# or
expo run:ios
These commands require macOS with Xcode installed and a configured iOS simulator or connected device.
Cloud Builds with EAS
While the current eas.json doesn’t include iOS-specific profiles, you can build for iOS using EAS:
eas build -p ios --profile preview
App Store Submission
To submit your iOS build to the App Store:
Build for Production
eas build -p ios --profile production
Submit to App Store
eas submit -p ios --latest
Configure in App Store Connect
Complete your app listing in App Store Connect with screenshots, descriptions, and metadata.
Universal Links
The app is configured with a custom URL scheme for deep linking:
{
"expo": {
"scheme": "myapp"
}
}
- Set up an associated domains entitlement
- Host an apple-app-site-association file at your domain
- Add the domains to your app configuration
Build Optimizations
The app uses React Native’s new architecture for improved performance:
{
"expo": {
"newArchEnabled": true,
"experiments": {
"typedRoutes": true,
"reactCompiler": true
}
}
}
New Architecture Benefits
- Improved Performance: Faster rendering and reduced memory usage
- Concurrent Rendering: Better UI responsiveness
- Typed Routes: Type-safe navigation with Expo Router
- React Compiler: Automatic optimization of React components
The React Compiler is experimental but provides significant performance improvements.
Splash Screen Configuration
The app includes custom splash screens optimized for iOS devices:
{
"expo": {
"plugins": [
[
"expo-splash-screen",
{
"backgroundColor": "#f8f8f0",
"image": "./assets/images/icon-large.png",
"dark": {
"image": "./assets/images/icon-large.png",
"backgroundColor": "#eeeee6"
},
"imageWidth": 200
}
]
]
}
}
Fonts and Assets
The app uses custom fonts that are automatically bundled for iOS:
- Amiri: Traditional Arabic font for Quranic text
- Tajawal: Modern Arabic font for UI elements
Fonts are loaded using expo-font and configured in the plugins section.
Troubleshooting
Simulator Issues
If the simulator doesn’t launch:
# Reset the simulator
xcrun simctl erase all
# Rebuild the app
yarn prebuild
yarn ios
Certificate Issues
Manage your iOS certificates and provisioning profiles:
Build Failures
Clear the EAS build cache:
eas build:clear-cache -p ios
CocoaPods Issues
If you encounter CocoaPods errors:
cd ios
pod install --repo-update
cd ..
Testing on Physical Devices
To test on a physical iOS device:
Connect Device
Connect your iOS device to your Mac via USB.
Trust Computer
On your device, tap “Trust” when prompted to trust the computer.
Run Build
Xcode will automatically select your connected device. You’ll need an Apple Developer account to run builds on physical devices.