I need to open the website inside my react-native app. Needs to work for both iOS and Android

It seems like Expo only supports imagepicker for selecting one image rather than multiple images. Is there any way to pick multiple images without ejecting expo or starting new react-native-init?

Hi I'm trying to get an youtube player using react-native-youtube but I'm getting a black screen with an endless loading in android. It works well in iOS. Does someone have an idea why ?

Here is the code :

 <View>
          <YouTube
            apiKey="APIKEY"
            videoId={this.state.videoUrls} // The YouTube video ID
            play = {this.state.isPlaying} // control playback of video with true/false
            fullscreen = {this.state.fullscreen} // control whether the video should play in fullscreen or inline
            loop = {this.state.isLooping}// control whether the video should loop when ended
            onReady={e => this.setState({ isReady: true })}
            onChangeState={e => this.setState({ status: e.state })}
            onChangeQuality={e => this.setState({ quality: e.quality })}
            onError={e => this.setState({ error: e.error })}
            style={{ alignSelf: 'stretch', height: 250 }}
            />
</View>

EDIT : the code of the videoId

     <View style = {styles.containerPlaylist}>
          <View>
              {
                this.state.dataVideos.map((item,i) => 
                <TouchableHighlight
                key = {item.contentDetails.videoId}
                onPress = {()=> this.setState({videoUrls: item.contentDetails.videoId})}>
                <View style = {styles.vids}>
                  <Image
                    source = {{uri: item.snippet.thumbnails.medium.url}}
                    style = {{flex: 2, height: '100%', backgroundColor:'#fff', resizeMode:'contain'}}
                    />
                      <Text style = {styles.vidText}>{item.snippet.title}</Text>
                  </View>
                </TouchableHighlight>
                )}
          </View>
      </View>

How can I add a free map (not google maps) integration in react native. I don't want to use any google map services or google map.

I have tried Mapbox, leaflet map, openstreet map, and react native map, but all maps are integrated with Google.

Can anyone guide me if there are any free map service alternative to Google map.

I am the beginner of react native. I have a problem. I am trying to set sign up page with firebase but i couldn't do this. There is a compiler error that Unexpected token, expected ";" (29:21) This is my SignUp.js page

import React from 'react';
import Firebase from 'firebase';

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  Alert,
  Button

} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import SignUpNextBtn from '../components/SignUpNextBtn';
import Input from '../components/Input';

const SignUp: () => React$Node = () => {

componentWillMount() {
    const firebaseConfig = {
        apiKey: '****',
        authDomain: '****',
}
    firebase.initializeApp(firebaseConfig);
}

  return (
    <>
    <View style={styles.container}>
            <Input />
            <View style={styles.headBackground}>
                <Text>Sign Up</Text>
                <Text style={styles.logo}>Sign Up to{'\n'}GOLD#</Text>
                <Text style={styles.logoDescription}>Sign Up</Text>
            </View>
            <ScrollView>
                <View  style={styles.loginArea}>
                    <Image style={styles.userCheckImg} source={require('../assets/user-check.png')}/>
                    <Image style={styles.envelopeImg} source={require('../assets/envelope-alt.png')}/>
                    <Image style={styles.lockImg} source={require('../assets/lock-alt.png')}/>
                    <Image style={styles.mobileImg} source={require('../assets/mobile-android-alt.png')}/>
                    <Image style={styles.postcardImg} source={require('../assets/postcard.png')}/>
                    <Text>Welcome !</Text>
                    <Text>{'\n'}Name* </Text>
                    <Input />
                    <Text>Email* </Text>
                    <Input />
                    <Text>PIN* </Text>
                    <Input secureTextEntry={true}/>
                    <Text>ID </Text>
                    <Input />
                    <Text>Phone Number </Text>
                    <Input />
                </View>
            </ScrollView>
            <SignUpNextBtn />
        </View>
    </>
  );
};


const styles = StyleSheet.create({

  container: {
      flex: 1,
      paddingVertical:80,
      backgroundColor: '#F5FCFF',
    },
    headBackground: {
          position:"absolute",
          top:0,
          left:0,
          height:560,
          width:411,
          backgroundColor:'#F3EA79',

        },

    logo:{
        textAlign:'center',
        fontSize:40,
        fontWeight:'bold',
        color:'#FFF',
        width:200,
        height:100,
        top:10,
        left:45,


    },
    logoDescription:{
        textAlign:'center',
        color:'#f2f2f2'
    },
    loginArea:{
        marginHorizontal:40,
        marginVertical:40,
        backgroundColor:'#fff',
        padding:20,
        borderRadius:10,
        elevation:10
    },
    userCheckImg: {
            width: 15,
            height: 12.75,
            top:125,
            left:5,
            position:"absolute",
            alignItems:'flex-start'
          },
    envelopeImg: {
                width: 15,
                height: 12.75,
                top:215,
                left:5,
                position:"absolute",
                alignItems:'flex-start'
              },
    lockImg: {

                width: 15,
                height: 12,
                top:305,
                left:5,
                position:"absolute",
                alignItems:'flex-start'
              },
    postcardImg: {
                    width: 15,
                    height: 12.75,
                    top:395,
                    left:5,
                    position:"absolute",
                    alignItems:'flex-start'
                  },
    mobileImg: {
                width: 15,
                height: 12.75,
                top:480,
                left:5,
                position:"absolute",
                alignItems:'flex-start'
              },

});

export default SignUp;

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

Implemented a webview in react-native. if any normal URL is found in webview content then its highlighted and on the click it will redirect to url. But if in case any EmailId is found in the content, it is highlighted but on click its giving error. Want to open an email client on the device?

I tried: 'mailto: tester@gmail.com'

Hello. Do you want to view page 2 ?

if a valid url is present like:

Hello. Do you want to view page 2 ?

but if email is present like:

Hello. Do you want to view page 2 ?

It's giving error.

We want to open an email client when the user clicks on the redirection link. Please Suggest.

When I execute the command react-native run-android I get the following error message:

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.

Error message on device

I have read many solutions but they have not resolved the problem. I tried:

mkdir android/app/src/main/assets

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

react-native run-android

But when I execute command:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

This appears:

Message

I want to start react-native but I have been trying to solve this error for 3 days. Please help.

I'm trying to update gradle from 1.3.1 to 3.5, as some of my dependencies requires version 3.3 or above.

I've seen similar questions, but none of them help.

build.gradle:

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5'
    }
}

gradle-wrapper.properties:

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-3.5-all.zip

Still i'm getting this when trying to do anything (build, clean etc):

Building and installing the app on the device (cd android && ./gradlew installDebug...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'chat'.
> Could not resolve all dependencies for configuration ':classpath'.
   > Could not find com.android.tools.build:gradle:3.5.
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/build/gradle/3.5/gradle-3.5.pom
         https://jcenter.bintray.com/com/android/tools/build/gradle/3.5/gradle-3.5.jar
     Required by:
         project :

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

I try to get react-native-firebase v6 to work in my app. I use React Native 0.59.10.

I have installed react-native-firebase v6 according to the documentation. It didn't specify about adding service MyFirebaseMessagingService into the AndroidManifest.xml unlike in v5 so I didn't do it. Afterwards, the app didn't receive any notification while in foreground but did receive them while in background.

I tried to add MyFirebaseMessagingService into AndroidManifest.xml like so:

<service
    android:name=".java.MyFirebaseMessagingService"
    android:exported="false">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

There was some sort of a progress. The app crashed immediately after I sent a notification from Firebase console. Hence, I knew the app was aware of incoming notification but somehow crashed.

Below is my code to import and initialize a listener.

import messaging from '@react-native-firebase/messaging';
import { Alert } from 'react-native';

// Initialize notifications
const init = () => {
    try {
        messaging().onMessage((message) => {
            Alert.alert('Received', JSON.stringify(message));
        });
    } catch (err) {
        Alert.alert('Error', err.message);
    }
};

In summary, I expect to receive a notification while the app is in foreground but nothing happens if I don't add MyFirebaseMessagingService to AndroidManifest.xml. If I add it, the app will crash on receiving notification.

Thanks in advance.

I tried to install Realm 3.3.0 on react native and after generating the build when the app opens it crashes. I use

"react": "16.8.6",
"react-native": "0.60.5"

My gradle are

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 21
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

I put up the log cat and i am getting the following;

beginning of crash
2019-10-24 18:07:16.929 11412-11498/com.xxxxx.xxxxx E/AndroidRuntime: FATAL EXCEPTION: create_react_context
Process: com.xxxx.xxxxx, PID: 11412
java.lang.UnsatisfiedLinkError: couldn't find DSO to load: librealmreact.so caused by: dlopen failed: library "libjsc.so" not found
at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:738)
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:591)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:529)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:484)
at io.realm.react.RealmReactModule.<clinit>(RealmReactModule.java:56)
at io.realm.react.RealmReactPackage.createNativeModules(RealmReactPackage.java:31)
at com.facebook.react.ReactPackageHelper.getNativeModuleIterator(ReactPackageHelper.java:42)
at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:41)
at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1215)
at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1185)
at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1123)
at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:124)
at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:948)
at java.lang.Thread.run(Thread.java:764)

Is there any work around for this ??

I'm working on react native Android and face problem for hardware back button my react native version is 0.44.2 and I'm using BackHandler below is my code for the back button:

BackHandler.addEventListener("hardwareBackPress", () => {
  if (this.navigator && this.navigator.getCurrentRoutes().length > 1){this.navigator.pop()
return true // do not exit app
} else {
return false // exit app
}})

I got the following error:

i would really appreciate some help with this issue.

Basically i am trying to pass my current latitude and longtitude via var1 and var2 into the coordinates of the initial region. However, upon running this code there will be an error message stating that Warning: Failed prop type: The prop initialRegion.latitude is marked as required in MapView, but its value is undefined.

I have printed out the value of var1 and var2 to console and it can be seen that they are numbers and are definitely not undefined. Can someone please kindly explain to me what is going on and recommend a solution?

import React, { Component } from 'react';
import { Platform, Text, View, StyleSheet,Dimensions } from 'react-native';
import  MapView, { Marker } from 'react-native-maps';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = 
    {
      region : 
      {
        latitude: 1.290270,
        longitude: 103.851959,
        latitudeDelta: 0.02,
        longitudeDelta: 0.02,
      },
      location: null,
      errorMessage : null,

    }
  }
  componentWillMount() {
    if (Platform.OS === 'ios' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      this._getLocationAsync();
    }
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }

    let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
  };

  render() {
    let text = 'Waiting..';
    if (this.state.errorMessage) {
      text = this.state.errorMessage;
    } else if (this.state.location) {
      var1 = (this.state.location.coords.latitude);
      var2 = (this.state.location.coords.longitude);
      console.log(var1);
      console.log(var2 +" "+typeof(var2));

    }

    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>{this.var1, this.var2}</Text>
        <MapView 
        style={styles.mapStyle}  
        initialRegion={{latitude: this.var1,longitude: this.var2, latitudeDelta:0.02, longitudeDelta: 0.02}}
        >
            <Marker
              coordinate={{latitude: 1.290270, longitude: 103.851959}}
              title={'Singapore'}
              description={'Sg505'}
            />
        </MapView> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  mapStyle: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

I'm getting the following error:

In case that there isn't any duplicated packages or imports in MainApplication.java.

Here is my MainApplication.java:

package com.myfirebaseapp;

import android.app.Application;
import android.util.Log;

import com.facebook.react.PackageList;
import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
import com.facebook.react.bridge.JavaScriptExecutorFactory;
import com.facebook.react.ReactApplication;
import io.invertase.firebase.RNFirebasePackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;


import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;



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.add(new RNFirebasePackage());
      packages.add(new RNFirebaseMessagingPackage());
      packages.add(new RNFirebaseNotificationsPackage());
      // 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);
  }
}

I took a look in other Questions but all said that there must have some duplicated packages or imports but I don't have any. If there is someone that had this error before or can tell me how to fix it?

Another error I get when I put "new MainReactPackage()" (as I know it must be there, but it is not) is -"... can't find/read simbol -MainReactPackage...".

Please Help :D

I am trying to debug a crash reported by Firebase Crashlytics found in the latest version of my app.

The error seems somewhat obfuscated (despite having uploaded a ProGuard mapping file) and based on the vagueness of the error I am struggling to pinpoint the issue.

I fully understand the Text strings must be rendered within a <Text> component error description - but this error didn't show up in testing and seems to be something to do with the latest release build.

If anyone knows any tips as to how I can pinpoint where this fatal exception is occurring, I would appreciate it.

All I can determine is that the error occurs in a subview of a ScrollView component. Is there anything else that can be taken from this message to help me determine the cause?

Invariant Violation: Invariant Violation: Text strings must be rendered within a component. This error is located at: in RCTView in RCTView in RCTView in RCTView in RCTScrollView in h in RCTView in n in _ in p in RCTView in RCTView in l in RCTView in n in RCTView in u in RCTView in u in PanGestureHandler in n in S in P in p in RCTView in u in RCTView in u in n in n in E in RCTView in n in RCTView in u in PanGestureHandler in n in L in RCTView in n in t in P in v in RCTView in n in A in s in Unknown in RCTView in RCTView in c This error is located at: in A in s in Unknown in RCTView in RCTView in c, stack: v@82:187 Pa@82:69549 _a@82:68342 Ea@82:66044 Ea@-1 xa@82:64787 xa@-1 pn@82:25281 dn@82:25187 Ue@82:81498 Me@82:13499 Fe@82:13672 receiveEvent@82:14058 value@23:3518 @23:822 value@23:2772 value@23:794 value@-1

proguard-rules.pro:

-keep class io.invertase.firebase.** { *; }
-dontwarn io.invertase.firebase.**

-keep class com.crashlytics.** { *; }
-dontwarn com.crashlytics.**

# Crashlytics
-keepattributes *Annotation*
-keepattributes SourceFile,LineNumberTable
-keep public class * extends java.lang.Exception

react-native run-android not starting bundler so i tried react-native start it showing below error.

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  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                                    │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::8081
    at Server.setupListenHandle [as _listen2] (net.js:1286:14)
    at listenInCluster (net.js:1334:12)
    at Server.listen (net.js:1421:7)
    at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:157:18
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:156:12)
    at Generator.next (<anonymous>)
    at step (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:262)
    at /Users/user/Documents/Prasanth/AwesomeProject/node_modules/metro/src/index.js:47:422
Emitted 'error' event at:
    at Server.WebSocketServer._onServerError (/Users/user/Documents/Prasanth/AwesomeProject/node_modules/ws/lib/WebSocketServer.js:82:50)
    at Server.emit (events.js:187:15)
    at emitErrorNT (net.js:1313:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)

react-native info

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM)2 Duo CPU     E7600  @ 3.06GHz
      Memory: 3.36 GB / 12.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.12.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
      Android SDK:
        Build Tools: 21.1.2, 23.0.1, 25.0.0, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
        API Levels: 21, 22, 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.0/10A255 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: 0.57.2 => 0.57.2 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I tried cleaning cache and reverse adb still am getting that issue

react-native run-android showing below error.

Android Home configuration

export ANDROID_HOME=/<Path>/android-sdk-macosx
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

How to resolve this issue.

I've created a new React Native app and upgraded everything to latest versions (React Native, components, Gradle), yet I'm getting the following error when trying to build and deploy to device) - this is the output in VS Code terminal:

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

PS C:\myAppFolder\MyApp\MyApp> react-native run-android
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1187 file(s) to forward-jetify. Using 4 workers...
info JS server already running.
info Installing the app...
Starting a Gradle Daemon (subsequent builds will be faster)

> Configure project :app
...
.../*more debugging progress output here*/..
...
ace
 unimodules-sensors-interface@3.0.0 from C:\myAppFolder\MyApp\MyApp\node_modules\unimodules-sensors-interface
 unimodules-task-manager-interface@3.0.0 from C:\myAppFolder\MyApp\MyApp\node_modules\unimodules-task-manager-interface

> Task :expo-constants:compileDebugJavaWithJavac

> Task :expo-constants:compileDebugJavaWithJavac FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.6.1/userguide/command_line_interface.html#sec:command_line_warnings
84 actionable tasks: 1 executed, 83 up-to-date
C:\MyAppFolder\MyApp\MyApp\node_modules\expo-constants\android\src\main\java\expo\modules\constants\ConstantsService.java:6: error: cannot find symbol
import androidx.annotation.Nullable;
                          ^
  symbol:   class Nullable
  location: package androidx.annotation
C:\MyAppFolder\MyApp\MyApp\node_modules\expo-constants\android\src\main\java\expo\modules\constants\ConstantsService.java:51: error: cannot find symbol
  @Nullable
   ^
  symbol:   class Nullable
  location: class ConstantsService
2 errors

FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':expo-constants:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6m 2s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
C:\MyAppFolder\MyApp\MyApp\node_modules\expo-constants\android\src\main\java\expo\modules\constants\ConstantsService.java:6: error: cannot find symbol
import androidx.annotation.Nullable;
                          ^
  symbol:   class Nullable
  location: package androidx.annotation
C:\MyAppFolder\MyApp\MyApp\node_modules\expo-constants\android\src\main\java\expo\modules\constants\ConstantsService.java:51: error: cannot find symbol
  @Nullable
   ^
  symbol:   class Nullable
  location: class ConstantsService
2 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':expo-constants:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 6m 2s

    at checkExecSyncError (child_process.js:616:11)
    at execFileSync (child_process.js:634:15)
    at runOnAllDevices (C:\MyAppFolder\MyApp\MyAPp\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:74:39)
    at buildAndRun (C:\MyAppFolder\MyApp\MyAPp\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)
    at C:\MyAppFolder\MyApp\MyAPp\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
    at async Command.handleAction (C:\MyAppFolder\MyApp\MyApp\node_modules\react-native\node_modules\@react-native-community\cli\build\cliEntry.js:160:7)

I've tried adding the following to ./android/gradle.properties to make sure the project, but that seems to be causing other types of issues

android.useAndroidX=true
android.enableJetifier=true

Here's my package.json

{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.1",
    "expo": "^34.0.4",
    "react": "16.9.0",
    "react-dom": "^16.9.0",
    "react-native": "0.60.5",
    "react-native-elements": "^1.2.0",
    "react-native-gesture-handler": "~1.4.1",
    "react-native-reanimated": "~1.2.0",
    "react-native-unimodules": "~0.5.4",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.0",
    "react-navigation-tabs": "^2.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "babel-jest": "24.9.0",
    "jest": "24.9.0",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "0.56.0",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

Jetifier (which migrates all non-native Android modules to AndroidX) - seems to be the suggested solution, but I have that in place (Jetifier runs automatically on build - as seen above) and it doesn't help.

Any suggestions would be appreciated.

Im trying to get work Material Icon.ToolbarAndroid on React Native App but its not working

Info Fetching system and libraries information...
System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
    Memory: 1.89 GB / 15.61 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.12.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  SDKs:
    Android SDK:
      API Levels: 23, 27, 28
      Build Tools: 27.0.3, 28.0.3
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.0-rc.3 => 0.61.0-rc.3 
  npmGlobalPackages:
    react-native-cli: 2.0.1

This is my code

<Icon.ToolbarAndroid
                navIconName={
                  activeRoute.name === routes[0].name ? "menu" : "arrow-left"
                }
                titleColor="#fff"
                title={activeRoute.name}
                onIconClicked={
                  activeRoute.name === routes[0].name ? showMenu : goBack
                }
                overflowIconName="dots-vertical"
                style={{ height: 56 }}
                actions={[
                  { title: "About", show: "never", iconName: "information-outline" },
                  { title: "Credits", show: "never", iconName: "account-circle" }
                ]}
                onActionSelected={this.onActionSelected}
                iconColor={'white'} iconSize={24} logoName={'home'}/>

Here you can find the error

https://ibb.co/Y8JtyC5

I'm creating a simple action button (floating button)

This is working :

<View style={{
    width: this.props.size,
    height: this.props.size,
    borderRadius: this.props.size / 2,
    backgroundColor: '#ee6e73',
    position: 'absolute',
    bottom: 10,
    right: 10,
    flexDirection:'row'
}}>
    <Text>
        +
    </Text>
</View>

This is not :

<TouchableOpacity
        onPress={()=>{
        }} >
    <View style={{
        width: this.props.size,
        height: this.props.size,
        borderRadius: this.props.size / 2,
        backgroundColor: '#ee6e73',
        position: 'absolute',
        bottom: 10,
        right: 10,
        flexDirection:'row'
    }}>
        <Text>
            +
        </Text>
    </View>
</TouchableOpacity>

Just wrap with TouchableOpacity then my button not show up without any errors.

React 0.1.7, Android

Then I try move styling from View to TouchableOpacity, It's work

<TouchableOpacity
        onPress={()=>{
        }} 
        style={{
            width: this.props.size,
            height: this.props.size,
            position: 'absolute',
            borderRadius: this.props.size / 2,
            backgroundColor: '#ee6e73',
            bottom: 10,
            right: 10,
        }}>
    <Text>
        +
    </Text>
</TouchableOpacity>

Can any one explain me why?

React Native docs said

[https://facebook.github.io/react-native/docs/touchableopacity.html][1]

A wrapper for making views respond properly to touches. This is done without actually changing the view hierarchy, and in general is easy to add to an app without weird side-effects.

This mean I wrap my original view and it would work as I expected, But it's not.

I've got an absolute positioned View that holds 3 TouchableOpacity components and the 3 fail to respond they are just not working at all, what is going wrong here please help me :)

Code

<View style={[styles.highNormalLowDocListHeaderStateContainer, {width: this.windowWidth, height: this.headerSmallHeight, position: 'absolute', left: 0, top: floatedHeaderTitleTop, elevation: 2}]}>
    <TouchableOpacity onPress={() => this.getDocuments('high')} style={[styles.highNormalLowDocListHeaderStateTextContainer, highSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, highSelected.textStyle]}>HIGH</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('normal')} style={[styles.highNormalLowDocListHeaderStateTextContainer, normalSelected.borderStyle]}>
        <Text style={[styles.highNormalLowDocListHeaderStateText, normalSelected.textStyle]}>NORMAL</Text>
    </TouchableOpacity>
    <TouchableOpacity onPress={() => this.getDocuments('low')} style={[styles.highNormalLowDocListHeaderStateTextContainer, lowSelected.borderStyle]}>
        <Text style {[styles.highNormalLowDocListHeaderStateText, lowSelected.textStyle]}>LOW</Text>
    </TouchableOpacity>
</View>

Screenshot

I currently distribute an app over the Play Store. I use Android App Bundles for better download experience. Besides other libraries, I use react-native. Now I get multiple reportings from different users, that the app won't start. Looking into the error logs I received the error message looks like this:

Fatal Exception: java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libreactnativejni.so
       at com.facebook.soloader.SoLoader.doLoadLibraryBySoName + 738(SoLoader.java:738)
       at com.facebook.soloader.SoLoader.loadLibraryBySoName + 591(SoLoader.java:591)
       at com.facebook.soloader.SoLoader.loadLibrary + 529(SoLoader.java:529)
       at com.facebook.soloader.SoLoader.loadLibrary + 484(SoLoader.java:484)
       at com.facebook.react.bridge.ReactBridge.staticInit + 31(ReactBridge.java:31)
       at com.facebook.react.bridge.NativeMap.<clinit> + 19(NativeMap.java:19)
       at com.facebook.react.jscexecutor.JSCExecutorFactory.create + 25(JSCExecutorFactory.java:25)
       at com.facebook.react.ReactInstanceManager$5.run + 944(ReactInstanceManager.java:944)
       at java.lang.Thread.run + 776(Thread.java:776)

The configuration in my build.gradle looks like this:

ndk.abiFilters 'armeabi-v7a','arm64-v8a'

and if I unpack my app bundle, there is a lib folder containing an armeabi-v7a folder as well as an arm64-v8a folder. Inside those folder all the necessary library files are present, including libreactnativejni.so But there is one detail in all the error reports. My app uses ArCore and is therefore only compatible with specific devices. All the crashes I received come form devices, which don't support ArCore naturally, which means, that those devices are rooted but still downloaded the app from the Play Store. Do Android App Bundles not work with rooted devices or is there any other error I'm making?