Answers
These are the questions people asked most in the Draftbit Community, answered again for how React Native and Expo apps are built today. Each one ends with a prompt you can give the agent if your app is in Draftbit.
Expo
- How do I ask for an App Store review in an Expo app with expo-store-review? Install expo-store-review, check isAvailableAsync(), and call requestReview() after a moment the user enjoyed, not from a button. Apple and Google limit how often the prompt appears and don't promise it'll show, so for a "Rate us" button, open your store page with storeUrl() instead.
- How do I cancel or replace notifications in an Expo app? Schedule with your own identifier, then call cancelScheduledNotificationAsync(id) to stop it before it fires, or dismissNotificationAsync(id) to clear one that's already showing. To replace instead of stacking, reuse the identifier, or send pushes with collapseId and, on Android, tag.
- How do I fix "Cannot find native module" in an Expo app? Your app's JavaScript is asking for native code that isn't in the app you're running. Run npx expo install --fix so every package matches your Expo SDK, then make a new development build or store build that includes the package.
- How do I get the user's location in an Expo app? Install expo-location, call requestForegroundPermissionsAsync, and once the status is granted, call getCurrentPositionAsync. It resolves with a LocationObject whose coords hold the latitude and longitude. Add a timeout and fall back to getLastKnownPositionAsync so a slow GPS fix can't stall your screen.
- How do I make a full-screen splash screen in Expo? Since SDK 52, Expo's splash screen uses Android's own splash screen API, which shows a centered image on a background color rather than a full-screen picture. You can still get a full-screen look by keeping the native splash simple and showing your own full-screen image in React right after it.
- How do I play audio in the background with react-native-track-player or expo-audio? We'd start with expo-audio, where you turn on background playback in its config plugin, call setAudioModeAsync with shouldPlayInBackground, and show lock screen controls. Use react-native-track-player when you need things like Android Auto or caching, and note that version 5 needs a paid license for commercial apps.
- How do I record video with expo-camera? Render a CameraView with mode="video", ask for camera and microphone permission, then call recordAsync() on its ref to start and stopRecording() to finish. The promise from recordAsync resolves with the video's file uri once recording stops.
- How do I save an image to the photo library in an Expo app? The photo library only takes a local file, so get the image into one first, then ask for photo library permission and call MediaLibrary.saveToLibraryAsync with the file's URI. For a remote image that means File.downloadFileAsync, and for a base64 string it means writing a file with the base64 encoding. PDFs can't go in the photo library.
- How do I send an email or a text message from an Expo app? Use composeAsync from expo-mail-composer to open a prefilled email, and sendSMSAsync from expo-sms to open a prefilled text. Both open the phone's own compose screen and the user taps send. To send without the user, call an email or SMS API from your backend.
- Why is my Expo app stuck on the loading screen? Either your phone can't reach the development server, or the app is waiting for something that never finishes, such as a font, an asset, or an API call that runs before the splash screen is hidden. Check the terminal for a bundling error, try tunnel mode, and make sure hideAsync always runs.
React Native
- How do I add charts to a React Native app with Victory Native? For a new chart, we'd use Victory Native, which draws with React Native Skia. If you already use react-native-chart-kit and its labels are cut off, size the chart to its container and adjust paddingRight, verticalLabelRotation, and xLabelsOffset. react-native-svg-charts hasn't had a release since 2020, so plan to replace it.
- How do I add infinite scrolling to a list in React Native? Fetch the next page in the list's onEndReached callback, and set onEndReachedThreshold to control how early it runs. Track loading and whether more pages exist in refs so the same page isn't requested twice, and show a spinner in ListFooterComponent. FlatList and FlashList use the same props.
- How do I add phone and video calls to a React Native app? Phone calls are one line, because your app just opens the phone's dialer with a tel link. In-app video calls need a video provider's SDK, a small piece of backend code that creates call tokens, and a development build, since video SDKs include native code that Expo Go doesn't have.
- How do I change the status bar color on iPhone in React Native? On iPhone, the status bar is transparent, so there's no background color to set. Color the view behind it by painting the top safe area, then pick light or dark text with the style prop from expo-status-bar.
- How do I filter a list with a search bar in React Native? Keep the search text in state, filter your data with it inside useMemo using a case-insensitive includes, and render the filtered array in a FlatList. When the data lives on a server, wait until the user pauses typing, then run the query with the search text.
- How do I fix "Invalid prop `style` supplied to `React.Fragment`"? Something is passing a prop like style to a Fragment, and Fragments only accept key and children. Look for a component that adds props to its child, wrapped around a component that returns <>...</>, then replace that Fragment with a real element such as a View and pass the props through.
- How do I fix "is not a legal HTTP header value" in React Native? One of your request headers contains a character HTTP doesn't allow, such as a line break at the end of a token or a whole object pasted into the value. The text before "is not a legal" is the bad value, so trim it, send the right field, and check that header names have no spaces or colons.
- How do I fix "java.lang.String cannot be cast to java.lang.Boolean" in React Native? A native Android component received a string like "true" or "false" where it needs a real boolean. iOS is more forgiving with many of these props, so the crash can show up only on Android. Find the prop in the error's stack trace and pass a boolean instead.
- How do I fix "Minified React error #130" (Element type is invalid)? React was asked to render something as a component that isn't one, such as undefined or an object. Look at your imports first, for a default import of a named export, a component that was never exported, or a circular import. Running the web app in development shows which component it was.
- How do I fix "Tried to register two views with the same name" (RNCPicker, RNSVGCircle)? Your app bundles two copies of the same native package, so its view gets registered twice. Find the duplicate with npx expo-doctor or yarn why, line up your version with npx expo install, and if a library still depends on its own copy, force a single one with resolutions or overrides.
- How do I fix "TypeError: e.map is not a function" in React Native? The value you're calling .map() on isn't an array. It might be an object that wraps the list, an error response, or a promise you didn't await, and logging it right before the crash shows which. Once you know, read the array from the right key and start your state as an empty array, so the screen can render before the data arrives.
- How do I fix "Unable to resolve module" in React Native or Expo? A file or package you import couldn't be found when your app was bundled. If the error names a package, install it with npx expo install. If it names a path, check the spelling and capitalization. Then restart with npx expo start --clear.
- How do I get the current URL from a WebView in React Native? Pass onNavigationStateChange to the WebView and read navState.url, which gives you the current URL each time a page starts or finishes loading. For single-page sites that change the address without loading a new page, inject a small script that sends window.location.href back with postMessage.
- How do I handle font scaling in React Native? React Native text scales with the phone's text size setting by default, because allowFontScaling is true. Keep it on so people who need larger text can read your app, cap tight spots with maxFontSizeMultiplier, and read useWindowDimensions().fontScale to adjust layouts as text grows.
- How do I share content from a React Native app, including to Instagram Stories? For text and links, call Share.share from React Native. For photos and other files, use expo-sharing's shareAsync with a file on the device. To open Instagram Stories directly, use react-native-share's shareSingle with your Facebook App ID, which needs a development build.
- How do I use Chips in React Native Paper? Install react-native-paper, wrap your app in PaperProvider, and render a Chip with its label as the child. Use mode for flat or outlined, selected and onPress to toggle it, icon for a leading icon, and onClose to add a close button.
- What does "Minified React error #31" mean? The full message is "Objects are not valid as a React child." Something you render, such as a whole record, a Date, or an error object, isn't text or an element, so render one of its fields or turn it into a string. If the keys listed are {$$typeof, type, key, ref, props}, your app has mismatched React versions.
- What does "Minified React error #321" mean? It's React's "Invalid hook call" error. A hook ran somewhere other than the top level of a function component, such as inside a FlatList renderItem function or an event handler, or your app has mismatched or duplicate copies of React. Run it in development to find the component, then move the hook or fix the versions.
- What does react-native-url-polyfill/auto do, and do I still need it? It replaces React Native's simplified URL and URLSearchParams with versions that follow the web standard. If your app uses Supabase, keep it, because Supabase's current Expo quickstart still has you install it and import react-native-url-polyfill/auto at the top of the client file.
- Why can't I select results from Google Places Autocomplete in React Native? If the component sits inside a ScrollView or FlatList without keyboardShouldPersistTaps, the first tap only closes the keyboard, and the results hide before the tap lands. Set keyboardShouldPersistTaps="handled" on every parent list, and with fetchDetails on, make sure the Place Details request succeeds.
- Why doesn't my date picker work inside a modal in React Native? The date picker behaves differently on each platform. On Android it's a system dialog you open on demand, and on iOS it draws inline, so inside a Modal you need to open it from a button on Android and pick a display style and text color that work on iOS.
- Why is my React Native ScrollView not scrolling on Android? Check three layout problems. A parent view may have no bounded height, contentContainerStyle may use flex 1 where it needs flexGrow 1, or the ScrollView may sit inside another one that scrolls the same way, which on Android needs nestedScrollEnabled.
- Why is there white space at the bottom of my app on iPhone? That strip is the safe area around the iPhone's home indicator. Your content is kept out of it, but your background color isn't filling it. Put the background color on the outermost view, use react-native-safe-area-context, and choose which edges get padding.
Sign-in
- Can I add Instagram login to a React Native app? Not for everyday users anymore. Meta shut down the Instagram Basic Display API on December 4, 2024, and that was the API apps used to let anyone sign in with Instagram. Instagram's current API only works with business and creator accounts, so for regular sign-in, use Apple, Google, or Facebook instead.
- How do I add OAuth 2.0 sign-in to a React Native app? Use useAuthRequest from expo-auth-session to open the provider's sign-in page with PKCE and get an authorization code back. Once you have the code, exchange it for tokens (on your server if the provider needs a client secret), store them with expo-secure-store, and send the access token to your REST API as a Bearer header.
Supabase
- How do I build a Supabase password reset flow in an Expo app? Send the reset email with a redirect URL that points back into your app, add that URL to Supabase's allowed redirect URLs, then turn the link your app receives into a session and call updateUser with the new password.
- How do I stop "JWT expired" errors with Supabase in React Native? Supabase access tokens last 1 hour by default. Create the client with persistSession and autoRefreshToken, store the session in AsyncStorage, start and stop auto refresh with AppState, and get the token from getSession() each time instead of saving it yourself.
- How do I upload an image to Supabase Storage from an Expo app? Pick the photo with expo-image-picker, read the file into an ArrayBuffer, and pass it to supabase.storage.from(bucket).upload() with the image's contentType. Then add a storage policy that allows inserts, because uploads are blocked until one exists.
- Why is my Supabase login not working (400 Bad Request)? A 400 from signInWithPassword means your app reached Supabase Auth and the sign-in was rejected. Read error.code. invalid_credentials means no matching email and password in this project, and email_not_confirmed means the password is right but the email hasn't been confirmed yet.
Firebase
Publishing
- How do I fix "Build request failed" and Fastlane errors in EAS Build? A "Build request failed" message means the request to start a build was rejected, so update eas-cli, check that cli.version in eas.json allows it, and read the error printed under it. A failed "Run fastlane" step on iOS means the Xcode build failed, and the real error is in the Xcode logs on the build page.
- Why did my EAS build fail with a gradlew or expo export:embed error? A missing gradlew means your project has an android folder, so it was built as a project whose native code you manage yourself, but that folder is incomplete. The export:embed error means your JavaScript failed to bundle, and the real error is a few lines above it in the build log.