Faith & Code | Reflections by Errong

  How to Prepare App Preview Videos and Screenshots for App Store Connect When distributing your app through App Store Connect, preparing screenshots and app preview videos is one of the final — and surprisingly tricky — steps. This guide walks you through a simple, practical workflow that actually works. 📸 Screenshots (Easy Part) Screenshots are straightforward: Launch your app on your iPhone Capture screenshots directly on the device Transfer them to your Mac via AirDrop Open them in Preview and resize to the required dimensions That’s it. No special tools needed. 🎬 App Preview Videos (The Tricky Part) App preview videos have strict requirements from Apple: Key Requirements ⏱ Duration:   ≤ 30 seconds 🎞 Frame rate:   ≤ 30 fps (recommended: 30 fps) 📐 Resolution: 886 × 1920 (portrait) 1920 × 886 (landscape) 🔊   Must include audio 📱 Step 1: Record Your App on iPhone Use the built-in screen recording feature: Add   Screen Recording   to Control Center (i...

Fix Missing iPad App Icon in React Native iOS (Xcode Validation Error) If you're submitting a React Native iOS app and encounter errors like: Missing required icon file. The bundle does not contain an app icon for iPad of exactly '152x152' pixels The bundle does not contain an app icon for iPad Pro of exactly '167x167' pixels This issue can be confusing — especially when your project already shows iPad support in Xcode. 🔍 The Confusing Part In Xcode, you may already see: iPad orientation settings enabled Deployment Info showing iPhone + iPad However, when opening Assets.xcassets → AppIcon , there are no iPad icon slots . This leads to App Store validation failure. 🧠 Root Cause This is caused by a mismatch between: Xcode project settings (which support iPad) Asset catalog configuration (which may still be iPhone-only) In many React Native projects, the default AppIcon set is created without iPad slots, even when the app later ...

Fix Xcode Sandbox rsync “Operation not permitted” Error (React Native / CocoaPods) If you are building a React Native iOS app and suddenly see errors like: Sandbox: rsync deny(1) file-read-data Operation not permitted PhaseScriptExecution [CP] Embed Pods Frameworks You are not alone. This issue is very common in Xcode 15+ due to stricter sandboxing rules. 🔍 Root Cause Xcode introduced User Script Sandboxing , which restricts scripts (like CocoaPods' framework embedding step) from accessing certain files. During build, rsync is used to copy frameworks (e.g. React.framework), but the sandbox blocks it: ❌ Cannot read framework files ❌ Cannot write into app bundle This results in the infamous Operation not permitted error. ✅ Solution (Works Instantly) Disable User Script Sandboxing in Xcode: Open your project in Xcode Select the project (not target) Go to Build Settings Search for: User Script Sandboxing Set it to: NO Then clean and r...

How I Set Up My Local Environment to Run a React Native iOS App Setting up a React Native project for iOS locally sounds simple—until you hit the usual roadblocks: Ruby versions, CocoaPods issues, Xcode configuration, and mysterious build failures. Here’s a clean, real-world setup that actually works. 🍎 Step 0 — Prepare Xcode (Critical but Easy to Miss) Even if you already installed Xcode from the App Store, your system may not be fully configured for command-line builds. I ran into issues until I completed these steps: 1. Select the Correct Xcode Path sudo xcode-select -s /Applications/Xcode.app/Contents/Developer xcode-select -p Expected output: /Applications/Xcode.app/Contents/Developer 2. Accept the Xcode License sudo xcodebuild -license Then: Press space to scroll through the license Type agree at the end Without this, builds may fail silently or with confusing errors. 3. Install Command Line Tools (if not already) xcode-select --install React Native i...

Handling Keyboard Appearance in React Native Chat UI (iOS & Android) When building a chat-style interface in React Native, one of the most common UX problems is the input box being covered by the on-screen keyboard . This issue affects both iOS and Android, but the underlying behavior and fixes differ slightly. In this post, I’ll walk through how we solved this problem in a real chat screen implementation, covering: Using KeyboardAvoidingView correctly Adjusting input position dynamically iOS vs Android behavior differences Why Android does require an AndroidManifest.xml change 1. Wrapping the Screen with KeyboardAvoidingView The foundation of the solution is React Native’s built-in KeyboardAvoidingView . The entire chat screen is wrapped inside it: <KeyboardAvoidingView style={styles.root} behavior="padding" keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 80} > {/* Chat UI */} </KeyboardAvoidingView> T...

React Native：键盘弹出时如何正确调整输入框位置（iOS & Android 实战） 在开发聊天类应用（Chat UI）时，一个非常常见、但又容易踩坑的问题是： 当键盘弹出时，输入框被遮挡，或者整体布局错乱。 本文将结合一个真实的 React Native 聊天界面示例，详细说明： 如何在键盘弹出时自动上移输入框 为什么 KeyboardAvoidingView 是首选方案 iOS 和 Android 需要注意的差异和额外配置 一、核心思路：使用 KeyboardAvoidingView 在 React Native 中，官方推荐用于处理键盘遮挡问题的组件是： KeyboardAvoidingView 在本项目中，整个聊天页面被包裹在 KeyboardAvoidingView 中： <KeyboardAvoidingView style={styles.root} behavior="padding" keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 80} > {/* Chat content */} </KeyboardAvoidingView> 这样做的好处是： 键盘弹出时，系统自动为内容腾出空间 输入框始终可见，不会被遮挡 无需手动监听 keyboard show / hide 事件 二、behavior 属性如何选择？ KeyboardAvoidingView 的 behavior 决定了布局如何响应键盘： padding （推荐）：通过增加底部 padding 上移内容 height ：减少视图高度（Android 上偶尔会闪动） position ：通过 position 调整（不稳定，较少使用） 在聊天类 UI 中， padding 是最稳定、体验最好的选择 。 三、keyboardVerticalOffset：为什么必须设置？ 如果你的页面顶部有： 导航栏（Navigation Header） 自定义 Header S...