My code to download the file as below

RNFetchBlob
                .config({
                    path : path,
                    background: true,
                    cacheable:false,
                    timeout: 1000 * 60 * 15 //15 minutes
                })
                .fetch('GET', forFile.url, {
                    //some headers ..
                })
                .then((res) => {

                    Realm.open({schema: [ScheduleSchema,PlaylistSchema,FileSchema],schemaVersion: schema_version})
                    .then(realm => {
                        realm.write(() => {
                            localPath = Platform.OS === 'android' ? 'file://' + res.path() : `playlists/${playlistName}/${getFileName(forFile)}`
                            forFile.file_local_path = localPath
                            console.log('The file saved to ', res.path() + 'for remote url' +forFile.url)

                        })
                    }).catch((error) => {
                        alert("realm open error on file download service", error);
                        console.log(error);
                        reject(error)
                    })

                    resolve(forFile);
                }).catch((error)=>{
                    console.log("file download error " + error);
                    showToastMessage(I18n.t("ErrorMessage.ErrorInFileDownload"))
                })

This code works fine for android 7 but not on android 9.

Error from Android studio Logcat as below

java.lang.IllegalStateException: cannot make a new request because the previous response is still open: please call response.close()
        at okhttp3.internal.connection.Transmitter.newExchange(Transmitter.java:164)
        at okhttp3.internal.connection.ConnectInterceptor.intercept(ConnectInterceptor.java:41)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:142)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:117)
        at okhttp3.internal.cache.CacheInterceptor.intercept(CacheInterceptor.java:94)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:142)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:117)
        at okhttp3.internal.http.BridgeInterceptor.intercept(BridgeInterceptor.java:93)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:142)
        at okhttp3.internal.http.RetryAndFollowUpInterceptor.intercept(RetryAndFollowUpInterceptor.java:88)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:142)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:117)
        at com.RNFetchBlob.RNFetchBlobReq$2.intercept(RNFetchBlobReq.java:385)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:142)
        at okhttp3.internal.http.RealInterceptorChain.proceed(RealInterceptorChain.java:117)
        at okhttp3.RealCall.getResponseWithInterceptorChain(RealCall.java:221)
        at okhttp3.RealCall$AsyncCall.execute(RealCall.java:172)
        at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
        at java.lang.Thread.run(Thread.java:764)

Hello I have a simple app and i want to add a drawer to him I use react-navigation 4x and use react-navigation-drawer to implement Drawer in my app I used it before sperate drawer in a single package and it's worked fine but when I use the new package I got this error

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

although I export my screen

here is Code

**navigator.js**

    import React from 'react';
    import {TouchableOpacity, View} from 'react-native';
    import Icon from 'react-native-vector-icons';
    import {createAppContainer, createSwitchNavigator} from 'react-navigation';
    import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';
    import {createStackNavigator} from 'react-navigation-stack';
    import ForgetPassword from '../screens/ForgetPassword';
    import Home from '../screens/Home';
    import Splash from '../screens/Splash';

    const AuthStackNavigator = createStackNavigator({
      Authloading: {
        screen: Splash,
        navigationOptions: {
          header: null,
        },
      },
    });

    const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
          title: 'Home',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerRight: (
            <TouchableOpacity
              onPress={() => navigation.navigate('Notifications')}
              style={{margin: 10}}>
              <Icon name="ios-notifications" size={28} color="#1DA1F2" />
            </TouchableOpacity>
          ),
        }),
      },
    });

    const DrawerNavigator = createDrawerNavigator({
      HomeDrawer: {
        screen: HomeStack,
        navigationOptions: {
          drawerLabel: 'Home',
          drawerIcon: () => <Icon name="ios-home" size={28} color="#0496FF" />,
        },
      },
    });

    const Navigations = createSwitchNavigator({
      // Authloading: Splash,
      Auth: AuthStackNavigator, // the Auth stack
      App: DrawerNavigator, // the App stack,
    });

    const Navigator = createAppContainer(Navigations);

    export default Navigator;


**Home.js**

    //import liraries
    import React, {Component} from 'react';
    import {StyleSheet, Text, View} from 'react-native';

    // create a component
    class Home extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Home</Text>
          </View>
        );
      }
    }


    //make this component available to the app
    export default Home;


**App.js**

    import React, {Component} from 'react';
    import Navigator from './src/navigations/navigator';
    class App extends Component {
      render() {
        return <Navigator />;
      }
    }

    export default App;

Edit

i just think NavigationDrawerStructure it's exports from react-native-drawer so that's my bad :)

so here is the component name as NavigationDrawerStructure

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={this.toggleDrawer}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      </View>
    );
  }
}

OR just add a button for a toggle in heder left inside Home stack like this

navigationOptions: ({navigation}) => ({
      title: 'Home',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      )
})

I tried to build the example app of tflite-react-native (v0.0.5) for my Android device (Android version 8.0.0), but it failed.

I cloned tflite-react-native, and build the example app without any changes to the code. The build failed with the following output. Is there any solution?

$ git clone https://github.com/shaqian/tflite-react-native.git
$ cd tflite-react-native/example
$ yarn
$ react-native run-android --deviceId XXXXXXXXXXXXX
Starting JS server...
Building the app...

> Configure project :app
WARNING: The specified Android SDK Build Tools version (28.0.2) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.2.1.
Android SDK Build Tools 28.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '28.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

> Configure project :react-native-image-picker
WARNING: The specified Android SDK Build Tools version (28.0.2) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.2.1.
Android SDK Build Tools 28.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '28.0.2'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

> Configure project :tflite-react-native
WARNING: The specified Android SDK Build Tools version (23.0.1) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle Plugin 3.2.1.
Android SDK Build Tools 28.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '23.0.1'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

> Task :tflite-react-native:compileDebugJavaWithJavac
Note: /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/src/main/java/com/reactlibrary/TfliteReactNativeModule.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

> Task :app:bundleReleaseJsAndAssets
warning: the transform cache was reset.
Loading dependency graph, done.
bundle: Writing bundle output to: /Users/john/development/tflite-react-native/example/android/app/build/generated/assets/react/release/index.android.bundle
bundle: Done writing bundle output

> Task :tflite-react-native:compileReleaseJavaWithJavac
Note: /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/src/main/java/com/reactlibrary/TfliteReactNativeModule.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

> Task :tflite-react-native:verifyReleaseResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':tflite-react-native:verifyReleaseResources'.
> java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
  Output:  error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
  error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values-v26/values-v26.xml:7: error: resource android:attr/colorError not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values-v26/values-v26.xml:11: error: resource android:attr/colorError not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values-v26/values-v26.xml:15: error: style attribute 'android:attr/keyboardNavigationCluster' not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:7: error: resource android:attr/dialogCornerRadius not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values-v28/values-v28.xml:11: error: resource android:attr/dialogCornerRadius not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:954: error: resource android:attr/fontStyle not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:955: error: resource android:attr/font not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:956: error: resource android:attr/fontWeight not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:957: error: resource android:attr/fontVariationSettings not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:958: error: resource android:attr/ttcIndex not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:1039: error: resource android:attr/startX not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:1042: error: resource android:attr/startY not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:1045: error: resource android:attr/endX not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:1048: error: resource android:attr/endY not found.
  /Users/john/development/tflite-react-native/example/node_modules/tflite-react-native/android/build/intermediates/res/merged/release/values/values.xml:1056: error: resource android:attr/offset not found.
  error: failed linking references.

...

I'm using React-Native.I'm living trouble with Picker component on Android. I use Picker from Native-Base Library. Here is my Picker code with it's parent view.

<View style={{height: 40, marginTop: 20}}>

                    <Label style={{fontWeight: 'bold', color: '#d7d7d7'}}>Phone</Label>
                    <View style={{flexDirection: 'row',width: '100%',borderWidth: 1, borderColor: '#d7d7d7', height: 40}}>
                        <View style={{flexDirection: 'row',width: '30%', height: '100%' ,backgroundColor: '#d7d7d7', alignItems: 'center'}}>
                            <Picker style={{width: 100, height: '100%', marginLeft: 5}}
                                    selectedValue={this.state.selectedCountry}
                                    onValueChange={(value)=>this.onCodeChanged(value)}>
                                <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                    <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+90.png')}/> +90</Text>} value="+90"/>
                                <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                    <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+44.png')}/> +44</Text>} value="+44"/>
                                <Picker.Item label={<Text style={{alignItems: 'center', flexDirection: 'row'}}>
                                    <Thumbnail square style={{width: 30, height: 20, marginTop: 5}} source={require('../assets/+1.png')}/> +1</Text>} value="+1"/>
                            </Picker>
                        </View>
                        <Input keyboardType={'numeric'} style={{width: '70%', height: '100%'}} value={this.state.phone} onChangeText={(value)=>this.setState({phone: value},()=>console.log("Phone State: ", this.state.phone))}/>
                    </View>

</View>

Here is how Picker looks like in IOS

And here is the error screen I get on android.

It seems the problem is Picker.Item's Labelcontent. When I changed the content of label from Text to usual, ordinary string, it works fine on android, as well. But, somehow I need the flag and code together in Picker.Item I hope there is someone who faced & handled this issue before.

I created a new React-Native project using react-native init AppName and when I tried to run in Android it throws Cannot get property 'dependencies' on null object in line @react-native-community\cli-platform-android\native_modules.gradle' line: 183 I am not sure why I am getting this exception. I didn't even do any changes in the project

Following is the command I use

react-native init Example
cd Example
npm i
react-native run-android

Version of react-native

react-native-cli: 2.0.1
react-native: 0.61.3

Version of npm - 6.11.2

I am using react native to build app target for all countries, especially China customer.

What are the services that work in China, especially service like crash reporting, analytic and push notification?

1. Firebase. This need Google Play Service to work, since most of the Chinese phone does not have it installed, and google is banned, so can I safely give it a pass?
2. Microsoft App center. Does it work? I think Push notification still rely on the FCM.
3. AWS Amplify. Push notification rely on FCM.
4. Jiguan. It is chinese company, so it should have no problem, but they are lacking of crash reporting and cannot receive push notification when app is close.

Do you have experience on App development outside China but target China market?

How can I regenerate ios and android folder in React Native project?

react-native-cli: 2.0.1 react-native: 0.61.2

❯ react-native eject error Unrecognized command "eject". info Run "react-native --help" to see a list of all available commands.

❯ react-native upgrade --legacy true error: unknown option `--legacy'

I am relatively new in react and I write very simple code like this to change text color.

<Text style={{color: '#EE7700'}}>5 JOBS</Text>

I can see text color is changed but on Galaxy Note 9, Android version 9, it is not working. (only show black color).

I also saw other people are having issues like this.

https://github.com/facebook/react-native/issues/17139

How shall I do? Is it because of their device setting? Is there anything that I shall write more or shall check ?

Is there a way to open an image file (mainly jpeg) with:

RNFetchBlob.android.actionViewIntent(res.path(), item.mime_type);

and then allow to save the image, I'm trying on an emulator Nexus 4 and API 25 but both from the gallery and from the photo there is no option to save the image ... thanks!

I have a problem with releasing my app. When I use gradlew bundleRelease I get this error

Could not resolve all files for configuration ':react-native-fs:lintClassPath'.
> Could not find lint-gradle.jar (com.android.tools.lint:lint-gradle:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint-gradle/26.1.4/lint-gradle-26.1.4.jar
> Could not find lint.jar (com.android.tools.lint:lint:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint/26.1.4/lint-26.1.4.jar
> Could not find lint-checks.jar (com.android.tools.lint:lint-checks:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint-checks/26.1.4/lint-checks-26.1.4.jar
> Could not find lint-api.jar (com.android.tools.lint:lint-api:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint-api/26.1.4/lint-api-26.1.4.jar
> Could not find lint-kotlin.jar (com.android.tools.lint:lint-kotlin:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/lint/lint-kotlin/26.1.4/lint-kotlin-26.1.4.jar
> Could not find intellij-core.jar (com.android.tools.external.com-intellij:intellij-core:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/external/com-intellij/intellij-core/26.1.4/intellij-core-26.1.4.jar
> Could not find uast.jar (com.android.tools.external.org-jetbrains:uast:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/external/org-jetbrains/uast/26.1.4/uast-26.1.4.jar
> Could not find kotlin-compiler.jar (com.android.tools.external.com-intellij:kotlin-compiler:26.1.4).
  Searched in the following locations:
      https://dl.google.com/dl/android/maven2/com/android/tools/external/com-intellij/kotlin-compiler/26.1.4/kotlin-compiler-26.1.4.jar

but in develop mode application compiled successfuly. in android/build.gradle I use google() before jcenter() but it didnt work, I also try it on react-native-fs/android/build.gradle. my dependencies classpath are:

        classpath 'com.android.tools.build:gradle:3.1.4'
        classpath 'com.google.gms:google-services:3.2.1'

When I run "react-native run-android",it gives me error:"could not connect to development server...".

• Package server is running and i can access it directly from browser in mobile device.
• My android device connected to computer has debugging enabled i checked it using adb devices command.
• My android version is 4.4.4 so i cannot use adb reverse command.
• I have set the ip address and port in Dev setting.
• Usb debug is on.
• OS is windows7.

So how to fix the red error screen issue?Any suggestion is appreciated!

I have the following code to use a custom image on the Markers :

<Marker 
key={marker.id} 
coordinate={{latitude: parseFloat(marker.lat), longitude: parseFloat(marker.lng)}} 
title={marker.name} 
description={marker.description} 
image={require('../../assets/logo-marker.png')} 
onCalloutPress={() => this.details(marker.id, marker.cover)} />

It works fine on iOS but keeps crashing on Android with this error :

Error while updating property 'image' of a view managed by: AIRMapMarker

I looked for some fixes but can't able to find anything about this specific problem. Any idea ?

Details :

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: neartrip.io, PID: 2896
    com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'image' of a view managed by: AIRMapMarker
        at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:98)
        at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:131)
        at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
        at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:46)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:268)
        at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:198)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1036)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1007)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909)
        at android.view.Choreographer.doCallbacks(Choreographer.java:723)
        at android.view.Choreographer.doFrame(Choreographer.java:655)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
        at android.os.Handler.handleCallback(Handler.java:790)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:164)
        at android.app.ActivityThread.main(ActivityThread.java:6494)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)
     Caused by: java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Method.invoke(Native Method)
        at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)
        at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:131) 
        at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51) 
        at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:46) 
        at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:268) 
        at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:198) 
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1036) 
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1007) 
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29) 
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:172) 
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84) 
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:909) 
        at android.view.Choreographer.doCallbacks(Choreographer.java:723) 
        at android.view.Choreographer.doFrame(Choreographer.java:655) 
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897) 
        at android.os.Handler.handleCallback(Handler.java:790) 
        at android.os.Handler.dispatchMessage(Handler.java:99) 
        at android.os.Looper.loop(Looper.java:164) 
        at android.app.ActivityThread.main(ActivityThread.java:6494) 
        at java.lang.reflect.Method.invoke(Native Method) 
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438) 
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807) 
     Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x0
        at android.content.res.ResourcesImpl.getValueForDensity(ResourcesImpl.java:224)
        at android.content.res.Resources.getDrawableForDensity(Resources.java:876)
        at android.content.res.Resources.getDrawable(Resources.java:819)
        at android.content.res.Resources.getDrawable(Resources.java:794)
        at com.airbnb.android.react.maps.AirMapMarker.setImage(AirMapMarker.java:375)
        at com.airbnb.android.react.maps.AirMapMarkerManager.setImage(AirMapMarkerManager.java:219)

1. I unlinked a library because I am using React Native >v0.59 that links libraries automatically.

(base) Somedude@Programmers-Machine-4:~/CrossPlatformProjects/ReactNative/someapp$ react-native unlink @react-native-community/async-storage
    info Unlinking "@react-native-community/async-storage" iOS dependency
    info iOS module "@react-native-community/async-storage" has been successfully unlinked
    info Unlinking "@react-native-community/async-storage" Android dependency
    info Android module "@react-native-community/async-storage" has been successfully unlinked
    (base) Somedude@Programmers-Machine-4:~/CrossPlatformProjects/ReactNative/spotsrn$ react-native run-android

2. Above it shows that the library has been successfully unlinked, but then when I try to build for android it claims the library is linked:

error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - @react-native-community/async-storage (to unlink run: "react-native unlink @react-native-community/async-storage")
  - react-native-fbsdk (to unlink run: "react-native unlink react-native-fbsdk")
  - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")

This has happened to other packages as well and I don't think it is related to the react-native-community/async-storage library. Is there a process to reset/resolve this?

I get a problem to handle hardware back button android in React Native, I want to back in specific page/component when I press back button in hardware/device, but I always get error 'undefined is not an object (Evaluating 'this.props.navigation').

this is my script :

    import { Platform, StyleSheet, Text, View, BackHandler } from 'react-native';
    import { createStackNavigator, createAppContainer, NavigationActions, createBottomTabNavigator } from 'react-navigation';

    import OnBoarding from './apps/src/onBoarding/OnBoarding';
    import Welcome from './apps/src/welcome/Welcome';
    import Login from './apps/src/login/Login';

    const MainNavigator = createStackNavigator({
      OnBoarding: OnBoarding,
      Welcome: Welcome,
      Login: Login
    },{
      initialRouteName: 'OnBoarding',
      headerMode: 'none',
      navigationOptions: {
        headerVisible: false
      }
    });

    const Approot = createAppContainer(MainNavigator);
    var screen = '';

    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          routeName: ''
        }
      }

      componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
      }

      componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
      }

      handleBackButton() {
        if(screen == 'Login') {
          this.props.navigation.navigate('OnBoarding');
        }else{
          return false;
        }
      }

      getActiveRouteName(navigationState) {
        if (!navigationState) {
          return null;
        }
        const route = navigationState.routes[navigationState.index];
        // dive into nested navigators
        if (route.routes) {
          return this.getActiveRouteName(route);
        }
        return route.routeName;
      } 

      render() {
        return <Approot onNavigationStateChange={(prevState, currentState) => {
            screen = this.getActiveRouteName(currentState)
          }} />;
      }
    }

in this case, I have 3 component, they are OnBoarding, Welcome, Login, when postion in Login I want to back to OnBoarding when press hardware back button, please help me to solve this problem.

Thanks.

I'm migrating a rn project from 0.59 to 0.61.3 (latest) with a fresh npx react-native init.

I need to change the defaut app id it gave to the android app. To do so, I did:

• change the package="com.myapp" value in the manifest.xml to package="mycomp.myapp"
• change the applicationId "com.myapp" value to applicationId "mycomp.myapp" in the app/build.graddle
• change the src packages com/myapp/MainApplication to mycomp/myapp/MainApplication

• change this below in the _BUCK file (not sure what it is exactly...):

  android_build_config(
      name = "build_config",
      package = "mycomp.myapp",
  )
  android_resource(
      name = "res",
      package = "mycomp.myapp",
      res = "src/main/res",
  )
  

After that, even after having ./gradlew clean successfully, when running the npx react-native run-android command, the app installs but crashes with:

2019-10-30 15:43:26.978 30576-30743/mycomp.myapp E/AndroidRuntime: FATAL EXCEPTION: create_react_context
    Process: mycomp.myapp, PID: 30576
    java.lang.RuntimeException: Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.
        at com.facebook.react.bridge.CatalystInstanceImpl.jniLoadScriptFromAssets(Native Method)
        at com.facebook.react.bridge.CatalystInstanceImpl.loadScriptFromAssets(CatalystInstanceImpl.java:227)
        at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:28)
        at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:261)
        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1175)
        at com.facebook.react.ReactInstanceManager.access$1000(ReactInstanceManager.java:125)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:951)
        at java.lang.Thread.run(Thread.java:764)

We also see that Metro is started and listening but it is never reached by the debug app:

warn The following packages use deprecated "rnpm" config that will stop working from next release:
- react-native-orientation: https://github.com/yamill/react-native-orientation#readme
- react-native-push-notification: https://npmjs.com/package/react-native-push-notification
- react-native-sentry: https://github.com/getsentry/react-native-sentry
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  Running Metro Bundler on port 8081.                                         │
│                                                                              │
│  Keep Metro running while developing on any JS projects. Feel free to        │
│  close this tab and run your own Metro instance if you prefer.               │
│                                                                              │
│  https://github.com/facebook/react-native                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
/Users/thomasfetiveau/wksp_myapp/myapp-rn61/bin
/Users/thomasfetiveau/wksp_myapp/myapp-rn61 

Loading dependency graph, done.

Any idea why?

Find below my npx react-native info output:

$ npx react-native info
warn The following packages use deprecated "rnpm" config that will stop working from next release:
- react-native-orientation: https://github.com/yamill/react-native-orientation#readme
- react-native-push-notification: https://npmjs.com/package/react-native-push-notification
- react-native-sentry: https://github.com/getsentry/react-native-sentry
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
info Fetching system and libraries information...
System:
    OS: macOS Mojave 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Memory: 78.62 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
Binaries:
    Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
    iOS SDK:
    Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
    API Levels: 18, 23, 24, 25, 26, 27, 28, 29
    Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3, 29.0.2
    System Images: a...google_apis | Google APIs Intel x86 Atom Sys..., a...google_apis | Google APIs Intel x86 Atom Sys..., a... | Intel x86 Atom_64, a...google_apis | Google APIs Intel x86 Atom Sys..., a...gle_apis | Google APIs Intel x86 Atom_64 ..., a...-28 | Intel x86 Atom, a... | Intel x86 Atom_64, a...google_apis | Google APIs Intel x86 Atom Sys..., a...-29 | Intel x86 Atom, a... | Intel x86 Atom_64, a...google_apis | Google APIs Intel x86 Atom Sys...
IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
npmPackages:
    react: ^16.11.0 => 16.11.0 
    react-native: 0.61.3 => 0.61.3 
npmGlobalPackages:
    create-react-native-module: 0.11.1
    react-native-create-library: 3.1.2

I'm using react-native-ble-manager for scan and show all devices. It's working fine, but it's not showing the name of devices (just the MAC id). Here's my code:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    NativeAppEventEmitter,
    NativeEventEmitter,
    NativeModules,
    Platform,
    PermissionsAndroid,
    ScrollView,
    AppState,
    FlatList,
    Dimensions,
} from 'react-native';
import BleManager from 'react-native-ble-manager';
import { stringToBytes } from 'convert-string';

const window = Dimensions.get('window');

const BleManagerModule = NativeModules.BleManager;
const bleManagerEmitter = new NativeEventEmitter(BleManagerModule);


export default class App extends Component {

    constructor() {
        super();

        this.state = {
            scanning:false,
            peripherals: new Map(),
            appState: ''
        };

        this.handleDiscoverPeripheral = this.handleDiscoverPeripheral.bind(this);
        this.handleStopScan = this.handleStopScan.bind(this);
        this.handleUpdateValueForCharacteristic = this.handleUpdateValueForCharacteristic.bind(this);
        this.handleDisconnectedPeripheral = this.handleDisconnectedPeripheral.bind(this);
        this.handleAppStateChange = this.handleAppStateChange.bind(this);
    }

    componentDidMount() {
        AppState.addEventListener('change', this.handleAppStateChange);

        BleManager.start({showAlert: false});

        this.handlerDiscover = bleManagerEmitter.addListener('BleManagerDiscoverPeripheral', this.handleDiscoverPeripheral );
        this.handlerStop = bleManagerEmitter.addListener('BleManagerStopScan', this.handleStopScan );
        this.handlerDisconnect = bleManagerEmitter.addListener('BleManagerDisconnectPeripheral', this.handleDisconnectedPeripheral );
        this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic );



        if (Platform.OS === 'android'&& Platform.Version >= 23) {
            PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION).then((result) => {
                if (result) {
                    console.log("Permission is OK");
                } else {
                    PermissionsAndroid.requestPermission(PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION).then((result) => {
                        if (result) {
                            console.log("User accept");
                        } else {
                            console.log("User refuse");
                        }
                    });
                }
            });
        }

    }

    handleAppStateChange(nextAppState) {
        if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
            console.log('App has come to the foreground!');
            BleManager.getConnectedPeripherals([]).then((peripheralsArray) => {
                console.log('Connected peripherals: ' + peripheralsArray.length);
            });
        }
        this.setState({appState: nextAppState});
    }

    componentWillUnmount() {
        this.handlerDiscover.remove();
        this.handlerStop.remove();
        this.handlerDisconnect.remove();
        this.handlerUpdate.remove();
    }

    handleDisconnectedPeripheral(data) {
        let peripherals = this.state.peripherals;
        let peripheral = peripherals.get(data.peripheral);
        if (peripheral) {
            peripheral.connected = false;
            peripherals.set(peripheral.id, peripheral);
            this.setState({peripherals});
        }
        console.log('Disconnected from ' + data.peripheral);
    }

    handleUpdateValueForCharacteristic(data) {
        console.log('Received data from ' + data.peripheral + ' characteristic ' + data.characteristic, data.value);
    }

    handleStopScan() {
        console.log('Scan is stopped');
        this.setState({ scanning: false });
    }

    startScan() {
        if (!this.state.scanning) {
            //this.setState({peripherals: new Map()});
            BleManager.scan([], 3, true).then((results) => {
                console.log(JSON.stringify(results));
                console.log('Scanning...');
                this.setState({scanning:true});
            });
        }
    }

    retrieveConnected(){
        BleManager.getConnectedPeripherals([]).then((results) => {
            if (results.length === 0) {
                console.log('No connected peripherals')
            }
            console.log(results);
            var peripherals = this.state.peripherals;
            for (var i = 0; i < results.length; i++) {
                var peripheral = results[i];
                peripheral.connected = true;
                peripherals.set(peripheral.id, peripheral);
                this.setState({ peripherals });
            }
        });
    }

    handleDiscoverPeripheral(peripheral){
        var peripherals = this.state.peripherals;
        console.log('Got ble peripheral', JSON.stringify(peripheral));
        console.log('NAME: ' + peripheral.name);
        if (peripheral.name === null) {
            peripheral.name = 'NO NAME';
        }
        peripherals.set(peripheral.id, peripheral);
        this.setState({ peripherals });
    }

    renderItem(item) {
        const color = item.connected ? 'green' : '#fff';
        return (
            <TouchableHighlight onPress={() => this.sendData(item.id, 'ola') }>
                <View style={[styles.row, {backgroundColor: color}]}>
                    <Text style={{fontSize: 12, textAlign: 'center', color: '#333333', padding: 10}}>{item.name}</Text>
                    <Text style={{fontSize: 10, textAlign: 'center', color: '#333333', padding: 2}}>RSSI: {item.rssi}</Text>
                    <Text style={{fontSize: 8, textAlign: 'center', color: '#333333', padding: 2, paddingBottom: 20}}>{item.id}</Text>
                </View>
            </TouchableHighlight>
        );
    }

    render() {
        const list = Array.from(this.state.peripherals.values());

        return (
            <View style={styles.container}>
                <TouchableHighlight style={{marginTop: 40,margin: 20, padding:20, backgroundColor:'#ccc'}} onPress={() => this.startScan() }>
                    <Text>Scan Bluetooth ({this.state.scanning ? 'on' : 'off'})</Text>
                </TouchableHighlight>
                <TouchableHighlight style={{marginTop: 0,margin: 20, padding:20, backgroundColor:'#ccc'}} onPress={() => this.retrieveConnected() }>
                    <Text>Retrieve connected peripherals</Text>
                </TouchableHighlight>
                <ScrollView style={styles.scroll}>
                    {(list.length === 0) &&
                    <View style={{flex:1, margin: 20}}>
                        <Text style={{textAlign: 'center'}}>No peripherals</Text>
                    </View>
                    }
                    <FlatList
                        data={list}
                        renderItem={({ item }) => this.renderItem(item) }
                        keyExtractor={item => item.id}
                    />

                </ScrollView>
            </View>
        );
    }
}

i am new to react native following a tutorial. I noticed there is no consistency of buttons between android and iOS so i thought i'd try react-native-paper library.

however, after importing the button from react-native-paper i am having problems changing the color of the button. the color is a constant color as in the image provided how the color looks

how can i manipulate the color? also is there a better library to use for button consistency between android and iOS ?

thanks

here is the code :

// import stuff
import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import {
  Provider as PaperProvider,
  DarkTheme,
  DefaultTheme,
  Button
} from 'react-native-paper';
// import { Button } from 'react-native-paper';

//create stuff

class App extends React.Component {

  state = {
    text: "",
    todo: []
  }
  addTodo = () => {
    var newTodo = this.state.text
    var arr = this.state.todo
    arr.push(newTodo)
    this.setState({ todo: arr, text: "" })
  }

  deleteTodo = (t) => {
    var arr = this.state.todo;
    var pos = arr.indexOf(t);
    arr.splice(pos, 1);
    this.setState({ todo: arr });


  }

  renderTodos = () => {
    return this.state.todo.map(t => {
      return (
        <TouchableOpacity key={t}>
          <Text
            style={styles.todo}
            onPress={() => { this.deleteTodo(t) }}
          >{t}</Text>
        </TouchableOpacity>
      )
    })
  } 
  render() {
    return (
      <PaperProvider>
      <View style={styles.wholeStyle}>
        <View style={styles.viewStyle}>
          <Text style={styles.header}>Notes App</Text>
          <TextInput
            style={styles.inputStyle}
            onChangeText={(text) => this.setState({ text })}
            value={this.state.text}
          />
          <Button 
          onPress={this.addTodo}
          mode='contained'
          backgroundColor='black'>Todo</Button>
          {this.renderTodos()}
        </View>
      </View>
      </PaperProvider>
    )
  }
}

const styles = {
  wholeStyle: {
    flex: 1,
    backgroundColor: '#0288D1'
    // backgroundColor: 'red'
  },
  viewStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    margin: 10,
    marginTop: 30,

  },
  inputStyle: {
    alignSelf: 'stretch',
    height: 40,
    borderColor: "white",
    borderWidth: 1

  },
  header: {
    fontSize: 40,
    color: 'white',
    fontWeight: 'bold'

  },
  todo: {
    fontSize: 18,
    color: 'white'
  }


}
//export stuff

export default App;

Soon new Huawei phones will stop supporting Google Play and Google Mobile Services.

Huawei is preparing its own ecostystem called HMS https://developer.huawei.com/consumer/en/service/hms/developer.html

Their app store is called "Huawei App Gallery" and has its documentation here: https://developer.huawei.com/consumer/en/doc/30202

They are now sending messages to developers (including me) that encourages to release an app to their store. They are claiming that they only need an APK file and no changes to the application are needed.

My questions are:

• Is a react-native app going to work without code changes?
• Is Firebase SDK going to work?
• What is the real hidden cost of maintaining an app in another Android ecosystem?

I have this use case :

-> a Website OR random native application on my phone, doing a process on it, and at the end of the flow, this application is redirecting to :

https://my-domain/com/key=value&otherKey=value.com

The problem is, the universal link is well handled (deep links works well) if I click on it (through bloc-note or whatever) and it's opening my mobile app. But for this use case, since it's not a user's click but an automatic redirection (from the side-service application), it's opening safari and not my app...

How can I handle that?

Branch.io looks not enough, since it's not a static url. Foreach redirected URL you indeed have a different key/value in the url

I am the beginner of react native. I have a problem but i don't understand what i am doing wrong.

This is my code:

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {Button,Input} from 'react-native-elements';
import firebase from './screens/firebase';

console.log(firebase.name);
console.log(firebase.database());

class App extends React.Component
{

constructor(props)
{
  super(props);
  this.state = ({
    name:'',
    email : '',
    Password : '',
    id:'',
    phone:'',
    })
}

signup = (name,email,Password,id,phone) =>
{
  try
  {
    firebase.auth().createUserWithEmailAndPassword(name,email,Password,id,phone)
  }
  catch(error)
  {
    console.log(error.toString())
  }
  alert('signUp Successful')
}

  render()
  {
    return(
      <View style = {styles.container}>

      <Input
        placeholder='Enter Name'
        onChangeText={(name) => this.setState({name})}/>

      <Input
        placeholder='Enter Email'
        onChangeText={(email) => this.setState({email})}/>

      <Input
        placeholder='Enter Password'
        onChangeText={(Password) => this.setState({Password})}/>

       <Input
        placeholder='Enter id'
        onChangeText={(id) => this.setState({id})}/>

        <Input
         placeholder='Enter Phone'
         onChangeText={(phone) => this.setState({phone})}/>

    <View style={{marginTop : 40,flexDirection : 'row'}}>

     <Button
       title="Sign UP"
       onPress = {() => this.signup(this.state.name,this.state.email,this.state.Password,this.state.id,this.state.phone)}/>
      </View>
     </View>
      );
  }
}


const styles = StyleSheet.create({
  container :
  {
    flex : 1,
    justifyContent : 'center',
    alignItems : 'center',
  }
});

export default App;

There is a compiler error which reads :

Invariant Violation: Text Strings must be rendered within a component

Where am I making a mistake? I have been dealing with this problem for a long time, thanks for your help.