I can't find this information. Is it true that Android React Native runs on sdkMin18 and therefore makes it supported by most android versions?

i'm building an notifications on my Android. Stuck on problem, where i need to create NotificationChannel.

getting error - Attempt to invoke virtual method 'java.lang.Object com.facebook.react.bridge.ReactApplicationContext.getSystemService(java.lang.Class)' on a null object reference

NotificationService.java

package com.notifications;

import android.util.Log;
import android.widget.Toast;

import android.content.Context;
import android.content.Intent;
import android.app.NotificationManager;
import android.app.NotificationChannel;
import android.app.Notification;
import android.app.PendingIntent;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import android.os.Build;
import androidx.core.app.NotificationCompat;
import androidx.core.app.NotificationManagerCompat;
import androidx.core.app.NotificationCompat.Builder;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.ReactPackage;
import android.net.Uri;
import android.app.NotificationManager.Policy;
public class NotificationService extends ReactContextBaseJavaModule {
  private ReactApplicationContext reactContext;

  public NotificationService(ReactApplicationContext reactContext) {
    super(reactContext);
      Log.i("NotificationService", "NotificationService Constructor");

    createNotificationChannel();
    displayNotification();
  }

  private void displayNotification() {
      Log.i("NotificationService", "NotificationService test");
    Intent intent = new Intent();
      intent.setAction(Intent.ACTION_SEND);
      intent.putExtra(Intent.EXTRA_TEXT, "textMessage");
      intent.setType("text/plain");
    intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
    Uri uri = intent.getData();

    Log.i("NotificationService", "URI "+uri.toString());
    PendingIntent pendingIntent = PendingIntent.getActivity(this.reactContext, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT);

    String CHANNEL_ID = "notificationsChannel";
    NotificationCompat.Builder builder = new NotificationCompat.Builder(this.reactContext, CHANNEL_ID);
      // builder.setSmallIcon(17301575);
      builder.setContentTitle("Notifiks");
      builder.setContentText("Narmal teksts");
      builder.setPriority(NotificationCompat.PRIORITY_DEFAULT);
      builder.setContentIntent(pendingIntent);
      // builder.setAutoCancel(false);

    NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this.reactContext);
    notificationManager.notify(123, builder.build());
  }

  private void createNotificationChannel() {
    String CHANNEL_ID = "notificationsChannel";

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
      CharSequence name = new StringBuffer("charsequence");
      String description = "kkads apraksts";
      int importance = NotificationManager.IMPORTANCE_HIGH;
      NotificationChannel channel = new NotificationChannel(CHANNEL_ID, name, importance);
        channel.setDescription(description);
        NotificationManager notificationManager = reactContext.getSystemService(NotificationManager.class);
          notificationManager.createNotificationChannel(channel);
    }
  }

  @Override
  public String getName() {
    return "NotificationService";
  }
}

Looks like the problem is with

  NotificationManager notificationManager = reactContext.getSystemService(NotificationManager.class);
          notificationManager.createNotificationChannel(channel);

I am building a react-native android app in gitlab-ci using the reactnativecommunity/react-native-android docker image. If i understood correctly, react-native needs watchman in order to build the bundle.

But I noticed that watchman is not installed on the docker image and I don't install it in the .gitlab-ci.yml. Also, when I add which watchman or watchman watch-del-all to the .gitlab-ci.yml, it returns watchman: command not found.

But how is react-native then able to build the bundle?

I have two separate images one is the main image that clicks from the camera and another image I am picking from gallery its a logo, I need to combine these two images and make new image so that I can save that image into gallery and share on social media I need to do this with react native thanks for the help

<Image
    style={{width: width, height: height*.7}}
    source={{ uri: imageAdress }} />
<Image 
   source={this.state.avatarSource} 
   style={{width: 80, height: 80, position:'absolute', top: 20, left: 20}} />

Here are the two images now i need to combine them.

So my basic fear arises from the fact that i recently found out a website dedicated to listing products that google has killed overtime https://killedbygoogle.com/. And considering the fact that google hasn’t used flutter in any of it’s flagship products (completely, partly they have, which isn’t mission critical anyways) is just ironic to me.

Here is a small excerpt from https://ionicframework.com/resources/articles/ionic-vs-flutter-comparison-guide which has forced me to rethink whether i should build my app on flutter or not considering the Longevity of the platform.

Future-friendly

The last thing to consider is the shelf-life of your project, and the freedom and flexibility that you’ll have as your app matures.

For Flutter developers, you’re putting all of your eggs in the Flutter basket, meaning if Google kills the project (they never do that though, right?), you’ll be left with a skillset and codebase that are effectively homeless.

With Ionic, you’re betting on the web, so that even if you choose to build on other platforms in the future, everything you build will still be based on open web standards. And, because Ionic relies on Web Components, you can use it with any JS framework. That’s important, because while React and Vue are hot today, that could change tomorrow. And with Ionic you’ll have the freedom to take advantage of whatever tomorrow brings.

I won’t ask you for an alternative because that deserves a whole topic on its own but hypothetically, if google does decide to kill flutter, how should i migrate my product? Is my entire codebase going to useless?

I'm hand drawing a Polyline but it's really slow, is it a way to improve it? When the finger moves slow over the map the Polyline really gets rendered in a laggy way.

I'm using: "react-native": "0.59.10","react-native-map-clustering": "^3.1.2","react-native-maps": "^0.25.0".

Here is the code I'm using:

constructor(args) {
  this.state={
    regionLocal: {latitude: 37.78825,
                  longitude: -122.4324,
                  latitudeDelta: 0.1022,
                  longitudeDelta: 0.0521
              },
    polylines: [],               
    editing: null
  }
}

onPanDrag(e) {
  const { editing } = this.state;
  if (!editing) {
    this.setState({
      editing: {
        id: id++,
        coordinates: [e.nativeEvent.coordinate],
      },
    });
  } else {
    this.setState({
      editing: {
        ...editing,
        coordinates: [...editing.coordinates, e.nativeEvent.coordinate],
      },
    });
  }
}

render() {
  return (
      <MapView  mapRef={ref => this.map = ref}
          style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0
          }} 
          initialRegion={this.state.regionLocal}
          showsUserLocation={true}
          showsPointsOfInterest={true}
          showsBuildings={true}
          showsMyLocationButton={false}
          loadingEnabled={true}
          clusterColor={"#140c98"}
          spiderLineColor={"#140c98"}
          radius={30}
          moveOnMarkerPress={false}
          maxZoom={13}
          scrollEnabled={false}
          onPanDrag={(e)=>{this.onPanDrag(e)}}>
              {this.state.polylines.map(polyline => (<Polyline
                    key={polyline.id}
                    coordinates={polyline.coordinates}
                    strokeColor="#000"
                    fillColor="rgba(255,0,0,0.5)"
                    strokeWidth={1}
                  />
                ))}
                {this.state.editing && (<Polyline
                    key="editingPolyline"
                    coordinates={this.state.editing.coordinates}
                    strokeColor="#F00"
                    fillColor="rgba(255,0,0,0.5)"
                    strokeWidth={1}
                  />
                )}</MapView>
  )}

Also Here's an example of the way I want it to work:

I was thinking to do an app that using bluetooth and able to find other devices (iPhone and android devices) and my device will be discoverable. I mean that my device will be able to find other phone devices and other devices will be able to find my phone. All of that using bluetooth.

My app should be in react native... I was looking on two different libraries: react-native-ble-manager and react-native-ble-plx but I couldn't find a way that my device will be discovered while im scanning to find other devices...

How can I set focus to the first (or any given) TouchableHighlight component inside the modal when it's opened? I'm using D-pad/kayboard/TV Remote

Let's use the fragment of the react-native documentation modal example:

<View style={{marginTop: 22}}>
  <Modal
    animationType="slide"
    transparent={false}
    visible={this.state.modalVisible}
    onRequestClose={() => {
      Alert.alert('Modal has been closed.');
    }}>
    <View style={{marginTop: 22}}>
       <View>
          <TouchableHighlight>
            <Text>Button 1</Text>
          </TouchableHighlight>
          <TouchableHighlight>
            <Text>Button 2</Text>
          </TouchableHighlight>
          <TouchableHighlight
             onPress={() => {     
           this.setModalVisible(!this.state.modalVisible);
             }}>
             <Text>Hide Modal</Text>
           </TouchableHighlight>
        </View>
     </View>
  </Modal>
  <TouchableHighlight
     onPress={() => {
       this.setModalVisible(true);
     }}>
     <Text>Show Modal</Text>
  </TouchableHighlight>
</View>

Navigation with D-pad works, but when the modal is opened, the first TouchableHighlight (button 1) is not focused, focus remains on the "Show Modal" button Or, How can I set focus on the "Button 2" TouchableHighlight programatically?

TextInput for example has autoFocus, but TouchableHighlight no, if we are using only Touchable components inside a modal, I don;t know how to autoFocus them, or set implicitely it

Best Regards

I am trying to install react-devtools with this code

sudo npm install -g react-devtools

after running this command, I am getting this error.

/usr/local/bin/react-devtools -> /usr/local/lib/node_modules/react-devtools/bin.js

> electron@1.6.11 postinstall /usr/local/lib/node_modules/react-devtools/node_modules/electron
> node install.js

/usr/local/lib/node_modules/react-devtools/node_modules/electron/install.js:47
  throw err
  ^

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-devtools/node_modules/electron/.electron'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@1.6.11 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the electron@1.6.11 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/jayakrishnan/.npm/_logs/2017-08-07T11_22_05_742Z-debug.log

How can I correct this? I am desperately in need of devtools for debugging. If possible, please suggest better debugging tools for React Native.

I have created a project using Expo XDE. I checked this Can't load expo app: Something went wrong but I have already enabled "Draw over other apps". It works https://expo.io/@ajaysaini/first-proj when I scan this QR code but it doesn't when I run it on android device from XDE.

main.js

import Expo from 'expo';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Updating!</Text>
      </View>
    );
  }
}

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

Expo.registerRootComponent(App);

When I am running it on device it shows below error on android device. I tried restart in XDE multiple times but it didn't help me.

Dependency graph loaded.
11:19:21 AM
Starting React Native packager...
11:19:24 AM
Scanning 528 folders for symlinks in D:\Expo\first-proj\first-proj\node_modules (18ms)
11:19:24 AM
Loading dependency graph.
11:19:24 AM
Running packager on port 19001.
11:19:25 AM
11:19:33 AM
Project opened! You can now use the "Share" or "Device" buttons to view your project.
11:19:44 AM
Opening on Android device
11:19:54 AM
Dependency graph loaded.
11:21:41 AM
Opening on Android device
11:23:31 AM
Opening on Android device

Error:

There was an unhandled error: Could not load exp://
Stack Trace:

Can anyone help me what is going wrong ?

Unable to resolve "@expo/vector-icons/Fontisto" from "node_modules/react-native-dynamic-vector-icons/lib/components/Icon.tsx" How to solve this?

I have created a custom 'Autocomplete' component that has a TextInput and an absolute positioned dropdown that triggers when you type certain characters in it. In the dropdown, there are list items that are touchable and should trigger a function to fill the TextInput when pressed on.

On the screen component, I have included this 'Autocomplete' component four times. When I trigger the dropdown and try pressing on one of those list items within it, its like it ignores the dropdown completely and just lets me focus into the next 'Autocomplete' component's TextInput that is actually layered below the dropdown.

My code works perfectly fine on iOS devices but on Android, it has presented problems.

View the gif of the issue

Link to the Snack Expo: https://snack.expo.io/@nicocodes/hello-textinput

(Ignore the fact that Web and iOS doesn't work for this example. I copied in only some sections of my app to show my issue on Android.)

Would anyone have a solution for this?

For example, I have a download manager to download something in a class and will run as foreground service in android using headless js.

I would like to have a page to display the status of the download.

However, the page component will be mounted or unmounted due to user actions.

So how can I hook the downloading status, which will be stored in the download manager class and display it in the page whenever user open the page?

I tried whenever the page's components is mounted, I pass the pointer to the download manager. But it seems not work. Below is what I tried

Download Manager:

class DownloadManager{
    public static pointer;


    async download() {
        //download code
        //when download update
        DownloadManager.pointer.setState({status:status})
    }
}

my page:

class BackupPage extends React.Component<any, any> {

    componentDidMount() {
        DownloadManager.pointer = this
    }

    render() {
        //render code
    }
}

I need to compare my app's version with the latest version from PlayStore/AppStore. I used react-native-version-check but it's not working properly for my app. Is there a way to call directly to the stores which will contain the version in the response? (using react native)

The issue I have is that since android api version 29+, Android doesn't allow you to read media file with file:///path/to/the/file.jpg so when I try to render images from gallery, I can't render it in the JS side using component from react-native because I can't use uri. Has anyone figured out way to work around?

I am making react native application and one screen I am used webview for that and I want to handle onNavigationStateChange props one time call right now it is calling multiple times so any idea how can I solve this issue. refer below code

<WebView 
         ref={r => this.webview = r}
         style={{width:globals.screenWidth, height:globals.screenHeight}}
         bounces={false}
         style={{ flex: 1 }}
         startInLoadingState
         scalesPageToFit
         javaScriptEnabledAndroid={true}
         javaScriptEnabled={true}
         domStorageEnabled = {true}
         onNavigationStateChange={data =>
            this.handleNavigationStateChange(data)
        }
         onLoadStart={() => {
             console.log("onLoadStart-->");
         }}
         onLoadEnd={() => {
            console.log("onLoadEnd-->");
         }}
         source={{uri: globals.MYURL}}
         onError={(error) => this.onError()}
        />


handleNavigationStateChange = navState => {
    console.log("navState >>>>" + JSON.stringify(navState));

};

When i run above code navState >>>> print 3 times I want to handle it 1 time so how can I solve this issue? Your all suggestions are appreciable.

I'm trying to run my first React Native project for first time on my device (Android 4.2.2).

And I get:

unable to load script from assets index.android.bundle

Commands that I used:

1. cd (project directory)
2. react-native start
3. react-native run-android

I want to setup a Staging, Live, and Development environment in React Native for both iOS and Android Platform. How should I do that? What should be the structure of the Application?

I have djinni installed in my react native project. I try to run my react native project, but i got this warning in my terminal

Package djinni has been ignored because it contains invalid configuration.

after that i got this error.

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.5/userguide/command_line_interface.html#sec:command_line_warnings
24 actionable tasks: 2 executed, 22 up-to-date

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 app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:externalNativeBuildDebug'.
> Build command failed.
  Error while executing process /home/pandusudo/Android/Sdk/ndk-bundle/ndk-build with arguments {NDK_PROJECT_PATH=null APP_BUILD_SCRIPT=/home/pandusudo/Public/mobile-je/android/app/src/main/jni/Android.mk NDK_APPLICATION_MK=/home/pandusudo/Public/mobile-je/android/app/src/main/jni/Application.mk APP_ABI=x86 NDK_ALL_ABIS=x86 NDK_DEBUG=1 APP_PLATFORM=android-16 NDK_OUT=/home/pandusudo/Public/mobile-je/android/app/build/intermediates/ndkBuild/debug/obj NDK_LIBS_OUT=/home/pandusudo/Public/mobile-je/android/app/build/intermediates/ndkBuild/debug/lib /home/pandusudo/Public/mobile-je/android/app/build/intermediates/ndkBuild/debug/obj/local/x86/libhelloworld.so}
  [x86] SharedLibrary  : libhelloworld.so

  src/main/jni/../../../../../djinni/jni/NativeHelloWorld.cpp:26: error: undefined reference to 'helloworld::HelloWorld::create()'
  clang++: error: linker command failed with exit code 1 (use -v to see invocation)
  make: *** [/home/pandusudo/Android/Sdk/ndk-bundle/build/core/build-binary.mk:725: /home/pandusudo/Public/mobile-je/android/app/build/intermediates/ndkBuild/debug/obj/local/x86/libhelloworld.so] Error 1


* 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 8s

Trying to run a project on react-native 0.55.2 using "react-native run-android" but getting the following error screenshot

Configure project :rn-fetch-blob WARNING: The following project options are deprecated and have been removed: android.useDeprecatedNdk NdkCompile is no longer supported

Task :react-native-ble-manager:compileDebugJavaWithJavac FAILED E:\premisehq-mobile-react-native\node_modules\react-native-ble-manager\android\src\main\java\it\innove\LollipopPeripheral.java:7: error: cannot find symbol import android.support.annotation.RequiresApi; ^ symbol: class RequiresApi location: package android.support.annotation E:\premisehq-mobile-react-native\node_modules\react-native-ble-manager\android\src\main\java\it\innove\LollipopPeripheral.java:17: error: cannot find symbol @RequiresApi(Build.VERSION_CODES.LOLLIPOP) ^ symbol: class RequiresApi E:\premisehq-mobile-react-native\node_modules\react-native-ble-manager\android\src\main\java\it\innove\LollipopScanManager.java:11: error: cannot find symbol import android.support.annotation.RequiresApi; ^ symbol: class RequiresApi location: package android.support.annotation E:\premisehq-mobile-react-native\node_modules\react-native-ble-manager\android\src\main\java\it\innove\LollipopScanManager.java:20: error: cannot find symbol @RequiresApi(Build.VERSION_CODES.LOLLIPOP) ^ symbol: class RequiresApi Note: E:\premisehq-mobile-react-native\node_modules\react-native-ble-manager\android\src\main\java\it\innove\LegacyScanManager.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. 4 errors

FAILURE: Build failed with an exception.