## Publishing to Android App Stores ### Rejected for Privacy Violations Some Chinese app stores will reject your app with a message like "SDK reads private user information (ANDROID_ID) without user consent." The culprit is `expo-application` reading `ANDROID_ID`: ```ts // node_modules/expo-application/src/Application.ts export const applicationId: string | null = ExpoApplication ? ExpoApplication.applicationId || null : null; ``` ```kotlin // node_modules/expo-application/android/src/main/java/expo/modules/application/ApplicationModule.kt constants["androidId"] = Settings.Secure.getString(mContext.contentResolver, Settings.Secure.ANDROID_ID) ``` ### Fix Replace the `ANDROID_ID` read with a fixed value via a patch. ## Toast Inside a Modal Gets Covered by the Modal ![toast_masked_by_modal.png][1] Wrap the modal's content in `react-native-root-siblings`: ```jsx { setShow(false); }} onBackButtonPress={() => { setShow(false); }} onModalHide={() => { setAddNewProp(false); }} animationIn={"slideInUp"} animationOut={"slideOutDown"} className={"m-0 justify-end"} useNativeDriverForBackdrop={false} swipeDirection={["down"]} onSwipeComplete={() => { setShow(false); }} onModalShow={() => textInputRef.current?.focus()} avoidKeyboard={true} > ``` ## TextInput Caret Stuck at the End Even with `textAlign="center"` ![input_caret_issue.png][2] Add `numberOfLines` and `multiline`: ```jsx ``` ## Multiple Modals in Sequence Freeze on iOS This is a known `react-native` bug. The fix: show the next modal inside the previous modal's `onModalHide` callback, so you wait for the hide animation to complete before mounting the new one. > **I can't show multiple modals one after another** > Unfortunately right now react-native doesn't allow multiple modals to be displayed at the same time. This means that, in react-native-modal, if you want to immediately show a new modal after closing one you must first make sure that the modal that your closing has completed its hiding animation by using the `onModalHide` prop. ## App Crashes on Return from a Third-Party Payment App (iOS) When a payment deep-links to WeChat or Alipay and the user returns, the app crashes with: ```objective-c NSInvalidArgumentException: Application tried to present modally a view controller that is already being presented by . ``` Caused by `react-native-modal` — the modal is still visible when the app is backgrounded. Fix: close the modal before triggering the deep-link, with a small delay to let the dismiss animation finish: ```javascript const first = () => { setShowModal(false); setTimeout(() => { then(); }, 1000); }; ``` ## Keyboard Handling for Text Inputs on iOS For numeric inputs, `enterKeyHint` / `returnKeyType` lets you show a "Done" button that dismisses the keyboard: ![decimal-done.png][3] For text-type inputs the same props exist but don't dismiss the keyboard reliably: ![text-done.png][4] Use `inputAccessoryViewID` with `InputAccessoryView` instead: ```jsx Done ``` ![text-accessory-view.png][5] ![decimal-accessory-view.png][6] ## Unable to Load Script / index.android.bundle Not Found ![2024-06-09T16:45:08.png][7] Check the Android Emulator's network connectivity first — this is usually a networking issue, not a bundle issue. ## Build Fails with `error: style attribute 'attr/*** not found` ```shell * What went wrong: Execution failed for task ':xxx:verifyReleaseResources'. > A failure occurred while executing com.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action > Android resource linking failed ERROR: /path/to/project/node_modules/xxx/android/build/intermediates/merged_res/release/values/values.xml:1587: AAPT: error: style attribute 'attr/statusBarBackground (aka com.xxx:attr/statusBarBackground)' not found. ``` Add the missing attribute to `src/main/res/values/attrs.xml`: ```xml ``` ## Loading Non-JS Asset Files ### Step 1: Register the Extension with Metro ```javascript const config = getDefaultConfig(__dirname); config.resolver.assetExts.push("ext"); module.exports = config; ``` ### Step 2: Import the Asset After adding the config, you can `import f from 'file.ext'`. Unlike webpack's `raw-loader`, Metro returns the module's asset ID, not the file contents. You need two more steps. ### Step 3: Read the File Contents Install `expo-asset` and `expo-file-system`, then: ```javascript from(Asset.loadAsync(module)).pipe( switchMap(([{ localUri }]) => iif( () => localUri != null, defer(() => from(readAsStringAsync(localUri)).pipe( map((content) => content), ), ), of(""), ), ), ); ``` ## Android Build Hangs Indefinitely A previously working build suddenly stalls at: ```shell <=========----> 73% EXECUTING [10m 20s] > IDLE > :app:createBundleReleaseJsAndAssets ``` Packet capture revealed the build was making an outbound request to a service with connectivity issues. Adding the domain to `hosts` pointing to `127.0.0.1` resolved it. ## Getting ReactContext Inside a Fragment ```kotlin import androidx.fragment.app.Fragment import com.facebook.react.ReactApplication import com.facebook.react.ReactInstanceManager import com.facebook.react.bridge.ReactContext import com.facebook.react.bridge.WritableMap import com.facebook.react.modules.core.DeviceEventManagerModule class XXXFragment : Fragment() { private lateinit var reactContext: ReactContext private lateinit var reactInstanceManager: ReactInstanceManager override fun onAttach(context: Context) { super.onAttach(context) reactInstanceManager = activity?.application?.let { (it as ReactApplication).reactNativeHost.reactInstanceManager }!! reactContext = reactInstanceManager.currentReactContext as ReactContext } private fun sendEvent(reactContext: ReactContext, eventName: String, params: WritableMap?) { reactContext .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java) .emit(eventName, params) } } ``` ## "View config getter callback for component `MyNativeModule` must be a function (received `undefined`)" A native module that was working fine suddenly throws this on load. After comparing `package.json` files between the broken module and a freshly generated one, I found the broken module had: ```json "devDependencies": { "react": "18.2.0", "react-native": "0.74.3" } ``` The main project was using `react-native@0.74.5`. The version mismatch caused the crash. Removing those `devDependencies` fixed it. *To be continued…* [1]: /api/media/serve/images/2024/06/1946004119.png [2]: /api/media/serve/images/2024/06/3708091695.png [3]: /api/media/serve/images/2024/06/1198530483.png [4]: /api/media/serve/images/2024/06/499787831.png [5]: /api/media/serve/images/2024/06/3257505201.png [6]: /api/media/serve/images/2024/06/2728582533.png [7]: /api/media/serve/images/2024/06/3436335205.png