I'm using bare workflow to develop my application. Like all the other apps I need to implement stack navigation in the app. So I installed react-navigation and react-navigation/stack also react-native-gesture-handler. I followed https://docs.swmansion.com/react-native-gesture-handler/docs/#with-wixreact-native-navigation very closely to use gesture-handler in the application.

After this, I tried to build the application using the command react-native run-android but it resulted in errors. I have tried the workarounds given in the https://github.com/software-mansion/react-native-gesture-handler/issues/124 but nothing seems working for me.

Is there any way I can implement the react-native-gesture-handler in the application?

Following is the MainActivity.java

package com.myapp;import com.facebook.react.ReactActivity;import com.facebook.react.ReactActivityDelegate;import com.facebook.react.ReactRootView;import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;public class MainActivity extends ReactActivity {  /**   * Returns the name of the main component registered from JavaScript. This is used to schedule   * rendering of the component.   */  @Override  protected String getMainComponentName() {    return "myapp";  }  @Override    protected ReactActivityDelegate createReactActivityDelegate() {      return new ReactActivityDelegate(this, getMainComponentName()) {  @Override    protected ReactRootView createRootView() {      return new RNGestureHandlerEnabledRootView(MainActivity.this);  }  };}}

As per the documentation I have included import 'react-native-gesture-handler'; in my index.js file as well.

Error:package com.swmansion.gesturehandler.react does not existimport com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

An error is displayed when I run react-native run-android

error failed to launch emulator. Reason: No emulators found as an output of 'emulator list.awds'.

But in Android Studio, the program runs on nox emulator without any problemsIt is also known as an emulator in adb, but it still displays when not running react-native run-android.

**Hi guys I saw that on android the limitation of background is 15 minutes min, so I added expo backgroundFetch and it's running random minutes as 1/3/5 minutes (task registered), I think that less I touch on my phone the interval increase, i'm right? but it's possible this random minutes it can be defined? or we don't have this control of energy and ram memory usage? **

TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {  console.log(BACKGROUND_FETCH_TASK, "running background");  return BackgroundFetch.Result.NewData;});

  useEffect(() => {    const initBackgroundFetch = async () => {      const locationPermission = await Permissions.askAsync(        Permissions.LOCATION      );      if (        locationPermission.status === "granted"      ) {        const registered = await TaskManager.isTaskRegisteredAsync(          LOCATION_FETCH_TASK        );        if (registered) {          console.log("registered");        }        const backgroundFetchStatus = await BackgroundFetch.getStatusAsync();        switch (backgroundFetchStatus) {          case BackgroundFetch.Status.Restricted:            console.log("Background fetch execution is restricted");            return;          case BackgroundFetch.Status.Denied:            console.log("Background fetch execution is disabled");            return;          default:            console.log("Background fetch execution allowed");            let isRegistered = await TaskManager.isTaskRegisteredAsync(              LOCATION_FETCH_TASK            );            if (isRegistered) {              console.log(`Task ${LOCATION_FETCH_TASK} already registered`);            } else {              console.log("Background Fetch Task not found - Registering task");            }            await BackgroundFetch.registerTaskAsync(BACKGROUND_FETCH_TASK, {              minimumInterval: 3,              startOnBoot: false,              stopOnTerminate: false            });            await Location.startLocationUpdatesAsync(LOCATION_FETCH_TASK, {              accuracy: Location.Accuracy.Lowest,              deferredUpdatesInterval: 60000,              deferredUpdatesDistance: 1000,              distanceInterval: 1000,            });            await BackgroundFetch.setMinimumIntervalAsync(60);            console.log("registerTaskAsync");            break;        }      }    };    initBackgroundFetch();  }, []);

console.log(BACKGROUND_FETCH_TASK, "running background");it's running sometimes 1 minute, 2 minutes , 5...! Tested connected on Device

There is a "behavior" property in KeyboardAvoidingView, e.g.:

import { KeyboardAvoidingView } from 'react-native';<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>    ... your UI ...</KeyboardAvoidingView>

It can be picked as one of three choices: 'height', 'position', or 'padding'. The difference is not explained in the documentation. All it says is that it's not required to set the property, and has a note:

Note: Android and iOS both interact with this prop differently. Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

What effect are these settings supposed to have?

I'm experiencing a performance issue with DrawerNavigator with the following code.

class App extends Component {  componentDidMount(){    var salt = bcrypt.genSaltSync(10);    var hash = bcrypt.hashSync("StrToHash", salt);  }  render() {    console.log("rendering");    return (<View style={styles.container}><Text style={styles.welcome}>          Welcome to React Native!</Text><Text style={styles.instructions}>          To get started, edit App.js</Text><Button          onPress={ () => {} }          title="Learn More"          color="#841584"          accessibilityLabel="Learn more about this purple button"        /></View>    );  }}Home.navigationOptions = {  drawerLabel: 'Home',  drawerIcon: ({ tintColor }) => (<MaterialIcons      name="move-to-inbox"      size={24}      style={{ color: tintColor }}    />  ),};App.navigationOptions = {  drawerLabel: 'App',  drawerIcon: ({ tintColor }) => (<MaterialIcons name="drafts" size={24} style={{ color: tintColor }} />  ),};export default DrawerExample = DrawerNavigator(  {    Home: {      path: '/',      screen: Home,    },    App: {      path: '/sent',      screen: App,    },  },  {    drawerOpenRoute: 'DrawerOpen',    drawerCloseRoute: 'DrawerClose',    drawerToggleRoute: 'DrawerToggle',    initialRouteName: 'Home',    contentOptions: {      activeTintColor: '#e91e63',    },  });

I don't understand why, each time I put some logic in componentDidMount() DrawerNavigator start to be laggy and does not work properly on Android. I think I'm missing something but I don't know what. If I have to put some logic in a component, where should I put the logic code ? If someone would like to enlighten me:)

I am trying to make KeyboardAvoidingView consistent for Android devices. The problem I am experiencing is that, by default, Android seems to resize the screen when the keyboard shows/hide.

This is really confusing to me, why is there a default padding on Android? For example, if you have this simple screen:

<View style={{flex: 1}} ><View style={{ height: 100, backgroundColor: "red" }} /><View style={{ flex: 1, backgroundColor: "lime" }} /><View style={{ height: 125, backgroundColor: "orange" }}><TextInput />  </View> </View>

on iOS, keyboard will cover the screen, as expected, beause I am not using KeyboardAvoidingView here... but on Android, the view is resized, giving a paddingBottom to the view equals to the Keyboard height.

Then, if I use KeyboardAvoidingView like this:

<View style={{ flex: 1 }} ><KeyboardAvoidingView> { /*  <--- Can be my custom or the default RN component... the result is the same */  }<View style={{ height: 100, backgroundColor: "red" }} /><View style={{ flex: 1, backgroundColor: "lime" }} /><View style={{ height: 125, backgroundColor: "orange" }}><TextInput />  </View></KeyboardAvoidingView></View> 

all works as expected for iOS... but on Android, two paddings are given (the defaults one, and the one which comes from KeyboardAvoidingView).

Does anyone knows how to disable the default resize on Android (Expo)? I have seen people using

"softwareKeyboardLayoutMode": "pan"

for the android map, on app.json, but nothings happens when using it.

Pd: In my case, I have implemented my own KeyboardAvoidingView (just listening the keyboard height and giving a paddingBottom to the container) to manipulate the layout, because on android, the component which is provided by the standard library "react-native" doesn't shows any smoothy transition on Android when pushing up the screen. I have tested both components, mine and the default one from RN, and the behaviour is the same.

I am new in react native and I use it in Ubuntu. I would like to run a project on my PC. I use yarn and android emulator. Here is my installed application versions:

yarn: 1.2.0nmp: 3.10.10

I got the following error while use:

$ react-native run-android

Here is the error:

  * What went wrong:    Execution failed for task ':app:transformClassesWithDexForDebug'.> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: java.lang.UnsupportedOperationException

I have tested many solutions that exist in stackoverflow but, non of them did't work for me. such as:

Adding google services - Execution failed for task ':app:processDebugResources'

Error:Execution failed for task ':app:transformClassesWithDexForDebug' in android studio

I also use Google play service and I have installed Firebase plugin. Do you have idea that what should I do?

I'm currently using React Native to code my final year project. I have an issue when build and install it to virtual/physical devices althought a month ago it worked fine. Can someone explain to me wwhat wrongs with my code or files? Does it get corrupted? Because I tried to created a blank new file I still get the same errors.

My error:

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings183 actionable tasks: 2 executed, 181 up-to-dateFAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:processDebugResources'.> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade> Android resource linking failed     C:\Users\minht\SmartRoom\node_modules\react-native-image-crop-picker\android\build\intermediates\library_manifest\debug\AndroidManifest.xml:10:5-14:15: AAPT: error: unexpected element <queries> found in <manifest>.* 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.orgBUILD FAILED in 8serror Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081npm ERR! code 1npm ERR! path C:\Users\minht\SmartRoomnpm ERR! command failednpm ERR! command C:\Windows\system32\cmd.exe /d /s /c react-native run-androidnpm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\minht\AppData\Local\npm-cache\_logs\2020-12-31T02_31_02_848Z-debug.log```

I made some code changes in AndroidManifest.xml by adding some tag and refactoring some code but when I run the app I do not see the changes. Do I need to rebuild android project?

In java with android studio I achieve this by adding this code:

webView.getSettings().setJavaScriptEnabled(true);webView.getSettings().setLoadWithOverviewMode(true);webView.getSettings().setUseWideViewPort(true);webView.getSettings().setSupportZoom(true);webView.getSettings().setBuiltInZoomControls(true);webView.getSettings().setDisplayZoomControls(false);webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);webView.setScrollbarFadingEnabled(false);

but I don't know how to do this in React-Native, I try some css style but nothing did the trick.

here is my webview in React:

<WebView  ref="WebView"  scalesPageToFit={true}  onLoadStart={this.onLoadStart}  onLoadEnd={this.onLoadEnd}  source = {{ uri:this.props.navigation.getParam('main_url', 'https://xxxx.xxx/')}}  style={{backgroundColor: 'transparent',width: '100%'}}/>:null}

My goal is to audio stream over WebSocket. Right now, I am trying to compress the audio data using AAC encoder. But I am having trouble decoding it.

My expected result is:

The PCM data recorded with AudioRecord class can be encoded, the encoded audio can be decoded back and played with AudioTrack class.

My actual result is:

Sometimes the AACDecoderPCM.java fails to decode, causing the entire app to crash.

How it works:

1. Invoke a ReactMethod to start recording, using AudioRecord class.
2. Encode the audio data using PCMEncoderAAC.java
3. Emit the data to the JS bridge.
4. On the JS side, add an event listener with callback function

(event) => send += ` {event}`

5. Invoke a ReactMethod to play the audio, using AudioTrack class.

  @ReactMethod  public void streamAndPlayAsync(String data) {    String[] chunks = data.split(" ");    for (String chunk : chunks) {      byte[] audioData = base64ToBytes(chunk);      aacDecoderPCM.decode(audioData);    }  }

Possible cause:

1. I believe this is caused because of for 1 raw PCM data will generate 4 encoded AAC data. The issue could be because of this line of code.

AudioPlayerModule.java line 72.

  @ReactMethod  public void streamAndPlayAsync(String data) {    String[] chunks = data.split(" ");    for (String chunk : chunks) {      byte[] audioData = base64ToBytes(chunk);      aacDecoderPCM.decode(audioData);    }  }

PCMEncoderAAC.java line 55

    while (outputBufferIndex >= 0) {      ByteBuffer outputBuffer = outputBuffers[outputBufferIndex];      outputBuffer.position(bufferInfo.offset);      outputBuffer.limit(bufferInfo.offset + bufferInfo.size);      byte[] encodedData = new byte[bufferInfo.size];      outputBuffer.get(encodedData);      String stringData = Base64.encodeToString(encodedData, Base64.NO_WRAP);      mReactContext              .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)              .emit("read", stringData);      mediaCodec.releaseOutputBuffer(outputBufferIndex, false);      outputBufferIndex = mediaCodec.dequeueOutputBuffer(bufferInfo, 0);    }

This is the Encoder and Decoder full source code

PCMEncoderAAC.java

package com.satpam.AudioRecorder;import android.media.MediaCodec;import android.media.MediaCodecInfo;import android.media.MediaFormat;import android.util.Base64;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.modules.core.DeviceEventManagerModule;import java.io.IOException;import java.nio.ByteBuffer;public class PCMEncoderAAC {  private ReactApplicationContext mReactContext;  private MediaCodec mediaCodec;  private ByteBuffer[] inputBuffers;  private MediaCodec.BufferInfo bufferInfo;  private ByteBuffer[] outputBuffers;  public PCMEncoderAAC(ReactApplicationContext reactContext) {    mReactContext = reactContext;    setEncoder();  }  private void setEncoder() {    MediaFormat format = MediaFormat.createAudioFormat(MediaFormat.MIMETYPE_AUDIO_AAC, 8000, 1);    format.setInteger(MediaFormat.KEY_BIT_RATE, 9600);    format.setInteger(MediaFormat.KEY_AAC_PROFILE, MediaCodecInfo.CodecProfileLevel.AACObjectLC);    try {      mediaCodec = MediaCodec.createEncoderByType(MediaFormat.MIMETYPE_AUDIO_AAC);    } catch (IOException e) {      e.printStackTrace();    }    mediaCodec.configure(format, null, null, MediaCodec.CONFIGURE_FLAG_ENCODE);    mediaCodec.start();    inputBuffers = mediaCodec.getInputBuffers();    outputBuffers = mediaCodec.getOutputBuffers();    bufferInfo = new MediaCodec.BufferInfo();  }  public void encode(byte[] data) {    int inputBufferIndex = mediaCodec.dequeueInputBuffer(-1);    if (inputBufferIndex >= 0) {      ByteBuffer inputBuffer = inputBuffers[inputBufferIndex];      inputBuffer.clear();      inputBuffer.put(data);      inputBuffer.limit(data.length);      mediaCodec.queueInputBuffer(inputBufferIndex, 0, data.length, 0, 0);    }    int outputBufferIndex = mediaCodec.dequeueOutputBuffer(bufferInfo, 0);    while (outputBufferIndex >= 0) {      ByteBuffer outputBuffer = outputBuffers[outputBufferIndex];      outputBuffer.position(bufferInfo.offset);      outputBuffer.limit(bufferInfo.offset + bufferInfo.size);      byte[] encodedData = new byte[bufferInfo.size];      outputBuffer.get(encodedData);      String stringData = Base64.encodeToString(encodedData, Base64.NO_WRAP);      mReactContext              .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)              .emit("read", stringData);      mediaCodec.releaseOutputBuffer(outputBufferIndex, false);      outputBufferIndex = mediaCodec.dequeueOutputBuffer(bufferInfo, 0);    }  }}

AACDecoderPCM.java

package com.satpam.AudioPlayer;import android.media.AudioFormat;import android.media.AudioManager;import android.media.AudioTrack;import android.media.MediaCodec;import android.media.MediaCodecInfo;import android.media.MediaFormat;import android.util.Log;import java.io.IOException;import java.nio.ByteBuffer;public class AACDecoderPCM {  private AudioTrack audioTrack;  private MediaCodec mediaCodec;  private ByteBuffer[] inputBuffers;  private MediaCodec.BufferInfo bufferInfo;  private ByteBuffer[] outputBuffers;  public AACDecoderPCM() {    audioTrack = new AudioTrack(AudioManager.STREAM_MUSIC, 8000, AudioFormat.CHANNEL_CONFIGURATION_MONO, AudioFormat.ENCODING_PCM_16BIT, 4096, AudioTrack.MODE_STREAM);    audioTrack.play();    setDecoder();  }  private void setDecoder() {    MediaFormat format = MediaFormat.createAudioFormat(MediaFormat.MIMETYPE_AUDIO_AAC, 8000, 1);    format.setInteger(MediaFormat.KEY_BIT_RATE, 9600);    format.setInteger(MediaFormat.KEY_AAC_PROFILE, MediaCodecInfo.CodecProfileLevel.AACObjectLC);    int profileLevel = MediaCodecInfo.CodecProfileLevel.AACObjectLC; // AAC LC    int sampleRateInId = 11; // 8KHz    int channelConfig = 1; // Mono    ByteBuffer csd = ByteBuffer.allocate(2);    csd.put(0, (byte) (profileLevel << 3 | sampleRateInId >> 1));    csd.put(1, (byte)((sampleRateInId & 0x01) << 7 | channelConfig << 3));    format.setByteBuffer("csd-0", csd);    try {      mediaCodec = MediaCodec.createDecoderByType(MediaFormat.MIMETYPE_AUDIO_AAC);    } catch (IOException e) {      e.printStackTrace();    }    mediaCodec.configure(format, null, null, 0);    mediaCodec.start();    inputBuffers = mediaCodec.getInputBuffers();    outputBuffers = mediaCodec.getOutputBuffers();    bufferInfo = new MediaCodec.BufferInfo();  }  public void decode(byte[] data) {    Log.d(getClass().getName(), "data length " + data.length);    int inputBufferIndex = mediaCodec.dequeueInputBuffer(-1);    if (inputBufferIndex >= 0) {      Log.d(getClass().getName(), "triggered");      ByteBuffer inputBuffer = inputBuffers[inputBufferIndex];      inputBuffer.clear();      inputBuffer.put(data);      mediaCodec.queueInputBuffer(inputBufferIndex, 0, data.length, 0, 0);    }    bufferInfo = new MediaCodec.BufferInfo();    int outputBufferIndex = mediaCodec.dequeueOutputBuffer(bufferInfo, 0);    Log.d(getClass().getName(), "outputBufferIndex " + outputBufferIndex);    while (outputBufferIndex >= 0) {      Log.d(getClass().getName(), "triggered 2");      ByteBuffer outputBuffer = outputBuffers[outputBufferIndex];      outputBuffer.position(bufferInfo.offset);      outputBuffer.limit(bufferInfo.offset + bufferInfo.size);      byte[] decodedData = new byte[bufferInfo.size];      outputBuffer.get(decodedData);      Log.d(getClass().getName(), String.valueOf(decodedData.length));      audioTrack.write(decodedData, 0, decodedData.length);      mediaCodec.releaseOutputBuffer(outputBufferIndex, false);      outputBufferIndex = mediaCodec.dequeueOutputBuffer(bufferInfo, 0);    }  }}

TL:DR

I am using these as references:1. [PCM -> AAC -> PCM, Android only](https://stackoverflow.com/questions/21804390/pcm-aac-encoder-pcmdecoder-in-real-time-with-correct-optimization)2. [PCM -> AAC, Android only](https://www.programmersought.com/article/78314556957/)3. [AAC -> PCM, solve error W/SoftAAC2: AAC decoder returned error 4098, substituting silence](https://stackoverflow.com/a/36278858/13285583)More references, I have not understand how ADTS works. I will be implementing these within 6 hours:1. [ADTS](https://stackoverflow.com/a/17357008/13285583)2. [AAC -> PCM, Android only, with switch case](https://stackoverflow.com/questions/56106877/how-to-decode-aac-formatmp4-audio-file-to-pcm-format-in-android)

I have a react native app and I'm using an android native module to run a long task. While this task is going on, I would like to show a progress bar in my react native screen while this task is going on. How do i do this? I'm currently only able to get a callback once my long running task is over.

I want to be able to show meaningful progress. Like 10% done. Not just a loading spinner.

I am using react-native-vector-icons library for showing icons in tabbar like shown below :

import FontAwesome from 'react-native-vector-icons/FontAwesome';<FontAwesome name='trophy' />

But it's not showing icon, so what to do for this?

I am getting unnecessary space but I want to start my code from the very top. I want to make header of my own or be able to customize the 'gray' region. How to do it? Pls check the attached picture

I am attaching code and picture alongwith.Phone Screen Image

App.js code-

import React from 'react';import {View, StyleSheet, Text} from 'react-native';import Header from './components/Header';export default function App() {  return (<View style={styles.screen}><Header title="I am Header" /></View>  );}const styles = StyleSheet.create({  screen: {    flex: 1,  },});

Header.js code-

import React from 'react';import {Text, View, StyleSheet} from 'react-native';const Header = (props) => {  return (<View style={styles.header}><Text style={styles.headerTitle}>{props.title}</Text></View>  );};const styles = StyleSheet.create({  header: {    width: '100%',    height: 90,    backgroundColor: 'yellow',    alignItems: 'center',    justifyContent: 'center',  },  headerTitle: {    color: 'black',    fontSize: 18,  },});export default Header;

I am trying to make a fetch request from react native, It works fine on web and returns as expected (expo web) but not on android.

I keep getting 'Network request failed' and i cant see why as its working on web. I have also tried to change the status code from a 414 to a 200 on my server so that there would be no error however this just meant no response object still but without errors.

I am calling a function that makes the request here:

  async function handleSubmit() {    try {      const res = await createAccountService({name: name.value,email:email.value,password:password.value})      console.log(res);    }catch(e){      console.log(e);      // alertFunction('Couldnt create account', res.error.message)    }

and this is where my request is being made from

export const createAccountService = async({name, email, password}) => {  try {    const timestamp = Math.floor(Date.now() / 1000);    // const requestObject = {name, email, password, timestamp}   const requestObject ={    name: "afdsf",    email:"s7edsg@t.com",    password:"123423569",    timestamp: 1607548529  }    const unparsedResponse = await fetch(URL +"/account/createaccount", {      method: 'POST',       headers: {'Content-Type': 'application/json'      },      body: JSON.stringify(requestObject)    })    console.log(unparsedResponse);    const response = await unparsedResponse.json()    if(response.error){      // Error - Return this to the alert    }else{      // All good - safe this to the user state    }    return response  }catch(e){    console.log('this is being hit');    throw e  }}

This works find on web so i wonder if im missing some plugin or import or something?

I'm using this library :

https://www.npmjs.com/package/react-native-animated-nav-tab-bar

And I have written code like this :

const Tabs = AnimatedTabBarNavigator();function Tabbar1(props) {    return (<Tabs.Navigator            tabBarOptions={{                activeBackgroundColor: "#ff00ff",                inactiveBackgroundColor: '#000000',                activeTintColor: '#ffffff',                inactiveTintColor: '#000000',                showIcon: true,            }}><Tabs.Screen                name="Dashboard"                component={Dashboard}            /><Tabs.Screen                name="Services"                component={Services}            /><Tabs.Screen                name="Notification"                component={Notification}            /><Tabs.Screen                name="More"                component={More}            /></Tabs.Navigator>    );}export default withNavigation(Tabbar1)

But the inactiveBackgroundColor or inactiveTintColor not working here,

So can anyone help me with this?

Thanks in advance.

we use native base Input in our forms and users are unable to paste from clipboard into the Input, any ideas on how to solve this?

While running npx react-native run-android I am getting following error please help me to fix this issue.

I want to disable forced-rtl in android device having (rtl-device-language) by calling:

await I18nManager.forceRTL(false));RNRestart.Restart();

but the same code works when switching device-lang to (LTR-lang)

How can I disable RTL in an android device having (RTL-device-lang) ...

any suggestion ... any help ... anything ... is welcome

const [inputValue, setInputValue] = useState(''); => TextInput don't let typing

const [inputValue, setInputValue] = useState(); => TextInput let typing

but when I try to do that setInputValue() . It don't let me typing again.