I am trying to build my react-native (0.61.5). But when I am trying to run the commands

cd && ./gradlew assembleDebug
cd && ./gradlew clean

I get the following error :

Could not create service of type ScriptPluginFactory using BuildScopeServices.createScriptPluginFactory().

> Could not create service of type FileHasher using BuildSessionScopeServices.createFileSnapshotter().

Gradle Version : 5.5

Please help me out. If you need any more details please let me know.

I'm using react-native-sound to playback looped audio files (exactly mp3 format). The problem is that there is a gap between the loops. Here is my code example:

    loadSound = (s) => {
  let sound = new Sound(s, Sound.MAIN_BUNDLE, (error) => {
    if (error) {
      console.log('failed to load the sound', error);
      return;
    } else {
      sound.setNumberOfLoops(-1);
    }
  });

  return sound;
}

let sound = loadSound('campfire.mp3')
sound.play();

Is there any workaround how to make the loops to sound smooth?

Actually, this issue is open on github, but there is no solution yet...

I am trying to add Detox in a React Native project (https://github.com/wix/Detox).

It actually runs fine but I have a runtime exception when a Lottie animation (https://github.com/react-native-community/lottie-react-native) is displayed.

The exception is: RangeError: Maximum call stack size exceeded.

Anyone had the same exception?

I'm creating a react-native-app which consists of the material menu. My app requires a vertical menu. I have set the width for the menu. I have images inside the menu to choose the font size. Somehow the images are taking padding without me setting anything. Please help me how can I go about this. The images in the menu are appearing cut even though it is the correct resolution. and each image is taking padding which doesn't allow all 3 to appear.

enter image description here

I want to build app in react native that able to scan and discover other mobile devices and in the same time able to advertise(broadcast). I mean that other mobile devices which using my app will be able to discover my phone and my phone will be able to discover other phones which using my app.

I tried many bluetooth libraries for react native but I couldn't find even one that able to do that.. Do you know anything or can explain me why it can't work?

Thank you

I am trying to build my React Native (0.61.5) solution, but when I am trying to run the below commands:

cd && ./gradlew assembleDebug
cd && ./gradlew clean

I get the following error:

Could not create a service of type ScriptPluginFactory using BuildScopeServices.createScriptPluginFactory().

Could not create service of type FileHasher using BuildSessionScopeServices.createFileSnapshotter().

Gradle Version : 5.5

Could you please advise me?

I have an already published (to Google Play) APK that was built by Expo. The key was also created by Expo. Until now everything works great.

I tried to build an app-bundle because now it is the recommended way to build apps for Android. It also helps to reduce app size.

I followed this documentation (that is not 100% clear). I ran expo opt-in-google-play-signing and followed the instructions. Eventually the certificates in Google Console were created successfully.

In Release Management > App Signing it now says "App signing by Google Play is enabled for this app".

But it looks like those certificates were not successfully uploaded to Expo (I am not sure if this is the problem).

I am building the app-bundle with this command: expo build:android -t app-bundle.

But the problem is when I am trying to upload the app-bundle in the Release Management in the console it says that the app is signed with a wrong upload certificate.

I tried everything that I was able to find in the searches but nothing helped.

I am completely lost. Can someone please instruct me how I can correctly build the app-bundle and successfully upload it to Google Play?

Hello Programmers,

I have some issue with React Navigation, I'm using createBottomTabNavigator to do Tab Navigator, but the icon it does not appear! and then replace the icon with the image it's work correctly and it's not the issue with the react native vector icon because I use them in other screen and it's work,

Version

"react-native-vector-icons": "^6.1.0"

"react-navigation": "^3.0.8"

Screen

Other Screen to use the RN vector Icon

My Code

import React, { Component } from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";

import Search from "./src/screen/Search";
import Home from "./src/screen/Home";
import Locations from "./src/screen/Locations";

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "Home",
        tabBarIcon: ({ tintColor }) => (
          <Image
            source={require("./assets/rainy.png")}
            style={{ width: 26, height: 26, tintColor: tintColor }}
          />
        )
      }
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: "Search",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-search" size={25} color="#4F8EF7" />;
        }
      }
    },
    Locations: {
      screen: Locations,
      navigationOptions: {
        tabBarLabel: "Location",
        tabBarIcon: ({ tintColor }) => {
          <Icon name="ios-map" size={25} color="#4F8EF7" />;
        }
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: "#e91e63",
      showIcon: true,
      showLabel: true,
      labelStyle: {
        fontSize: 14
      },
      style: {}
    },
    navigationOptions: {
      tabVisiable: true,
      activeTintColor: "red",
      animationEnabled: true
    }
  }
);

export default createAppContainer(TabNavigator);

I used react-native init MyApp to initialise a new React Native app. This created among others an Android project with the package com.myapp.

What's the best way to change this package name, for example to: com.mycompany.myapp?

I tried changing it in AndroidManifest.xml but it created other errors, so I'm assuming it's not the way.

Any idea?

I haven't done Android development in a while, so my knowledge of modern Android development is spotty.

I'm trying to learn React Native. I use WSL as my primary development environment. Since it'll probably be a pain to set up the Android emulator in Linux/WSL, I want to run the emulator directly on Windows. However, I'd prefer to be able to run react-native run-android in WSL.

How would I set up React Native to be able to run react-native run-android in WSL and run the app in an Android emulator on Windows?

My ANDROID_HOME variable should be set up correctly, but I don't know enough about Android to know if this is doing anything:

export ANDROID_HOME=/mnt/c/Users/Leo/AppData/Local/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

I want all screens on my app to appear below the status bar on both iOS and Android, so I'd either have to add a StatusBar component or a paddingTop to all my screens.

Is there a way to do this globally? Where is the appropriate top level component to add the StatusBar in a Redux app? (e.g. which part of https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)?

I am having an issue with React Native's this.setState() within a TextInput's onChangeText. I am trying to display the content of the TextInput in the Text tag below it. However, it displays nothing -- the setState() call never changes this.state.searchtext. I also get no errors. Thank you in advance for your help! Here is my code:

 export default class ShowScreen extends Component {
constructor(props) {
    super(props);
    this.state = {
        searchtext: ""
    };
}
render() {
    var thisscreen = (
        <View>
            <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                pagingEnabled={true}
            >
                <View
                    style={{
                        flex: 1,
                        height: totalheight,
                        justifyContent: "space-around",
                        alignItems: "center",
                        width: totalwidth,
                        backgroundColor: "#FF0000"
                    }}
                >
                    <TextInput
                        style={{ height: 80, fontSize: 20 }}
                        placeholder="placeholder"
                        value={this.state.searchtext}
                        onChangeText={searchtext =>
                            this.setState({ searchtext })
                        }
                        ref={input => {
                            this.textInput = input;
                        }}
                        returnKeyType="go"
                    />
                    <Text>{this.state.searchtext}</Text>
                </View>
            </ScrollView>
        </View>
    );
    return thisscreen;
}
}

Can't reproduce it, but see these crashlogs in Crashlytics in some of my apps.

RN 0.61.5 at one of app and 0.59.9 at another

Fatal Exception: java.lang.RuntimeException

Unable to create application *.MainApplication: java.lang.RuntimeException: java.io.IOException: Resource deadlock would occur

android.app.ActivityThread.handleBindApplication + 6288 (ActivityThread.java:6288)
com.android.internal.os.ZygoteInit.main + 975 (ZygoteInit.java:975)

Caused by java.lang.RuntimeException
java.io.IOException: Resource deadlock would occur

com.facebook.soloader.SoLoader.init + 192 (SoLoader.java:192)
*.MainApplication.onCreate + 119 (MainApplication.java:119)
android.app.Instrumentation.callApplicationOnCreate + 1158 (Instrumentation.java:1158)
com.android.internal.os.ZygoteInit.main + 975 (ZygoteInit.java:975)

MainApplication.java:119 ->

SoLoader.init(this, /* native exopackage */ false);

Any suggestion how to fix it?

In Native Android, we can change the button color in Alert Dialog as mentioned here.

How to perform similar styling for Alert in React Native?

Here is my code for Alert:

Alert.alert(
    'Alert Title',
    'Alert Message / Description?',
    [
        { text: 'No', onPress: () => this.actionNo() },
        { text: 'Yes', onPress: () => this.actionYes() }
    ],
    { cancelable: false }
);

Note: This is not duplicate. Here I've asked about how to use Alert dialog styling, without changing the implementation to Model.

Are there any metrics standards for Janky frames percentage?

What is the maximum acceptable percentage of Janky frames generated by dumspys gfxinfo report to indicate that the app is responding in an acceptable way?

What is the desired and reachable percentage of the Janky frames?

Docs says that The uiautomatorviewer tool is located in the /tools/bin directory. But I can't find it there. Emulator works fine but uiautomatorviewer is not in there. I've also checked platform-tools folder. Any ideas how to install it?

I am looking forward to building an android app in react-native. I have an exisitng native android application with let's say 10 modules. However, I only want the functionality of 2 of them in my new application. After extracting the required modules, I want to integrate react native with the new app and start developing my new app. I am new to android so don't know how to reuse the modules from the existing application. ANy ideas how to do that ?

I have read about android Dynamic Delivery using Android App Bundles to generate and serve optimized APKs for each user’s device configuration, so users download only the code and resources they need to run your app.

I have created an application using react-native. How can we enable the dynamic delivery based on the feature which is required by the user as feature delivery.

For example application has two features like Feature-A and Feature-B which is not required for all. So users will download the base APK from the Google Play store and later users will download the feature APK of their requirement or subscription.

I am trying to run a 2 years oldreact-native project. When I run my project, it showing the error

Invariant Violation: WebView has been removed from React Native. It can now be installed and imported from'react-native-webview' instead of 'react-native'. See https://github.com/react-native-community/react-native-webview

and

Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

but I haven't installed or used any package named react-native-webview or webview and I have updated all gradle files and the dependencies in package.json to the current versions

my package.json

"dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "axios": "^0.19.2",
    "native-base": "^2.13.8",
    "react": "^16.13.0",
    "react-native": "^0.61.5",
    "react-native-android-location-services-dialog-box": "^2.8.2",
    "react-native-drawer": "^2.5.1",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-firebase": "^5.6.0",
    "react-native-geocoding": "^0.4.0",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-google-places-autocomplete": "^1.4.1",
    "react-native-image-picker": "^2.3.1",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-maps": "^0.26.1",
    "react-native-paper": "^3.6.0",
    "react-native-permissions": "^2.0.9",
    "react-native-push-notification": "^3.1.9",
    "react-native-qrcode": "^0.2.7",
    "react-native-spinkit": "^1.5.0",
    "react-native-swiper": "^1.5.14",
    "react-native-switch": "^1.5.0",
    "react-navigation": "^4.2.2",
    "react-navigation-material-bottom-tabs": "^2.2.2",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.1.3",
    "toggle-switch-react-native": "^2.1.0"
  },

settings.gradle

rootProject.name = 'revamp_alpha_consumer'
    include ':react-native-spinkit'
    project(':react-native-spinkit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spinkit/android')
    include ':react-native-push-notification'
    project(':react-native-push-notification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-push-notification/android')
    include ':react-native-maps'
    project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
    include ':react-native-image-picker'
    project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
    include ':react-native-gesture-handler'
    project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
    include ':react-native-firebase'
    project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
    include ':react-native-fetch-blob'
    project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
    include ':react-native-android-location-services-dialog-box'
    project(':react-native-android-location-services-dialog-box').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-location-services-dialog-box/android')
    include ':@react-native-community_async-storage'
    project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
    apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

    include ':app'

android/app/build.gradle

dependencies {

    implementation project(':react-native-spinkit')
    implementation project(':react-native-push-notification')
    implementation project(':react-native-maps')
    implementation project(':react-native-image-picker')
    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-firebase')
    implementation project(':react-native-fetch-blob')
    implementation project(':react-native-android-location-services-dialog-box')
    implementation project(':@react-native-community_async-storage')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "com.google.android.gms:play-services-base:16.1.0"
    implementation "com.google.firebase:firebase-core:16.0.9"
    implementation "com.google.firebase:firebase-messaging:18.0.0"

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28

        supportLibVersion = "28.0.0"
        googlePlayServicesVersion = "16.1.0" // default: "+"
        firebaseVersion = "17.3.4" // default: "+"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.2")
        classpath 'com.google.gms:google-services:4.3.3'
    }
}
allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import bgMessaging from './components/bgMessaging';
import Root from './Root';

// YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
// AppRegistry.registerComponent('Alpharevamp', () => Root);

AppRegistry.registerComponent(appName, () => Root);
AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging); // <-- Add this line

I have tried to run it after install the 'react-native-webview' package and add its dependencies (no where used, only installed for check whether the error subsides). But the same error occurred.

error in browsererror in mobile screen

I create a FAB button, when clicks it displays RRSS icons for React-Native using the library NativeBase.

What I am trying to achieve is make all the Buttons or Icons inside the FAB have their own method with their own behaviour.

<Fab 
    direction="down" 
    position="topRight"
    style={styles.fab}
    active={fabActive}
    containerStyle={{ }}
    onPress={() => this.setState({ fabActive: !fabActive })}>
       <Image
             resizeMode='cover'
             source={itemsImage}
             style={styles.itemsLogo}
      /> 
      <Button style={styles.buttonFab} onPress={() => this.loginFacebook()}>
                        <FontAwesome5  style={styles.iconFab} name="facebook-f" />
      </Button>
      <Button style={styles.buttonFab} onPress={() => this.loginGoogle()}>
               <FontAwesome5 style={styles.iconFab} name="google-plus-g" />
      </Button>


</Fab>

When the FAB button is pressed, it shows the other 2 buttons. However when I click in these 2 buttons the method inside onPress is not being executed.