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

how can i reduce expo build ios size, it is around 188 MB,

$
0
0

I have successfully run the expo build: ios command but the resultant IPA file is close to 188MB which is really strange as the app has only a few pages with listViews etc. What may be the reason for such a huge size? The same build size for Android is only about 22MB.


React-Native Module HMRClient is not a registered callable module (calling enable)

$
0
0

I have set my IP and made sure it's right but when I executereact-native run-android

enter image description here

How to push local storage data to the server automatically when device connects to the internet in React Native?

$
0
0

I have recently started building apps using React Native. I would like to know how to push local storage data to the server automatically when the device connects to the internet in React Native?

Command 'react-native log-android' stuck at 'Starting Logkitty'

$
0
0

I'm trying to run a React Native project and after trying to start it, it produces an error which I'm trying to debug, but while trying to debug that error the command gets stuck.

I've tried using 'react-native log-android' but for some reason it gets stuck at 'Starting logkitty'

This is the error that's occuring

Is it possible to listen for specific word in react native?

react native app (created using expo) deep linking not working from outside of the app

$
0
0

React native app (created using expo), deep linking link is working perfectly when opening the link from inside the app but not working when clicked from outside the app.

I am trying to implement a sharing option in my app, for which I want to implement the feature where anyone with the link should be able to open the app and get redirected to the specific page on my app using the queryparams.

react native - Failed to install the app and gradlew.bot

$
0
0

This program shows these error when running the program.I updated gradle to version 6.

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 Unable to install D:\testapp\android\app\build\outputs\apk\debug\app-debug.apk


React Native image web uri not working with real devices ( working in emulator )

$
0
0

I m on my way to create a scroll view for all countries with each one have a flag as an image and a name, my data that I am basing on is relading from an API, after API response I set the countries data in the state object and I call this.setSatet(newstate) to update the scroller view.

so, I am using this code to show up the flag of every country :

 {  this.state.data_countries.map((country, index) => (<View key={country._id} style={styles.item}><Image        source={{          uri: country.countryInfo.flag,        }}        style={{          maxWidth: 40,          maxHeight: 30,          flex: 1,        }}        onError={this.test_error}></Image><Text        style={{          textAlign: "center",          flex: 1,        }}>        {country.country}</Text></View>  ));}

I made sure that the URI given is correct, I had added all the following network security to my android project :

<?xml version="1.0" encoding="utf-8"?><network-security-config><domain-config cleartextTrafficPermitted="true"><!-- THIS FOR THE DOMAIN OF MY IMAGES SOURCE  example : https://disease.sh/assets/img/flags/us.png--><domain includeSubdomains="true">disease.sh</domain><!-- THIS FOR THE DOMAIN OF MY API --><domain includeSubdomains="true">nepalcorona.info</domain></domain-config><base-config cleartextTrafficPermitted="true"><trust-anchors><certificates src="system" /></trust-anchors></base-config></network-security-config>

I tested my application on an emulator and it is working fine, but it is not working on my real device I got image not showing an empty Image View, please who have any idea can help me, please share it. I have many hours looking for a solution but no way, please help.


Navigating from a FlatList Items exists in a Tab, to another Stack Screen

$
0
0

How The App works!

I have an app that shows a list of names and after that shows the meaning of the Name depends on some preference the user choose it from a dropDowns.

So in total there is a Main of 3 Screens!

  1. First: is the UI screen that asks user to choose data,
  2. Second: is the screen that holds a list contains names, I list them using a FlatList (BTW the data retrives from a SqLite -not important-)
  3. Third: is the Screen that shows the name's meaning,

I am navigating from the "Main-Screen" to the "NameList-Screen" then To the "NameMeaning-Screen",

The navigation to the "NameMeaning-Screen" done by pressing on an item from the List.

Till here the app working nicely!

I decided to add a new feature to the app and that to show all the names i have in my DB and show it in a screen that have two Tabs, The first tab shows male's names and the second tab shows the female's names.

I did that step too.

But What am facing now is!

I want to navigate from that tabs when pressing on an item from the flatList, and navigate to the "Third Screen" I mentioned above the name's meaning!

But it gave error that, there is no such screen called "NameMeaing" and then it says " Name screen Its not handled by any navigator", So as much as i understand, when am in the Tabs the program have no access to the stack Navigator and cuz of this it gives that error.

As much as i was able to find on Web, There is examples of navigating from tabs to another stack screens, but in the all the examples, the tabs were the main screen in the applicaiton, but in my case i reach the tabs after pressing a certain button and navigate to another stacked screen.

As a soluation for the problem i thought about creating a secondry stack navigator inside my Tabs.js file that contains the tabs but i couldnt, then i thought i should create a Tab navigator in my App.js adding it to my stack navigator that already exists there and compine them in a navigator container. Maybe this is the soluation but i couldnt complete the code and connect the dots. Any help please?!

This is a video of the app while working (The scenario)https://youtu.be/dBLNF5zMCt0

This is the Error it shows:Error when i try to navigate from a tab screen to another different screen

This is App.js file

    import 'react-native-gesture-handler';import React, {Component} from 'react';import {createStackNavigator} from 'react-navigation-stack';import {createAppContainer} from 'react-navigation';import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';import MainScreen from './MainScreen';import NamesList from './NamesList';import NameMeaning from './NameMeaning';import NameListWithTabsAgirlAboy from './NameListWithTabsAgirlAboy';const App = createStackNavigator(  {    MainScreen: {      screen: MainScreen,      navigationOptions: {        header: null,      },    },    NamesList: {      screen: NamesList,      navigationOptions: {        header: null,      },    },    NameListWithTabsAgirlAboy: {      screen: NameListWithTabsAgirlAboy,      navigationOptions: {        header: null,      },    },    NameMeaning: {      screen: NameMeaning,      navigationOptions: {        header: null,      },    },  },  {    initialRouteName: 'MainScreen',  });export default createAppContainer(App);

This is NameMeaninng.js file

 class NameMeaning extends Component {  constructor(props) {    super(props);  }  render() {    const {navigation} = this.props;    return(<SafeAreaView style= {styles.container}><Text style={styles.title}>معنىاسم {JSON.stringify(navigation.getParam('nameTitle', 'NO-ID'))}</Text><ScrollView style={styles.scrollView}><Text style={styles.text}>          {JSON.stringify(navigation.getParam('explaination', 'NO-ID'))}</Text></ScrollView></SafeAreaView>    );  }}

this is parts of Tabs.js file

This file have three classes in totall. BoysScreen, GirlsScreen and Tabs classes..   class BoysScreen extends React.Component {    constructor(props) {        super(props);        const {navigation} = this.props;      }    render() {        let FlatListNames =  [];        FlatListNames = boysNames();        const {navigation} = this.props;        function Item({ title }, {navigation}) {            return (<View style = {StyleSheet.item}><Text styel = {styles.title}> {title} </Text><Text style ={StyleSheet.explain}>اضغطللشرح</Text></View>            )        }        function boysNames() {            var boysNamesList = [];            db.transaction(tx => {                // boys names              tx.executeSql('SELECT ID, Name, Explanation FROM Names WHERE NameSex=?', ["لـطفلي"], (tx, results) => {                  for (let i = 0; i < results.rows.length; ++i) {                    boysNamesList.push(results.rows.item(i));                  }                });          }); // DB transaction              return boysNamesList;        };        return(<View style= {styles.container}><FlatList                        data={FlatListNames}                        keyExtractor={(item, index) => index.toString()}                        renderItem={({ item }) => <TouchableOpacity                                            onPress = {() => {this.props.navigation.navigate('NameMeaning',{                                                nameTitle : item.Name,                                                  nameId : item.ID,                                                explaination : item.Explanation,                                            });                                        }}><Item title = {item.Name}/></TouchableOpacity>                                    }                    /></View>        );    }}// ends of BoysScreen Class    class Tabs extends React.Component {    constructor(props){        super(props);    }    render() {    const Tab = createMaterialTopTabNavigator();    // I have tried to create a stack here but it gave errors and couldnt solve it    //cont Stack = createStackNavigator();        return(<NavigationContainer><Tab.Navigator><Tab.Screen name ="FemaleNames" component = {GirlsScreen} /> //GirlsScreen is a class<Tab.Screen name = "MaleNames" component = {BoysScreen} /> // BoysScreen is a class</Tab.Navigator>               // I have tried to import NameMeanig class and navigate to it like this, but it gaves errors too.               //<Stack.Screen name="Home" component={NameMeaning} /> </NavigationContainer>        );    }

Thanks in advance, any help of how i can build this algorithm is appricated really..

adb.exe: error: closed when i run the react native app

$
0
0

I'm a new in react native so first thing I made is to install react native by running npm install -g react-native-cliand after running react-native infoI get this

C:\Users\husam\WebstormProjects\calculator>react-native infoinfo Fetching system and libraries information...System:    OS: Windows 10 10.0.18363    CPU: (4) x64 Intel(R) Core(TM) i3-7020U CPU @ 2.30GHz    Memory: 815.06 MB / 3.92 GB  Binaries:    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE    Yarn: 1.22.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD    Watchman: Not Found  SDKs:    Android SDK:      API Levels: 10, 11, 12, 13, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 7, 8, 9      Build Tools: 19.1.0, 28.0.3, 29.0.3      System Images: android-19 | Intel x86 Atom, android-29 | Google Play Intel x86 Atom      Android NDK: Not Found  IDEs:    Android Studio: Version  3.6.0.0 AI-192.7142.36.36.6308749  Languages:    Java: 1.8.0_231    Python: 3.7.6  npmPackages:    @react-native-community/cli: Not Found    react: 16.11.0 => 16.11.0    react-native: 0.62.2 => 0.62.2  npmGlobalPackages:    *react-native*: Not Found

after that I create a new project with webstorm from here[https://www.jetbrains.com/help/webstorm/react-native.html]after that I launch the emulator with 19 API leveland then I run the App.js file and I get this

"C:\Program Files\nodejs\node.exe" C:\Users\husam\AppData\Roaming\npm\node_modules\react-native-cli run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 960 file(s) to forward-jetify. Using 4 workers...info JS server already running.info Installing the app...> Task :app:generatePackageList> Task :app:preBuild> Task :app:preDebugBuild> Task :app:compileDebugAidl NO-SOURCE> Task :app:checkDebugManifest UP-TO-DATE> Task :app:compileDebugRenderscript NO-SOURCE> Task :app:generateDebugBuildConfig UP-TO-DATE> Task :app:javaPreCompileDebug UP-TO-DATE> Task :app:mainApkListPersistenceDebug UP-TO-DATE> Task :app:bundleDebugJsAndAssets SKIPPED> Task :app:generateDebugResValues UP-TO-DATE> Task :app:generateDebugResources UP-TO-DATE> Task :app:mergeDebugResources UP-TO-DATE> Task :app:createDebugCompatibleScreenManifests UP-TO-DATE> Task :app:processDebugManifest UP-TO-DATE> Task :app:processDebugResources UP-TO-DATE> Task :app:compileDebugJavaWithJavac UP-TO-DATE> Task :app:mergeDebugShaders UP-TO-DATE> Task :app:compileDebugShaders UP-TO-DATE> Task :app:generateDebugAssets UP-TO-DATE> Task :app:mergeDebugAssets UP-TO-DATE> Task :app:copyDebugBundledJs SKIPPED> Task :app:processDebugJavaRes NO-SOURCE> Task :app:mergeDebugJavaResource UP-TO-DATE> Task :app:checkDebugDuplicateClasses UP-TO-DATE> Task :app:desugarDebugFileDependencies UP-TO-DATE> Task :app:transformClassesWithDexBuilderForDebug UP-TO-DATE> Task :app:validateSigningDebug UP-TO-DATE> Task :app:signingConfigWriterDebug UP-TO-DATE> Task :app:mergeExtDexDebug UP-TO-DATE> Task :app:mergeDexDebug UP-TO-DATE> Task :app:mergeDebugJniLibFolders UP-TO-DATE> Task :app:mergeDebugNativeLibs UP-TO-DATE> Task :app:stripDebugDebugSymbols UP-TO-DATE> Task :app:packageDebug UP-TO-DATE> Task :app:installDebug10:21:40 V/ddms: execute: running am get-config10:21:45 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -110:21:45 V/ddms: execute: returningInstalling APK 'app-debug.apk' on 'MY_phone(AVD) - 4.4.2' for app:debug10:21:45 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'10:21:45 D/Device: Uploading file onto device 'emulator-5554'10:21:45 D/ddms: Reading file permision of C:\Users\husam\WebstormProjects\calculator\android\app\build\outputs\apk\debug\app-debug.apk as: rwx------10:21:49 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"10:22:25 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -110:22:25 V/ddms: execute: returning10:22:25 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"10:22:26 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -110:22:26 V/ddms: execute: returningInstalled on 1 device.Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.0.1/userguide/command_line_interface.html#sec:command_line_warningsBUILD SUCCESSFUL in 4m 49s27 actionable tasks: 2 executed, 25 up-to-dateinfo Connecting to the development server...adb.exe: error: closedinfo Starting the app on "emulator-5554"...warn Failed to connect to development server using "adb reverse": Command failed: C:\Users\husam\AppData\Local\Android\Sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081WARNING: linker: libdvm.so has text relocations. This is wasting memory and is a security risk. Please fix.Starting: Intent { cmp=com.calculator/.MainActivity }

the error as showing in the log Is about the adb but I can use the adb command to install and get logcat in both the emulator and the real devices without any error

after searching on the internet I tried to run this two commandsadb reconnectadb reverse tcp:8081 tcp:8081 but I get the same error as following

C:\Users\husam\WebstormProjects\calculator>adb reconnectreconnecting 4203605bb24a3200 [device]C:\Users\husam\WebstormProjects\calculator>adb reverse tcp:8081 tcp:8081adb.exe: error: closed

the code that I run is the default one that is created by react nativealso the app is installed successfully on my emulator but when I run it I get an error tells me the app will stopalso I noted when I launch the emulator it's gives me this error

error

could not reach cloud firestore backend with firestore emulator on android emulator

$
0
0

My problem is that I'm unable to call firestore from the client using the firebase firestore emulator on Android emulators. I've tested multiple Android emulators.

The error I'm getting suggests the app is unable to connect to firestore at all claiming there's not internet connection. Here's the full message: "@firebase/firestore:, Firestore (7.8.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]: The operation could not be completedThis typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend."

This confuses me because my app works with the firebase firestore emulator on iOS. It also still works with the firebase cloud functions emulator (Nevermind. It was never working with cloud functions) for android. In case it matters, the app also works fine on iOS and Android when using firestore in production.

I'm creating a React Native app using the Expo managed workflow so I'm using firebase's web SDK. This means I'd have to eject to switch to react-native-firebase.

I've also looked at the docs and I seem to be following the instructions there: https://firebase.google.com/docs/emulator-suite/connect_firestore#web

I also came across this issue and I'm not clear if they're related. https://github.com/firebase/firebase-js-sdk/issues/2923 If they are I'm also not sure how I could fix it while remaining on the expo managed workflow.

Here's my firebase config

firebaseConfig.js

import * as firebase from 'firebase';// Optionally import the services that you want to use//import "firebase/auth";//import "firebase/database";import "firebase/firestore"; // uncommented so I could test locally w/ emulatorimport "firebase/functions";//import "firebase/storage";// ios id   // appId: "1:586841249272:ios:d8b508f7811d7c84e0b20d",// Initialize Firebaseconst firebaseConfig = {  apiKey: "myApikey",  authDomain: "fsp2-a670d.firebaseapp.com",  databaseURL: "https://fsp2-a670d.firebaseio.com",  projectId: "fsp2-a670d",  storageBucket: "fsp2-a670d.appspot.com",  messagingSenderId: "586841249272",  appId: "1:586841249272:android:fa68525699ea5cdde0b20d"};// added .firestore to test firestore locally w/ emulator const db = firebase.initializeApp(firebaseConfig).firestore(); // for debuggingfirebase.firestore.setLogLevel('debug')// Uncomment the below line to use cloud functions with the emulatorfirebase.functions().useFunctionsEmulator('http://localhost:5001')// firebase.firestore().settings({ experimentalForceLongPolling: true });// uncomment this to test firestore locally w/ emulator   db.settings({    host: "localhost:8080",    ssl: false  });

And here's the code in the file where the call to firestore from the client fails. It does

const More = ({navigation}) => {  const [userInfo, setUserInfo] = useState({profilePicture: 'placeholder', userName: ''});  useEffect(() => {    const changeUserInfo = async () => {      const userData = await new Promise(function (resolve, reject) {        // 2 - Copy-paste your code inside this function        firebase.auth().onAuthStateChanged(user => {          resolve(user) // this promise is rejected and I need to write the code to handle rejections        })      })      const db = firebase.firestore();      const uid = userData?.uid;      if (uid) {        const userRef = await db.collection('users').doc(uid);        const user = await userRef.get();        const userFields = user.data();        console.log('userFields is: ', userFields);        const {profilePicture, userName} = userFields;        console.log('profilePicture is: ', profilePicture);        console.log('userName is: ', userName);        setUserInfo(() => {          return {            profilePicture,            userName,          }        });      }    }    changeUserInfo()  }, [userInfo.profilePicture, userInfo.userName]

I'd really appreciate any help!

Gradle build error with Amazon S3 maven repository dependency

$
0
0

I am developing an open source react native library that it's a wrapper for the Salesforce SDK chat. This library uses a Salesforce maven dependency that is hosted on an AWS S3 Bucket.

The problem is that when I try to use this library on a project SomeProject that has support for RN autolinking, I keep receiving these build errors:

Could not find com.salesforce.service:chat-ui:4.1.1.Searched in the following locations:  - file:/Users/user/Library/Android/sdk/extras/m2repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - file:/Users/user/Library/Android/sdk/extras/m2repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jar  - file:/Users/user/Library/Android/sdk/extras/google/m2repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - file:/Users/user/Library/Android/sdk/extras/google/m2repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jar  - file:/Users/user/Library/Android/sdk/extras/android/m2repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - file:/Users/user/Library/Android/sdk/extras/android/m2repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jar  - file:/Users/user/.m2/repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - file:/Users/user/.m2/repository/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jar  - https://dl.google.com/dl/android/maven2/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - https://dl.google.com/dl/android/maven2/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jar  - https://jcenter.bintray.com/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - https://jcenter.bintray.com/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jar  - file:/Users/user/Workspace/rhodes/node_modules/react-native/android/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.pom  - file:/Users/user/Workspace/rhodes/node_modules/react-native/android/com/salesforce/service/chat-ui/4.1.1/chat-ui-4.1.1.jarRequired by:    project :app > project :@loadsmart_rn-salesforce-chat

To make it work, I need to manually add the S3 maven dependency on my project SomeProject. This is bad because I want to give support for RN autolinking in this library.

I also noticed that the chat-ui dependency files (aars) are being downloaded to ~/.gradle/caches/modules-2/files-2.1/, instead of the .m2 or Android/sdk/extras/....

Libraries'build.gradle:

buildscript {    repositories {        jcenter()        google()    }    dependencies {        classpath 'com.android.tools.build:gradle:4.0.0'    }}apply plugin: 'com.android.library'android {    compileSdkVersion 29    buildToolsVersion "29.0.2"    defaultConfig {        minSdkVersion 19        targetSdkVersion 29        versionCode 1        versionName "1.0"    }    lintOptions {        abortOnError false    }    buildTypes {        release {            minifyEnabled true        }    }}dependencies {    implementation 'com.facebook.react:react-native:+'    implementation "com.salesforce.service:chat-ui:4.1.1"    implementation "androidx.legacy:legacy-support-core-ui:1.0.0"}allprojects {    repositories {        google()        jcenter()        maven {            url 'https://s3.amazonaws.com/salesforcesos.com/android/maven/release'        }    }}

So, is there a solution for this problem? I really don't want to force the user to edit their own build.gradle file to use the lib.

org.gradle.api.ProjectConfigurationException: A problem occurred configuring project ':MyApp'

$
0
0

Getting an error like "org.gradle.api.ProjectConfigurationException: A problem occurred configuring project ':MyApp'" again and again when I build my React Native projectenter image description here

Any help please?

Why won't expo-updates provide checkForUpdateAsync?

$
0
0

When I transitioned to Expo's Managed Workflow (SDK 37 and now 38 as well), in-app update checking broke.

My code:

import * as Updates from 'expo-updates';async checkForUpdate() {    const update = await Updates.checkForUpdateAsync();    if (update.isAvailable) {        this.updateApp();    }}async updateApp() {    await Updates.fetchUpdateAsync();    Updates.reloadAsync();}

Logcat shows me that the checkForUpdateAsync() promise is being rejected with this message:

Error: The method or property Updates.checkForUpdateAsync is not available on android, are you sure you’ve linked all the native dependencies properly?

For the record I did install it via expo install expo-updates

Thanks.

React native canOverrideExistingModule

$
0
0

Hi I try 3 libaries(react native -(sound,sound player,play sound) to play sound but I can not play it

import React, { useState } from 'react';import {  View,  Text,  FlatList,  SafeAreaView,  TouchableOpacity,  ImageBackground} from 'react-native';import { PlaySound, StopSound, PlaySoundRepeat, PlaySoundMusicVolume } from 'react-native-play-sound';//FFE990       FFD488     FFE493    E7CE85   E7C287const ToggleButton = (props) => {  const [isPressed, setIsPressed] = useState(false);  const { sample, id, onPress, item1, item2 } = props;  const text = isPressed ? item2.sample2 : item1.sample;  return (<TouchableOpacity      onPress={() => {        setIsPressed(!isPressed);        onPress && onPress();        PlaySound('./john.mp3');      }}      style={{ flex: 1 }}><View        style={{          flex: 1,          width: '100%',          height: 129,          backgroundColor:'#E7C287',          borderWidth: 1,          marginTop:36,          justifyContent: 'center',          alignItems: 'center',          padding:8        }}><Text style={{   fontSize: 14 }}>{text}</Text></View></TouchableOpacity>  );};const ToggleExample = () => {  const data = [    {sample:"Mouse",id:"0"},    {sample:"Mouse2",id:"1"},    ,   , ];  const data2 = [    {sample2:"Disney",id:"0"},{sample2:"Sindirella",id:"1"},];  return (<ImageBackground source={require('./assets/papi2.jpg')}  style={{      flex: 1,      width:'100%',      height:'100%'    }}> <SafeAreaView style={{ flex: 1 ,alignItems: 'center',}}><Text style={{marginTop:21,    padding:16,    marginBottom:27,    fontSize:28,    alignItems: 'center',    }}>Post</Text><FlatList        data={data}        renderItem={(entry) => {          const { item } = entry;          return (<ToggleButton              item1={item}              item2={data2.filter((_item) => _item.id === item.id)[0]}            />          );        }}        contentContainerStyle={{ padding: 20 }}        ItemSeparatorComponent={() => {          return <View style={{ flex: 1, height: 10 }} />;        }}        keyExtractor={(entry, index) => index.toString()}      /></SafeAreaView></ImageBackground>  );};export default ToggleExample;

That's my code on press I try to play "john.mp3" but now it says

"canOverrideExistingModule=true" in the Main activity. I searched, tried to override this func but it still says same

"Native module SoundManager tried to override,Check getPackages() ..."

MainApp.java

package com.post42;import android.app.Application;import android.content.Context;import com.facebook.react.PackageList;import com.facebook.react.ReactApplication;import com.soundapp.SoundModulePackage;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.soloader.SoLoader;import java.lang.reflect.InvocationTargetException;import java.util.List;public class MainApplication extends Application implements ReactApplication {  private final ReactNativeHost mReactNativeHost =      new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {          return BuildConfig.DEBUG;        }        @Override        protected List<ReactPackage> getPackages() {          @SuppressWarnings("UnnecessaryLocalVariable")          List<ReactPackage> packages = new PackageList(this).getPackages();          // Packages that cannot be autolinked yet can be added manually here, for example:          // packages.add(new MyReactNativePackage());          return packages;        }        @Override        protected String getJSMainModuleName() {          return "index";        }      };  @Override  public ReactNativeHost getReactNativeHost() {    return mReactNativeHost;  }  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, /* native exopackage */ false);    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());  }  /**   * Loads Flipper in React Native templates. Call this in the onCreate method with something like   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());   *   * @param context   * @param reactInstanceManager   */  private static void initializeFlipper(      Context context, ReactInstanceManager reactInstanceManager) {    if (BuildConfig.DEBUG) {      try {        /*         We use reflection here to pick up the class that initializes Flipper,        since Flipper library is not available in release mode        */        Class<?> aClass = Class.forName("com.post42.ReactNativeFlipper");        aClass            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)            .invoke(null, context, reactInstanceManager);      } catch (ClassNotFoundException e) {        e.printStackTrace();      } catch (NoSuchMethodException e) {        e.printStackTrace();      } catch (IllegalAccessException e) {        e.printStackTrace();      } catch (InvocationTargetException e) {        e.printStackTrace();      }    }  }}

How can I fix it.Thank you


How Can Make Android Flash Light in React Native

$
0
0

I am try to make Android Flash Light App is it possible to make React Native Language ?

Get NFC payload on Android with react native

$
0
0

I am currently developing an android app with react-native. I want my app to get launched when I scan an NFC tag and get the payload, I have added an intent filter which launches my app when I scan an NFC tag. But I am stuck in the point of getting the payload to the app. I have no idea how to read that payload in my app. my payloads are in plain/text type. I am new to android development and know very little of react-native.

Here is my AndroidManifest.xml

<intent-filter><action android:name="android.nfc.action.NDEF_DISCOVERED" /><category android:name="android.intent.category.DEFAULT" /><data android:mimeType="text/plain" /></intent-filter>

When I scanned a tag it launches the app and goes to the main screen (Login Screen) I have no idea how to read the payload here. Please help me with this.

Could not connect to React Native development server on Android

$
0
0

When I run react-native run-android, it gives me the following error:

Could not connect to development server

Error screen

  • Package server is running and I can access it directly from browseron my mobile device.
  • My Android device is connected to computer and has debugging enabled (Ichecked using adb devices command).
  • My Android version is 4.4.4 so I cannot use adb reverse command.
  • I have set the ID address and port in Dev setting.
  • USB debug is on.
  • I use Windows 7.

How to fix this error?

What is your dev flow for React Native Android?

$
0
0

For the last few weeks I've been developing an app for Android using React Native, and overall the experience is pretty good, however I feel like I might be missing something. Does anyone have any pointers?

My flow is

  • Start Android Studio
  • Wait for build/sync
  • Run app on physical device or AVD
  • See the expected red screen
  • Start the Metro server
  • Now the app is running
  • Run pidcat com.myapp to see device logs
  • Make JS changes via VSCode
  • Hit reload in Flipper (no hot-reloading?)
  • Re-navigate to the screen I'm working on

So far it's all good other than the lack of hot-reloading.However whenever I made a change to some Java code, I need to hit Rebuild in Android Studio, and this takes quite some time usually.

Is this all normal? Perhaps I'm missing something.

Thanks in advance

How to grant access to react-native-camera after don't allow is pressed first?

$
0
0

At first, when you run the app for the first time and go to the camera it launches the Permission modal on android or ios with the don't allow and allow options.

The package used is react-native-camera. It has a property called notAuthorizedView that you can return any view you want. What I want to do is to enable the camera or grant access to it in the notAuthorizedView which appears when not allowing the camera.

export default class MyCamera extends React.Component {    constructor(props) {        super(props);        this.state = {            uri:''        };    }      render() {        return (<View style={styles.container}><RNCamera          ref={ref => {            this.camera = ref;          }}          style={styles.preview}          type={RNCamera.Constants.Type.back}          flashMode={RNCamera.Constants.FlashMode.on}          notAuthorizedView={<View><Text>YOU ARE NOT AUTHORIZED TO USE THE CAMERA</Text><Button onPress={()=>{Alert.alert('SET CAMERA STATUS TO READY')}}/></View>          }          permissionDialogTitle={'Permission to use camera'}          permissionDialogMessage={'We need your permission to use your camera phone'}          onGoogleVisionBarcodesDetected={({ barcodes }) => {            console.log(barcodes);          }}        /><View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}><TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}><Text style={{ fontSize: 14 }}> SNAP </Text></TouchableOpacity></View></View>        );      }     goToConcern = () => {        this.props.navigation.navigate('Concern', {uriPhoto: this.state.uri})     };  takePicture = async function() {    if (this.camera) {      const options = { quality: 0.5, base64: true };      const data = await this.camera.takePictureAsync(options)      console.log(data.uri);      console.log(data);      this.setState({uri:data.uri})    }  };}
Viewing all 28486 articles
Browse latest View live


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