NodeJS is working correctly, but when I try to call it from an android app it give me that error:

Error: connect ENETUNREACH 169.254.170.254:80 at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1056:14)

Thanks :)

I'm trying to build a React Native messaging app throught websocket and STOMP protocol (For the server side I'm using Spring Boot) but I get a really weird behaviour. My code is the following:

...import SockJS from 'sockjs-client'; // Note this lineimport Stomp from 'stompjs';function ChatScreen() {// Variables declarationuseEffect(() => {    const socket = new SockJS('http://localhost:8080/chat');    const stompClient = Stomp.over(socket);    stompClient.connect({Authorization: `Bearer ${jwt}`}, () => {      stompClient.subscribe(        `/user/${user.username}/queue/messages`, console.log, {Authorization: `Bearer ${jwt}`},      );    });    return () => stompClient && stompClient.disconnect();  }, [dispatch, jwt, user.username]);...}

When the above component is mounted I get:

Whoops! Lost connection to http://localhost:8080/chat

Then if I change the SockJS import line from import SockJS from 'sockjs-client'; to import SockJS from 'sockjs-client/dist/sockjs'; without reloading with double "r", but letting hot reloading do its job, I successfully obtain a connection to the websocket and everything works fine. Now, if I reload with double "r" and navigate to ChatScreen component again, I still get the message:

Whoops! Lost connection to http://localhost:8080/chat

Switching back to import SockJS from 'sockjs-client'; from import SockJS from 'sockjs-client/dist/sockjs'; I successfully obtain a new working connection but double "r" breaks it down again.

I tested the code on both an emulator (Android 9) and a physical device (Android 10). I've also tested react-stomp and the result is the same.

For a better understanding on what I mean this is a video that reports the behaviour:https://drive.google.com/open?id=1IVpiJjHsBGkhB38IWoPujI5eXPuBDbf1

I appreciate any help. Thank you

I am fetching json from an open source api. I want to store it as a state. Not able to store json data in a state. I need to use this json data to match a city with one of the cities in the json. I need to store it in the state. Would be very useful. Please do help!

Constructor Part

constructor(props) {        super(props)        this.state = {            location: null,            loading: false,            userLatitude: null,            userLongitude: null,            userCity: null,            covidZones: []        }        this._requestLocation = this._requestLocation.bind(this)        this.getZone = this.getZone.bind(this)    }

Function Part

getZone() {        axios.get('https://api.covid19india.org/zones.json')            .then(function (response) {                this.setState({ covidZones: response.data.zones })            })            .catch(function (error) {                // handle error                console.log(error);            })            .finally(function () {                // always executed            })    }

Render Part

render() {        const { location, loading } = this.state;        return (<View><Button                    disabled={loading}                    title="Get Location"                    onPress={this._requestLocation}                /><Text>{this.state.userCity}</Text>                {this.getZone()}                 //calling the function, right here                {loading ? (<ActivityIndicator />                ) : null}                {location ? (<Text>                        {JSON.stringify(location, 0, 2)}</Text>                ) : null}</View>        )    }

I've installed react-native-notifications and on iOS everything works perfectly, but it keeps giving me errors on Android. I've followed the exact Android installation instructions from here: https://wix.github.io/react-native-notifications/docs/installation-android

My dev flow:

1. Make modification.
2. npx react-native clean-project-auto; npx react-native-clean-project
3. rm -rf android/app/build; anroid/gradlew clean; android/gradlew build --refresh-dependencies
4. npx react-native start --reset-cache
5. Android Studio Invalidate Caches/Restart.
6. Android Studio clean build.
7. Android Studio sync Gradle files and run app.
8. npx react-native run-android --deviceId emulator-5554

Step 7. results in Invariant Violation: PushNotificationManager is not available. (image below)

Step 8. results in the following logs:

...> Task :react-native-notifications:testReactNative60DebugUnitTest...com.wix.reactnativenotifications.core.InitialNotificationHolderTest > replacesInitialNotification PASSEDcom.wix.reactnativenotifications.core.InitialNotificationHolderTest > isALazySingleton PASSEDWARNING: An illegal reflective access operation has occurredWARNING: Illegal reflective access by org.robolectric.util.ReflectionHelpers$6 (file:/[path]/.gradle/caches/transforms-2/files-2.1/4e5696f3256b4082eea0964d812439f4/jetified-shadowapi-4.3.jar) to method java.lang.ClassLoader.getPackage(java.lang.String)WARNING: Please consider reporting this to the maintainers of org.robolectric.util.ReflectionHelpers$6WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operationsWARNING: All illegal access operations will be denied in a future releasecom.wix.reactnativenotifications.core.notification.PushNotificationTest > onPostRequest_emptyData_postNotification FAILED    java.lang.RuntimeException        Caused by: java.lang.RuntimeException            Caused by: java.lang.IllegalAccessException...

When I add the package, packages.add(new RNNotificationsPackage(MainApplication.this)) to the MainApplication.java getPackages() method, it says this package has already been linked with this error: (image below)

E/unknown:ReactNative: Exception in native call    java.lang.IllegalStateException: Native module RNBridgeModule tried to override RNNotificationsModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. This error may also be present if the package is present only once in getPackages() but is also automatically added later during build time by autolinking. Try removing the existing entry and rebuild.        at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:55)        at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1298)        at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1269)        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1194)        at com.facebook.react.ReactInstanceManager.access$1000(ReactInstanceManager.java:132)        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:996)        at java.lang.Thread.run(Thread.java:919)

Dependencies:

"@react-native-community/push-notification-ios": "^1.2.0""react-native-notifications": "^3.2.1",

app/build.gradle

dependencies {    implementation fileTree(dir: "libs", include: ["*.jar"])    implementation project(':react-native-notifications')    implementation 'com.google.firebase:firebase-core:17.3.0'    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"    implementation "com.facebook.react:react-native:+"  // From node_modules    implementation 'com.google.firebase:firebase-analytics:17.3.0'    addUnimodulesDependencies()    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 = 21        compileSdkVersion = 28        targetSdkVersion = 29        supportLibVersion = "28.0.0"    }    repositories {        google()        jcenter()    }    dependencies {        classpath 'com.android.tools.build:gradle:3.6.2'        classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin        // NOTE: Do not place your application dependencies here; they belong        // in the individual module build.gradle files    }}

I would really like to use this package because it works really well on iOS. Anything helps, thanks!

Transition animation, working in version 4.0, but not working in version 5.0

doc 5.0: https://reactnavigation.org/docs/stack-navigator/#cardstyleinterpolator

doc 4.0: https://reactnavigation.org/docs/4.x/stack-navigator-1.0/#stacknavigatorconfig

May I ask what I wrote wrong,

In version 4.0

const forHorizontalLeft = sceneProps => {  const {layout, position, scene} = sceneProps;  const index = scene.index;  const inputRange = [index - 1, index, index + 1];  const width = layout.initWidth;  const outputRange = 1 ? [width, 0, -width * 0.3] : [-width, 0, width * -0.3];  const opacity = position.interpolate({    inputRange: [index - 1, index - 0.99, index, index + 0.99, index + 1],    outputRange: [0, 1, 1, 0.85, 0],  });  const translateY = 0;  const translateX = position.interpolate({    inputRange,    outputRange,  });  return {    opacity,    transform: [{translateX}, {translateY}],  };};

In version 5.0

screenOptions={{          headerShown: false,          cardStyleInterpolator: ({            closing,            current,            index,            insets,            inverted,            next,            layouts,            swiping,            current: {progress},          }) => {            const _index = index;            const width = layouts.screen.width;            const inputRange = [_index - 1, _index, _index + 1];            const outputRange = 1              ? [width, 0, -width * 0.3]              : [-width, 0, width * -0.3];            const translateY = 0;            const translateX = progress.interpolate({              inputRange,              outputRange,            });            const opacity = progress.interpolate({              inputRange: [                _index - 1,                _index - 0.99,                _index,                _index + 0.99,                _index + 1,              ],              outputRange: [0, 1, 1, 0.85, 0],            });            return {              cardStyle: {                transform: [{translateX}, {translateY}],                opacity,              },              overlayStyle: {                transform: [{translateX}, {translateY}],                opacity,              },            };          },

I'm using react-native-router-flux to show a drawer menu but the hamburguer menu is just working when I click it. But when I try to swipe from left to right the menu is not showing, it also is not get hide when I click outside of menu.

this is my route:

export default class App extends Component {    render() {        return (<Router><Scene><Drawer                    hideNavBar                    key="drawerMenu"                    contentComponent={SideBar}                    drawerWidth={250}                    drawerPosition="right"><Scene                        key="profileScreen"                        component={Home}                    /></Drawer></Scene></Router>        );    }}

And my home page is:

import React from 'react';import { StyleSheet, Text, SafeAreaView, TouchableOpacity } from 'react-native';const Home = () => {  const goToAbout = () => {     Actions.about()  }  return (<TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}><Text>This is HOME!</Text></TouchableOpacity>  ) }const styles = StyleSheet.create({  container: {    flex: 1,      },});export default Home;

My package json is:

"dependencies": {"react": "16.11.0","react-native": "0.62.2","react-native-gesture-handler": "^1.6.1","react-native-reanimated": "^1.9.0","react-native-router-flux": "^4.2.0","react-native-screens": "^2.8.0"  },

Thank you for any help.

I am running a react-native application on Mac. but I am getting "RNCSafeAreaView" was not found in the UIManager.

I'm creating a file downloader application. I want to download files in chunks so that if a user inputs a streamable URL that can also download with maximum speed.

I'm currently developing an app that uses QR code to identify products. Here are the use cases:

1. If user hasn't installed the app, scanning the QR code should take them to AppStore / PlayStore to download the app.
2. If the app is installed, the user can use the app's scanner. In this case it'll extract the info (JSON format) from the QR code.

I'm not sure if QR code can achieve this. I know the first requirement needs a link to the AppStore. The 2nd requirement is just plain old JSON data. I don't know how to combine them into one QR code. Is this possible?

Thanks!

I have a component and I want a linear gradient from right bottom to top left in react native, I tried using from 'react-native-linear-gradient' but it's not working.

Component :

// render return

   return( <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} ><View style={styles.container}><View  style={styles.topPart}><Header ></Header><Content ></Content></View>  <Footer style={styles.footer}></Footer></View></LinearGradient>  );

Please guide how to achieve this.

I am trying to make a music player app in React Native. I am using 'react-native-get-music-files' to get the list of music files in my phone. Everything works fine but cover Image of the music files is not showing.I am loading music files on "Load" button click in the app.I tried to load a simple image that is stored in the device by pasting the path with file:///storage......jpg but that was not loaded too.

dependencies

"dependencies": {"react": "16.9.0","react-native": "0.61.5","react-native-get-music-files": "^2.1.0","react-native-permissions": "^2.0.8","react-native-track-player": "^1.1.8"  },

code

import React from 'react';import {  StyleSheet,  ScrollView,  View,  Text, Button, Image} from 'react-native';import TrackPlayer from 'react-native-track-player';import MusicFiles from 'react-native-get-music-files';import {request, PERMISSIONS} from 'react-native-permissions';class App extends React.Component{  state = {    storagePermission:null,    songs : null,  }  // this track is already in my laptop where I am building the app... just to test play  track = {  id: 'testing123',  url: require('./maula.mp3'),  title: 'Maula Mere Maula',    artist: 'deadmau5',    album: 'while(1<2)',    genre: 'Progressive House, Electro House',    date: '2014-05-20T07:00:00+00:00',  } // function to show music files on load button pressed. getSongs =() =>{  let AllSongs;  if(this.state.songs== null){    return(<Text>Press Load Button to Load Songs.</Text>    )  }  else{    // here is the problem.... it does not show cover image     AllSongs = this.state.songs.map(      (song)=>{        return(<View key={song.title} style={{marginTop:5,borderRadius:2,borderColor:"black",borderWidth:2,padding:10}}><Text>{song.title}</Text><Text> {song.path} </Text><Text>{song.album}</Text><Text>{song.duration}</Text><Image source={{uri:song.cover}} style={{width: 200, height: 200}}/> </View>        );      }    );  }    return AllSongs;}  componentDidMount = ()=>{    // getting permission of storage    request(PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE).then(result => {      this.setState({        storagePermission : result      }), ()=>{        console.log(this.state.storagePermission);      };    });    // getting track player ready    TrackPlayer.setupPlayer().then(() => {      console.log("Player Setup Completed");      TrackPlayer.add([this.track, ]).then(function() {        console.log("Track Added");    });  });  }  render(){  return (<View style={styles.main}><Text>Music Player</Text><View style={{flexDirection:"row", justifyContent:"space-between"}}><Button title="Prev" onPress={        ()=>{          TrackPlayer.skipToPrevious();        }      } /><Button title="Load" onPress={        ()=>{        let Songs;         // loading all the music files presesnt in my phone        MusicFiles.getAll({          blured : true,           artist : true,          duration : true,           cover : true,           genre : true,          title : true,          cover : true,             }).then((tracks) => {                Songs = tracks;                console.log(Songs);                this.setState({                 songs : Songs               })             }).catch(error => {             console.log(error)        });        }      } /><Button title="Pause"  onPress={        ()=>{          TrackPlayer.pause();        }      } /><Button title="Play" onPress={        ()=>{          TrackPlayer.play();        }      } /><Button title="Stop" onPress={        ()=>{          TrackPlayer.stop();        }      } /><Button title="Next" onPress={        ()=>{          TrackPlayer.skipToNext();        }      } /></View><ScrollView>      {this.getSongs()}</ScrollView></View>  )}}const styles = StyleSheet.create({  main:{    flex:1,    margin:10,    padding:10,  }})export default App;

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 AMStarting React Native packager...11:19:24 AMScanning 528 folders for symlinks in D:\Expo\first-proj\first-proj\node_modules (18ms)11:19:24 AMLoading dependency graph.11:19:24 AMRunning packager on port 19001.11:19:25 AM11:19:33 AMProject opened! You can now use the "Share" or "Device" buttons to view your project.11:19:44 AMOpening on Android device11:19:54 AMDependency graph loaded.11:21:41 AMOpening on Android device11:23:31 AMOpening on Android device

Error:

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

Can anyone help me what is going wrong ?

Hi everyone

I use library wix/react-native-notifications

It looks like I do something wrong with my android (ios works fine).For me:

• registerRemoteNotificationsRegistered
• registerRemoteNotificationsRegistered
• registerNotificationOpened
• getInitialNotification

work good.

But:

• registerNotificationReceivedForeground
• registerNotificationReceivedBackground

have never triggered.

I think I put something wrong in AndroidManifest.xml (I have tried different variant but it still doesn't work).

Or problem occurs from using

• react-native-notification
• react-native-pusher-push-notifications

at the same time.

Please maybe someone have some ideas?

I use:

• "react-native-notifications": "^3.2.2",
• "react-native-pusher-push-notifications": "^2.4.0",
• "react": "16.9.0",
• "react-native": "0.61.5",

Part of AndroidManifest.xml that I think can be wrong:

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

I was wondering if it's possible to have different apps being built out of a single repo in React Native. The reason I'm trying to do this would probably be a huge edge case, but it's basically for unit testing RN modules that I'm developing.

I know I can unit test individual components using Enzyme, but I have some modules that are part of a whole framework, and I need to do end-to-end unit tests on them. So my thinking is that I should build the app and run unit tests on it with Appium. But what if there are multiple unit tests? I guess we would need to build multiple separate apps? But there's only one index.js file.

I was reading that I could set up some app targets and schemes (iOS) and equivalent stuff in Android. But how would I handle that on the RN side? Where can I specify which .js file is the entry point for each target? And how does RN handle building different targets?

https://www.dev6.com/frameworks/building-multiple-apps-from-one-react-native-project/Read this article about setting up multiple schemes and using those to set environment variables that could influence control flow in the app. However, this would mean that I would have to run the unit tests in serial, loading the same app up over and over with different env (not the end of the world, I guess).

I was thinking that if I had multiple index.js files, one for each unit test, I could maybe set up some separate app targets/schemes and use those, but I guess I would have to figure out how to build and run them concurrently for concurrent unit testing. I think that the react-native run-ios and run-android commands just build a single app though, so I'm not sure how I'd fit that into my unit testing workflow.

Any thoughts on this strategy or other possible strategies would be very welcome! Thanks :)

I know it's possible to implement a floating HUD component such as a toolbar as a native app, but am just wondering if this was possible through React Native.

The system that I am developing for is Android.

How to store/save data in react native.Like we use shared-preference in android is there any solution for react native.I am new to react-nactive.

please add sample example

I am opening a Webview with custom header however i want to open an Android like intent like it does on Telegram after clicking on link:

import React, { PureComponent } from 'react';import { View } from 'flockby-ui-kit';import { WebView } from 'react-native-webview';import { get, round } from 'lodash';import Header from './Header';import ProgressBar from './ProgressBar';export default class Browser extends PureComponent {  state = {    progressStatus: 0,  };  render() {    const { progressStatus } = this.state;    const { navigation } = this.props;    const { item } = navigation.state.params;    const { link } = item;    return (<View f={1} style={{ flex: 1 }}><Header item={item} nav={navigation} /><ProgressBar progressStatus={progressStatus} /><WebView          ref={webview => (this._webview = webview)}          source={{ uri: link }}          onLoadProgress={({ nativeEvent }) => {            this.setState({              progressStatus: round(get(nativeEvent, 'progress', 0), 2) * 100,            });          }}        /></View>    );  }}

Attaching a gif of same.

What I am trying to achieve is openining WebvView in a new Application window

I am working on android application using ReactNative RecyclerListView For displaying list of items in my app. Please check my recyclerlistview code in render function.

<RecyclerListView rowRenderer={_renderRow} dataProvider={_dataProvider}        layoutProvider={_layoutProvider}        canChangeSize={true}        forceNonDeterministicRendering={true}        keyExtractor={(item, index) => String(index)}        extraData={selectedItem}/>

And following is the _layoutProvider logic.

const _layoutProvider = new LayoutProvider((i) => {    return _dataProvider.getDataForIndex(i)._id;  }, (_id, dim) => {    dim.width = width;    dim.height = height / 1.7;  });  _renderRow.bind(this);

If i used fixed height, The UI display is not same in all resolutions. I have used forceNonDeterministicRendering attribute. But the problem is when i am going from this screen and coming back to this screen, Item gap is getting increased. If i reduce height in layoutProvider, bottom of the item is overlapping by next item. Please check the screenshots for reference.

When first time rendering its working good without any issues. Please help me to resolve this issue. Thanks in advance..

Whenever I run 'react-native run-android' I get this error message at 99%:

Execution failed for task ':app:transformNativeLibsWithMergeJniLibsForDebug'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Failed to transform artifact 'imagepipeline-base.aar (com.facebook.fresco:imagepipeline-base:2.0.0)' to match attributes {artifactType=android-java-res}. Execution failed for AarTransform: C:\Users\ronsi.gradle\caches\transforms-2\files-2.1\36b5e92c216129ce5187eea1bb53cf04. Cannot parse result path string: Failed to transform artifact 'soloader.aar (com.facebook.soloader:soloader:0.6.0)' to match attributes {artifactType=android-java-res}. Execution failed for AarTransform: C:\Users\ronsi.gradle\caches\transforms-2\files-2.1\6e75901105f09a338e73b93bf40fcae8. Cannot parse result path string:

BUILD FAILED in 11s

at checkExecSyncError (child_process.js:623:11)at execFileSync (child_process.js:641:15)at runOnAllDevices (C:\Users\ronsi\Documents\repos\bahad\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:74:39)at buildAndRun (C:\Users\ronsi\Documents\repos\bahad\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)at C:\Users\ronsi\Documents\repos\bahad\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12at processTicksAndRejections (internal/process/task_queues.js:85:5)at async Command.handleAction (C:\Users\ronsi\Documents\repos\bahad\node_modules\@react-native-community\cli\build\cliEntry.js:160:7)

when I run expo build:androidI always get the error

Could not find google-services.json while looking in [src/nullnull/debug, src/debug/nullnull, src/nullnull, src/debug, src/nullnullDebug]registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)

I'm using firebase so I downloaded google.services.json file from "Your apps" firebase project console, and I have put the directory for the google.services.json file in app.json.still getting the error!!

I would appreciate it if you help me .. thanks in advance

app.json:

{"expo": {"sdkVersion": "36.0.0","android": {"package": "com.myApp.bookShelf","versionCode": 1,"googleServicesFile": "./google-services.json","config": {"googleSignIn": {"apiKey": "Copied from google.services"        }      }    },"web": {"config": {"firebase": {--- }      }    }  }}

google-services.json :

{"project_info": {---},"client": [    {"client_info": {"mobilesdk_app_id": "--","android_client_info": {"package_name": "com.myApp.bookShelf"        }      },

expo build:android error screenshot