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

React Native App not working with raspberry pi

$
0
0

I am a newbie to react-native. I was previously working with native(java) android app development.I am trying to develop a Bluetooth app with react native using the following library.

https://github.com/innoveit/react-native-ble-manager

My App is discovering and connecting successfully with the SmartWatch but I want to connect it with the Raspberry pi. I think it is only discovering Bluetooth low powered devices. But basically I want serial communication between my react-native app and Raspberry pi. Can anyone guide me what should I do or use to have serial communication between pi and android phone via the react-native app?Thank you in advance.


Prevent user from returning to previous screen StackNavigator

$
0
0

I want to do a simple task: after a successful login redirect the user to his home page. I use react-navigation's StackNavigator for that purpose:

// App.jsclass App extends Component {  render() {    return (<RootStack />);  }}const RootStack = createStackNavigator(  {    Login: { screen: Login, navigationOptions: { header: null }},    Home: { screen: Home, navigationOptions: { header: null }}  },  {    initialRouteName: 'Root'  })

How do I prevent user from returning to Login screen after login? To prevent use back button in android, I would use this one:

// Home.jsimport React, { Component} from 'react';import { ... , BackHandler } from 'react-native';class Home extends Component {    constructor(props) {        super(props);        BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);    }    onBackButtonPressAndroid = () => {        return true;    }}

But doing this way, I disable back button at all. Is there another way to achieve the goal?

Couldnot update time stamp Error when running 'react-native run-android' in gc.properties ( react-native )

$
0
0

When I am running react-native run-android it says :

FAILURE: Build failed with an exception.

* What went wrong:Could not update time stamp for /home/userName/Desktop/hello-world/android/.gradle/4.10.2/gc.properties

Upon running --stacktrace, it shows :

* Exception is:org.gradle.api.UncheckedIOException: Could not update time stamp for /home/userName/Desktop/hello-world/android/.gradle/4.10.2/gc.properties.

What can be the possible reason of this? I searched it a lot but failed to find a solution.

React Native App Crashes on Launch in Android (API 19)

$
0
0

Description

I have created a project with react-native-cli

When I launch the app using the command "react-native run-android" on Devices and Emulators with Android API level 21+ App is launching.

But for devices less than API 21, the app crashing on launch.

I have specified in android Gradle minSdk version to 16.

I viewed the stack trace using "adb logcat" the crash was due to OkHttp3 that is used internally in Facebook Flipper, which is expecting API 21+.

I haven't used any OkHttp3 Dependency explicitly in my app

React Native version:

6.14.4

Steps To Reproduce

  1. Create a project using react-native CLI not Expo CLI
  2. Navigate to the project folder
  3. Connect a device or an emulator with API less than 21
  4. run command "react-native run-android" to run the app on the connected device

Expected Results

The app should launch without any crash.

Android Logs

E/AndroidRuntime( 3745): java.lang.RuntimeException: Unable to create application com.infifive.MainApplication: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be createdE/AndroidRuntime( 3745):    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4347)E/AndroidRuntime( 3745):    at android.app.ActivityThread.access$1500(ActivityThread.java:135)E/AndroidRuntime( 3745):    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1256)E/AndroidRuntime( 3745):    at android.os.Handler.dispatchMessage(Handler.java:102)E/AndroidRuntime( 3745):    at android.os.Looper.loop(Looper.java:136)E/AndroidRuntime( 3745):    at android.app.ActivityThread.main(ActivityThread.java:5017)E/AndroidRuntime( 3745):    at java.lang.reflect.Method.invokeNative(Native Method)E/AndroidRuntime( 3745):    at java.lang.reflect.Method.invoke(Method.java:515)E/AndroidRuntime( 3745):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:779)E/AndroidRuntime( 3745):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:595)E/AndroidRuntime( 3745):    at dalvik.system.NativeStart.main(Native Method)E/AndroidRuntime( 3745): Caused by: java.lang.RuntimeException: Requested enabled DevSupportManager, but DevSupportManagerImpl class was not found or could not be createdE/AndroidRuntime( 3745):    at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:90)E/AndroidRuntime( 3745):    at com.facebook.react.ReactInstanceManager.<init>(ReactInstanceManager.java:238)E/AndroidRuntime( 3745):    at com.facebook.react.ReactInstanceManagerBuilder.build(ReactInstanceManagerBuilder.java:281)E/AndroidRuntime( 3745):    at com.facebook.react.ReactNativeHost.createReactInstanceManager(ReactNativeHost.java:87)E/AndroidRuntime( 3745):    at com.facebook.react.ReactNativeHost.getReactInstanceManager(ReactNativeHost.java:39)E/AndroidRuntime( 3745):    at com.infifive.MainApplication.onCreate(MainApplication.java:47)E/AndroidRuntime( 3745):    at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1007)E/AndroidRuntime( 3745):    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4344)E/AndroidRuntime( 3745):    ... 10 moreE/AndroidRuntime( 3745): Caused by: java.lang.reflect.InvocationTargetExceptionE/AndroidRuntime( 3745):    at java.lang.reflect.Constructor.constructNative(Native Method)E/AndroidRuntime( 3745):    at java.lang.reflect.Constructor.newInstance(Constructor.java:423)E/AndroidRuntime( 3745):    at com.facebook.react.devsupport.DevSupportManagerFactory.create(DevSupportManagerFactory.java:80)E/AndroidRuntime( 3745):    ... 17 moreE/AndroidRuntime( 3745): Caused by: java.lang.ExceptionInInitializerErrorE/AndroidRuntime( 3745):    at okhttp3.OkHttpClient.newSslSocketFactory(OkHttpClient.java:263)E/AndroidRuntime( 3745):    at okhttp3.OkHttpClient.<init>(OkHttpClient.java:229)E/AndroidRuntime( 3745):    at okhttp3.OkHttpClient$Builder.build(OkHttpClient.java:1015)E/AndroidRuntime( 3745):    at com.facebook.react.devsupport.DevServerHelper.<init>(DevServerHelper.java:132)E/AndroidRuntime( 3745):    at com.facebook.react.devsupport.DevSupportManagerImpl.<init>(DevSupportManagerImpl.java:183)E/AndroidRuntime( 3745):    ... 20 moreE/AndroidRuntime( 3745): Caused by: java.lang.IllegalStateException: Expected Android API level 21+ but was 19E/AndroidRuntime( 3745):    at okhttp3.internal.platform.AndroidPlatform.buildIfSupported(AndroidPlatform.java:238)E/AndroidRuntime( 3745):    at okhttp3.internal.platform.Platform.findPlatform(Platform.java:202)E/AndroidRuntime( 3745):    at okhttp3.internal.platform.Platform.<clinit>(Platform.java:79)`

Invalid sdkVersion while running react native project

$
0
0

I'm stuck on the initial part of react native app building. I'm using create-react-native-app pkg to create the project and When I run the android version app through "yarn run android" command I get the error below:

Error: Invalid sdkVersion. Valid options are 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 7.0.0, 8.0.0, 9.0.0

It's a windows machine. Node v10.0.0, npm v5.6.0, Java 1.8 & android studio is already installed and working I added variety of APIs through android studio.. currently I have 17-23-24-26 installed in Sdk platforms.And I get the following error on real android device:

uncaught Error: console.error: React Native version mismatch.Javascript version: 0.53.0Native version: 0.52.0Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with 'watchman watch-del-all && react-native start --reset-cache.

I didn't find solution ...

Photo upload on React Native Android produce Type Error Network Error

$
0
0

I'm executing a photo upload using the fetch API and I keep receiving Type Error Network Request Error. I receive the same error on the emulator and a device. I'm using react-native-image-crop-picker as the source for the photo upload data. Any thoughts?

const handlePhotoUpload =  async (image: any, token: string) => {      const { path, filename, mime } = image;      const uri = path.replace("file://", "")      const file = {        uri,                    type: mime,                   name: filename                   };      const body = new FormData()      body.append('file', file)      const config = {        method: 'POST',         headers: { 'Authorization': 'Bearer '+ token },        body      };      return await fetch(`${<API URL>}/user/photo`, config)}

Local Video Not Shown on first time in react-native-agora IOS but work for react native android

$
0
0

I'm facing issue in react-native-ios, can't able to see first time local video when calling through react-native-agora. In react-native android its work showing both local and remote video.


when I toogle video then it work fine for rendering local video screen on right side corner top side on remote video screen. but first time when video call receive it not render local video screen.

/* eslint-disable react-native/no-inline-styles *//* eslint-disable prettier/prettier */import React, { Component } from 'react';import { View, StyleSheet, NativeModules, ScrollView, Text, Dimensions, TouchableOpacity } from 'react-native';import { RtcEngine, AgoraView } from 'react-native-agora';import Icon from 'react-native-vector-icons/MaterialIcons';import { Actions } from 'react-native-router-flux';const { Agora } = NativeModules;                  //Define Agora object as a native moduleconst {  FPS30,  AudioProfileDefault,  AudioScenarioDefault,  Adaptative,} = Agora;                                        //Set defaults for Streamclass Video extends Component {  constructor(props) {    super(props);    this.state = {      peerIds: [],                                //Array for storing connected peers      uid: Math.floor(Math.random() * 100),       //Generate a UID for local user      appid: this.props.AppID,                    //Enter the App ID generated from the Agora Website      channelName: this.props.ChannelName,        //Channel Name for the current session      vidMute: false,                             //State variable for Video Mute      audMute: false,                             //State variable for Audio Mute      joinSucceed: false,                         //State variable for storing success    };    const config = {                            //Setting config of the app      appid: this.state.appid,                  //App ID      channelProfile: 0,                        //Set channel profile as 0 for RTC      videoEncoderConfig: {                     //Set Video feed encoder settings        width: 720,        height: 1080,        bitrate: 1,        frameRate: FPS30,        orientationMode: Adaptative,      },      audioProfile: AudioProfileDefault,      audioScenario: AudioScenarioDefault,    };    RtcEngine.init(config);                     //Initialize the RTC engine  }  componentDidMount() {    RtcEngine.on('userJoined', (data) => {      const { peerIds } = this.state;             //Get currrent peer IDs      if (peerIds.indexOf(data.uid) === -1) {     //If new user has joined        this.setState({          peerIds: [...peerIds, data.uid],        //add peer ID to state array        });      }    });    RtcEngine.on('userOffline', (data) => {       //If user leaves      this.setState({        peerIds: this.state.peerIds.filter(uid => uid !== data.uid), //remove peer ID from state array      });    });    RtcEngine.on('joinChannelSuccess', (data) => {                   //If Local user joins RTC channel      RtcEngine.startPreview();                                      //Start RTC preview      this.setState({        joinSucceed: true,                                           //Set state variable to true      });    });    RtcEngine.joinChannel(this.state.channelName, this.state.uid);  //Join Channel    RtcEngine.enableAudio();                                        //Enable the audio  }  /**  * @name toggleAudio  * @description Function to toggle local user's audio  */  toggleAudio() {    let mute = this.state.audMute;    console.log('Audio toggle', mute);    RtcEngine.muteLocalAudioStream(!mute);    this.setState({      audMute: !mute,    });  }  /**  * @name toggleVideo  * @description Function to toggle local user's video  */  toggleVideo() {    let mute = this.state.vidMute;    console.log('Video toggle', mute);    this.setState({      vidMute: !mute,    });    RtcEngine.muteLocalVideoStream(!this.state.vidMute);  }  /**  * @name endCall  * @description Function to end the call  */  endCall() {    RtcEngine.destroy();    Actions.home();  }  /**  * @name peerClick  * @description Function to swap the main peer videostream with a different peer videostream  */  peerClick(data) {    let peerIdToSwap = this.state.peerIds.indexOf(data);    this.setState(prevState => {      let currentPeers = [...prevState.peerIds];      let temp = currentPeers[peerIdToSwap];      currentPeers[peerIdToSwap] = currentPeers[0];      currentPeers[0] = temp;      return { peerIds: currentPeers };    });  }  /**  * @name videoView  * @description Function to return the view for the app  */  videoView() {    return (<View style={{ flex: 1 }}>        {          this.state.peerIds.length > 1            ? <View style={{ flex: 1 }}><View style={{ height: dimensions.height * 3 / 4 - 50 }}><AgoraView style={{ flex: 1 }}                  remoteUid={this.state.peerIds[0]} mode={1} key={this.state.peerIds[0]} /></View><View style={{ height: dimensions.height / 4 }}><ScrollView horizontal={true} decelerationRate={0}                  snapToInterval={dimensions.width / 2} snapToAlignment={'center'} style={{ width: dimensions.width, height: dimensions.height / 4 }}>                  {                    this.state.peerIds.slice(1).map((data) => (<TouchableOpacity style={{ width: dimensions.width / 2, height: dimensions.height / 4 }}                        onPress={() => this.peerClick(data)} key={data}><AgoraView style={{ width: dimensions.width / 2, height: dimensions.height / 4 }}                          remoteUid={data} mode={1} key={data} /></TouchableOpacity>                    ))                  }</ScrollView></View></View>            : this.state.peerIds.length > 0              ? <View style={{ height: dimensions.height - 50 }}><AgoraView style={{ flex: 1 }}                  remoteUid={this.state.peerIds[0]} mode={1} /></View>              : <Text>No users connected</Text>        }        {          !this.state.vidMute                                              //view for local video            ? <AgoraView style={styles.localVideoStyle} zOrderMediaOverlay={true} showLocalVideo={true} mode={1} />            : <View />        }<View style={styles.buttonBar}><Icon.Button style={styles.iconStyle}            backgroundColor="#0093E9"            name={this.state.audMute ? 'mic-off' : 'mic'}            onPress={() => this.toggleAudio()}          /><Icon.Button style={styles.iconStyle}            backgroundColor="#0093E9"            name="call-end"            onPress={() => this.endCall()}          /><Icon.Button style={styles.iconStyle}            backgroundColor="#0093E9"            name={this.state.vidMute ? 'videocam-off' : 'videocam'}            onPress={() => this.toggleVideo()}          /></View></View>    );  }  render() {    return this.videoView();  }}let dimensions = {                                            //get dimensions of the device to use in view styles  width: Dimensions.get('window').width,  height: Dimensions.get('window').height,};const styles = StyleSheet.create({  buttonBar: {    height: 50,    backgroundColor: '#0093E9',    display: 'flex',    width: '100%',    position: 'absolute',    bottom: 0,    left: 0,    flexDirection: 'row',    justifyContent: 'center',    alignContent: 'center',  },  localVideoStyle: {    width: 140,    height: 160,    position: 'absolute',    top: 5,    right: 5,    zIndex: 100,  },  iconStyle: {    fontSize: 34,    paddingTop: 15,    paddingLeft: 40,    paddingRight: 40,    paddingBottom: 15,    borderRadius: 0,  },});export default Video;

How do i download an image to device from base64 string >

$
0
0

I'm using ViewShot to capture an image with text rendered over the image,The image is coming from an api url,

Im able to use viewshot to get the base64 image data but how do i download this to the device?

please help

The state

          this.state = {           quote: 'Quote Goes Here',           author: 'Author',           imageUrl: props.route.params.imageUrl,           base64Image: ''      } }

Here is the capture method

     CaptureViewShot = () => {      this.refs.viewShot.capture().then(uri => {           this.setState({                base64Image: "data:image/png;base64,"+ uri           })           console.log(this.state.base64Image)      }); }

This is the view

<ViewShot ref="viewShot"                     options={{                          format: "png",                          quality: 1.0,                          result: "data-uri"                     }}><ImageBackground                          source={{ uri: this.state.imageUrl }}                          style={{                               width: this.screenWidth,                               height: 300                          }}>                          {this.state.AuthorVisable &&<Text style={[styles.quotee,                               {                                    fontSize: this.state.AuthorFontSize,                                    color: this.state.oldColor,                                    fontFamily: this.state.fontFamily,                                    fontStyle: this.state.fontStyle,                                    fontWeight: this.state.fontWeight                               }]}>{this.state.author}</Text>}<Text style={[styles.quoteText,                          {                               fontSize: this.state.QuotefontSize,                               marginTop: this.state.quoteTextMargin,                               color: this.state.oldColor,                               fontFamily: this.state.fontFamily,                               fontStyle: this.state.fontStyle,                               fontWeight: this.state.fontWeight                          }]}>"{this.state.quote}"</Text></ImageBackground></ViewShot>

React Native : BLE, Discover & Broadcast (advertise data)

$
0
0

I'm very new to BLE APIs and capabilities. I want to achieve a "simple" thing. Let's say I'm developing the APP-X. I want to be able to scan other phone around me, with APP-X installed (exactly like this app here https://www.tracetogether.gov.sg/ ). I want to scan and filter the wanted devices via a "simple" metadata (advertising data ? specific for my app) within the signal emitted by the concerned phones. I'm stuck because Idk how to "emit" (broadcast) that custom signal.

Can you please help me find a way to do this in RN ?

I have already check those libs:

Many thanks

How to catch the number of the page that i'm in? ViewPager React Native

$
0
0

I'm using ViewPager by react-native-community to scroll down my page, but I'm having trouble when catching the page that the user is in, in the API there is a showPageIndicator: boolean but only for IOS, i figure we can catch the number in the IOS by this bool there is some way i can catch the number.

https://github.com/react-native-community/react-native-viewpager

<ViewPager            initialPage={0}            orientation="horizontal"            scrollEnabled            onPageSelected={changePage}>

receive data in Raspbery Pi 4 with Android and BLE

$
0
0

I have learned a lot about Bluetooth Low Energy in the past 2 weeks.

I pretty much understood the concepts with the peripheral and central mode etc.

I explain to you what I want to do:

  • SMARTPHONE_1: Install a React-Native application that allow sending text as JSON to Raspbery Pi 4 with Bluetooth Low Energy.

  • Raspbery Pi 4 with Android OS: Receive data (sent by the application on SMARTPHONE_1) in a React-Native application and do something.

In SMARTPHONE_1, I used the [react-native-ble-plx] (https://github.com/Polidea/react-native-ble-plx) (central) library to list the devices, connect to them, retrieve the BLE services / characteristics, and send my data. To do my tests, I used [nrf connect] (https://play.google.com/store/apps/details?id=no.nordicsemi.android.mcp&hl=en) (an Android application on another phone) allowing me to configure a SERVER GATT with my customized services / characteristics.

Everything is working.

But how do I do the same with the Raspberry Pi 4?

I don't find effective libraries to create its own services / characteristics via React Native (like nrf Connect), except this one which seems to be used for debuging[react-ble-peripheral] (https://github.com/himelbrand/react-native-ble-peripheral#readme)I can't find any others.

I wanted to install Android on Raspbery Pi, advertise with my customized services, and receive data (from SMARTPHONE_1) via the Android application installed on the Raspbery Pi.

I saw that we could use Bluz for Raspberry Pi, to potentially configure services / characteristics but would it work with an Android OS?

But then, will it be possible to recover the data via the installed Android application in Raspbery Pi?

Sorry if it sounds confusing!

How can I launch a react native app using "Ok Google" and open a specific page in the app?

$
0
0

I want to set a custom phrase in "Ok Google" which opens my app with navigating the user to a specific screen in the app.

I tried the 'google actions' but -as far as I know- it just supports some built-in intents and none of them can do what i want.

Thank you.

RN view over android native activity

$
0
0

I have a React Native app where I used an Android activity (thanks to a bridge). I would like to display some javascript text over this activity, but I don't have any solution. It seems like the android activity isn't considered as a React view, si I cannot manipulate it.

If someone could help me with my little problem, maybe I don't understand a React Native feature or something.

Thanks !

Alert Dialogs work well on Debug but not showing in release mode on Android (React Native)

$
0
0

Description

The application correctly displays all the alerts dialogs and toast messages in the debugging phase. The moment the build is built all the messages disappear. This only happens for android.

React Native version:

System:  OS: macOS 10.15.5  CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz  Memory: 267.94 MB / 8.00 GB  Shell: 3.2.57 - /bin/bashBinaries:  Node: 13.8.0 - /usr/local/bin/node  Yarn: 1.22.4 - ~/.yarn/bin/yarn  npm: 6.13.7 - /usr/local/bin/npm  Watchman: 4.9.0 - /usr/local/bin/watchmanSDKs:  iOS SDK:    Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1IDEs:  Android Studio: 3.6 AI-192.7142.36.36.6392135  Xcode: 11.3.1/11C505 - /usr/bin/xcodebuildnpmPackages:  react: 16.8.3 => 16.8.3   react-native: 0.59.9 => 0.59.9 npmGlobalPackages:  react-native-cli: 2.0.1  react-native: 0.61.5

I attach the package.json to see if there are any known incompatibilities:

{"name": "myapp","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start","android": "react-native run-android","test": "jest"  },"dependencies": {"@react-native-community/async-storage": "^1.11.0","axios": "^0.18.0","haversine": "^1.1.0","jetifier": "^1.6.5","moment": "^2.22.2","react": "16.8.3","react-native": "0.59.9","react-native-actionsheet": "^2.4.2","react-native-android-location-services-dialog-box": "^2.8.2","react-native-auto-height-image": "^1.1.0","react-native-cached-image": "^1.4.3","react-native-cli": "1.3.0","react-native-fbsdk": "1.0.4","react-native-gesture-handler": "^1.6.0","react-native-global-font": "^1.0.2","react-native-google-places": "3.1.2","react-native-image-crop-picker": "^0.24.1","react-native-image-pan-zoom": "^2.1.10","react-native-image-placeholder": "^1.0.14","react-native-iphone-x-helper": "^1.2.0","react-native-keyboard-manager": "^4.0.13-10","react-native-maps": "0.25.0","react-native-maps-super-cluster": "^1.4.1","react-native-modal-datetime-picker": "^5.1.0","react-native-open-maps": "^0.3.3","react-native-progress": "^3.4.0","react-native-push-notification": "3.1.3","react-native-reanimated": "^1.7.0","react-native-router-flux": "^4.0.6","react-native-screens": "^2.0.0-beta.8","react-native-share": "^1.2.1","react-native-snap-carousel": "^3.7.4","react-native-swiper": "^1.5.13","react-native-vector-icons": "^4.6.0","react-native-view-shot": "^2.5.0","react-redux": "^5.0.7","redux": "^3.7.2","redux-persist": "^4.10.1","redux-persist-transform-filter": "0.0.15","redux-thunk": "^2.2.0"  },"devDependencies": {"babel-jest": "23.6.0","jest": "23.6.0","metro-react-native-babel-preset": "0.51.1","react-test-renderer": "16.6.3"  },"jest": {"preset": "react-native"  },"rnpm": {"assets": ["./src/fonts"    ]  }}

A simple example of use:

Alert.alert('Example','This is only an example of an AlertDialogs.');

Expected Results:

That alerts are shown in build mode.

Thanks in advance to those who want to help me.

Expo camera recordAsync works on iOS but not Android

$
0
0

I have function called record and stopRecording in my React Native / Expo app. These help me record videos in my app.

async function record(){        if(camera){            setRecording(true);             let recording = await camera.current.recordAsync();            console.log(recording);             setVideoUri(recording.uri);             const { uri, width, height } = await VideoThumbnails.getThumbnailAsync(recording.uri, { time: 0 });             setThumbnailUri(uri);                   }}async function stopRecording(){        if(camera){            setRecording(false);             camera.current.stopRecording();         }}

On iOS, this works perfectly. And the console.log(recording) line produces the following AFTER I stop recording:

Object {"uri": "file:///var/mobile/Containers/Data/Application/AD28FEB3-916D-4804-B609-42336E916F75/Library/Caches/ExponentExperienceData/%2540vaibhavverma9%252Freeltalk/Camera/69064C71-02D0-472C-B3A0-CFF2F87D0B9E.mov",}

On Android, on the other hand, I get a stop failed error immediately after starting to record. Note, I don't even call the stopRecording button. It produces this:

Object {"uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540vaibhavverma9%252Freeltalk/Camera/f1ac8f11-7eb9-4960-ba90-d63e14c434a1.mp4",}

But I get the following error, because since there's no video recorded, the thumbnail is not set.

0, [Error: Could not generate thumbnail. setDataSource failed: status = 0x80000000]- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn- node_modules/@sentry/utils/dist/instrument.js:111:42 in <anonymous>- node_modules/@sentry/react-native/dist/js/integrations/reactnativeerrorhandlers.js:36:33 in tracking.enable$argument_0.onUnhandled- node_modules/promise/setimmediate/rejection-tracking.js:72:10 in onUnhandled* [native code]:null in onUnhandled- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:399:17 in callTimers- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0* [native code]:null in callFunctionReturnFlushedQueue

Does anyone know why this recordAsync() function works in iOS but not in Android? Is there something I must do in order to get the function working on Android as well?


How to determine if native apk / JS bundle has to be created for apps with RN >=0.60

$
0
0

I have been using code-push in production for more than 2 years.

How I implemented?

  • Whenever android folder of my react native app was modified, I assumed there is a native change and my CI/CD tool created a native apk file.
  • In all other cases, I generated an JS bundle and pushed via CodePush.

In the latest RN version >=0.60, we have auto-linking of native modules. Because of this, I am not able to identify if any library newly added requires a native APK to be generated or just a bundle update.

Please provide suggestion how can this be done?

Environment

react-native-code-push version: 6.0.0

react-native version: 0.61.4

Android: managing Context/state without an Activity

$
0
0

I am trying to integrate some existing Android code that implements a GLSurfaceView within a react-native project. The context required for the GLSurfaceView to display what I want is contained in an Activity that presents the GLSurfaceView via setContentView.

I want this view to be embedded in an existing Activity (the react-native MainActivity) and not the one that it is currently attached to.

Basically, the existing activity contains references to other necessary classes/modules as well as accessor functions to these references and I'm not sure how to duplicate the logic.

React Native GeoLocation is not working on Android

$
0
0

Can anyone confirm if React Native Geolocation is actually working on Android?I am stuck with location request timed out while using getCurrentPosition() method and no error message while using watchPosition() method.

I have added the required permission (FINE LOCATION) on AndroidManifest.xml and location permission is allowed for the app.

Here is my implementation:

componentWillMount() { navigator.geolocation.getCurrentPosition((position) => {        console.log('+++++++');        console.log(position.coords.longitude);        this.setState({          longitude: position.coords.longitude,          error: null,        });      },      (error) => {        console.log(error);      },    );}

React Native Version : 0.42

react native enable hot reload/fast refresh for node_module java file

$
0
0

After react-native run-android, device was able to auto-refresh each time if I made change on my code.

But code in node_module behaved slightly different from what I expect. It still works perfectly on modifying the js/tsx, etc file, but change java file or native module wouldn't trigger any change unless I rerun react-native run-android.

Is this the default behavior or I miss something from my configuration.

React-native - tab navigator nested inside drawer

$
0
0

So as title suggest I'm trying to create drawer navigator, which inside has a screen with bottomTabNavigator. Drawer navigator works fine but when I enter route containing tab navigator it's empty.Here's my code

Component with Drawer navigation:

//imports...const Burger = ({ navigation }) => (<View style={styles.burger}><TouchableOpacity onPress={navigation.toggleDrawer}><MaterialCommunityIcons name="forwardburger" size={24} color="black" /></TouchableOpacity></View>);const Home = ({ navigation }) => (<SafeAreaView style={styles.view}><Burger navigation={navigation} /><HomeScreen /></SafeAreaView>);const Auth = ({ navigation }) => (<SafeAreaView style={styles.view}><Burger navigation={navigation} /><AuthScreen /></SafeAreaView>);const Project = ({ navigation }) => (<SafeAreaView style={styles.view}><Burger navigation={navigation} /><CreateProject /></SafeAreaView>);const Drawer = createDrawerNavigator();function Navigation() { // main drawer navigation  return (<NavigationContainer><Drawer.Navigator initialRouteName="Home"><Drawer.Screen name="Home" component={Home} /><Drawer.Screen name="Project" component={Project} /> // screen with bottom tab navigation<Drawer.Screen name="Auth" component={Auth} /></Drawer.Navigator></NavigationContainer>  );}export default function App() {  return (<SafeAreaProvider><Navigation /></SafeAreaProvider>  );}

Aaaaand component with bottom tab navigator:

const Tab = createBottomTabNavigator();const CreateProject = ({ navigation }) => {  console.log('navigation', navigation);  return (<Tab.Navigator      initialRouteName="Description"      screenOptions={({ route }) => ({        tabBarIcon: ({ focused, color, size }) => {          let icon;          switch (route.name) {            case 'Description': {              const iconName = focused ? 'subtitles' : 'subtitles-outline';              icon = (<MaterialCommunityIcons                  name={iconName}                  size={size}                  color={color}                />              );              break;            }            case 'Content': {              const iconName = focused                ? 'table-column'                : 'table-column-plus-after';              icon = (<MaterialCommunityIcons                  name={iconName}                  size={size}                  color={color}                />              );              break;            }            case 'Goals': {              const iconName = focused ? 'target' : 'target-variant';              icon = (<MaterialCommunityIcons                  name={iconName}                  size={size}                  color={color}                />              );              break;            }            default: {              const iconName = focused ? 'cash-multiple' : 'cash';              icon = (<MaterialCommunityIcons                  name={iconName}                  size={size}                  color={color}                />              );            }          }          return icon;        },      })}      tabBarOptions={{        activeTintColor: 'tomato',        inactiveTintColor: 'gray',      }}><Tab.Screen name="Description" component={Description} /><Tab.Screen name="Content" component={Content} /><Tab.Screen name="Goals" component={Goals} /><Tab.Screen name="Prizes" component={Prizes} /></Tab.Navigator>  );};export default CreateProject;

So. All drawer routes work fine, there is event stack navigator inside one of them and it also works fine. But when I enter "bottom tab route" there's nothing on the screen. No content from any of the sub routes, no bottom tab, nothing (no errors as well)Where am I making a mistake?

Viewing all 28467 articles
Browse latest View live


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