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

Best way to share an entire page (UI and logic) between react native repos?

$
0
0

I am working on two react-native repos at the moment, and they both share an entire navigation section, say blog.Things I need to consider:

  1. Both the apps will have almost the exact page/screen, so it would be beneficial to pull it out and share it across apps. Most of the changes to the page components would be required on both the apps, so this would reduce duplication and maintain consistency.
  2. If I consider the entire screen as a complex component and add it to the component library (both UI and logic), this would solve quite a few headaches.
  3. However, there is a chance of tiny changes on the screen that would be specific to a single app, and not show them on the other app.
  4. This might mean I would end up exposing props on this gigantic component and then letting it seep onto the child components. This could get messy.
  5. This also means I would then be dealing with a gigantic potentially inflexible component.

Considering all the pros and cons, I am not quite sure if this would be the right way to proceed. Is there a better way of tackling this problem? I could just have the same screen duplicated on both the apps, but this causes the headache of updating both the apps resulting in multiple app store releases.

Any suggestions would be really helpful. Thank you.


Bluetooth permission not working in android 11 in react native

$
0
0

My build tool version - 30.0.2android sdk version 7.0.4react native version - 68.0

Bluetooth permission is woring on android 12 but its not working on 11 or older deviced.permission popup not apprears.

React Native: Reset all animation in reanimated2 when click continuously

$
0
0

I have a toast that uses reanimated2 that uses animated: delay, time.... to show the toast with a certain time. I had the problem that when clicking consecutively at the same time, the content of the new toast was overwritten, so the animations remained the same leading to the new toast rendering time not guaranteed. How can I keep the animation running properly even with constant clicks.

Android refusing to disable dark mode

$
0
0

I have a project with two apps written in React Native. Since I do not currently support a dark theme, users with dark-mode enabled on their devices get bad colors in my app. Therefore I want to disable the dark-mode in my app, until the time I have support for it.

In my first application, I have successfully disabled dark mode. But in my second app, I did the exact same thing, but still dark mode affects my colors. This is how my styles.xml looks like, and I also do not have any styles-night.xml or anything like that.

<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"><item name="android:textColor">#000000</item><item name="android:forceDarkAllowed">false</item></style><style name="AppTheme.Launcher"><item name="android:windowBackground">@drawable/launch</item><item name="android:forceDarkAllowed">false</item></style></resources>

This is my AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    package="com.myappname"><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.CAMERA"/><uses-feature android:name="android.hardware.camera" android:required="false" /><uses-feature android:name="android.hardware.camera.front" android:required="false" /><application      android:name=".MainApplication"      android:label="@string/app_name"      android:icon="@mipmap/ic_launcher"      android:usesCleartextTraffic="true"      android:roundIcon="@mipmap/ic_launcher_round"      android:allowBackup="false"      android:forceDarkAllowed="false"      android:theme="@style/AppTheme"><meta-data      android:name="com.google.android.geo.API_KEY"      android:value="secretkey"/><activity        android:name=".MainActivity"        android:exported="true"        android:label="@string/app_name"        android:theme="@style/AppTheme.Launcher"        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"        android:launchMode="singleTask"        android:forceDarkAllowed="false"        android:screenOrientation="portrait"        android:windowSoftInputMode="adjustPan"          tools:targetApi="q"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity></application></manifest>

I have cleaned the build, and rebuilt it again, but still to no effect. Am I missing something? I know there is an option to disable the dark mode in the onCreate function, but that will just recreate the activity and thus slow down the app startup, which I do not want.

React Native: Unable to download JS bundle from the Dev Server

$
0
0

I am trying to run basic AwesomeProject app that react native have by default, on Windows 7 machine through Genymotion. The Virtual Devices that i have tried is Nexus 7 4.2.2 and Nexus 6 5.1.0.

I am using Nodejs (4.3.0)

I followed below steps to overcome JS bundle issue, but still no success:

  • started Virtual device in Genymotion
  • react-native run-android //deployed the app on virtual device
    • then red screen appears with an error message
  • react-native start //started the server
  • Updated Debug server host for device with my machine IP-address:8081

    • Visited back to app screen and clicked Reload JS, but no success
  • I have also tried re-installing the watchman, as many people on related post suggested to do so, but still no success.

Moreover, I have seen another solution on React.js official docs, i.e executing this command "adb reverse tcp:8081 tcp:8081" and then starting the server and updating the IP-address and port respectively. But this solution is useful if i test the app on my personal device rather than emulator.

Any suggestion or alternate solution is really appreciated.

Thanks.

Execution failed for task ':app:mergeDebugNativeLibs'. in react native

$
0
0

I installed react-native-pdf and now when I run "npx react-native run-android", it fails with the following:

* What went wrong:Execution failed for task ':app:mergeDebugNativeLibs'.> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade> More than one file was found with OS independent path 'lib/x86/libc++_shared.so'

Can anyone help me use the package react-native-pdf?

ive

ReferenceError: Can't find variable: Intl when try react-calendar

$
0
0

I try to add a calendar to react mobile app using react-cli. I installed by yarn add react-calendar and launched the app. Then app stops and this error comes:

ERROR  ReferenceError: Can't find variable: IntlThis error is located at:    in Day (created by TileGroup)    in div (created by Flex)    in Flex (created by TileGroup)    in TileGroup (created by Days)    in Days (created by MonthView)    in div (created by MonthView)    in div (created by MonthView)    in div (created by MonthView)    in MonthView (created by Calendar)    in div (created by Calendar)    in div (created by Calendar)    in Calendar (at Forecast.js:58)    in RCTView (at View.js:32)    in View (at Forecast.js:54)    in Forecast (at App.js:15)    in RCTView (at View.js:32)    in View (at App.js:13)    in App (at renderApplication.js:50)    in RCTView (at View.js:32)    in View (at AppContainer.js:92)    in RCTView (at View.js:32)    in View (at AppContainer.js:119)    in AppContainer (at renderApplication.js:43)    in weatherappmobil(RootComponent) (at renderApplication.js:60)

Package.json dependencies are as follows:

"dependencies": {"axios": "^0.27.2","react": "17.0.2","react-calendar": "^3.7.0","react-native": "0.68.2"  },"devDependencies": {"@babel/core": "^7.18.6","@babel/runtime": "^7.18.6","@react-native-community/eslint-config": "^3.0.3","babel-jest": "^28.1.1","eslint": "^8.18.0","jest": "^28.1.1","metro-react-native-babel-preset": "^0.71.2","react-test-renderer": "17.0.2"  }

Any help is appreciated.

Problem to identify when a WebView Downloads a file

$
0
0

I have been faced a problem in React Native (environment android) to identify when a WebView downloads a file.

The current version of WebView is "react-native-webview": "^11.15.0"

The WebView component charges an url, this url redirects to some web sites and finally downloads a pdf file.

<WebView   onNavigationStateChange={handleWebViewNavigationStateChange}   source={{uri: my_url_link}}   style={styles.webviewStyles}/>

And I have a function that triggers when the url link changes, so my question is how can i handle the download event

const handleWebViewNavigationStateChange = (newNavState: any) => {  // url from the webview state  const {url} = newNavState;  // Handler PDFView  if (url.includes('.pdf')) {    console.log('Its a PDF');  }};

I have been tried with onFileDownload WebView method but only works for IOS platforms. So i want to tried with some native solution, any idea of how can I could handle the download event?


EAS building got Strange

$
0
0

I build an apk using EAS to test my app with my android phone.Strangely, when i used the expo build:android -t apk, my app was a little bit heavier (around 68 Mo) but it's work fine like when i test it on Expo Go App.But, after using eas-cli with this command eas build -p android --profile preview, my apk file was pretty lighter (only 35 Mo), but it's i doesn't work now. It stucks at the main panel.Perhaps i have an misunderstanding of the eas-cli. I'm reading hardly the doc right now but you're welcome if you have much more exp with eas-cli.

My eas.json file

{"cli": {"version": ">= 0.50.0"  },"build": {"preview": {"ios": {"simulator":true      },"android":{"buildApk":true      }    }  }}

Type io.invertase.firebase.BuildConfig is defined multiple times

$
0
0

I am trying to build a react native application in VSCode. I am getting the following error when I try to build the app. I keep getting the following issue while getting the build complete. I tried to change the firebase version and Gradle updates but did not work.

FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:mergeDexRelease'.> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade> com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:      Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes.     Type io.invertase.firebase.BuildConfig is defined multiple times: /path/node_modules/@react-native-firebase/app/android/build/.transforms/7d2ce1f5b074ed872b704906f3d41618/classes/classes.dex, /path/node_modules/react-native-firebase/android/build/.transforms/0b00760c914c9cf3e84f7c87e9135514/classes/classes.dexBUILD FAILED in 3m 50s

`app/build.gradle` looks as follows
apply plugin: "com.android.application"apply plugin: 'com.google.gms.google-services'import com.android.build.OutputFile;// import androidx.core.content.FileProvider;project.ext.react = [    enableHermes: false,  // clean and rebuild if changing]apply from: "../../node_modules/react-native/react.gradle"def jscFlavor = 'org.webkit:android-jsc:+'def enableHermes = project.ext.react.get("enableHermes", false);android {    compileSdkVersion rootProject.ext.compileSdkVersion    compileOptions {        sourceCompatibility JavaVersion.VERSION_1_8        targetCompatibility JavaVersion.VERSION_1_8    }    defaultConfig {        applicationId "com.odotime"        minSdkVersion rootProject.ext.minSdkVersion        targetSdkVersion rootProject.ext.targetSdkVersion        versionCode 40        versionName "1.41"        multiDexEnabled true    }    splits {        abi {            reset()            enable enableSeparateBuildPerCPUArchitecture            universalApk false  // If true, also generate a universal APK            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"        }    }    signingConfigs {        debug {            storeFile file('debug.keystore')            storePassword 'android'            keyAlias 'androiddebugkey'            keyPassword 'android'        }        release {            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {                storeFile file(MYAPP_UPLOAD_STORE_FILE)                storePassword MYAPP_UPLOAD_STORE_PASSWORD                keyAlias MYAPP_UPLOAD_KEY_ALIAS                keyPassword MYAPP_UPLOAD_KEY_PASSWORD            }        }    }    buildTypes {        debug {            signingConfig signingConfigs.debug        }        release {            // Caution! In production, you need to generate your own keystore file.            // see https://reactnative.dev/docs/signed-apk-android.            signingConfig signingConfigs.debug            minifyEnabled enableProguardInReleaseBuilds            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"            signingConfig signingConfigs.release        }    }    // applicationVariants are e.g. debug, release    applicationVariants.all { variant ->        variant.outputs.each { output ->            // For each separate APK per architecture, set a unique version code as described here:            // https://developer.android.com/studio/build/configure-apk-splits.html            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]            def abi = output.getFilter(OutputFile.ABI)            if (abi != null) {  // null for the universal-debug, universal-release variants                output.versionCodeOverride =                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode            }        }    }}dependencies {    implementation fileTree(dir: "libs", include: ["*.jar"])    //noinspection GradleDynamicVersion    implementation "com.facebook.react:react-native:+"  // From node_modules    // Import the Firebase BoM    implementation platform('com.google.firebase:firebase-bom:28.0.1')     compile project(':react-native-sms-retriever')    // Declare the dependency for the Firebase SDK for Google Analytics    implementation 'com.google.firebase:firebase-analytics:18.0.3'    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'    implementation 'com.android.support:multidex:1.0.3'    implementation "com.android.support:support-v4:22.1.0"    implementation 'com.android.support:design:27.1.0'    implementation project(':react-native-push-notification')    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {      exclude group:'com.facebook.fbjni'    }    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {        exclude group:'com.facebook.flipper'        exclude group:'com.squareup.okhttp3', module:'okhttp'    }    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {        exclude group:'com.facebook.flipper'    }    if (enableHermes) {        def hermesPath = "../../node_modules/hermes-engine/android/";        debugImplementation files(hermesPath +"hermes-debug.aar")        releaseImplementation files(hermesPath +"hermes-release.aar")    } else {        implementation jscFlavor    }}// Run this once to be able to run the application with BUCK// puts all compile dependencies into folder libs for BUCK to usetask copyDownloadableDepsToLibs(type: Copy) {    from configurations.compile    into 'libs'}apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

package.json as follows

"dependencies": {"@capacitor/android": "^3.6.0","@capacitor/core": "^3.6.0","@react-native-community/art": "^1.2.0","@react-native-community/async-storage": "^1.12.0","@react-native-community/masked-view": "^0.1.10","@react-native-community/netinfo": "^5.9.6","@react-native-community/push-notification-ios": "^1.8.0","@react-native-firebase/app": "^12.1.0","@react-native-firebase/messaging": "^12.1.0","@react-navigation/bottom-tabs": "^5.8.0","@react-navigation/material-bottom-tabs": "^5.2.16","@react-navigation/native": "^5.7.3","@react-navigation/stack": "^5.9.0","amazon-cognito-identity-js": "^4.3.3","aws-amplify": "^3.0.23","axios": "^0.20.0","cordova-plugin-androidx-adapter": "^1.1.3","i18n-js": "^3.7.1","jetifier": "^2.0.0","lodash.memoize": "^4.1.2","moment": "^2.29.1","moment-range": "^4.0.2","moment-timezone": "^0.5.33","react": "16.13.1","react-devtools": "^4.8.2","react-native": "0.63.2","react-native-calendars": "^1.343.0","react-native-contacts": "^6.0.3","react-native-country-picker-modal": "^2.0.0","react-native-date-picker": "^3.2.3","react-native-drop-shadow": "^0.0.2","react-native-dropdown-picker": "^3.7.1","react-native-email-link": "^1.11.3","react-native-firebase": "^5.6.0","react-native-gesture-handler": "^1.7.0","react-native-hyperlinked-text": "^1.0.2","react-native-image-picker": "^2.3.4","react-native-loading-spinner-overlay": "^1.1.0","react-native-localize": "^2.0.1","react-native-paper": "^4.1.0","react-native-pie": "^1.1.2","react-native-push-notification": "^7.3.1","react-native-raw-bottom-sheet": "^2.2.0","react-native-reanimated": "^1.13.0","react-native-safe-area-context": "^3.1.6","react-native-screens": "^2.10.1","react-native-sectioned-multi-select": "^0.8.1","react-native-simple-radio-button": "^2.7.4","react-native-simple-toast": "^1.1.2","react-native-sms-retriever": "^1.1.1","react-native-svg-transformer": "^0.14.3","react-native-switch-selector": "^2.0.6","react-native-vector-icons": "^7.1.0","react-redux": "^7.2.1","redux": "^4.0.5","redux-form": "^8.3.6","redux-persist": "^6.0.0","redux-persist-transform-filter": "0.0.20","redux-saga": "^1.1.3","reselect": "^4.0.0","save": "^2.4.0","toggle-switch-react-native": "^2.3.0"  },"devDependencies": {"@babel/core": "^7.8.4","@babel/runtime": "^7.8.4","@capacitor/cli": "^3.6.0","@react-native-community/eslint-config": "^1.1.0","babel-jest": "^25.1.0","eslint": "^6.8.0","jest": "^25.1.0","metro-react-native-babel-preset": "^0.59.0","react-test-renderer": "16.13.1","remote-redux-devtools": "^0.5.16"  },

Can someone help me build a react-native app for iOS in Android Studio? [closed]

$
0
0

I have an app created with React Native that compiles and builds in Xcode perfectly. Now, I'd like to have it work for Android devices as well, but I'm having a hard time and many errors in Android Studio, probably because it is the first time I do this. Can someone help me?

Thanks a lot in advance.

Unity React Native - Android Build - Failed to initialize

$
0
0

I build an Android library from Unity when trying to integrate with React Native app, throwing an error while launching UnityPlayer from React native.

It says your hardware doesn'tsupport this application.

Unity Version : 2021.3.0f1

Reference Used for Build Library :

https://github.com/asmadsen/react-native-unity-view/blob/master/template/Build.cs

Reference Screenshot :enter image description here

Here is my build.gradle

    apply plugin: 'com.android.library'dependencies {    implementation ':unity-classes'}android {    compileSdkVersion 31    buildToolsVersion '30.0.2'    compileOptions {        sourceCompatibility JavaVersion.VERSION_1_8        targetCompatibility JavaVersion.VERSION_1_8    }    defaultConfig {        minSdkVersion 22        targetSdkVersion 31        ndk {            abiFilters 'armeabi-v7a', 'arm64-v8a'        }        versionCode 1        versionName '0.1'        consumerProguardFiles 'proguard-unity.txt'    }    lintOptions {        abortOnError false    }    aaptOptions {        noCompress = ['.unity3d', '.ress', '.resource', '.obb', '.unityexp'] + unityStreamingAssets.tokenize(', ')        ignoreAssetsPattern = "!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~"    }    packagingOptions {        doNotStrip '*/armeabi-v7a/*.so'        doNotStrip '*/arm64-v8a/*.so'    }}def getSdkDir() {    Properties local = new Properties()    local.load(new FileInputStream("${rootDir}/local.properties"))    return local.getProperty('sdk.dir')}def BuildIl2Cpp(String workingDir, String configuration, String architecture, String abi, String[] staticLibraries) {    def commandLineArgs = []    commandLineArgs.add("--compile-cpp")    commandLineArgs.add("--platform=Android")    commandLineArgs.add("--architecture=" + architecture)    commandLineArgs.add("--outputpath=" + workingDir +"/src/main/jniLibs/" + abi +"/libil2cpp.so")    commandLineArgs.add("--libil2cpp-static")    commandLineArgs.add("--baselib-directory=" + workingDir +"/src/main/jniStaticLibs/" + abi)    commandLineArgs.add("--configuration=" + configuration)    commandLineArgs.add("--dotnetprofile=unityaot-linux")    commandLineArgs.add("--enable-debugger")    commandLineArgs.add("--profiler-report")    commandLineArgs.add("--profiler-output-file=" + workingDir +"/build/il2cpp_"+ abi +"_" + configuration +"/il2cpp_conv.traceevents")    commandLineArgs.add("--print-command-line")    commandLineArgs.add("--generatedcppdir=" + workingDir +"/src/main/Il2CppOutputProject/Source/il2cppOutput")    commandLineArgs.add("--cachedirectory=" + workingDir +"/build/il2cpp_"+ abi +"_" + configuration +"/il2cpp_cache")    commandLineArgs.add("--tool-chain-path=" + android.ndkDirectory)    staticLibraries.eachWithIndex {fileName, i->        commandLineArgs.add("--additional-libraries=" + workingDir +"/src/main/jniStaticLibs/" + abi +"/" + fileName)    }    def executableExtension = ""    if (org.gradle.internal.os.OperatingSystem.current().isWindows())        executableExtension = ".exe"    exec {        executable workingDir +"/src/main/Il2CppOutputProject/IL2CPP/build/deploy/il2cpp" + executableExtension        args commandLineArgs        environment "ANDROID_SDK_ROOT", getSdkDir()    }    delete workingDir +"/src/main/jniLibs/" + abi +"/libil2cpp.sym.so"    ant.move(file: workingDir +"/src/main/jniLibs/" + abi +"/libil2cpp.dbg.so", tofile: workingDir +"/symbols/" + abi +"/libil2cpp.so")}android {    task BuildIl2CppTask {        doLast {              BuildIl2Cpp(projectDir.toString().replaceAll('\\\\', '/'), 'Release', 'armv7', 'armeabi-v7a', [  ] as String[]);              BuildIl2Cpp(projectDir.toString().replaceAll('\\\\', '/'), 'Release', 'arm64', 'arm64-v8a', [  ] as String[]);        }    }    afterEvaluate {        if (project(':unityLibrary').tasks.findByName('mergeDebugJniLibFolders'))            project(':unityLibrary').mergeDebugJniLibFolders.dependsOn BuildIl2CppTask        if (project(':unityLibrary').tasks.findByName('mergeReleaseJniLibFolders'))            project(':unityLibrary').mergeReleaseJniLibFolders.dependsOn BuildIl2CppTask    }    sourceSets {        main {            jni.srcDirs = ["src/main/Il2CppOutputProject"]        }    }}

I wrote app in react native but Async Storage doesn't seem to be working. When I reopen the app on phone it doesn't remember what I previously entered

$
0
0

So I wrote a to-do list app, following a youtube tutorial, but it does not work as intended, it does not save the changes made so when you open the app again it starts as nothing happened. I installed async storage with the command npm i @react-native-async-storage/async-storage and linked it with the command react-native link. Maybe I'm linking it wrong or idk I'm completely new to this.Here's the App.js:

import React from 'react';import AsyncStorage from '@react-native-async-storage/async-storage';import {SafeAreaView, StyleSheet, View, Text, TextInput, TouchableOpacity, FlatList, Alert} from 'react-native';const App = () => {  const [textInput, setTextInput] = React.useState('');  const [todos, setTodos] = React.useState([]);  React.useEffect(() =>{    getTodosFromUserDevice();  }, [])  React.useEffect(() => {    saveTodoTouserDevice(todos);  }, [todos]);  const ListItem = ({todo}) => {    return <View style={styles.listItem}><View style={{flex: 1}}><Text style={{          fontWeight: 'bold',           fontSize: 15, color: '#1f145c',           textDecorationLine: todo?.completed ? 'line-through' : 'none'          }}>            {todo?.task}</Text></View>      {        !todo?.completed && (<TouchableOpacity style={[styles.actionIcon]} onPress={()=>markTodoComplete(todo?.id)}><Text size={20} color={'#fff'}>Done</Text></TouchableOpacity>        )}<TouchableOpacity style={[styles.actionIco,{backgroundColor: '#f00'}]}onPress={()=>deleteTodo(todo?.id)}><Text size={20} color={'#f00'}>Delete</Text></TouchableOpacity></View>  };  const saveTodoTouserDevice = async todos => {    try {      const stringifyTodos = JSON.stringify(todos);      await AsyncStorage.setItem('@todos', stringifyTodos);    } catch (e) {      console.log(e);      // saving error    }  };  const getTodosFromUserDevice = async () => {    try {      const todos = await AsyncStorage.getItem('todos');      if(todos != null){        setTodos(JSON.parse(todos));      }    } catch(error) {      console.log(error);    }  };  const addTodo = () => {    if(textInput == ""){      Alert.alert("Error", "Pleace input task")    } else{      const newTodo ={        id: Math.random(),        task: textInput,        completed: false,      };      setTodos([...todos, newTodo]);      setTextInput('');    }  };  const markTodoComplete = (todoId) => {  const newTodos = todos.map((item)=>{    if(item.id== todoId){      return {...item, completed:true}    }    return item;  });  setTodos(newTodos);  };  const deleteTodo = (todoId) =>{    const newTodos = todos.filter(item => item.id != todoId);    setTodos(newTodos);  };  const clearTodos = () => {    Alert.alert('Confirm', 'Clear todos?', [      {        text: 'Yes',        onPress:() => setTodos([]),      },      {text:'No'},    ])  }  return <SafeAreaView style={styles.safearea}><View style={styles.header}><Text style={styles.title}>ToDo List</Text><Text size={25} color="#f00" onPress={clearTodos}>Delete</Text></View><FlatList     showsHorizontalScrollIndicator={false}      contentContainerStyle={{padding:20, paddingBottom: 100}}      data={todos}       renderItem={({item}) => <ListItem todo={item} />}  /><View style={styles.footer}><View style={styles.inputContainer}><TextInput placeholder="Add Task" value={textInput} onChangeText={(text)=>setTextInput(text)}/></View><TouchableOpacity onPress={addTodo}><View style={styles.iconContainer}><Text color={'#fff'} size={30}>Add</Text></View></TouchableOpacity></View></SafeAreaView>};const styles = StyleSheet.create({  actionIcon:{    height: 25,    width: 25,    backgroundColor: '#008000',    justifyContent: 'center',    alignItems: 'center',    marginLeft: 5,    borderRadius: 3,  },  listItem:{    padding: 20,    backgroundColor: '#fff',    flexDirection: 'row',    elevation: 20,    borderRadius: 7,    marginVertical: 10,  },  safearea: {    flex: 1,    backgroundColor: '#fff',  },  header:{    padding: 20,    flexDirection: 'row',    alignItems: 'center',    justifyContent: 'space-between',  },  title:{    fontWeight: 'bold',    fontSize: 20,    color: '#1f145c',  },  footer:{    position: 'absolute',    bottom: 0,    backgroundColor: '#fff',    width: '100%',    flexDirection: 'row',    alignItems: 'center',    paddingHorizontal: 20,  },  inputContainer:{    backgroundColor: '#fff',    elevation: 40,    flex: 1,    height: 50,    marginVertical: 20,    marginRight: 20,    borderRadius: 30,    paddingHorizontal: 20,  },  iconContainer:{    height: 50,    width: 50,    backgroundColor: '#1f145c',    borderRadius: 25,    elevation: 40,    justifyContent: 'center',    alignItems: 'center',  },})export default App;

And here's the Google Drive link to the whole project folder GDrive link

I built a todo list in React Native and compiled it to apk, but when I open the app on my phone it just shows "Welcome to React Native"

$
0
0

And there's no way to skip it. It says to shake the device to open the debug menu, but that doesn't work. Here's a screenshot from the app:image

I have been searching the solution for hours now, but no luck. What can I do now?Thanks in advance!

call to a react-native native module blocking the UI?

$
0
0

in my react native android module one method is hangs my screen touch and also back button. not put thread or any back ground task on my android side native module. calling that method on react js side all my screen hangs how can we prevent screen hangs on react side. not put any thread and back grounds task on native android side.


How do I use FlavorDimensions

$
0
0

I am creating a dummy app for testing purposes. The Android app crashes everytime I use flavorDimensions. Please help

flavorDimensions "tier"        productFlavor {            dev {                dimension "tier"                 minSdkVersion rootProject.ext.minSdkVersion                 applicationId "com.awesomeproject.dev"                 targetSdkVersion rootProject.ext.targetSdkVersion                 resValue "string", "build_config_package", "com.awesomeproject"                 versionCode 1                 versionName "1.0"            }            live {                dimension "tier"                 minSdkVersion rootProject.ext.minSdkVersion                 applicationId "com.awesomeproject.live"                 targetSdkVersion rootProject.ext.targetSdkVersion                 resValue "string", "build_config_package", "com.awesomeproject"                 versionCode 1                 versionName "1.0"            }        }

when i run npx react-native run-android this error will show > Configure project :react-native-reanimated

$
0
0

Configure project :lottie-react-nativeWARNING:Software Components will not be created automatically for Maven publishing from Android Gradle Plugin 8.0. To opt-in to the future behavior, set the Gradle property android.disableAutomaticComponentCreation=true in the gradle.properties file or use the new publishing DSL.

Configure project :react-native-reanimated


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

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

See https://docs.gradle.org/7.3.3/userguide/command_line_interface.html#sec:command_line_warnings6 actionable tasks: 6 up-to-date

FAILURE: Build failed with an exception.

  • Where:Build file '/Volumes/Os/FinalDrawer/node_modules/react-native-reanimated/android/build.gradle' line: 152

  • What went wrong:A problem occurred evaluating project ':react-native-reanimated'.

Could not get unknown property 'rnMinorVersion' for project ':react-native-reanimated' of type org.gradle.api.Project.

  • 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.

BUILD FAILED in 5s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

  • Where:Build file '/Volumes/Os/FinalDrawer/node_modules/react-native-reanimated/android/build.gradle' line: 152

  • What went wrong:A problem occurred evaluating project ':react-native-reanimated'.

Could not get unknown property 'rnMinorVersion' for project ':react-native-reanimated' of type org.gradle.api.Project.

  • 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.

BUILD FAILED in 5s

at makeError (/Volumes/Os/FinalDrawer/node_modules/execa/index.js:174:9)at /Volumes/Os/FinalDrawer/node_modules/execa/index.js:278:16at processTicksAndRejections (node:internal/process/task_queues:96:5)at async runOnAllDevices (/Volumes/Os/FinalDrawer/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:109:5)at async Command.handleAction (/Volumes/Os/FinalDrawer/node_modules/@react-native-community/cli/build/index.js:192:9)

info Run CLI with --verbose flag for more details.

Tab bar background color did not get changed

$
0
0

I am new in React-Native development. I am using TabNavigator from 'react-navigation' for tab bar in React-Native, everything is working fine excepts tab bar activeBackgroundColor and inactiveBackgroundColor did not get changed in android.Its showing blue color only like the image given below.

enter image description here

Code i am using is:

import React, { Component } from 'react';import { TabNavigator } from 'react-navigation';import { PixelRatio } from 'react-native';import { ColorScheme } from '../Resources/ColorScheme';import {Fonts} from '../Resources/Fonts';import TAB1 from '../Screens/TAB1'import TAB2 from '../Screens/TAB2' /** */ var FONT_SIZE = 8; if (PixelRatio.get() === 2) {  FONT_SIZE=10 }else if (PixelRatio.get() === 3) {    FONT_SIZE=12  }export default FavoritesScreenTabNavigator=TabNavigator({    TAB1:{screen:TAB1},    TAB2:{screen:TAB2}  },{      tabBarPosition:'top',      swipeEnabled:true,      animationEnabled:true,      tabBarOptions:{          activeTintColor:ColorScheme.tabBarSelectedTintColor,          inactiveTintColor:ColorScheme.tabBarUnSelectedTintColor,          activeBackgroundColor:'white',          inactiveBackgroundColor:'white',          labelStyle:{            fontSize: FONT_SIZE,            fontFamily: Fonts.QuicksandBold,            textAlign:'center'          },          indicatorStyle: {            borderBottomColor:ColorScheme.tabBarSelectedTintColor,            borderBottomWidth: 3,          }      },  })

Any help will be appreciated.

Thanks in advance.

Not able to run ./gradlew assembleRelease command

$
0
0

I am completely new to react native. I was trying to build an apk file out of react native application.

1.I went into android directory by cd android.2.Then I typed ./gradlew assembleRelease command.

It is showing me like this :'.' is not recognised as internal or external command.

Please help me with this

Need clarity of Publishing app to playstore and appstore

$
0
0

Once the mobile application is reviewed by play/App store, How long can we hold the release with out publishing. What will happen if we hold it for long? Documentation is not saying about the same.

Viewing all 29680 articles
Browse latest View live


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