Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all 17137 articles
Browse latest View live

Run React Native app on iPad simulator error

$
0
0

I am trying to run my react native app on my iPad simulator with the command react-native run-ios --simulator 'iPad (10th generation)'

But, I get these error logs:

Build description signature: 7cf5c3320c25fda88e4673d59f397047Build description path: /Users/kmrn/Library/Developer/Xcode/DerivedData/FLID-anxacvaysbkcouecmjqciusrrlnc/Build/Intermediates.noindex/XCBuildData/7cf5c3320c25fda88e4673d59f397047.xcbuilddata/Users/kmrn/code/FLID-fusion-lineitem-display/ios/FLID.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/kmrn/code/FLID-fusion-lineitem-display/ios/Pods/Target Support Files/Pods-FLID/Pods-FLID.debug.xcconfig'. (in target 'FLID' from project 'FLID')warning: Unable to read contents of XCFileList '/Target Support Files/Pods-FLID/Pods-FLID-frameworks-Debug-output-files.xcfilelist' (in target 'FLID' from project 'FLID')warning: Unable to read contents of XCFileList '/Target Support Files/Pods-FLID/Pods-FLID-resources-Debug-output-files.xcfilelist' (in target 'FLID' from project 'FLID')error: Unable to load contents of file list: '/Target Support Files/Pods-FLID/Pods-FLID-resources-Debug-input-files.xcfilelist' (in target 'FLID' from project 'FLID')error: Unable to load contents of file list: '/Target Support Files/Pods-FLID/Pods-FLID-resources-Debug-output-files.xcfilelist' (in target 'FLID' from project 'FLID')error: Unable to load contents of file list: '/Target Support Files/Pods-FLID/Pods-FLID-frameworks-Debug-input-files.xcfilelist' (in target 'FLID' from project 'FLID')warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'FLID' from project 'FLID')error: Unable to load contents of file list: '/Target Support Files/Pods-FLID/Pods-FLID-frameworks-Debug-output-files.xcfilelist' (in target 'FLID' from project 'FLID')warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'FLID' from project 'FLID')warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'FLID' from project 'FLID')--- xcodebuild: WARNING: Using the first of multiple matching destinations:{ platform:iOS Simulator, id:4B3D7B42-9C2E-4AE1-971F-15030CE1A0E3, OS:17.4, name:iPad (10th generation) }{ platform:iOS Simulator, id:4B3D7B42-9C2E-4AE1-971F-15030CE1A0E3, OS:17.4, name:iPad (10th generation) }** BUILD FAILED **

This is happening all of a sudden, how can I fix it?The same happens when I run npm run iOS.


React Native: Location.reverseGeocodeAsync only returns partial UK postcode (outcode)

$
0
0

My app looks up lat/long addresses using the Location package in Expo (expo-location).

Once I get the user's permission, the device provides the lat/long coordinates. I then attempt to convert these coordinates to a UK address:

        let location = await Location.getCurrentPositionAsync({});        let address = await Location.reverseGeocodeAsync(coords);        if (address[0].postalCode.length < 5) {            Alert.alert('Error','Location.reverseGeocodeAsync() returned only a partial postcode: '+ address[0].postalCode            );        }

Does anyone know why I don't always get a full UK postcode? I've tested this in multiple locations on data and on WiFi, and there doesn't seem to be a pattern as to when it fails.

Trying to add rounded borders around text in React Native

$
0
0

I am working for a small startup, and I was tasked with implementing a settings screen design. Based off of what they designed, they want like a box that fits the screen with text on top of it that serves as a breaker between each section of the settings. I just can't figure out how to round the corners around the text.

So far what I did was:

<View className="w-full mt-2"><Text style={styles.TextComponentStyle}>Account</Text></View> 

And the style sheet looks like this:

TextComponentStyle: {    borderRadius: 5,    borderColor: '#DADEE8',    borderWidth: .5,    color: 'black',    backgroundColor: '#DADEE8',    padding: 2,    fontSize: 16,    margin: 10  }

It is giving me almost everything I want minus the rounded corners. It is showing up as square corners.

AirGoogleMaps dir must be added to your xCode project to support GoogleMaps (SOLUTION DEBUG)

$
0
0

Good morning, more than a problem, it is a solution for those who have this problem in debug when using the google map in react-native-mapsin your Podfile:

if target.name == 'react-native-google-maps' target.build_configurations.each do |config|    config.build_settings\["EXCLUDED_ARCHS\[sdk=iphonesimulator\*\]"\] = "arm64"  config.build_settings\['CLANG_ENABLE_MODULES'\] = 'No' endendcoment line config.build_settings\["EXCLUDED_ARCHS\[sdk=iphonesimulator\*\]"\] = "arm64"they would have something like this:if target.name == 'react-native-google-maps' target.build_configurations.each do |config|  #config.build_settings\["EXCLUDED_ARCHS\[sdk=iphonesimulator\*\]"\] = "arm64"  config.build_settings\['CLANG_ENABLE_MODULES'\] = 'No' endend

Disable Debugging in Expo For React Native App

$
0
0

So I've opened up my react-native app in Expo today (using the iOS simulator) and I am creating by what looks like a debugging overlay.

Screenshot here:enter image description here

I don't need this and it's blocking some of the UI for testing.

How does one turn it off?

How to refresh Access token of multiple API's being called parallel, When Access token of the all the API's get invalid at the same time?

$
0
0

In my React Native application, I get an access token and a refresh token after login.

There is a common function to call the access token again using the refresh token when the access token is invalid

On my home page, there are 6 APIs, but when the access token gets invalid these 6 APIs parallelly call to the common function and refresh the access token. This is making that specific user get blocked.

How to prevent this? blocking the rest of the APIs with a flag when the first API's token becomes invalid is not an option because, before the first response, all the APIs will have refreshed the access token.

The handleResponse function gets triggered first then the code reaches getNewToken funtions then it reaches the dispatch(logout()); because the call for accesstoken does not become success and the app crashes because logout is called multiple times.

const handleResponse = async (        res: ApiResponse<BaseResponseProp, BaseResponseProp> | null,      ) => {          if (res?.data?.error === 'invalid_token') {            let tokenVal;            try {              if (token.refresh_token) {                tokenVal = await getNewToken(token.refresh_token);              } else {                //refresh the public token                tokenVal = await refreshPublicToken();              }              if (tokenVal?.access_token && tokenVal?.access_token.length > 0) {                const newTokenHeader = {                  Authorization: `Bearer ${tokenVal.access_token}`,                };                invoke({                  requestHeader: { ...requestHeader, ...newTokenHeader },                  requestBody,                  requestParams,                  requestQuery,                  url: formattedEndpoint,                  onResultCallback,                  onErrorCallback,                });                dispatch(setToken(tokenVal));              } else {                setInvalidToken(true);                navigation.dispatch(                  StackActions.replace(NAVIGATION_SCREENS.ROOT),                );                return;              }              return;            } catch (e) {              const newToken = await refreshPublicToken();              dispatch(setToken(newToken));              return;            }          }          const err = new CustomError(            res?.data?.error || res?.originalError?.message,            res?.data?.status || 200,          );          if (typeof onErrorCallback === 'function') {            onErrorCallback(err);          } else if (typeof onError === 'function') {            onError(err as CustomError);          }          handleParseError(err);        } else {          const responseData = res?.data as unknown as R;          if (renderData) {            setData(res?.data);          }          if (typeof onResultCallback === 'function') {            onResultCallback(res?.data as unknown as R);          } else if (typeof onResult === 'function') {            onResult(res?.data);          }        }      }; const getNewToken = async (refToken: string) => {    let formattedEndpoint = ENDPOINT.LOGIN;    let tokenVal = {};    const header = { refresh_token: refToken };    const requestQuery = {      ...REFRESH_AUTH_HEADERS,      ...header,    };    const queryParams = new URLSearchParams({      ...requestQuery,    }).toString();    formattedEndpoint = `${formattedEndpoint}?${queryParams}`;    const refreshResponse = await api.post<LoginSuccess>(      formattedEndpoint,      {},      {        headers: basicAuthHeaders,      },    );    if (refreshResponse.status === 200) {      tokenVal = {        access_token: refreshResponse.data?.access_token,        refresh_token: refreshResponse.data?.refresh_token,        expires_in: refreshResponse.data?.expires_in,        type: 'private',      };    } else {      // The logout gets called multiple times and app crashes      dispatch(logout());      tokenVal = {        access_token: null,        token_type: null,        refresh_token: null,        expires_in: null,        scope: null,        id_token: null,        type: 'public',      };      tokenVal = await refreshPublicToken();      navigation.dispatch(StackActions.replace(NAVIGATION_SCREENS.ROOT));    }    return tokenVal;  };

Questions regarding architecture and feasibility for a mobile app using Socket.IO

$
0
0

I'm creating a mobile app in React Native similar to JackBox games, but am unfamiliar with networking. My idea was to use Socket.IO and connect it to a server either on Azure or a local connection (someone else in the room). Is there a way to use a user's phone as the server without connecting to wifi? Regardless of the server connection, can iOS and android devices communicate with each other? Or is there a better way to do this all together? Thanks!

React native app not opening on IOS 17.4.1 on iPhone 15 pro but running on other lower devices with same IOS version and lower

$
0
0

IO am new to react-native world and was working on a project recently, already developped, and was asked to create and share IPA link. I did and then got feedback that the app is not running. There is no issue for installation. But the issue is when it opens, shows the splash screen for a bit and closes.There is no error msg from the device. This is the first time we ran the app on this device(iPhone 15 pro IOS 17.4.1) so don't exactly know if it is a package related issue or which pcakage in that case, which often occurs when we introduce new packages into the code. We tested the app on the iPhone XR, 12 and 14 plus with the same IOS version (17.4.1) and there was no issue. If anyone has faced this kind of issue and solved, please share your issue and solution. It may help finding mine.

react : "18.2.0"react-native : "0.74.0"

The app was originally developed on"react": "17.0.2","react-native": "0.68.2"

After facing the current issue I upgraded every dependencies and fixed all the issues that was there. Finally when the project was stable and running all physical devices we have, tried on the iphone 15 pro again it showed the same behavior. The app shows the splash screen for a sec and then closes with no error.

let me know if any specifics you want to know, i will try my best to provide.


How to disable verbose logging in React Native Expo?

$
0
0

React Native: 0.72.5

Expo: 49.0.10

Using the iOS Simulator

I'm seeing hundreds of logs, without prompting, and for every little UI button I press, or scroll a listview. Its highly annoying because the logs I want to see are impossible to find.

For example, there are tons like this

[MediaToolbox] <<<< FigFilePlayer >>>> itemfig_setCurrentTimeWithRangeAndIDGuts: [0x162ef3e00] I/YGB.02 called, time = 0.000, flags =[MediaToolbox] <<<< Boss >>>> FigPlaybackBossSetTimeWithRange: (0x165c7c980) playState set to Paused

How do I disable this?

Two deployments in the same repository with React Native

$
0
0

I have a question that I would like to ask here to see your opinions. I have an app in react native, with the same repository, could I make two different deployments of two different applications and different names using the same repository? All of this would be in order to avoid having to clone the same repository, and not pass the changes by hand every time you update one of them when at the end of the day only colors and some functionalities change.

Until now I haven't tried how to do it.

Running React Native Expo Go app on Website

$
0
0

I'd like to host an app on a website, specifically GitHub pages. It is a relatively simple app that only consists of two frontend pages with no backend or databases. I'd like to run an iPhone emulator on the GitHub page. How would I go about doing this?

The app is written in React Native and I currently use npm run start, scan the QR code on my phone, and it launches in Expo Go. I have very little experience with React Native or hosting apps so pardon my inexperience.

Global error handler for React Native applications (android, ios)

$
0
0

I am trying to create global handler for react native plugin, or at least in the application level, in TypeScript to catch all unhandled exceptions and log them.

I'm using react native 0.74.x version.

I found package react-native-exception-handler. But this was last updated 3 years ago, and is not maintained anymore.

I also found concept of Error Boundaries, but it looks like this solution doesn't work for me.

ErrorBoundary class

import React, { Component, type ErrorInfo } from 'react';import { Text } from 'react-native';interface Props {  children: React.ReactNode;}interface State {  hasError: boolean;}class ErrorBoundary extends Component<Props, State> {  constructor(props: Props) {    super(props);    this.state = { hasError: false };  }  public static getDerivedStateFromError(_: Error): State {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {    console.error('ErrorBoundary caught an error: ', error, errorInfo);    this.setState({ hasError: true });  }  render() {    if (this.state.hasError) {      return <Text>Something went wrong.</Text>;    }    return this.props.children;  }}export default ErrorBoundary;

Then I use this class on the following way:

const ExceptionTrackingView = () => {  return (<ErrorBoundary><View><CustomButton              buttonTitle={item.key}              buttonOnPress={() => {                JSON.parse('Invalid JSON String');              }}            /></View></ErrorBoundary>  );};

So in the button click event, it should create exception when trying to parse invalid JSON, and after that to console log error, from ErrorBoundary, but it gets never called.

Also, based on documentation, ErrorBoundary can't catch the following errors:

  • Event handlers (learn more)
  • Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
  • Server side rendering
  • Errors thrown in the error boundary itself (rather than its children)

so, even if it works for the upper scenario, it doesn't work for all errors.

Is there any package or solution to implement a global error handler for react-native applications to work with the latest react native version(s) 0.73.x and up?

react native app works on debug mode, but not works release mode on ios

$
0
0

I Have an app on react native. Debug mode works on ios. But Release mode not works. I tried change the optimization level but not helped. The problem that I don't see any error. Just not working some functional. And I can't debug release version of app. How to solve this problem?

As a last change we added following saga, when we remove calling this saga it works

import { select, take, takeLatest, call, put, fork, race } from 'redux-saga/effects';import R from 'ramda';import V from 'o-validator';import * as actionCreators from './actions';import { redirectTo, showModalError, showModal, showOtp, closeOtp, errorOtp, loader, keychainSet } from '../../../actions/app-actions';import { storeSession, refreshSession } from '../../../actions/session-actions';import I18n from 'react-native-i18n';import {  KEYCHAIN_RESET,  KEYCHAIN_GET,  KEYCHAIN_RESULT} from '../../../constants/action-types';import { validatePassword, createCustomError, serverError } from '../../../services/utils';const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))export function * ChangePasswordWatcher( api, action ) {        yield fork( ChangePasswordFormWatcher, api, action );}export function * ChangePasswordFormWatcher(api, action){  while (true) {    yield race({      changePasswordProcess: call(ChangePasswordStart, api),      cancel: take(['CHANGE_PASSWORD_PASSWORD_RESET'])    });    //yield put( loader('hide') );        yield put( loader('hide') );  }}/** * Change Password Sagas starter * * @param {function} api - api object * @param {object} action - action from dispatch * @returns */export function * ChangePasswordStart(api, action) {    try {            while (true) {                const { formData } = yield take('CHANGE_PASSWORD_FORM_SUBMIT');                                let oldPassword = formData.oldPassword;                                let newPassword = formData.newPassword;                                let newPasswordConfirmation = formData.newPasswordConfirmation;                                yield put({                                type: 'CHANGE_PASSWORD_FORM_VALID'                              });                                const validate = validateForm( 'changePasswordForm', formData );                                if ( validate.valid ) {                                        yield put( actionCreators.submitChangePasswordFormValid() );                                        yield put( loader('show') );                                        let newPasswordResponse = yield call( api.setChangePassword, oldPassword, newPassword);                    yield put( loader('hide') );                    if ( !newPasswordResponse.ok ) {                                            let errors = serverError(newPasswordResponse);                                            console.log(errors);                                      console.log('errors newPasswordResponse');                                      yield put( showModalError({ error: errors }));                                      yield put( actionCreators.submitNewPasswordFormFailed( errors ) );                                        //  return false;                                        }                                        else {                                        yield put({                                            type: KEYCHAIN_GET,                                            // resultAction: ''                                        });                                        const keychain = yield take(KEYCHAIN_RESULT);                    // Save to Keychain                                        yield put( keychainSet({                                            login: keychain.login || false,                                            password: keychain.password || false                                        }) );                            // final screen                                        yield put( redirectTo('thankyou') );                                        yield call( delay, 300 );                                        yield put( actionCreators.changePasswordResetState() );                                    }                                }                                else {                                    yield put( showModalError({ error: validate.errors }));                                    yield put( actionCreators.submitChangePasswordFormFailed( validate.errors ));                                    yield put( actionCreators.changePasswordFailed() );                    //                      yield put( actionCreators.submitFinFormFailed( ret.errors ) );                //                      yield put( actionCreators.registrationFailed());                              }          // Reset login         //  yield call( delay, 300 );        //  yield put( actionCreators.resetState() );        }    } catch (e) {            console.log(e);    }}export function validateForm( formKey, formData ) {  let  ret = {    valid: true,    errors: false  },  schema: {};  switch ( formKey ) {    case 'changePasswordForm':        schema = {                    oldPassword: V.required( validatePassword ),                    newPassword: V.required( validatePassword ),                    newPasswordConfirmation: V.required( R.equals( formData.newPassword ) )                };      break;    default:      break;  }  ret.valid = V.validate( schema, formData );  if ( !ret.valid ) {    ret.errors = V.getErrors( schema, formData );    ret.errors = R.zipObj( R.pluck('property', ret.errors), ret.errors );  }  console.log('isValid: '+ ret.valid.toString());  return ret;}

To comment all Console.log statements not helped

import { select, take, takeLatest, call, put, fork, race } from 'redux-saga/effects';import R from 'ramda';import V from 'o-validator';import * as actionCreators from './actions';import { redirectTo, showModalError, showModal, showOtp, closeOtp, errorOtp, loader, keychainSet } from '../../../actions/app-actions';import { storeSession, refreshSession } from '../../../actions/session-actions';import I18n from 'react-native-i18n';import {  KEYCHAIN_RESET,  KEYCHAIN_GET,  KEYCHAIN_RESULT} from '../../../constants/action-types';import { validatePassword, createCustomError, serverError } from '../../../services/utils';const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))export function * changePasswordScreenWatcher( api, action ) {        yield fork( ChangePasswordFormWatcher, api, action );}export function * ChangePasswordFormWatcher(api, action){  while (true) {    yield race({      changePasswordProcess: call(ChangePasswordStart, api),      cancel: take(['CHANGE_PASSWORD_PASSWORD_RESET'])    });    //yield put( loader('hide') );        yield put( loader('hide') );  }}/** * Change Password Sagas starter * * @param {function} api - api object * @param {object} action - action from dispatch * @returns */export function * ChangePasswordStart(api, action) {    try {            while (true) {                const { formData } = yield take('CHANGE_PASSWORD_FORM_SUBMIT');                                let oldPassword = formData.oldPassword;                                let newPassword = formData.newPassword;                                let newPasswordConfirmation = formData.newPasswordConfirmation;                                yield put({                                type: 'CHANGE_PASSWORD_FORM_VALID'                              });                                const validate = validateForm( 'changePasswordForm', formData );                                if ( validate.valid ) {                                        yield put( actionCreators.submitChangePasswordFormValid() );                                        yield put( loader('show') );                                        let newPasswordResponse = yield call( api.setChangePassword, oldPassword, newPassword);                    yield put( loader('hide') );                    if ( !newPasswordResponse.ok ) {                                            let errors = serverError(newPasswordResponse);                                            //console.log(errors);                                      //console.log('errors newPasswordResponse');                                      yield put( showModalError({ error: errors }));                                      yield put( actionCreators.submitNewPasswordFormFailed( errors ) );                                        //  return false;                                        }                                        else {                                        yield put({                                            type: KEYCHAIN_GET,                                            // resultAction: ''                                        });                                        const keychain = yield take(KEYCHAIN_RESULT);                    // Save to Keychain                                        yield put( keychainSet({                                            login: keychain.login || false,                                            password: keychain.password || false                                        }) );                            // final screen                                        yield put( redirectTo('thankyou') );                                        yield call( delay, 300 );                                        yield put( actionCreators.changePasswordResetState() );                                    }                                }                                else {                                    yield put( showModalError({ error: validate.errors }));                                    yield put( actionCreators.submitChangePasswordFormFailed( validate.errors ));                                    yield put( actionCreators.changePasswordFailed() );                    //                      yield put( actionCreators.submitFinFormFailed( ret.errors ) );                //                      yield put( actionCreators.registrationFailed());                              }          // Reset login         //  yield call( delay, 300 );        //  yield put( actionCreators.resetState() );        }    } catch (e) {            //console.log(e);    }}export function validateForm( formKey, formData ) {  let ret = {    valid: true,    errors: false  };  switch ( formKey ) {    case 'changePasswordForm':        schema = {                    oldPassword: V.required( validatePassword ),                    newPassword: V.required( validatePassword ),                    newPasswordConfirmation: V.required( R.equals( formData.newPassword ) )                };      break;    default:      break;  }  ret.valid = V.validate( schema, formData );  if ( !ret.valid ) {    ret.errors = V.getErrors( schema, formData );    ret.errors = R.zipObj( R.pluck('property', ret.errors), ret.errors );  }  //console.log('isValid: '+ ret.valid.toString());  return ret;}

Which iOS APIs are supported by React Native/Expo?

$
0
0

I'm currently working on creating a native iOS app, and leaning towards using React Native because I have preexisting web development experience.

With that said, I assume that React Native doesn't comprehensively support all of the iOS APIs I may need to use, is there a list somewhere of features/APIs that it does or does not support?

I am trying to download an Image using URL in react native for android and IOS

$
0
0

For android its working but for ios im getting undefined

**LOG Image downloaded at: undefined/image_1716340223058.png**

import React, {useEffect} from 'react';import {  View,  TextInput,  TouchableOpacity,  Text,  StyleSheet,  Alert,} from 'react-native';import RNFS from 'react-native-fs';const App = () => {  const image ='https://images.pexels.com/photos/785080/pexels-photo-785080.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800';  const downloadImageRemote = () => {    let date = new Date();    let image_URL = image;    let ext = '.png';    let PictureDir = RNFS.DownloadDirectoryPath;    let imageName ='image_'+ Math.floor(date.getTime() + date.getSeconds() / 2) + ext;    let imagePath = `${PictureDir}/${imageName}`;    RNFS.downloadFile({      fromUrl: image_URL,      toFile: imagePath,      background: true,      discretionary: true,    })      .promise.then(res => {        console.log('Image downloaded at:', imagePath);        Alert.alert('Image Downloaded Successfully.');      })      .catch(error => {        console.error('Download failed:', error);        Alert.alert('Download failed. Please try again later.');      });  };  return (<View style={styles.container}><TextInput style={styles.input} value={image} placeholder="Enter text" /><TouchableOpacity        style={styles.button}        onPress={() => downloadImageRemote()}><Text style={styles.buttonText}>Submit</Text></TouchableOpacity></View>  );};const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',  },  input: {    borderWidth: 1,    borderColor: 'black',    borderRadius: 5,    padding: 10,    width: '80%',    marginBottom: 20,  },  button: {    backgroundColor: 'blue',    padding: 10,    borderRadius: 5,  },  buttonText: {    color: 'white',    fontSize: 18,  },});export default App;

Can anyone help?I trid changing the path but not woking

I tride loggin this Image downloaded at: /Users/monishreddy/Library/Developer/CoreSimulator/Devices/DF04A1EA-BC7E-49F9-BB47-24EC599C9CD5/data/Containers/Data/Application/65A998A4-E032-4F3D-9A1A-64137D1786F2/Library/image_1716340650288.png


Is there any permissions in react native to override silent mode to play push notification sound for specific notification?

$
0
0

I am developing an emergency (SOS) app in react native and using firebase for sending push notification. When user activates an SOS, it sends push notification to some users. I wanted the app to play sound for SOS notification even when the phone is in silent mode. I couldn't find any silent override permissions. Is there any other way i can do it?

How to blur text in React Native

$
0
0

The question is simple. I have a View with a Text component in it. I just want this text to be blurred initially.The only solution I saw to blur something in React Native is for an Image via this "react-native-blur".

How can we blur a Text component in React Native?

Info: I just want to make an app where the user does not see the answer directly (via blurring).

Hot reload not working on physical device

$
0
0

Description

When running the project on a physical device, specifically an iPhone 12 with iOS version 17.4.1, the application launches successfully. However, the hot reload feature and development tools deactivate, preventing me from effectively debugging the application.

Expected Behavior:
The application should run on the physical device with active hot reload and development tools, allowing for efficient debugging and development.

Actual Behavior:
Upon running the application on the specified device, the hot reload and development tools are disabled, hindering the debugging process.

It's crucial to say that only happens when the app runs on a physical device, on the simulator works perfectly fine.

Additional Information:

  • This issue persists consistently across multiple attempts.

  • No error messages or warnings are displayed during the process.

  • The problem does not occur when running the application on a simulator

For more information here is the podfile

# Resolve react_native_pods.rb with node to allow for hoistingrequire Pod::Executable.execute_command('node', ['-p','require.resolve("react-native/scripts/react_native_pods.rb",    {paths: [process.argv[1]]},  )', __dir__]).stripplatform :ios, min_ios_version_supportedprepare_react_native_project!linkage = ENV['USE_FRAMEWORKS']if linkage != nil  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green  use_frameworks! :linkage => linkage.to_symendtarget 'KtdraApp' do  config = use_native_modules!  # Flags change depending on the env values.  flags = get_default_flags()  use_react_native!(    :path => config[:reactNativePath],    # Hermes is now enabled by default. Disable by setting this flag to false.    :hermes_enabled => flags[:hermes_enabled],    :fabric_enabled => flags[:fabric_enabled],    # An absolute path to your application root.    :app_path => "#{Pod::Config.instance.installation_root}/.."  )  target 'KtdraAppTests' do    inherit! :complete    # Pods for testing  end  post_install do |installer|    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202    react_native_post_install(      installer,      config[:reactNativePath],      :mac_catalyst_enabled => false    )    __apply_Xcode_12_5_M1_post_install_workaround(installer)  endend

React Native Version

0.72.6

Output of npx-react-native info

System:  OS: macOS 14.4.1  CPU: (8) arm64 Apple M2  Memory: 68.47 MB / 16.00 GB  Shell:    version: "5.9"    path: /bin/zshBinaries:  Node:    version: 18.18.2    path: ~/.nvm/versions/node/v18.18.2/bin/node  Yarn:    version: 1.22.19    path: ~/.nvm/versions/node/v18.18.2/bin/yarn  npm:    version: 9.8.1    path: ~/.nvm/versions/node/v18.18.2/bin/npm  Watchman:    version: 2024.04.01.00    path: /opt/homebrew/bin/watchmanManagers:  CocoaPods:    version: 1.15.2    path: /opt/homebrew/bin/podSDKs:  iOS SDK:    Platforms:      - DriverKit 23.4      - iOS 17.4      - macOS 14.4      - tvOS 17.4      - visionOS 1.1      - watchOS 10.4  Android SDK: Not FoundIDEs:  Android Studio: 2022.3 AI-223.8836.35.2231.10811636  Xcode:    version: 15.3/15E204a    path: /usr/bin/xcodebuildLanguages:  Java:    version: 11.0.22    path: /usr/bin/javac  Ruby:    version: 2.6.10    path: /usr/bin/rubynpmPackages:"@react-native-community/cli": Not Found  react:    installed: 18.2.0    wanted: 18.2.0  react-native:    installed: 0.72.6    wanted: 0.72.6  react-native-macos: Not FoundnpmGlobalPackages:"*react-native*": Not FoundAndroid:  hermesEnabled: true  newArchEnabled: falseiOS:  hermesEnabled: true  newArchEnabled: false

Stacktrace or Logs

info Building (using "xcodebuild -workspace KtdraApp.xcworkspace -configuration Debug -scheme KtdraApp -destination id=00008101-001608AA0A2B001E")
success Successfully built the app
info Installing and launching your app on iPhone
success Installed the app on the device.
warn No apps connected. Sending "devMenu" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

Ive tried:

  1. Modify the xcode scheme

  2. Use another template for the project

  3. Upgrade the react-native version

  4. Use an iPad or another physical device

Check the render method of `App` - Unable to locate issue

$
0
0

Im currently facing an issue with my RN project. I updgraded to SDK 51 and RN version 74. I faced an array of issues since these updates. From my app crashing after IOS Bundled and others.

I've come down to this particular issue now which im still trying to tackle. Below is the console error and package.json and App.tsx

Console

Check the render method of `App`.This error is located at:    in App (created by withDevTools(App))    in withDevTools(App)    in RCTView (created by View)    in View (created by AppContainer)    in RCTView (created by View)    in View (created by AppContainer)    in AppContainer    in main(RootComponent), js engine: hermes

App.tsx

import { StatusBar } from 'expo-status-bar';import { StyleSheet, Text, View } from 'react-native';import Home from './screens/Home';import ItemDetails from './screens/ItemDetails';import { SafeAreaProvider } from "react-native-safe-area-context";import Navigation from './Navigation';import { useState, useEffect } from 'react';import * as Font from 'expo-font';import AppLoading from 'expo-splash-screen';import './TextConfig';const getFonts = () => Font.loadAsync({'Gilroy-Regular': require('./assets/fonts/Gilroy-Regular.ttf'),'Gilroy-Bold': require('./assets/fonts/Gilroy-Bold.ttf'),'Gilroy-SemiBold': require('./assets/fonts/Gilroy-SemiBold.ttf'),'Gilroy-Light': require('./assets/fonts/Gilroy-Light.ttf'),'Gilroy-Medium': require('./assets/fonts/Gilroy-Medium.ttf'),'Gilroy-Thin': require('./assets/fonts/Gilroy-Thin.ttf'),})export default function App() {  const [fontsLoaded, setFontsLoaded] = useState(false);  if(fontsLoaded) {    return <SafeAreaProvider><Navigation/></SafeAreaProvider> ;  } else {    return (<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} onError={console.warn} />)  }}

Package.json

{"name": "my-rn-app","version": "1.0.0","scripts": {"start": "expo start --dev-client","android": "expo run:android","ios": "expo run:ios","web": "expo start --web","eject": "expo eject"  },"dependencies": {"@expo-google-fonts/raleway": "^0.2.3","@expo/config-plugins": "^8.0.4","@freakycoder/react-native-bounceable": ">=1.0.3","@gorhom/bottom-sheet": "^4","@react-native-community/checkbox": "^0.5.15","@react-native-firebase/app": "^18.2.0","@react-native-firebase/auth": "^17.5.0","@react-navigation/material-top-tabs": "^6.6.3","@react-navigation/native": "^6.1.6","@react-navigation/native-stack": "^6.9.12","@react-navigation/stack": "^6.3.16","@rneui/base": "^0.0.0-edge.2","@rneui/themed": "^0.0.0-edge.2","expo": "^51.0.8","expo-blur": "~13.0.2","expo-haptics": "~13.0.1","expo-image-picker": "~15.0.5","expo-location": "~17.0.1","expo-splash-screen": "~0.27.4","expo-status-bar": "~1.12.1","expo-updates": "~0.25.14","firebase": "^9.22.0","geolib": "^3.3.3","lottie-react-native": "6.7.0","react": "18.2.0","react-dom": "18.2.0","react-native": "0.74.1","react-native-animatable": "^1.3.3","react-native-bouncy-checkbox": "^3.0.7","react-native-elements": "^3.4.2","react-native-floating-label-input": "^1.4.2","react-native-gesture-handler": "~2.16.1","react-native-google-places-autocomplete": "^2.5.1","react-native-image-header-scroll-view": "^0.10.3","react-native-keyboard-aware-scroll-view": "^0.9.5","react-native-maps": "1.14.0","react-native-nested-scroll-view": "^9.0.0","react-native-pager-view": "6.3.0","react-native-reanimated": "~3.10.1","react-native-safe-area-context": "4.10.1","react-native-safe-area-view": "^1.1.1","react-native-screens": "3.31.1","react-native-shared-element": "^0.8.8","react-native-svg": "15.2.0","react-native-swiper": "^1.6.0","react-native-switch": "^1.5.1","react-native-tab-view": "^3.5.2","react-native-vector-icons": "^9.2.0","react-native-web": "~0.19.6","react-simple-form-validator": "^0.3.1","valtio": "^1.10.5"  },"devDependencies": {"@babel/core": "^7.24.0","@babel/plugin-transform-template-literals": "^7.24.1","@types/react": "~18.2.45","@types/react-native-vector-icons": "^6.4.13","typescript": "~5.3.3"  },"private": true}

Xcode Trying to Include removed Module in app build

$
0
0

I'm working on updating a fairly old React Native app. One of the things I've done is remove Sentry React Native, as it required an account to access an online portal I don't have access too. I thought this would be fairly simple - I removed Sentry from node modules, from pods, do npm install and pod install, and remove all references from Sentry out of the actual javaScript code of the app. I've also cleaned build, deleted node_modules and reinstalled, but have the same outcome as below.

Now, When I am trying to build iOS on xCode, I get this error

Error: Cannot find module '/Users/dev1/dev/Projectrepo/node_modules/@sentry/cli/bin/sentry-cli'    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)    at Function.Module._load (internal/modules/cjs/loader.js:527:27)    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10)    at internal/main/run_main_module.js:17:11 {  code: 'MODULE_NOT_FOUND',  requireStack: []}Command PhaseScriptExecution failed with a nonzero exit code

I've gone through everything I can and can't figure out why the build is still trying to include Sentry. Is it possible I haven't removed a reference to Sentry somewhere? I know there are no more references in our JS code, but I thought I remade all other files that have to do with our dependencies so I'm stumped on this issue.

Viewing all 17137 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>