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

whenever I run new project in react-native i get error message that is android sdk license are not accepted how to get rid with this permanently?

$
0
0

Failed to install the app. Please accept all necessary SDK licenses using SDK Manager: "$ANDROID_HOME/tools/bin/sdkmanager --licenses". Run CLI with --verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

Failed to install the following Android SDK packages as some licences have not been accepted. build-tools;28.0.3 Android SDK Build-Tools 28.0.3 platforms;android-28 Android SDK Platform 28 To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager. Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

Using Android SDK: C:\Users\LENOVO\AppData\Local\Android\sdk\platform-tools

I am using VScode as editor and i have RN version - 61.0.5 "$ANDROID_HOME/tools/bin/sdkmanager --licenses" i have used this command but i am still getting the same error.


React-native-navigation hide navigation bar on login screen?

$
0
0

I am using the react-native-navigation in my react-native application for navigation. I wanted to hide navigation bar on first screen I tried

{ navBarHidden: true}

The complete code for navigation is:

 Navigation.startSingleScreenApp({
    screen: {
        label: "Login",
        screen: "LoginComponent",
        icon: require('./asset/menu.png'),
        title: "Login",
      }, 
      navigationBarStyle : {navBarHidden: true },
      passProps: {},
      animationType: 'slide-down'
  });

Not showing any error and still can see the navbar on my login screen.

React Native app won't start when using applicationIdSuffix

$
0
0

I am using react-native-codepush@1.16.1-beta and part of the setup includes specifying applicationIdSuffix.

I've set this up on a previous app in the past with no issues (React Native 0.37). I've encountered this error twice now with this project (React Native 0.40). The first time I rebuilt my entire project and it went away. It started happening again for no apparent reason so I cloned the last stable version of my project in a fresh directory, and got the same error.

The error occurs when using react-native run-android. The error happens after a successful build:

Starting: Intent { cmp=com.packagename/.MainActivity }
Error type 3
Error: Activity class {com.packagename/com.packagename.MainActivity} does not exist.

The error goes away if I remove applicationIdSuffix ".debug" from app/build.gradle and the app starts on my phone without issue.

My phone is a Nexus 6P with Android 7.0. I've only tried on a physical device since I don't have simulators set up.

I've triple checked everything against to my other project and I don't believe it's a configuration issue.

Setting up Detox with Expo on Android

$
0
0

I'm trying to set up Detox with Expo on Android emulator (Genymotion) but I have an error that I can't go through....

I've installed the necessary packages :

  • Detox
  • detox-expo-helpers
  • expo-detox-hook

Downloaded the Exponent.apk on the official expo site

set up my package.json :

"detox": {
    "test-runner": "jest",
    "configurations": {
      "android": {
        "binaryPath": "bin/Exponent.apk",
        "build": "npm run android",
        "type": "android.attached",
        "device": {
          "adbName": "192.168.58.101:5555"
        }
      }
    }
  }

Set up the config.json on the e2e folder :

{
    "setupFilesAfterEnv": ["./init.ts"],
    "testEnvironment": "node",
    "reporters": ["detox/runners/jest/streamlineReporter"],
    "verbose": true
}

Set up my init.ts file :

import {cleanup, init} from "detox";
import * as adapter from "detox/runners/jest/adapter";

const config = require("../package.json").detox;

jest.setTimeout(120000);
jasmine.getEnv().addReporter(adapter);

beforeAll(async () => {
    await init(config);
});

beforeEach(async () => {
    await adapter.beforeEach();
});

afterAll(async () => {
    await adapter.afterAll();
    await cleanup();
});

When I run the tests with detox test I've the following error :

Error: '.../androidTest/Exponent/Exponent-androidTest.apk' could not be found, did you run './gradlew assembleAndroidTest' ?

How is generated this androidTest file with Expo ? Did I made something wrong ?

EDIT :

I've also try to use the .sh script to fetch the Exponent.apk file :

#!/bin/bash -e

# query expo.io to find most recent ipaUrl
IPA_URL=`curl https://expo.io/--/api/v2/versions |  python -c 'import sys, json; print json.load(sys.stdin)["androidUrl"]'`

# download tar.gz
TMP_PATH=bin/Exponent.apk
wget -O $TMP_PATH $IPA_URL

Button text not aligned center vertically in react native

$
0
0

I am facing one issue with aligning text vertically center for button but it remains slightly lower then exact center. I found includeFontPadding from documentation with suggesting some discrepancies with some third party font.

Font looks proper in iOS devices but it is not properly centered with Android.

https://facebook.github.io/react-native/docs/text-style-props#includefontpadding

Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set textAlignVertical to center. Default is true.

<Button
    style={[style.button]} block >
     <Text>Setup Now</Text>
  </Button>

Style for button:

export default {
  button: {
    elevation: null,
    shadowColor: null,
    shadowOffset: null,
    shadowOpacity: null,
    shadowRadius: null
  }
}

enter image description here

Could not determine the dependencies of task ':@react-native-community_async-storage:extractReleaseAnnotations'. Generating React native apk

$
0
0

I am trying to create a react native apk. I followed all the steps upto the last one which is running cd android && ./gradlew assembleRelease . Now when I run it I get the following errors

FAILURE: Build failed with an exception.

I tried to uninstall asyn storage from @react-native-community_async-storage: , re-installing it again and running cd android && ./gradlew assembleRelease again but it still gives the same error.

What could possibly be the cause of this and how can I generate this apk file?

adb -s 192.168.1.6:5555 ..... error: more than one device/emulator

$
0
0

I am working with react native, and would like to switch adb to wifi for easier debugging.

I connect my device using usb, then type these commands.

adb tcpip 5555

Then I disconnect my usb cable and enter this command

adb connect 192.168.1.6
connected to 192.168.1.6:5555

adb devices result in the following

adb devices
List of devices attached
192.168.1.6:5555        device

So it only shows one device connected. However trying this command

adb reverse tcp:8081 tcp:8081

gives me the following error even though only one device is shown with adb devices command as shown above

error: more than one device/emulator

So I tried this command but I also get the same error

adb -s 192.168.1.6:5555 reverse tcp:8081 tcp:8081
error: more than one device/emulator

Trying the following gives me the same error

adb -s "192.168.1.6:5555" reverse tcp:8081 tcp:8081
adb -s "192.168.1.6" reverse tcp:8081 tcp:8081
adb -s 192.168.1.6 reverse tcp:8081 tcp:8081

even trying to use the device id which I copied when it was connected to usb resulted in the same error

adb -s deviceid reverse tcp:8081 tcp:8081

Is there a way to make adb reverse work when adb is connected wireless?

Thanks for advance.

onViewableItemsChanged not working in OptimizedFlatList

$
0
0

onViewableItemsChanged working fine in FlatList but due to many performance issues and memory issues, I have used react-native-optimized-flatlist. But onViewableItemsChanged is not working in react-native-optimized-flatlist. Any idea ?

I have come up with this final solution. But not able to do autoplay. Need ideas on this. Please help

import React from 'react';
import { View, StyleSheet, SafeAreaView } from 'react-native';
import YouTube from 'react-native-youtube';
import { OptimizedFlatList } from 'react-native-optimized-flatlist'
import VideoPlayer from 'react-native-video-player';

const list = [
  {
    'type': 'Normal'
  },
  {
    'type': 'YouTube'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'YouTube'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'Normal'
  },
  {
    'type': 'Normal'
  },
];

export default class App extends React.PureComponent {
  constructor() {
    super();
    this.player = [];

    this.state = {
      video: { width: undefined, height: undefined, duration: undefined },
      thumbnailUrl: undefined,
      videoUrl: undefined,
    };
  }

  keyExtractor = (item, index) => index.toString()

  renderItem = ({ item, index }) => (
    <>
      {item.type != 'YouTube' ?
        <>
          <View style={styles.videos}>
            <VideoPlayer
              // autoplay
              // pauseOnPress
              video={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', type: 'mp4' }}
              resizeMode={'cover'}
              ref={r => this.player[index] = r}
            />
          </View>
        </>
        :
        <>
          <View style={{ marginTop: 50 }}>
            <YouTube
              apiKey="YOUR_API_KEY"
              videoId="3NQRhE772b0"
              style={{...styles.videos,...styles.videos1}}
            />
          </View>
        </>
      }
    </>
  )

  onViewableItemsChanged = async ({ viewableItems }) => {
    if (viewableItems != ''&& viewableItems != null) {
      var indexvalue = viewableItems[0]['index'];
      indexvalue++;
      if (indexvalue != 1) {
        if (!this.player[indexvalue].state.isPlaying) {
          this.player[indexvalue].pause();
        } else {
          this.player[indexvalue].resume();
        }
      }
    }
  }


  render() {
    return (
      <>
        <SafeAreaView style={{ flex: 1 }}>
          <OptimizedFlatList
            keyExtractor={this.keyExtractor}
            data={list}
            renderItem={this.renderItem}
            removeClippedSubviews={true}
            onViewableItemsChanged={this.onViewableItemsChanged}
          />
        </SafeAreaView>
      </>
    );
  }
}


const styles = StyleSheet.create({
  videos: {
    width: "95%",
    backgroundColor: '#ccc',
    borderRadius: 10,
    overflow: 'hidden',
    margin: 10,
    marginBottom: 20,
    marginTop: 20
  },
  videos1: {
    height: 250
  }
});

React Native location permission doesn't work in Android 10 but does work in Android 9

$
0
0

Issue : I'm using the react-native-permissions library in my react native app. The code was working perfectly fine in Android devices with OS 9 or below i.e, when prompted to access the device location and if the user grants it the location, the app has access to the device location.

But in Android 10, when the location prompt first appears, and I either select "Allow all the time" or "Allow only while the app is in use", the app is still not able to access the location even though when I check the App info of this app, location shows enabled in the Permissions section. Now when I turn on the system-wide GPS from the notifications manually, then the app is able to fetch the location. I don't understand what I'm missing here.

I'm using a Oneplus 6t. Any help would be greatly appreciated.

How to pass data from background android service to react-native

$
0
0

I am building an react-native app. I have a background android service that receives a push notification. I need to store the notification information(title, description...) on a react-native database or in asyncstorage... because in my app I have a page that shows all the notifications. I need that If my app is on background and i receive a notification, when the user open the app the page shows this information. How I can do this?

I try to store the notification on the same database that react-native uses but I can't store the data on the android service. Please, help me.

npm install expo-cli --global

$
0
0

npm install expo-cli --global npm WARN deprecated joi@14.0.4: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. npm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues. npm WARN deprecated topo@3.0.3: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues. C:\Users\youne\AppData\Roaming\npm\expo-cli -> C:\Users\youne\AppData\Roaming\npm\node_modules\expo-cli\bin\expo.js C:\Users\youne\AppData\Roaming\npm\expo -> C:\Users\youne\AppData\Roaming\npm\node_modules\expo-cli\bin\expo.js npm WARN @expo/image-utils@0.2.12 requires a peer of sharp-cli@^1.10.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-darwin-x64@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-darwin-x64): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-darwin-x64@2.2.8: wanted {"os":"darwin","arch":"x64"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-freebsd-ia32@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-freebsd-ia32): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-freebsd-ia32@2.2.8: wanted {"os":"freebsd","arch":"ia32"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-ia32@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-linux-ia32): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-ia32@2.2.8: wanted {"os":"linux","arch":"ia32"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-darwin-ia32@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-darwin-ia32): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-darwin-ia32@2.2.8: wanted {"os":"darwin","arch":"ia32"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-arm64@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-linux-arm64): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-arm64@2.2.8: wanted {"os":"linux","arch":"arm64"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-x64@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-linux-x64): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-x64@2.2.8: wanted {"os":"linux","arch":"x64"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-sunos-x64@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-sunos-x64): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-sunos-x64@2.2.8: wanted {"os":"sunos","arch":"x64"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-win32-ia32@2.2.8-beta.1 (node_modules\expo-cli\node_modules@expo\ngrok-bin-win32-ia32): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-win32-ia32@2.2.8-beta.1: wanted {"os":"win32","arch":"ia32"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-arm@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-linux-arm): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-arm@2.2.8: wanted {"os":"linux","arch":"arm"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-freebsd-x64@2.2.8 (node_modules\expo-cli\node_modules@expo\ngrok-bin-freebsd-x64): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-freebsd-x64@2.2.8: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/traveling-fastlane-darwin@1.11.4 (node_modules\expo-cli\node_modules@expo\traveling-fastlane-darwin): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/traveling-fastlane-darwin@1.11.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\expo-cli\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

  • expo-cli@3.11.7 updated 1 package in 260.001s

React-Native/Android err: Could not connect to the development server

$
0
0

I'm new to RN and I've been trying to run this react-native app for days now. After following up the guides provided by the official website, I came to the point where the app creates and builds without any errors.

However, when I try to reload to view my app's code changes, it gives me this error: Could not connect to the development server.

I did lots of research related to this error and I checked all the solutions suggestions that are provided in the error.

I use Windows OS. The emulator is android one provided by Genymotion

React-native version:

react-native-cli: 2.0.1react-native: 0.61.5

Some of the things I've tried:

  • Checked if the server is on (it is)
  • Giving my machine's IP adress and & port number to the debug server host & port for device in the Genymotion emulator
  • I ran this command to bundle index.android.bundle: react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  • adb reverse tcp:8081 tcp:8081
  • Tried to use emulators provided by Android studio - same result
  • android:usesCleartextTraffic="true" to AndroidManifest.xml

I should probably mention that I installed this package due to a building error : @react-native-community/cli

Images attached here:

Full error

Metro Bundler. -> This is everything that it shows, I think that it should show more stats about bundling a JS file, in my case App.js

How to handle a share intent(sending an image) in the expo app?

$
0
0

Is there any way to handle sharing files to expo app? According to the documentation of app.json it's possible to provide intentFilters, but I can't find anything regarding handling them afterwards.

Ejecting is not an option.

Android : OutOfMemoryError Error while opening InfoWindow on Google maps

$
0
0

I am using native android code in my react-native app to display google maps and having 200+ markers on google maps with clustering and trying to open info window on each marker i tap on. It works fine for 3-4 minutes but after that,OutOfMemoryError Exception occurs which leads to crash the app. Is there any solution for the same?

Expo network response Timed Out, Can't run Expo app on android emulator

$
0
0

I'm trying to run My react-native application, I'm running it on android emulator and my phone HUAWEI Y3II and same thing happens. I was working on it fine a few days ago but suddenly this error keeps coming up:
Could not load exp://*myip*:19000 network response timed out

enter image description here

enter image description here And the terminal Log shows:

Fetching the user profile failed
connect ETIMEDOUT 104.197.216.164:443
aTrying to open the project on Android...
Opening on Android device

I tried setting the environment variable REACT_NATIVE_PACKAGER_HOSTNAME to my ip address, I tried turning off the firewall, I ensured that the ports are allowed in the firewall, I tried changing my network from public to private. Here is my package.json file:

{
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
        "eject": "expo eject"
    },
    "dependencies": {
        "expo": "^35.0.0",
        "react": "16.8.3",
        "react-dom": "16.8.3",
        "react-native": "file:../../../../Users/RiggedToBlow/Downloads/Compressed/react-native-sdk-35.0.0.tar.gz",
        "react-native-gesture-handler": "~1.3.0",
        "react-native-reanimated": "~1.2.0",
        "react-native-web": "^0.11.7",
        "react-navigation": "^4.0.10",
        "react-navigation-stack": "^1.9.4"
    },
    "devDependencies": {
        "babel-preset-expo": "^7.0.0"
    },
    "private": true
}

I really need to work on this please help


How to set ReactNative app as default system app?

$
0
0

Actually, I am working on a ReactNative app like TrueCaller.

The problem is how to show the received call in my app instead of the default system UI?

Regards

React-native Android release build broken (UI navigation breaks with out error) - works correctly in debug build

$
0
0

I have a react-native app which works correctly in Android debug builds but doesn't work in Android the release builds.

The app is using redux, axios and react-navigation:

  • Search input box on the home screen
  • Pressing the "Search button" calls a redux thunk, which makes an API request via axios which updates the redux reducer state
  • The home screen monitors redux reducer state and when we have new search results it navigates to the results screen using react-navigation 

All of this works fine in debug mode both on a real Android device and on the emulator (react-native run-android). 

When I run a release build (react-native run-android --variant=release), it compiles and installs and loads the home screen as before but when I press the search button it doesn't navigate to the search results. There is no error.

Things I have tested:

  • Is the app triggering and exception/error?

    • No there is no error. The app continues to run. Running adb logcat shows allot of log data but i dont see any any new error when launching/testing the app.
  • Is the API request being triggered?

    • Yes. By enabling none SSL traffic (cleartextTrafficPermitted="true") I was able to run Reactotron with the release build and I could see the API request is made and the response data is received. But the log output stops at this point. There is no error.
  • Does the API SSL cert meet android requirements?

    • Yes it does. I have tested it (ssllabs.com). It works in debug mode on a real device so it should work in the release also. 
  • Is an outdated dependancy causing the failure?

    • I tried updating my dependancies to the latest versions. The app continues to work fine in debug mode but breaks in the release.

How do I work out what is causing the failure?

Android - How to destroy a frame with child views

$
0
0

I have a React Native app with some business logic from the Native side using Android/iOS.

I am facing a problem now, where I have to kill an instance of the Camera that we use as a dependency. We create the instance of the CameraFrame and add the CameraView inside of it.

Our problem is, we can only stop the CameraView using an API method. However, we are not able to destroy or remove the CameraFrame, and there is no method inside of the class to use for this purpose.

The CameraFrame has similar code like this:

class CameraFrame : ViewGroup {

// ...business logic

}

And we import on the Android side, creating the instance of it and adding a view.

import com......CameraFrame;
import com......CameraView;

class CameraViewManager extends SimpleViewManager<CameraFrame> {
@Override
    public CameraFrame createViewInstance(ThemedReactContext context) {
        this.CameraView = xyz.getInstance().createCameraView(context);
        this.CameraView.start();
        CameraFrame frame = new CameraFrame(context);
        frame.addView(CameraView);
        return this.frame;
    }

    // ...more business logic
}

How can I destroy/stop this view instance?

Unable to load script from assets index.android.bundle on windows

$
0
0

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

How do we handle navigation when integrating react-native to an existing native project

$
0
0

I am trying to integrate a react-native project to existing native projects(android and iOS). What are the different options available for acheiving full navigation from native to JS and vice-versa with a single navigation control.

  1. Say i want to add just a single .reactNativeActivity and render all of my ReactNative activity in it. Now this react-native activity has its own navigation(say react-navigation), i should be able to navigate to native activity. I have done this creating native modules. This is solved.
  2. Now how can i navigate from an native activity to this .reactNativeActivity to a particular screen inside it.

I see that we had native-navigation library by airbnb which isn't being supported now. I can still add all the react native screens as individual activities which will still solve this but i don't see that it can be maintainable. Can somebody guide as to how to proceed with this and how do others generally do?

Viewing all 29918 articles
Browse latest View live


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