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

MoEngage: Deep Link Navigation in Push Notifications Not Working When App is Killed

$
0
0

I am facing an issue where the deep link navigation from push notifications does not work when the app is killed, it works fine when the app is either active or in the background. MoEngage React Native SDK version I'm currently using is 9.1.0, I also have AppDelegate swizzling disabled for iOS.

From what I understand a deeplink should be obtained via Linking.getInitialURL(). While it partly works for Android (but the link can't be used as is), it doesn't work at all for iOS

The workaround I'm currently using is:

// MainActivity.ktoverride fun onCreate(savedInstanceState: Bundle?) {    val originalIntent = intent    if (originalIntent.extras != null) {        val remoteMessage = RemoteMessage(originalIntent.extras)        if (MoEPushHelper.getInstance().isFromMoEngagePlatform(remoteMessage.data)) {            try {                val deeplink = remoteMessage.data[PUSH_NOTIFICATION_NAVIGATION_DEEPLINK]                    ?: remoteMessage.data[PUSH_NOTIFICATION_NAVIGATION_DEEPLINK_LEGACY]                if (deeplink != null) {                    originalIntent.apply {                        data = Uri.parse(deeplink)                    }                    intent = originalIntent                }            } catch (e: Exception) {                // Handle exception            }        }    }    super.onCreate(null)}
// AppDelegate.mm- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    // Other initializations    NSMutableDictionary *newLaunchOptions = [NSMutableDictionary dictionaryWithDictionary:launchOptions];    NSDictionary *userInfo = launchOptions[UIApplicationLaunchOptionsRemoteNotificationKey];    if (userInfo && !launchOptions[UIApplicationLaunchOptionsURLKey]) {        if ([[MoEngageSDKMessaging sharedInstance] isPushFromMoEngageWithPayload:userInfo]) {            NSString *initialURL = userInfo[@"app_extra"][@"moe_deeplink"];            if (initialURL) {                newLaunchOptions[UIApplicationLaunchOptionsURLKey] = [NSURL URLWithString:initialURL];            }        }    }    BOOL result = [super application:application didFinishLaunchingWithOptions:newLaunchOptions];    UIView *rootView = self.window.rootViewController.view;    [RNSLoadingView setupWithRootView:rootView];    return result;}

And then on JS side the link becomes available using Linking.getInitialURL()

While this workaround solves the issue, I'm wondering if there are better ways to handle it? Thank you!


NewRelic (newrelic-react-native-agent) PrivacyInfo.xcprivacy issue on Appstore submission

$
0
0

I have integrated NewRelic plugin (newrelic-react-native-agent) within my React Native app, the app works fine locally as well as on Testflight, but when I submit the app for Apple review on Appstore, it fails with below message -

Hello,We noticed one or more issues with a recent submission for App Store review for the following app:Neuroglee HealthVersion 2.3.4Build 10Please correct the following issues and upload a new binary to App Store Connect.ITMS-91056: Invalid privacy manifest - The PrivacyInfo.xcprivacy file from the following path is invalid: "Frameworks/NewRelic.framework/PrivacyInfo.xcprivacy". Keys and values in any privacy manifest must be in a valid format. For more details about privacy manifest files, visit: https://developer.apple.com/documentation/bundleresources/privacy_manifest_files.Apple Developer Relations

I already have PrivacyInfo.xcprivacy in my app, but how can I modify 3rd party SDK .xcprivacy file? Any help appreciated.

I've tried changing the .xcprivacy file from newrelic-react-native-agent Framework, but that didn't helped.

Can I use apple libraries like CoreML and PencilKit with react-native apps?

$
0
0

I really want to make use of the pencil kit in my react-native application. I just want to know whether I can do it. If yes, then how?

Is there any library to render panaroma image on both Android and iOS in react native app?

Failure of pod install for the React-native project using Yarn Berry

$
0
0

Simply, I can't install the pod for the react-native project when I use the yarn - Berry or any newer version 3.x or 4.x. Is there anyone who made this work? Thanks!

This can be re-introduced by following these steps:

1 - yarn set version berry

2 - npx react-native init abc

You will get failure for installing the pod files. The same for the existing projects as well. I am using react-native 0.74.0, 0.74.1

 #  from /Users/administrator/Desktop/abc/ios/Podfile:2 #  ------------------------------------------- #  # Resolve react_native_pods.rb with node to allow for hoisting>  require Pod::Executable.execute_command('node', ['-p', #    'require.resolve( #  -------------------------------------------Couldn't install Pods. Updating the Pods project and trying again...Command `pod install` failed.└─ Cause: Invalid `Podfile` file: [!] /opt/homebrew/bin/node -p require.resolve("react-native/scripts/react_native_pods.rb",    {paths: [process.argv[1]]},  ) /Users/administrator/Desktop/abc/iosnode:internal/modules/cjs/loader:1205  throw err;  ^Error: Cannot find module 'react-native/scripts/react_native_pods.rb'Require stack:- /Users/administrator/Desktop/abc/ios/[eval]    at Module._resolveFilename (node:internal/modules/cjs/loader:1202:15)    at Function.resolve (node:internal/modules/helpers:199:19)    at [eval]:1:9    at runScriptInThisContext (node:internal/vm:209:10)    at node:internal/process/execution:118:14    at [eval]-wrapper:6:24    at runScript (node:internal/process/execution:101:62)    at evalScript (node:internal/process/execution:136:3)    at node:internal/main/eval_string:51:3 {  code: 'MODULE_NOT_FOUND',  requireStack: [ '/Users/administrator/Desktop/abc/ios/[eval]' ]}Node.js v22.0.0

Here is how my pod file looks like:

# 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 'abc' do  config = use_native_modules!  use_react_native!(    :path => config[:reactNativePath],    # An absolute path to your application root.    :app_path => "#{Pod::Config.instance.installation_root}/.."  )  target 'abcTests' 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,      # :ccache_enabled => true    )  endend

And package.json file:

{"name": "abc","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","lint": "eslint .","start": "react-native start","test": "jest"  },"dependencies": {"react": "18.2.0","react-native": "0.74.1"  },"devDependencies": {"@babel/core": "^7.20.0","@babel/preset-env": "^7.20.0","@babel/runtime": "^7.20.0","@react-native/babel-preset": "0.74.83","@react-native/eslint-config": "0.74.83","@react-native/metro-config": "0.74.83","@react-native/typescript-config": "0.74.83","@types/react": "^18.2.6","@types/react-test-renderer": "^18.0.0","babel-jest": "^29.6.3","eslint": "^8.19.0","jest": "^29.6.3","prettier": "2.8.8","react-test-renderer": "18.2.0","typescript": "5.0.4"  },"engines": {"node": ">=18"  }}

Thanks!

Simply, I can't install the pod for the react-native project when I use the yarn - Berry or any newer version 3.x or 4.x. Is there anyone who made this work? Thanks!

PhaseScriptExecution [CP-User]\ Config\ codegen 'react-native-config

$
0
0

I upgraded React Native from 0.70.7 to 0.74, but I am getting the following error.

** BUILD FAILED **The following build commands failed:        PhaseScriptExecution [CP-User]\ Config\ codegen /Users/hakanuysal/Library/Developer/Xcode/DerivedData/myProject-dzmuzwuniukjeedngibspubvfwbd/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/react-native-config.build/Script-46EB2E00042F70.sh (in target 'react-native-config' from project 'Pods')(1 failure)error Command failed with exit code 1.

package.json:

{"name": "myProject","version": "1.0.0","private": true,"scripts": {"android": "react-native run-android --variant=productiondebug --appId com.myProject","ios": "react-native run-ios","start": "react-native start","ios:beta": "react-native run-ios --scheme 'myProjectStaging'  --configuration 'StagingDebug'","test": "jest","lint": "eslint --ext src/**/*.{js,ts,tsx}","clean": "cd android && ./gradlew clean && rm -rf ~/.gradle/caches/build-cache-* && ./gradlew --stop && cd .. && watchman watch-del-all && rm -rf node_modules/ && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* &&  yarn cache clean && yarn install && cd ios && rm -rf Podfile.lock && rm -rf Pods/ && pod install && cd .. && yarn start --reset-cache","metro-clean": "watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* &&  yarn cache clean && yarn start --reset-cache","cache-clean": "yarn start --reset-cache","postinstall": "patch-package","prettier:write": "yarn prettier --write src/**/*.{js,ts,tsx,json}","package-check": "npm-check -i @myProject/* -p","package-check:dev": "npm-check -i @myProject/* -d","build-android:apk": "cd android && ./gradlew clean && rm -rf ~/.gradle/caches/build-cache-* && ./gradlew --stop && watchman watch-del-all && ./gradlew assembleProductionRelease && ./gradlew --stop","build-android-market": "cd android && ./gradlew bundleProductionRelease"  },"dependencies": {"@eva-design/eva": "^2.1.1","@invertase/react-native-apple-authentication": "^2.2.2","@ptomasroos/react-native-multi-slider": "^2.2.2","@react-native-clipboard/clipboard": "1.14.1","@react-native-community/datetimepicker": "8.0.0","@react-native-firebase/analytics": "19.2.2","@react-native-firebase/app": "19.2.2","@react-native-firebase/auth": "19.2.2","@react-native-firebase/crashlytics": "19.2.2","@react-native-firebase/database": "19.2.2","@react-native-firebase/messaging": "19.2.2","@react-native-firebase/perf": "19.2.2","@react-native-google-signin/google-signin": "^11.0.1","@react-native-masked-view/masked-view": "0.3.1","@react-navigation/bottom-tabs": "6.5.20","@react-navigation/drawer": "6.6.15","@react-navigation/elements": "1.3.30","@react-navigation/native": "6.1.17","@react-navigation/stack": "6.3.29","@reduxjs/toolkit": "2.2.3","@rnhooks/keyboard": "^1.1.0","@sentry/react-native": "5.22.0","@ui-kitten/components": "^5.1.2","@ui-kitten/eva-icons": "^5.1.2","axios": "1.6.8","deprecated-react-native-prop-types": "^5.0.0","expo": "^50.0.17","expo-linear-gradient": "12.7.2","expo-screen-orientation": "6.4.1","i18next": "23.11.3","lodash": "^4.17.21","lottie-ios": "4.4.1","lottie-react-native": "6.7.2","metro": "0.80.8","moment": "2.30.1","moment-duration-format": "^2.3.2","prop-types": "^15.8.1","react": "18.3.1","react-i18next": "14.1.1","react-native": "0.74.0","react-native-adjust": "4.38.1","react-native-agora": "4.3.0-build.1","react-native-bootsplash": "5.5.3","react-native-code-push": "8.2.2","react-native-confetti-cannon": "^1.5.2","react-native-config": "1.5.0","react-native-device-info": "10.13.2","react-native-dialog": "^9.2.2","react-native-fast-image": "8.6.3","react-native-fbsdk-next": "^13.0.0","react-native-flash-message": "0.4.2","react-native-gesture-handler": "2.16.1","react-native-gifted-chat": "2.4.0","react-native-google-mobile-ads": "13.2.0","react-native-gradle-plugin": "^0.71.19","react-native-hyperlink": "^0.0.22","react-native-inappbrowser-reborn": "^3.7.0","react-native-keyboard-aware-scroll-view": "^0.9.5","react-native-localize": "3.1.0","react-native-mmkv": "2.12.2","react-native-modal": "^13.0.1","react-native-modal-datetime-picker": "17.1.0","react-native-pager-view": "6.3.1","react-native-permissions": "3.0.4","react-native-purchases": "7.27.1","react-native-reanimated": "^3.10.0","react-native-restart": "^0.0.27","react-native-safe-area-context": "^4.10.1","react-native-screens": "3.31.1","react-native-snackbar": "^2.4.0","react-native-snap-carousel": "^3.9.1","react-native-store-review": "^0.4.3","react-native-svg": "^15.2.0","react-native-swipe-list-view": "^3.2.9","react-native-tab-view": "3.5.2","react-native-vector-icons": "10.0.3","react-native-walkthrough-tooltip": "^1.6.0","react-redux": "9.1.1","redux": "5.0.1","socket.io-client": "4.7.5"  },"devDependencies": {"@babel/core": "^7.24.5","@babel/plugin-proposal-decorators": "7.24.1","@babel/plugin-syntax-typescript": "7.24.1","@babel/preset-typescript": "7.24.1","@babel/runtime": "^7.24.5","@react-native-community/eslint-config": "^3.2.0","@sentry/types": "^7.112.2","@types/eslint": "^8.56.10","@types/jest": "29.5.12","@types/lodash": "^4.17.0","@types/react": "^18.2.6","@types/react-dom": "^18.3.0","@types/react-native": "^0.73.0","@types/react-native-snap-carousel": "^3.8.11","@types/react-redux": "7.1.33","@types/react-test-renderer": "^18.3.0","@typescript-eslint/eslint-plugin": "7.8.0","@typescript-eslint/parser": "7.8.0","@ui-kitten/metro-config": "^5.1.2","babel-jest": "^29.7.0","babel-plugin-module-resolver": "^5.0.2","babel-plugin-transform-inline-environment-variables": "0.4.4","babel-plugin-transform-remove-console": "^6.9.4","eslint": "9.1.1","eslint-config-prettier": "^9.1.0","eslint-config-standard": "^17.0.0","eslint-config-universe": "^12.0.1","eslint-import-resolver-typescript": "^3.5.1","eslint-plugin-import": "^2.26.0","eslint-plugin-node": "^11.1.0","eslint-plugin-prettier": "^5.1.3","eslint-plugin-promise": "^6.0.1","eslint-plugin-react": "^7.34.1","eslint-plugin-react-hooks": "^4.6.2","eslint-plugin-standard": "^5.0.0","jest": "^29.7.0","metro-react-native-babel-preset": "0.77.0","patch-package": "^8.0.0","postinstall-postinstall": "^2.1.0","prettier": "^3.2.5","pretty-quick": "^4.0.0","react-test-renderer": "18.3.1","ts-jest": "29.1.2","typescript": "5.4.5"  },"jest": {"preset": "react-native","moduleFileExtensions": ["ts","tsx","js","jsx","json","node"    ]  },"expo": {"autolinking": {"exclude": ["react-native-reanimated"      ]    }  }}

podfile:

use_modular_headers!$RNFirebaseAsStaticFramework = true$RNFirebaseAnalyticsWithoutAdIdSupport=true$RNGoogleMobileAdsAsStaticFramework = truepod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => falserequire File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")require_relative '../node_modules/react-native/scripts/react_native_pods'require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'platform :ios, '14.0'install! 'cocoapods', :deterministic_uuids => falseproject 'myProject','DevDebug' => :debug,'DevRelease' => :release,'StagingDebug' => :debug,'StagingRelease' => :release,'Debug' => :debug,'Release' => :releasetarget 'myProject' do  use_expo_modules!  post_integrate do |installer|    begin      expo_patch_react_imports!(installer)    rescue => e      Pod::UI.warn e    end    begin      expo_patch_react_imports!(installer)    rescue => e      Pod::UI.warn e    end  end  config = use_native_modules!  # Flags change depending on the env values.  flags = get_default_flags()  use_react_native!(    :path => config[:reactNativePath],    :hermes_enabled => false,    :fabric_enabled => false,    :app_path => "#{Pod::Config.instance.installation_root}/.."  )  permissions_path = '../node_modules/react-native-permissions/ios'  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone"  pod 'Permission-AppTrackingTransparency', :path => "#{permissions_path}/AppTrackingTransparency"  pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications"  ## Firebase pods  pod 'Firebase', :modular_headers => true  pod 'FirebaseCore', :modular_headers => true  pod 'GoogleUtilities', :modular_headers => true  post_install do |installer|    react_native_post_install(      installer,      config[:reactNativePath],      :mac_catalyst_enabled => false    )    # __apply_Xcode_12_5_M1_post_install_workaround(installer)    installer.target_installation_results.pod_target_installation_results      .each do |pod_name, target_installation_result|      target_installation_result.resource_bundle_targets.each do |resource_bundle_target|        resource_bundle_target.build_configurations.each do |config|          config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'        end      end    end  endend

React Native App is not taking the entire device view height/space

$
0
0

The React native app, I am working on is not taking the entire viewport like every other app. I tested it on an iPhone 11 pro and it still gave space at the top and bottom.I don't think this is a CSS flex, height declaration, or SafeAreaView issue. It is about the height the app itself is taking. See the below picture gotten from returning the code in App.js.

<View style={{flex:1}}><Text>XXX</Text></View>

A screenshot showing the app. it doesn't take the whole device view height

AppEntry Bundling issue when running expo react native ios app

$
0
0

So I am following the AWS Amplify documents to create a react native expo app.( https://docs.amplify.aws/react-native/start/getting-started/setup/ )

I have installed an api for graphQL (which generated typescript) storage and Auth.

Package.json

{"name": "gimme-golf","version": "1.0.0","main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web"  },"dependencies": {"@aws-amplify/react-native": "^1.0.28","@aws-amplify/ui-react-native": "^2.1.6","@react-native-async-storage/async-storage": "^1.23.1","@react-native-community/netinfo": "^11.3.1","@types/react": "~18.2.45","aws-amplify": "^6.2.0","babel-plugin-module-resolver": "^5.0.2","expo": "~50.0.17","expo-status-bar": "~1.11.1","react": "18.2.0","react-native": "0.73.6","react-native-get-random-values": "^1.11.0","react-native-safe-area-context": "4.8.2","typescript": "^5.3.0"  },"devDependencies": {"@babel/core": "^7.20.0"  },"private": true}

App.js

import { StatusBar } from 'expo-status-bar';import { StyleSheet, Text, View } from 'react-native';import {  withAuthenticator,  useAuthenticator} from '@aws-amplify/ui-react-native';import { Amplify } from 'aws-amplify';import amplifyconfig from './src/amplifyconfiguration.json';Amplify.configure(amplifyconfig);// retrieves only the current value of 'user' from 'useAuthenticator'const userSelector = (context) => [context.user];const SignOutButton = () => {  const { user, signOut } = useAuthenticator(userSelector);  return (<Pressable onPress={signOut} style={styles.buttonContainer}><Text style={styles.buttonText}>        Hello, {user.username}! Click here to sign out!</Text></Pressable>  );};const App = () => {  return (<SafeAreaView style={styles.container}><View style={styles.container}><SignOutButton /></View></SafeAreaView>  );}export default withAuthenticator(App);const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },});

I have tried deleteing node_modules and package-lock.json and reinstalling with npm i and npx expo install.

Whatever I try I always get a variation of

iOS Bundling failed 4396ms (node_modules/expo/AppEntry.js)Unable to resolve "@babel/runtime/helpers/classCallCheck" from "node_modules/react-native/Libraries/Components/Button.js"

The area it's unable to resolve changes, but it's always failing to bundle. All I have done it follow the documentation so far. And just tried to run after installing auth and the api.


How to use pull to refresh in a FlatList with centerContent set to true (React Native)

$
0
0

I've been trying to make a FlatList work with centered content but there is a problem.

When I set the property centerContent (from ScrollView) to true the scroll does not work because the content is smaller than the ScrollView.

Can you think of any way to keep the pull to refresh working when the content is centered and small?

How to capture audio from other applications while using GetDisplayMedia for screen sharing in a React Native app?

$
0
0

I've implemented screen sharing using WebRTC in my React Native app, but I'm encountering an issue where the audio from other apps, such as YouTube, is not being captured during screen broadcasting.

Below is the React Native code snippet I'm using for screen sharing:

const screenShareStreamRef = useRef();const [screenShareStream, setScreenShareStream] = useState(null);const screenShareVideoProducer = useRef();const screenShareAudioProducer = useRef();let audioTrack, videoTrack, screenstream;  const startScreenStream = async () => {    try {      const displayStream = await mediaDevices.getDisplayMedia({ video: true });      videoTrack = displayStream.getVideoTracks()[0];      const audioStream = await mediaDevices.getUserMedia({ audio: true });      audioTrack = audioStream.getAudioTracks()[0];      // Combine video and audio tracks into a single MediaStream      screenstream = new MediaStream([videoTrack, audioTrack]);      screenShareStreamRef.current = screenstream;      setScreenShareStream(screenstream);    } catch (error) {      console.error(error);    }})

For both iOS and Android, I've followed the setup provided in this guide: Link to the setup guide.

Additionally, for iOS, I've added the necessary files into the project, as mentioned in the guide: Link to the files.

I'm looking for insights or solutions on how to capture audio from other apps during screen sharing. Any help would be appreciated. Thank you!

Unable to see Android/iOS Folder in react native project

$
0
0

I am beginner in react-native , i am following the official website to create React-Native project .

create-react-native-app AwesomeProjectcd AwesomeProjectnpm start

This is creating the the project structure like this :

enter image description here

But i want to add Splash in ios and android , and i am looking at tutorials all add the splash in the native code , why android and ios folder in not created in My React Native project .

enter image description here

Invariant Violation: "Dapit" has not been registered. This can happen if:Metro (the local dev server) is run from the wrong folder

$
0
0

The app working fine in android when I git pulled in mac and do npm i and pod install after that i am getting error:

nvariant Violation: new NativeEventEmitter() requires a non-null argument., js engine: hermesInvariant Violation: "Dapit" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

the file AppDelegate.mm here:

#import "AppDelegate.h"#import <React/RCTBundleURLProvider.h>@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  self.moduleName = @"Dapit";  // You can add your custom initial props in the dictionary below.  // They will be passed down to the ViewController used by React Native.  self.initialProps = @{};  return [super application:application didFinishLaunchingWithOptions:launchOptions];}- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge{  return [self getBundleURL];}- (NSURL *)getBundleURL{#if DEBUG  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];#else  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];#endif}@end

Package.JSON

{"name": "Dapit","version": "0.0.1","private": true,"scripts": {"android": "react-native run-android","ios": "react-native run-ios","lint": "eslint .","start": "react-native start","test": "jest","postinstall": "patch-package"  },"dependencies": {"@react-native-async-storage/async-storage": "^1.22.3","@react-native-community/checkbox": "^0.5.17","@react-native-community/datetimepicker": "^7.6.2","@react-native-google-signin/google-signin": "^11.0.1","@react-native-picker/picker": "^2.6.1","@react-navigation/bottom-tabs": "^6.5.20","@react-navigation/drawer": "^6.6.3","@react-navigation/native": "^6.1.16","@react-navigation/native-stack": "^6.9.25","axios": "^1.6.7","base-64": "^1.0.0","crypto-js": "^3.3.0","jwt-decode": "^4.0.0","patch-package": "^8.0.0","react": "18.2.0","react-native": "0.73.6","react-native-app-auth": "^7.1.3","react-native-chart-kit": "^6.12.0","react-native-file-viewer": "^2.1.5","react-native-gesture-handler": "^2.15.0","react-native-gifted-charts": "^1.4.9","react-native-html-to-pdf": "^0.12.0","react-native-keyboard-aware-scroll-view": "^0.9.5","react-native-linear-gradient": "^2.8.3","react-native-loader-kit": "^2.0.8","react-native-modal-datetime-picker": "^17.1.0","react-native-month-year-picker": "^1.9.0","react-native-pdf": "^6.7.4","react-native-push-notification": "^8.1.1","react-native-radio-buttons-group": "^3.1.0","react-native-reanimated": "^3.8.0","react-native-safe-area-context": "^4.9.0","react-native-screens": "^3.29.0","react-native-share": "^10.1.0","react-native-size-matters": "^0.4.2","react-native-vector-icons": "^10.0.3"  },"devDependencies": {"@babel/core": "^7.20.0","@babel/preset-env": "^7.20.0","@babel/runtime": "^7.20.0","@react-native/babel-preset": "0.73.21","@react-native/eslint-config": "0.73.2","@react-native/metro-config": "0.73.5","@react-native/typescript-config": "0.73.1","@types/react": "^18.2.6","@types/react-test-renderer": "^18.0.0","babel-jest": "^29.6.3","eslint": "^8.19.0","jest": "^29.6.3","prettier": "2.8.8","react-native-dotenv": "^3.4.11","react-test-renderer": "18.2.0","typescript": "5.0.4"  },"engines": {"node": ">=18"  }}

If anyone got this type error and know the solution please reply.

Expo Build Problem - Unsupported MIME type: image/webp

$
0
0

I'm getting the following errors when building my Expo project for iOS and Android. I'm not using any .webp files anywhere in my project. However, I haven't been able to solve the problem. What do you think could be the issue?

"expo": "^50.0.0","react": "18.2.0","react-native": "0.73.6",

IOS

- Creating native directory (./ios)✔ Created native directory- Updating package.json✔ Updated package.json- Running prebuild✖ Prebuild failedError: [ios.dangerous]: withIosDangerousBaseMod: Unsupported MIME type: image/webpError: [ios.dangerous]: withIosDangerousBaseMod: Unsupported MIME type: image/webp    at Jimp.throwError (/Users/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:833)    at Jimp.parseBitmap (/Users/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:125733)    at Jimp.parseBitmap (/Users/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:8514)    at /Users/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:7613    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)npx expo prebuild --no-install --platform ios exited with non-zero code: 1

ANDROID

- Creating native directory (./android)✔ Created native directory- Updating package.json✔ Updated package.json- Running prebuild✖ Prebuild failedError: [android.dangerous]: withAndroidDangerousBaseMod: Unsupported MIME type: image/webpError: [android.dangerous]: withAndroidDangerousBaseMod: Unsupported MIME type: image/webp    at Jimp.throwError (/home/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:833)    at Jimp.parseBitmap (/home/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:125733)    at Jimp.parseBitmap (/home/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:8514)    at /home/expo/workingdir/build/node_modules/jimp-compact/dist/jimp.js:1:7613    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)npx expo prebuild --no-install --platform android exited with non-zero code: 1

How to Manage Temporary and Permanent Files in React Native App

$
0
0

I'm developing a React Native app where users can select photos using an image picker. I'm currently storing these photos in a temporary directory on the device's filesystem, but I'm concerned about their persistence across app sessions and device reboots.

  1. What is the best practice for managing temporary files in a React Native app?
  2. How can I ensure that files stored in a temporary directory are reliably deleted when no longer needed?
  3. Is it advisable to copy temporary files to a permanent location for long-term storage, and if so, how can I achieve this in React Native?
  4. What are the potential drawbacks or risks of relying on temporary files for long-term storage in a React Native app?

I'd appreciate any insights or advice on how to effectively manage files in my React Native app to ensure data integrity and reliability across different device configurations and usage scenarios.

How to Implement Drag-and-Drop Functionality for Images in React Native?

$
0
0

I'm working on a React Native app where I need to implement drag-and-drop functionality for images. Specifically, I want users to be able to rearrange the order of images by dragging and dropping them within a container.I've searched for tutorials and libraries, but I haven't found a clear solution for implementing this in a React Native app. Can someone provide guidance on how to achieve drag-and-drop functionality for images in React Native?

Ideally, I'm looking for a solution that:

  1. Allows users to drag and drop images within a container.
  2. Provides smooth and responsive dragging behavior.
  3. Is compatible with React Native components, such as <Image />.

Any advice, code examples, or recommended libraries would be greatly appreciated. Thank you!


Xcode 15 build failed on react native 14 iOS app

$
0
0

If you could help us in this matter it would be a great support and highly appreciated. we are using Xcode 15 to make an iOS app from react native. The React native version is 0.64.4 and the app was previously built two or three years ago by another team. now the app development is handed to us, but we couldn’t even run the app from a simulator.

As we know Xcode 15 with SDK iOS 17/17.2 doesn’t seem to support our app.and the iOS targetting version is 11 for our app. However, we don’t know what kind of computer or Xcode version they previously used to do this. intel 86_64 or Apple silicon, but we use Apple silicon one.

For react native, the node version is 14, and the Java version is 8.

Our system is a Macbook Air M1.

We can’t update our app at this moment and need to make a few changes, add some fixes, and publish the version to the App Store, then soon, we are hoping to upgrade our React native version because we had to fix our dependency version errors. it will take some time, but for now, we had to publish this as it is.

Thank you for any help! Thank you again!

Tried changing the iOS development target to 17, but it didn't solve it. The Android build was running and working fine. only the iOS development is not working. tried react-native 0.72.10 using Xcode and it successfully built that app.

React Native, iOS build fails with react-native-maps

$
0
0

I hope someone here could help me with my issue.

I'm using react-native v 0.73.2

On android the application successfully builds but I have issue with building the iOS version.Cocopods have been successfully installed, but when running "yarn ios" I am struck with this error:

The following build commands failed:    CompileC /Users/nino/Library/Developer/Xcode/DerivedData/PlitviceMobile-aonymzxbkvahywhidgtjlsmxrplx/Build/Intermediates.noindex/PlitviceMobile.build/Debug-iphonesimulator/PlitviceMobile.build/Objects-normal/arm64/AIRGoogleMapOverlayManager.o /Users/nino/code/plitvice/node_modules/react-native-maps/ios/AirGoogleMaps/AIRGoogleMapOverlayManager.m normal arm64 objective-c com.apple.compilers.llvm.clang.1_0.compiler (in target 'PlitviceMobile' from project 'PlitviceMobile')(1 failure)

when running it from xcode I have got this stack of errors.

first errorsecond error

Anyone has any ideas what might be the issue and how could I resolve this?

I have already tried running everything that I have found online including:

  • reinstalling react-native-maps
  • reinstalled pods
  • cleaned the build folder
  • ran the build from xcode

Module 'SquareReaderSDK' not found in IOS (React Native)

$
0
0

I'm encountering an issue with integrating the SquareReaderSDK into my iOS project. Despite following the documentation and ensuring that I've properly added the SDK to my project, Xcode still reports that it cannot find the SquareReaderSDK module.

Here are the steps I've taken so far:

  1. I've added the SquareReaderSDK framework to my project by dragging it into the "Frameworks, Libraries, and Embedded Content" section of my target settings.

  2. I've made sure that the framework is listed under "Link Binary With Libraries" in the "Build Phases" settings for my target.

  3. I've imported the SquareReaderSDK module in the appropriate files where I need to use it.

I've tried cleaning the build folder, deleting derived data, and restarting Xcode, but the issue persists.

Is there anything else I might be missing or any additional steps I need to take to properly integrate the SquareReaderSDK into my project? Any help or insights would be greatly appreciated.

Versions:

  • "react-native": "0.72.3",

  • "react-native-square-reader-sdk": "^1.4.3"

Device:
IOS simulator: IPhone 15

Error Screenshot:

enter image description here

I have followed the documnentation of sqaure reader sdk.
https://github.com/square/react-native-square-reader-sdk/blob/master/docs/get-started.md#step-5-install-reader-sdk-for-ios

React native IOS - FirebaseCoreInternal.modulemap not found

$
0
0

I am trying to build a React Native ios app on Xcode and I keep getting the below error /User/Library/Developer/Xcode/DerivedData/appname-dokbeeueevdjhqfdmixtepepfamp/Build/Intermediates.noindex/appname.build/Debug-iphonesimulator/appname.build/DerivedSources/appname.c module map file/User/Library/Developer/Xcode/DerivedData/appname-dokbeeueevdjhqfdmixtepepfamp/Build/Products/Debug-iphonesimulator/FirebaseCoreInternal/FirebaseCoreInternal.modulemap' not found

The error reference this appname_vers.c file - /User/Library/Developer/Xcode/DerivedData/appname-dokbeeueevdjhqfdmixtepepfamp/Build/Intermediates.noindex/appname.build/Debug-iphonesimulator/appname.build/DerivedSources/appname_vers.c

 extern const unsigned char appnamEVersionString[]; extern const double appnameVersionNumber; const unsigned char appnameVersionString[] __attribute__ ((used)) = "@(#)PROGRAM:appname  PROJECT:appname-1" "\n"; const double appnameVersionNumber __attribute__ ((used)) = (double)1.;

Could not find com.google.vr:sdk-base:1.180.0

$
0
0

I am trying to render panaroma image on my react-native application. Tried few packages, but most of the devs suggesting this https://github.com/lightbasenl/react-native-panorama-view.

Since, I have made some changes on build.gradlew for the package. I couldn't able to build the app. Is there anyway to fix this issue

build.gradle (app)

buildscript {    ext {        buildToolsVersion = "34.0.0"        minSdkVersion = 23        compileSdkVersion = 34        targetSdkVersion = 34        ndkVersion = "26.1.10909125"        kotlinVersion = "1.9.22"    }    repositories {        flatDir {            dirs 'libs'        }        google()        mavenCentral()    }    dependencies {        classpath("com.android.tools.build:gradle")        classpath("com.facebook.react:react-native-gradle-plugin")        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")    }}subprojects { subproject ->    if(project['name'] == 'lightbase_react-native-panorama-view'){        project.configurations { compile { } }    }}apply plugin: "com.facebook.react.rootproject"

build.gradle (react-native-panorama-view)

buildscript {    repositories {        google()        mavenCentral()    }    dependencies {        // Matches recent template from React Native (0.59)        // https://github.com/facebook/react-native/blob/0.59-stable/template/android/build.gradle#L16        classpath 'com.android.tools.build:gradle:3.3.2'    }}apply plugin: 'com.android.library'apply plugin: 'maven-publish'def safeExtGet(prop, fallback) {    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback}// Matches values in recent template from React Native (0.59)// https://github.com/facebook/react-native/blob/0.59-stable/template/android/build.gradle#L5-L9def DEFAULT_COMPILE_SDK_VERSION = 28def DEFAULT_BUILD_TOOLS_VERSION = "28.0.3"def DEFAULT_MIN_SDK_VERSION = 19def DEFAULT_TARGET_SDK_VERSION = 28android {  compileSdkVersion safeExtGet('compileSdkVersion', DEFAULT_COMPILE_SDK_VERSION)  buildToolsVersion safeExtGet('buildToolsVersion', DEFAULT_BUILD_TOOLS_VERSION)  defaultConfig {    minSdkVersion safeExtGet('minSdkVersion', DEFAULT_MIN_SDK_VERSION)    targetSdkVersion safeExtGet('targetSdkVersion', DEFAULT_TARGET_SDK_VERSION)    versionCode 1    versionName "1.0"  }  lintOptions {    abortOnError false  }}repositories {    maven {        // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm        // Matches recent template from React Native (0.59)        // https://github.com/facebook/react-native/blob/0.59-stable/template/android/build.gradle#L30        url "$projectDir/../node_modules/react-native/android"    }    mavenCentral()}dependencies {    implementation 'com.facebook.react:react-native:+'    // Panorama    implementation "androidx.annotation:annotation:1.1.0"    implementation 'com.google.vr:sdk-base:1.180.0'    implementation 'com.google.vr:sdk-common:1.180.0'    implementation 'com.google.vr:sdk-commonwidget:1.180.0'    implementation 'com.google.vr:sdk-panowidget:1.180.0'    implementation 'commons-io:commons-io:2.5'}def configureReactNativePom(def pom) {    def packageJson = new groovy.json.JsonSlurper().parseText(file('../package.json').text)    pom.project {        name packageJson.title        artifactId packageJson.name        version = packageJson.version        group = "nl.lightbase"        description packageJson.description        url packageJson.repository.baseUrl        licenses {            license {                name packageJson.license                url packageJson.repository.baseUrl +'/blob/master/'+ packageJson.licenseFilename                distribution 'repo'            }        }        developers {            developer {                id packageJson.author.username                name packageJson.author.name            }        }    }}afterEvaluate { project ->    // some Gradle build hooks ref:    // https://www.oreilly.com/library/view/gradle-beyond-the/9781449373801/ch03.html    task androidJavadoc(type: Javadoc) {        source = android.sourceSets.main.java.srcDirs        classpath += files(android.bootClasspath)        classpath += files(project.getConfigurations().getByName('compile').asList())        include '**/*.java'    }    task androidJavadocJar(type: Jar, dependsOn: androidJavadoc) {        archiveClassifier  = 'javadoc'        from androidJavadoc.destinationDir    }    task androidSourcesJar(type: Jar) {        archiveClassifier  = 'sources'        from android.sourceSets.main.java.srcDirs        include '**/*.java'    }    android.libraryVariants.all { variant ->        def name = variant.name.capitalize()        def javaCompileTask = variant.javaCompileProvider.get()        task "jar${name}"(type: Jar, dependsOn: javaCompileTask) {            from javaCompileTask.destinationDir        }    }    artifacts {        archives androidSourcesJar        archives androidJavadocJar    }    task installArchives(type: Upload) {        configuration = configurations.archives        repositories{            mavenDeployer {                repository url: "file://${projectDir}/../android/maven"                configureReactNativePom pom            }}    }}
Viewing all 17107 articles
Browse latest View live


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