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

Error logging in: [TypeError: Cannot read property 'enabled' of undefined]

$
0
0

i have a problem with my old react native project, when i'm trying to login using credentials located in my database, it shows this error:LOG {"assets": [], "createdAt": "2024-05-08T22:05:09.403Z", "extra": {"eas": {}, "expoClient": {"_internal": [Object], "android": [Object], "assetBundlePatterns": [Array], "description": "", "hostUri": "192.168.0.0:8081", "icon": "./assets/icon.png", "iconUrl": "http://192.168.0.0:8081/assets/./assets/icon.png", "ios": [Object], "name": "StoreApp", "orientation": "portrait", "platforms": [Array], "plugins": [Array], "sdkVersion": "51.0.0", "slug": "StoreApp", "splash": [Object], "userInterfaceStyle": "light", "version": "1.0.0", "web": [Object]}, "expoGo": {"__flipperHack": "React Native packager is running", "debuggerHost": "192.168.0.0:8081", "developer": [Object], "mainModuleName": "node_modules\expo\AppEntry", "packagerOpts": [Object]}, "scopeKey": "@anonymous/StoreApp-35d629ed-671c-45b1-9842-dd2299cf867f"}, "id": "910ccd44-7756-42de-9292-d7b1c1fea05f", "launchAsset": {"contentType": "application/javascript", "key": "bundle", "url": "http://192.168.0.0:8081/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app"}, "metadata": {}, "runtimeVersion": "exposdk:51.0.0"}Error logging in: [TypeError: Cannot read property 'enabled' of undefined]

tried to ask chatgpt but it doesn't help with my case, if need fore more info don't hesitate to askit's for my senior projectThanksfor more help:loginscreen.js code:

import React, { useState, useEffect } from "react";import {  View,  Text,  TextInput,  TouchableOpacity,  StyleSheet,  ImageBackground,  Image,  Alert,  KeyboardAvoidingView,  Platform,  ActivityIndicator,} from "react-native";import { useFormik } from "formik";/* import * as Yup from "yup"; */ import AsyncStorage from "@react-native-async-storage/async-storage";import { useNavigation } from "@react-navigation/native";const LoginScreen = () => {  const navigation = useNavigation();  const initialValues = {    email: "",    password: "",  };  const navigateToStore = () => {    navigation.reset({ index: 0, routes: [{ name: "AppStack" }] });  };  /* const validationSchema = Yup.object().shape({    email: Yup.string()      .email("Invalid email address")      .required("Email is required"),    password: Yup.string().required("Password is required"),  }); */  const [isLoggedIn, setIsLoggedIn] = useState(false);  const [isLoggingIn, setIsLoggingIn] = useState(false);  const handleLogin = async (values) => {    try {      setIsLoggingIn(true);      //send the login data to the backend      const userData = {        email: values.email,        password: values.password,      };      //make a POST request to the backend API for user login      const response = await fetch("http://192.168.0.0:8081/api/login", {        method: "POST",        headers: {"Content-Type": "application/json",        },        body: JSON.stringify(userData),      });      const data = await response.json();      console.log(data);      //check if login was successful      if (response.ok) {        if (data.user.enabled === 0) {          //user account is disabled          Alert.alert("Account Disabled","Contact us at SweetyCandy@support.com."          );        } else {          //save the isLoggedIn state to AsyncStorage          await AsyncStorage.setItem("isLoggedIn", "true");          await AsyncStorage.setItem("userId", data.user.userId.toString());          await AsyncStorage.setItem("token", JSON.stringify(data));          setIsLoggedIn(true);          navigateToStore();        }      } else {        console.log("Login failed. Invalid credentials.");        Alert.alert("Login Failed.", "Invalid Credentials. Please try again.");      }    } catch (error) {      console.error("Error logging in:", error);    } finally {      setIsLoggingIn(false);    }  };  const formik = useFormik({    initialValues,    /*     validationSchema,     */ onSubmit: handleLogin, //use the handleLogin function to handle form submission  });  if (isLoggedIn) {    //return null if the user is already logged in    return null;  }  return (<ImageBackground      source={require("../assets/candies.jpg")}      imageStyle={{ resizeMode: "cover" }}      style={{ flex: 1 }}><KeyboardAvoidingView        behavior={Platform.OS === "ios" ? "padding" : "height"}        keyboardVerticalOffset={Platform.OS === "ios" ? 100 : 0}        style={styles.container}><Image          source={require("../assets/logo.png")}          style={styles.logo}          resizeMode="contain"        /><TextInput          style={styles.input}          placeholder="Email"          value={formik.values.email}          onChangeText={formik.handleChange("email")}          onBlur={formik.handleBlur("email")}          keyboardType="email-address"          autoCapitalize="none"        /><TextInput          style={styles.input}          placeholder="Password"          value={formik.values.password}          onChangeText={formik.handleChange("password")}          onBlur={formik.handleBlur("password")}          secureTextEntry        /><TouchableOpacity style={styles.button} onPress={formik.handleSubmit}>          {isLoggingIn ? (<ActivityIndicator size="small" color="white" />          ) : (<Text style={styles.buttonText}>Login</Text>          )}</TouchableOpacity><View style={styles.orContainer}><View style={styles.orLine} /><Text style={styles.orText}>OR</Text><View style={styles.orLine} /></View><TouchableOpacity          style={styles.signupButton}          onPress={() => navigation.navigate("RegistrationScreen")}><Text style={styles.signupButtonText}>Sign Up</Text></TouchableOpacity></KeyboardAvoidingView></ImageBackground>  );};const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: "center",    alignItems: "center",    paddingHorizontal: 20,  },  input: {    width: "100%",    height: "8%",    borderWidth: 1,    borderColor: "gray",    paddingHorizontal: 10,    backgroundColor: "white",    borderRadius: 15,    marginBottom: 10,  },  button: {    backgroundColor: "#2980B9",    paddingVertical: 12,    paddingHorizontal: 25,    borderRadius: 30,  },  buttonText: {    color: "white",    fontSize: 18,    fontWeight: "bold",  },  /*   errorText: {    color: "#ECF0F1",    marginBottom: 5,  }, */  logo: {    width: 270,    height: 170,    marginBottom: 70,  },  orContainer: {    flexDirection: "row",    alignItems: "center",    marginVertical: 10,  },  orLine: {    flex: 1,    height: 3,    backgroundColor: "#2980B9",  },  orText: {    color: "white",    marginHorizontal: 10,    fontSize: 20,    fontWeight: "bold",  },  signupButton: {    backgroundColor: "white",    paddingVertical: 12,    paddingHorizontal: 20,    borderRadius: 30,    marginTop: 10,  },  signupButtonText: {    color: "#2980B9",    fontSize: 18,    fontWeight: "bold",    textAlign: "center",  },  loadingContainer: {    flex: 1,    justifyContent: "center",    alignItems: "center",  },});export default LoginScreen;

Build Gradle Error Could not get unknown property 'compile'

$
0
0

i have react native porject when run android this error showed

Build file 'C:\dev\icnet_final\android\app\build.gradle' line: 213

A problem occurred evaluating project ':app'.

Could not get unknown property 'compile' for configuration container of type org.gradle.api.internal.artifacts.configurations.DefaultConfigurationContainer.

React native splashScreen closing automatically in IOS

$
0
0

react-native-splash-screen hiding automatically In IOS.But it's fine working in android .

I followed this steps : -

1 ) npm i react-native-splash-screen --save2 ) cd ios ,run pod install3 ) Updated AppDelegate.m

#import "RNSplashScreen.h"  // here.... [RNSplashScreen show];  // here....

4 ) CustomizeD MY splash screen via LaunchScreen.storyboard

5 ) APP.JS

import SplashScreen from 'react-native-splash-screen'      componentDidMount() {        setTimeout(async() => {            SplashScreen.hide();        },3000);     }

BUT THE SPLASH SCREEN NOT WAITING 3 SECONDS IN IOS BUT WORKING PERFECTLY IN ANDROIDALSO IF I COMMENTED "SplashScreen.hide();" ALSO S-SCREEN IS HIDING AUTOMATICALLY in IOS.

Android unique splash screen : how to make it fill screen?

$
0
0

I have a unique splash screen, called splash.png and sized 1280x1280, 150dpiI use react-native-bootsplash in my React Native project, but I don't think it really matters.

My question is simple : how can I make my splash screen, in portrait mode, be full height, not less, not more, and keep its aspect ratio so that the picture fills the screen.Like a background-size: cover in css.Or like an easy <Image resizeMode="cover" style={{ height: '100%' }} /> in React Native.

So I have :

android/app/src/main/res/values/styles.xml

<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><!-- Customize your theme here. --><item name="android:textColor">#000000</item></style><!-- BootTheme should inherit from AppTheme --><style name="BootTheme" parent="AppTheme"><!-- set the generated bootsplash.xml drawable as activity background --><item name="android:windowBackground">@drawable/bootsplash</item><item name="android:windowNoTitle">true</item></style></resources>

android/app/src/main/res/drawable/bootsplash.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"><item><!-- your logo, centered horizontally and vertically --><bitmap        android:layout_height="fill_parent"        android:src="@drawable/splash"        android:scaleType="centerInside"        android:gravity="center" /></item></layer-list>

And my splash.png in android/app/src/main/res/drawable/splash.png

I tried a lot of things, a lot of combinations of android:layout_height, android:scaleType and all, and I always end-up with a splash image's height overflowing the screen height.

[EDIT]Here is the splash original image, with the size reduced enough to have a small size for stackoverflow

splash original image

and here is what it give on screen...

stretched screen image

How can I fix the missing bottom part in React Native Modal displaying on Android mobile devices?

$
0
0

In React Native, I have an Image in Modal.

However, when the Modal is first displayed, it encounters an error where the bottom part is missing.

This bug when Modal show in first time

When I try to do close Modal and turn it back on, it works fine again with full screen rendering.

When I close and reopen modal again

I tried using Dimensions (width, height)and flex but not working for my case.

What happened and how can i fix this. Please help me.

  • Node version: 18
  • React Native version: 0.71
  • Devices: Redmi note 8 pro, Samsung Galaxy note 10.

Error error: library "librnscreens.so" not found, js engine: hermes

$
0
0

when I try to run : npm run android i got the following error:

**ERROR  Error: Exception in HostObject::get for prop 'RNSModule': java.lang.UnsatisfiedLinkError: dlopen failed: library "librnscreens.so" not found, js engine: hermes** ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

I change the build.gradle to

project.ext.react = [    entryFile: "index.js",    enableHermes: true,     bundleInDebug: true // clean and rebuild if changing]

reset cache

no successthe App runs fine in iosDoes anyone have an idea ?
I am using Visual Code in Mac with android studio and emulators

How to code in react-native app as it contains typescript files

$
0
0

I have started learning react-native and created a app with expo go it is running fine but I don't know how to process further and to write simple programs in those files and all the files are typescript files they are downloaded inbuilt while I have created the create-native app. I need to start a new react-native can anyone tell the process for that visited youtube but I am getting errors for those commands.I have started learning react-native and created a app with expo go it is running fine but I don't know how to process further and to write simple programs in those files and all the files are typescript files they are downloaded inbuilt while I have created the create-native app. I need to start a new react-native can anyone tell the process for that visited youtube but I am getting errors for those commands

how do I use the local CLI expo package

$
0
0

After running expo-cli start --tunnel [NOTE : UPDRADED EXPO, RAN Set-ExecutionPolicy RemoteSigned,UNINSTALLED n REINSTALLED LATEST VERSION OF EXPO ]Still getting this error :WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.┌───────────────────────────────────────────────────────────────────────────┐│││ The global expo-cli package has been deprecated. ││││ The new Expo CLI is now bundled in your project in the expo package. ││ Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421. ││││ To use the local CLI instead (recommended in SDK 46 and higher), run: ││› npx expo

Develop an app using expo start


Can't remove console.logs from ffmpeg-kit

$
0
0

I need to remove all kind of logs from my android app which uses ffmpeg-kit. I commented out all the Log.xx calls in the java files and they are no longer showing up. However, I still get those:

ffmpeg-kit              usap64                               I  Loading ffmpeg-kit.ffmpeg-kit              usap64                               I  Loaded ffmpeg-kit-video-arm64-v8a-6.0-lts-20230913.ffmpeg-kit              usap64                               D  Async callback block started.

I can see the first two are console.logs in index.js which I commented out. But they still show in the logs. Here's what I tried:

remove node_modules

npm install

comment out all Log.xx calls in java files

comment out all console.logs in index.js

npx expo run:android --variant release (I'm using expo).

I tried clearing the bundler cache with npx expo start --clear

I have proguard enabled in my app to ensure no logs come from the native side

I have babel-plugin-transform-remove-console to ensure no logs come from the JS side.

Despite all the above, those three insist on showing. The changes in index.js are not being reflected in the build. Also, usap64 is not my package. I don't know what that is.

Any help?

Directory 'C:\Program Files\Java\jre-1.8' (Windows Registry) used for java installations does not exist

$
0
0

I am facing the below errors while running the npm run android commandenter image description here

enter image description here

Play Asset Delivery in React Native Android

$
0
0

I have an app it has a lot of audio and image assets, i'm not being able to upload app to Google Play, I want to try to use Play Asset Delivery

I followed this blog (faltutech blog article) but I can't find how to use it in React Native, I just want to separate the audio and images individually and use in React native.

android folder structure is like

also createdassets.ios.ts

export const data = {    image: require('../../../android/g_asset_pack/src/main/assets/images')}

asset.android.ts

export const data = {    image: '../../../android/g_asset_pack/src/main/assets'}

i'm trying to loading image like

<Image source={{ uri: "assets:images/Final_Art.jpeg" }} style={{height:100,width:200,resizeMode:'cover'}}/>

but its not loading it.

I got an error in REACT NATIVE CLI App Installing

$
0
0

AwesomeProject@0.0.1 androidreact-native run-android

info Installing the app...

Configure project :react-native-reanimatedAndroid gradle plugin: 8.2.1Gradle: 8.6

Task :app:generateDebugBuildConfig FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.6/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.8 actionable tasks: 4 executed, 4 up-to-date

info 💡 Tip: Make sure that you have set up your development environment correctly, by running npx react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor

FAILURE: Build failed with an exception.

  • What went wrong:Execution failed for task ':app:generateDebugBuildConfig'.

Cannot access output property 'sourceOutputDir' of task ':app:generateDebugBuildConfig'. Accessing unreadable inputs or outputs is not supported. Declare the task as untracked by using Task.doNotTrackState(). For more information, please refer to https://docs.gradle.org/8.6/userguide/incremental_build.html#sec:disable-state-tracking in the Gradle documentation.java.io.IOException: Cannot snapshot C:\Users\suren\OneDrive\Desktop\BLE FINAL\AwesomeProject\android\app\build\generated\source\buildConfig\debug\com\awesomeproject\BuildConfig.java: not a regular file

  • Try:

Run with --stacktrace option to get the stack trace.Run with --info or --debug option to get more log output.Run with --scan to get full insights.Get more help at https://help.gradle.org.

BUILD FAILED in 7serror Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:generateDebugBuildConfig'. > Cannot access output property 'sourceOutputDir' of task ':app:generateDebugBuildConfig'. Accessing unreadable inputs or outputs is not supported. Declare the task as untracked by using Task.doNotTrackState(). For more information, please refer to https://docs.gradle.org/8.6/userguide/incremental_build.html#sec:disable-state-tracking in the Gradle documentation. > java.io.IOException: Cannot snapshot C:\Users\suren\OneDrive\Desktop\BLE FINAL\AwesomeProject\android\app\build\generated\source\buildConfig\debug\com\awesomeproject\BuildConfig.java: not a regular file * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. BUILD FAILED in 7s.info Run CLI with --verbose flag for more details.

React native bundle size

$
0
0

I am working on my react native project, with new bridgeless architecture, when making a release build the version size is 60mb knowing not that third party libraries

Trying to get a lower bundle size 20 mb and getting 60 mb

Unable to find gradle-8.6-all.zip in React Native

$
0
0

I'm developing a mobile application using React Native, and when I run the react-native run-android command, I encounter the following error:

error Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081Exception in thread "main" java.io.FileNotFoundException: C:\Users\omers\OneDrive\Desktop\react_native\mymobileapp\android\gradle\wrapper\gradle-8.6-all.zip (Sistem belirtilen dosyay� bulam�yor) at java.base/java.io.FileInputStream.open0(Native Method) at java.base/java.io.FileInputStream.open(FileInputStream.java:213) at java.base/java.io.FileInputStream.<init>(FileInputStream.java:152) at java.base/java.io.FileInputStream.<init>(FileInputStream.java:106) at java.base/sun.net.www.protocol.file.FileURLConnection.connect(FileURLConnection.java:84) at java.base/sun.net.www.protocol.file.FileURLConnection.getInputStream(FileURLConnection.java:180) at org.gradle.wrapper.Download.downloadInternal(Download.java:129) at org.gradle.wrapper.Download.download(Download.java:109) at org.gradle.wrapper.Install.forceFetch(Install.java:171) at org.gradle.wrapper.Install.fetchDistribution(Install.java:104) at org.gradle.wrapper.Install.access$400(Install.java:46) at org.gradle.wrapper.Install$1.call(Install.java:81) at org.gradle.wrapper.Install$1.call(Install.java:68) at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:69) at org.gradle.wrapper.Install.createDist(Install.java:68) at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:102) at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:66).

This error indicates that Gradle cannot find the gradle-8.6-all.zip file. However, when I check the file path, I can see that the file exists.

I have updated the distributionUrl in the gradle-wrapper.properties file to gradle-8.6-all.zip.I have checked my internet connection and verified that there are no issues.I have tried running CMD as an administrator, but the issue persists.What can I do to resolve this issue?

Environment:

  • Windows 10
  • React Native
  • Gradle 8.6

Expo App stuck on Splash Screen in Expo SDK 50

$
0
0

My app was working fine only a till only a few days back for some reason the app was getting stuck on the splash screen. This is on both Android and iOS simulators.

I tried updating all my dependancies to the latest versions. I tried reinstalling all packages but that didn't work either. I'm quite confused at this point.

I'm currently running the app in Expo Go.

{"name": "myapp","main": "expo-router/entry","version": "1.0.0","scripts": {"start": "expo start","prebuild": "expo prebuild","doctor": "expo-doctor@latest","android": "expo run:android","ios": "expo run:ios","web": "expo start --web","test": "jest --watchAll"  },"jest": {"preset": "jest-expo"  },"dependencies": {"@expo/vector-icons": "^14.0.0","@gorhom/bottom-sheet": "^4","@react-native-community/datetimepicker": "7.6.1","@react-native-picker/picker": "2.6.1","@react-navigation/native": "^6.0.2","expo": "~50.0.15","expo-av": "^13.10.5","expo-font": "~11.10.3","expo-image-picker": "~14.7.1","expo-linking": "~6.2.2","expo-router": "~3.4.8","expo-splash-screen": "~0.26.4","expo-status-bar": "~1.11.1","expo-system-ui": "~2.9.3","expo-web-browser": "~12.8.2","react": "18.2.0","react-dom": "18.2.0","react-native": "0.73.6","react-native-gesture-handler": "~2.14.0","react-native-reanimated": "~3.6.2","react-native-safe-area-context": "4.8.2","react-native-screens": "~3.29.0","react-native-web": "~0.19.6"  },"devDependencies": {"@babel/core": "^7.20.0","@types/react": "~18.2.45","jest": "^29.2.1","jest-expo": "~50.0.4","react-test-renderer": "18.2.0","typescript": "^5.1.3"  },"private": true}

Authentication issue with Spotify API using Expo, React Native, and expo-auth-session

$
0
0

I'm building a React Native app with Expo that uses the Spotify API for authentication. I'm encountering issues with the authentication flow using expo-auth-session (expo-app-auth is deprecated, & not working on Android). The Redirect URI is set up correctly in the Spotify Developer Dashboard, but the authentication process doesn't seem to work as expected. I've checked the Spotify client ID, the requested scopes, and the Redirect URI in the Expo app, but I'm still facing difficulties when i hit my Pressable button supposed to launch athentication process. Can anyone help troubleshoot this issue and suggest potential solutions? Here's a simplified version of my code:

import { LinearGradient } from "expo-linear-gradient";import { useEffect } from "react";import React from "react";import * as WebBrowser from "expo-web-browser";import { View, StyleSheet, Text, SafeAreaView, Pressable } from "react-native";import { Entypo, MaterialIcons, AntDesign } from "@expo/vector-icons";import { makeRedirectUri, useAuthRequest } from "expo-auth-session";const LoginScreen = () => {  WebBrowser.maybeCompleteAuthSession();  const discovery = {    authorizationEndpoint: "https://accounts.spotify.com/authorize",    tokenEndpoint: "https://accounts.spotify.com/api/token",  };  const [request, response, promptAsync] = useAuthRequest(    {      clientId: "e4aa200f23cc4831adc492dc91cbf6dd", // Replace with your actual Spotify client ID      scopes: ["user-read-email","user-library-read","user-read-recently-played","user-top-read","playlist-read-private","playlist-read-collaborative","playlist-modify-public",      ],      usePKCE: false,      redirectUri: makeRedirectUri({        scheme: "exp",        path: "//192.168.1.15:8081/--/spotify-auth-callback",      }),    },    discovery  );  useEffect(() => {    if (response?.type === "success") {      const { code } = response.params;      // Handle the code as needed    }  }, [response]);  return (<LinearGradient colors={["#040306", "#131624"]} style={{ flex: 1 }}><SafeAreaView><View style={{ height: 80 }} /><Entypo          name="spotify"          size={80}          color="white"          style={{ textAlign: "center" }}        /><Text          style={{            textAlign: "center",            color: "white",            fontSize: 40,            fontWeight: "bold",            marginTop: 40,          }}>          Millions of Songs Free on Spotify!</Text><View style={{ height: 80 }} /><Pressable          onPress={() => {            promptAsync();          }}          style={{            backgroundColor: "#1DB954",            padding: 10,            marginLeft: "auto",            marginRight: "auto",            width: 300,            borderRadius: 25,            alignItems: "center",            justifyContent: "center",            marginVertical: 10,          }}><Text style={{ fontWeight: 500 }}>Sign in with Spotify</Text></Pressable><Pressable          style={{            backgroundColor: "#131624",            padding: 10,            marginLeft: "auto",            marginRight: "auto",            width: 300,            borderRadius: 25,            justifyContent: "center",            flexDirection: "row",            alignItems: "center",            marginVertical: 10,            borderWidth: 0.8,            borderColor: "white",          }}><MaterialIcons name="phone-android" size={24} color="white" /><Text            style={{              color: "white",              fontWeight: 500,              textAlign: "center",              flex: 1,            }}>            Continue with phone number</Text></Pressable><Pressable          style={{            backgroundColor: "#131624",            padding: 10,            marginLeft: "auto",            marginRight: "auto",            width: 300,            borderRadius: 25,            justifyContent: "center",            flexDirection: "row",            alignItems: "center",            marginVertical: 10,            borderWidth: 0.8,            borderColor: "white",          }}><AntDesign name="google" size={24} color="#B10000" /><Text            style={{              color: "white",              fontWeight: 500,              textAlign: "center",              flex: 1,            }}>            Continue with Google</Text></Pressable><Pressable          style={{            backgroundColor: "#131624",            padding: 10,            marginLeft: "auto",            marginRight: "auto",            width: 300,            borderRadius: 25,            justifyContent: "center",            flexDirection: "row",            alignItems: "center",            marginVertical: 10,            borderWidth: 0.8,            borderColor: "white",          }}><AntDesign name="facebook-square" size={24} color="#3A5794" /><Text            style={{              color: "white",              fontWeight: 500,              textAlign: "center",              flex: 1,            }}>            Sign in with Facebook</Text></Pressable></SafeAreaView></LinearGradient>  );};const styles = StyleSheet.create({});export default LoginScreen;

I precise that I set my app on Spotify for Developers with the following clientId: e4aa200f23cc4831adc492dc91cbf6dd. And I also set up some different redirect URIs on the Spotify App Dashboard as: http://localhost:8081/--/spotify-auth-callbackhttp://localhost:8081/oauthredirectexp://192.168.1.15:8081/--/spotify-auth-callbackWhen I launch npx expo start The server is running through Metro waiting on exp://192.168.95.246:8081

When I hit the Pressable button "Sign In With Spotify", I got redirected and I have this issue (photo below). I tried with different redirect URIs but i'm still a bit lost.

Page where I am redirected after pressing the Pressable button

1. Configured the Redirect URI in the Spotify Developer Dashboard to match the one specified in my Expo app using expo-auth-session.2.Verified that the Spotify client ID in my Expo app matches the one from the Spotify Developer Dashboard.3.Checked and updated the requested scopes in the config object for authentication.4.Ensured that the Redirect URI in the config object aligns with the one in the Spotify Developer Dashboard.

Despite these efforts, the authentication process using expo-auth-session does not seem to work as expected. The expected behavior is a successful authentication that redirects the user to the specified Redirect URI with an access token. However, I'm not seeing the expected results, and the authentication process may be encountering issues.

Any insights or suggestions on how to troubleshoot and resolve this issue would be greatly appreciated. Additionally, if there are any common pitfalls or best practices for using Expo, React Native, and expo-auth-session with Spotify API authentication, please advise.

React Native - FAILURE: Build failed with an exception

$
0
0

I keep getting the following error when attempting to build my react native application. I've attempted manually setting various versions of the Android Gradle Plugin Version and compatible Gradle Versions to no avail. However, that simply changes the gradle version in the error. The project does seem to build when I attempt to reload the project pressing 'r'.

FAILURE: Build failed with an exception.* What went wrong:A problem occurred configuring root project 'TestDeleteMe'.> Could not determine the dependencies of null.> Could not resolve all task dependencies for configuration ':classpath'.> Could not resolve com.android.tools.build:gradle:8.4.0.        Required by:            project :> No matching variant of com.android.tools.build:gradle:8.4.0 was found. The consumer was configured to find a library for use during runtime, compatible with Java 8, packaged as a jar, and its dependencies declared externally, as well as attribute 'org.gradle.plugin.api-version' with value '8.6' but:            - Variant 'apiElements' capability com.android.tools.build:gradle:8.4.0 declares a library, packaged as a jar, and its dependencies declared externally:                - Incompatible because this component declares a component for use during compile-time, compatible with Java 11 and the consumer needed a component for use during runtime, compatible with Java 8                - Other compatible attribute:                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')            - Variant 'javadocElements' capability com.android.tools.build:gradle:8.4.0 declares a component for use during runtime, and its dependencies declared externally:                - Incompatible because this component declares documentation and the consumer needed a library                - Other compatible attributes:                    - Doesn't say anything about its target Java version (required compatibility with Java 8)                    - Doesn't say anything about its elements (required them packaged as a jar)                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')            - Variant 'runtimeElements' capability com.android.tools.build:gradle:8.4.0 declares a library for use during runtime, packaged as a jar, and its dependencies declared externally:                - Incompatible because this component declares a component, compatible with Java 11 and the consumer needed a component, compatible with Java 8                - Other compatible attribute:                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')            - Variant 'sourcesElements' capability com.android.tools.build:gradle:8.4.0 declares a component for use during runtime, and its dependencies declared externally:                - Incompatible because this component declares documentation and the consumer needed a library                - Other compatible attributes:                    - Doesn't say anything about its target Java version (required compatibility with Java 8)                    - Doesn't say anything about its elements (required them packaged as a jar)                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')> Could not resolve com.facebook.react:react-native-gradle-plugin.        Required by:            project :> No matching variant of project :gradle-plugin was found. The consumer was configured to find a library for use during runtime, compatible with Java 8, packaged as a jar, and its dependencies declared externally, as well as attribute 'org.gradle.plugin.api-version' with value '8.6' but:            - Variant 'apiElements' capability com.facebook.react:react-native-gradle-plugin:unspecified declares a library, packaged as a jar, and its dependencies declared externally:                - Incompatible because this component declares a component for use during compile-time, compatible with Java 11 and the consumer needed a component for use during runtime, compatible with Java 8                - Other compatible attribute:                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')            - Variant 'mainSourceElements' capability com.facebook.react:react-native-gradle-plugin:unspecified declares a component, and its dependencies declared externally:                - Incompatible because this component declares a component of category 'verification' and the consumer needed a library                - Other compatible attributes:                    - Doesn't say anything about its target Java version (required compatibility with Java 8)                    - Doesn't say anything about its elements (required them packaged as a jar)                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')                    - Doesn't say anything about its usage (required runtime)            - Variant 'runtimeElements' capability com.facebook.react:react-native-gradle-plugin:unspecified declares a library for use during runtime, packaged as a jar, and its dependencies declared externally:                - Incompatible because this component declares a component, compatible with Java 11 and the consumer needed a component, compatible with Java 8                - Other compatible attribute:                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')            - Variant 'testResultsElementsForTest' capability com.facebook.react:react-native-gradle-plugin:unspecified:                - Incompatible because this component declares a component of category 'verification' and the consumer needed a library                - Other compatible attributes:                    - Doesn't say anything about how its dependencies are found (required its dependencies declared externally)                    - Doesn't say anything about its target Java version (required compatibility with Java 8)                    - Doesn't say anything about its elements (required them packaged as a jar)                    - Doesn't say anything about org.gradle.plugin.api-version (required '8.6')                    - Doesn't say anything about its usage (required runtime)> Could not find org.jetbrains.kotlin:kotlin-gradle-plugin:.        Required by:            project :

Running npx react-native doctor I get the following:

Common✓ Node.js - Required to execute JavaScript code✓ npm - Required to install NPM dependencies✓ Metro - Required for bundling the JavaScript codeAndroid✓ Adb - Required to verify if the android device is attached correctly✖ JDK - Required to compile Java code    - Version found: N/A    - Version supported: >= 17 <= 20✓ Android Studio - Required for building and installing your app on Android✓ ANDROID_HOME - Environment variable that points to your Android SDK installation✓ Gradlew - Build tool required for Android builds✓ Android SDK - Required for building and installing your app on Android

I believe I have JDK 17 linked correctly.

enter image description here

I'm not sure where the issue is.

React Native app closes on android back button or swipe left [Android 13 devices only]

$
0
0

I am using react native 0.73.0, react-navigation/native and native-stack 6.1.10 and 6.9.18,

when the android back button is pressed or swipe gesture to go back, rather than going to the previous screen in the stack the app closes

This issue does not happen on android devices with android 11 or below.

Initially I did not provide any default options for stack navigation and just to try out things, I have tried giving gesture gestureEnabled as true and also false as default screen options.

I will try to fix the issue and will be commenting the solution if it gets fixed, but if anyone has faced the issue or has a potential solution to the problem, please help....

Could not get BatchedBridge, make sure your bundle is packaged correctly

$
0
0

i am having problem with react-native in Android (Could not get BatchedBridge, make sure your bundle is packaged correctly )[![enter image description here][1]][1]

i tried everything : update npm , react-native ,react and all dependencies in package.json to last versions , i removed node_modules and reinstall it again , clear cache ... atc

error log

 04-25 03:35:49.874 11688-11814/com.test.store E/AndroidRuntime: FATAL EXCEPTION: mqt_js                                                            Process: com.test.store, PID: 11688                                                            java.lang.RuntimeException: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly                                                                at com.facebook.react.bridge.DefaultNativeModuleCallExceptionHandler.handleException(DefaultNativeModuleCallExceptionHandler.java:24)                                                                at com.facebook.react.devsupport.DisabledDevSupportManager.handleException(DisabledDevSupportManager.java:161)                                                                at com.facebook.react.cxxbridge.CatalystInstanceImpl.onNativeException(CatalystInstanceImpl.java:465)                                                                at com.facebook.react.cxxbridge.CatalystInstanceImpl.access$400(CatalystInstanceImpl.java:51)                                                                at com.facebook.react.cxxbridge.CatalystInstanceImpl$NativeExceptionHandler.handleException(CatalystInstanceImpl.java:481)                                                                at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:33)                                                                at android.os.Looper.loop(Looper.java:154)                                                                at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)                                                                at java.lang.Thread.run(Thread.java:761)                                                             Caused by: com.facebook.react.devsupport.JSException: Could not get BatchedBridge, make sure your bundle is packaged correctly                                                                at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)                                                                at android.os.Handler.handleCallback(Handler.java:751)                                                                at android.os.Handler.dispatchMessage(Handler.java:95)                                                                at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)                                                                at android.os.Looper.loop(Looper.java:154)                                                                 at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)                                                                 at java.lang.Thread.run(Thread.java:761)                                                              Caused by: com.facebook.jni.CppException: Could not get BatchedBridge, make sure your bundle is packaged correctly                                                                at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)                                                                 at android.os.Handler.handleCallback(Handler.java:751)                                                                 at android.os.Handler.dispatchMessage(Handler.java:95)                                                                 at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)                                                                 at android.os.Looper.loop(Looper.java:154)                                                                 at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)                                                                 at java.lang.Thread.run(Thread.java:761) 

Unable to open Chrome Debugger for React Native App in because of flipper waring Attempting to debug JS in Flipper (deprecated)

$
0
0

🐛 Bug Report

  • When attempting to open the new react native app default app and
    trying to debug in Chrome debugger, users encounter an error messagestating in terminal: "Attempting to debug JS in Flipper (deprecated).

This requires Flipper to be installed on your system to handle the 'flipper://' URL scheme." This prevents users from efficiently debugging their React Native apps using Chrome Debugger through Flipper.

To ReproduceSure, here are the steps you provided converted into a numbered list:

Open a new React Native application in development mode. (CLI)

  1. Start the application and ensure it's running on a device or simulator.
  2. try to open debugger (CLT+M) in Android simulator to open Chrome debugger browser.
  3. after getting warring Attempting to debug JS in Flipper (deprecated). This requires Flipper to be installed on your system
  4. to handle the 'flipper://' URL scheme.**
  5. Unable to Navigate to the Chrome Debugger tool.
  6. Unable Attempt to connect to the running React Native app for debugging.EnvironmentReact Native Latest version 0.73 (CLI)

issue

if anyone also encounter this same issue so how they resolve it and what the solutions for this issue?

Viewing all 29627 articles
Browse latest View live


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