Hi I'm having an giftedchat input text overlap issue when keyboard is visible on few android devices to resolve this i tried to use keyboard-show/hide method but didn't worked also tried to using keyboard-spacer but nothing worked. This issue is not replicating on very devices currently its happening on One plus 6, samsung A-70 android version 9 Oxygen OS 9.0.9. The exact issue it not completely overlapping the input text let say only bottom border is getting under the keyboard. please find below the image to get exact idea of the issue.

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

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

I am following the tutorial in the link: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e . However I can't seem to understand how to add tabs to this such that the tab headers get fixed to top when scrolled up. Can anyone please suggest how to achieve this?

I am facing performance issues with HEREMap Premium Android SDK in my react-native project. Previously I was using free version of HEREMap, and my map view was performing very well. But once I switched to Premium SDK, view rendering became very slow.

Following were the only changes I did for premium SDK integration,

1. Invoke setIsolatedDiskCacheRootPath api before MapEngine.getInstance().init
2. Update licence key information in app/src/main/AndroidManifest.xml

Am I missing something? please help.

The error I've got

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> Android resource linking failed
  D:\Program\ReactNative\CareNow-Denco-Mobile\android\app\build\intermediates\merged_manifests\debug\AndroidManifest.xml:77: AAPT: error: resource drawable/ic_stat_ic_launcher (aka vn.solidtech:drawable/ic_stat_ic_launcher) not found.

  D:\Program\ReactNative\CareNow-Denco-Mobile\android\app\build\intermediates\merged_manifests\debug\AndroidManifest.xml:80: AAPT: error: resource color/petrol (aka vn.solidtech:color/petrol) not found.

  error: failed processing manifest.

I just got this project, and trying to build but it's keep getting this not found error, the result from searching is some thing like miss copied from xml file but I don't know if that right. Need some help pleaseeeee

EDIT

This is the error show in the debug log

<meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@drawable/ic_stat_ic_launcher" />
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_color"
            android:resource="@color/petrol" />
        <meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/fb_app_id" />
        <meta-data
            android:name="com.facebook.accountkit.ApplicationName"
            android:value="@string/app_name" />
        <meta-data
            android:name="com.facebook.accountkit.ClientToken"
            android:value="@string/ak_client_token" />
        <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />

I am trying to set statusbar translucency to false on componentDidMount but it doesnt seem to work. My reasons for doing so are different (because I am using react-native-bootsplash which requires me to have native styles) but overall it doesn't seem to work.

styles.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Login.js

componentDidMount(): void {
    .
    .
    StatusBar.setTranslucent(false);
    StatusBar.setBackgroundColor("#FFF");
}
.
.
.
render() {
    const Navigation = this.props.navigation;

    return (
        <>
            <StatusBar backgroundColor="white" barStyle="dark-content"/>
    .
    .
    .
}

I want to use a font from google fonts in my app. Here is the font.

I have placed the .ttf file in app/fonts.

package.json:

{
    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "rnpm": {
        "assets": ["./app/fonts"]
    },
    "jest": {
        "preset": "react-native",
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
        }
    },
    "dependencies": {
        "flow-typed": "^2.0.0",
        "immutable": "^3.8.1",
        "react": "~15.4.1",
        "react-native": "0.42.0",
        "react-native-vector-icons": "^4.0.0",
        "react-redux": "^5.0.3",
        "redux": "^3.6.0",
        "redux-immutable": "^4.0.0",
        "redux-observable": "^0.14.1",
        "rxjs": "^5.2.0"
    },
    "devDependencies": {
        "babel-eslint": "^7.1.1",
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "eslint": "^3.17.0",
        "eslint-plugin-flowtype": "^2.30.3",
        "eslint-plugin-jsx": "^0.0.2",
        "eslint-plugin-react": "^6.10.0",
        "eslint-plugin-react-native": "^2.3.1",
        "flow-bin": "^0.42.0",
        "jest": "19.0.2",
        "jest-cli": "^19.0.2",
        "react-test-renderer": "~15.4.1",
        "redux-devtools": "^3.3.2",
        "remote-redux-devtools": "^0.5.7"
    }
}

then ran react-native link.

Then use the font in my app:

import { View, Text } from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'

export const Volcalc = () => (
  <View style={styles.container}>
    <Text style={styles.text}>SHAPE</Text>
    <Shape />
    <Text style={styles.text}>HEIGHT</Text>
    <Height />
    <Text style={styles.text}>WIDTH</Text>
    <Width />
    <Text style={styles.text}>THICKNESS</Text>
    <Thickness />
  </View>
)

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor
  },
  text: {
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 15,
    fontFamily: 'Orbitron'
  }
}

In android it doesn't show the new font but has no error. In ios it has error:

Unrecognised font family "Orbitron"

What am I doing wrong?

How do I find out the EXACT value to place in fontFamily: 'xxx'?

I need to use react-native-scrollable-tab-view and accompanying that, I also installed/setup react-native-viewpager following this link. This error suddenly appeared and currently, I still can't find a way to solve it. I hope someone encountered it already and help me. I just started working with React Native 1 wk ago but this project I've been working on have been existing for more than a year so not all dependencies are updated including react-native which version is 0.59.10. I've already tried using react-native-scrollable-tab-view with a sample project using latest version of react-native and it works fine but unfortunately I don't think I can upgrade this project cause there are just so many dependencies that will be affected that complicates things. I hope there is a way to resolve it without having to affect other dependencies. Here is the error part of the log:

Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/sw mansion/gesturehandler/react/RNGestureHandlerEvent.java:3: error: package android.support.v4.util does not exist import android.support.v4.util.Pools; ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/sw mansion/gesturehandler/react/RNGestureHandlerEvent.java:19: error: package Pools does not exist private static final Pools.SynchronizedPool EVENTS_POOL = ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:3: error: package android.support.v4.util does not exist import android.support.v4.util.Pools; ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:19: error: package Pools does not exist private static final Pools.SynchronizedPool EVENTS_POOL = ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerEvent.java:20: error: package Pools does not exist new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE); ^ /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerStateChangeEvent.java:20: error: package Pools does not exist new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE); ^ Note: /Users/markrogercabadsan/ReactNativeProjects/endless-aisle-hybrid/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: Some input files use unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 6 errors

FAILURE: Build failed with an exception.

• What went wrong: Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'.

  Compilation failed; see the compiler error output for details.

• Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Deprecated Gradle features were used in this build, making it incompatible with Gradle 5.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/4.10.1/userguide/command_line_interface.html#sec:command_line_warnings

BUILD FAILED in 24s 251 actionable tasks: 27 executed, 224 up-to-date error Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/getting-started.html error Command failed: ./gradlew app:installDebug. Run CLI with --verbose flag for more details. Marks-MacBook-Pro:endless-aisle-hybrid markrogercabadsan$

When I run "react-native run-android",it gives me error:"could not connect to development server...".

• Package server is running and i can access it directly from browser in mobile device.
• My android device connected to computer has debugging enabled i checked it using adb devices command.
• My android version is 4.4.4 so i cannot use adb reverse command.
• I have set the ip address and port in Dev setting.
• Usb debug is on.
• OS is windows7.

So how to fix the red error screen issue?Any suggestion is appreciated!

On swipe, the transition to go back works, but when i press the back button the transition does not work in Android OS.

I have used react-navigation v4 https://reactnavigation.org/docs/en/getting-started.html

export const navStack = (screenName) => createStackNavigator({
    Screen1,
    Screen2,
    Screen3
}, {
    initialRouteName: screenName,
    defaultNavigationOptions: {
        ...TransitionPresets.SlideFromRightIOS,
        headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
        headerShown: false,
        gestureEnabled: true
    }
});
const AppTabNavigator = createBottomTabNavigator({
    TabScreen1: {
        screen: navStack("Screen1")
    },
    TabScreen2: {
        screen: AnyScreen
    },
}, {
    initialRouteName: "TabScreen1",
    backBehavior: "none",
    tabBarOptions: {
        showLabel: false
    }
});
export const App = createAppContainer(AppTabNavigator);

I just got started with react-native and android-studio. I have been trying to install it correctly for a few hours now to run my first App. However, I cannot seem to fix 2 errors.

The first one says the following :

error Failed to launch emulator. Reason: No emulators found as an output of 'emulator -list-avds.

I don't understand because I have a android virtual device manager running...

My second problem is the following :

error Failed to install the app. Make sure you have the Android development enivornment set up.

It says that A problem occurred configuring project :app SDK location not found and that I should define an ANDROID_SDK_ROOT However, I already did because when I echo $ANDROID_SDK_ROOT I do obtain the path.

Please see the following image for additional information in case you need it

Also, I have followed the following tutorial :https://levelup.gitconnected.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2. Everything is working correctly until the last step ("Running on Android").

I'm using rn-fetch-blob to download PDF file in react-native (android). File downloads successfully but when i try to open it says "Can't open file".

RNFetchBlob.config({
    fileCache: true,
    appendExt : extension,
    addAndroidDownloads : {
        useDownloadManager: true,
        notification : true,
        path: DownloadDir + "/me_"+Math.random().toString().slice(2, 6) + '.' + extension,
        mime : 'application/pdf',
        mediaScannable : true,
    }
})
.fetch('GET',         'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
          , { 'Cache-Control': 'no-store' })
        .then((res) => {
            alert('The file has saved!')
            console.log('The file saved to ', res)
        })

Unable to run android build in react_native

Attempt to invoke virtual method 'java.lang.Class[] java.lang.Class.getInterfaces()' on a null object reference

react-native": "^0.59.9",

I'm trying to create a section list containing items with different heights, for some reason I don't know the items are flickering. Inside the Items I create a series touchable based on server response and I use flex box to limit the number of items per row. I suspect that something about that might be the source of the bug but I can't figure what It is. Am I ignoring something about section lists that is causing this problem?

Click here quick video so you can see what I'm talking about

This is my screen component:

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { SectionList } from 'react-native';

import ScmHeader from '../../components/ScmHeader';
import ProgressLoader from '../../components/ProgressLoader';
import TimeTab from '../../components/TimeTab';
import ModalityCard from '../../components/ModalityCard';

import { Header, HeaderText } from './styles';
import GradientBackground from '../../styles/background';

import { alert } from '../../utils';
import request from '../../services/axiosRequest';

export default function EventOddsDetails({ navigation }) {
  const eventId = navigation.getParam('eventId');
  const [isLoading, setIsLoading] = useState(false);
  const [event, setEvent] = useState(null);
  const [currentPeriod, setCurrentPeriod] = useState('FT');

  const getEventById = () => {
    request({
      action: `evento/listarDetalhado`,
      params: {
        eventoId: eventId,
        aoVivo: false,
      },
      callbackFunction: response => {
        if (response.meta.status === 'success') {
          setEvent(response.data);
        } else {
          alert({ message: response.meta.message });
        }
      },
      loaderStateSetterFunction: setIsLoading,
    });
  };

  const getSectionListData = () => {
    const filteredPeriod = event.cotacao.find(
      timePeriod => timePeriod.tempo === currentPeriod
    );

    const data = filteredPeriod.modalidades.map(item => ({
      title: item.nomeModalidade,
      data: [
        {
          name: item.nomeModalidade,
          odds: item.cotacoes,
        },
      ],
    }));

    return data;
  };

  useEffect(getEventById, []);

  return (
    <>
      <ScmHeader title="Cotações" enableGoBackButton />
      <GradientBackground>
        {isLoading ? (
          <ProgressLoader />
        ) : (
          <>
            <TimeTab setPeriod={setCurrentPeriod} />
            {event && (
              <SectionList
                sections={getSectionListData()}
                keyExtractor={modality => modality.name}
                removeClippedSubviews
                renderItem={({ item: modality }) => {
                  return <ModalityCard modality={modality} />;
                }}
                renderSectionHeader={({ section: { title: modalityName } }) => (
                  <Header>
                    <HeaderText>{modalityName}</HeaderText>
                  </Header>
                )}
              />
            )}
          </>
        )}
      </GradientBackground>
    </>


EventOddsDetails.propTypes = {
  navigation: PropTypes.shape().isRequired,
};

EventOddsDetails.propTypes = {
  navigation: PropTypes.shape().isRequired,
};

This is the component I'm passing to renderItem.

import React from 'react';
import PropTypes from 'prop-types';

import {
  Card,
  OddWrapper,
  OddSelector,
  OddValueText,
  OddTypeText,
} from './styles';

export default function ModalityCard({ modality }) {
  return (
    <Card>
      <OddWrapper>
        {modality.odds.map((odd, index) => {
          const multipleRows = modality.odds.length > 3;
          const disabled = odd.valor <= 1;
          const finalOddText =
            odd.cabecalho !== null
              ? `${odd.cabecalho} ${odd.chave}`
              : odd.chave;

          return (
            <OddSelector
              key={`${index}${modality.name}${finalOddText}`}
              onPress={() => alert('Odd selector touched...')}
              disabled={disabled}
              multipleRows={multipleRows}
            >
              <OddValueText disabled={disabled}>
                {odd.valor.toFixed(2)}
              </OddValueText>
              <OddTypeText disabled={disabled}>{finalOddText}</OddTypeText>
            </OddSelector>
          );
        })}
      </OddWrapper>
    </Card>
  );
}

ModalityCard.propTypes = {
  modality: PropTypes.shape().isRequired,
};

And these are the styled components I'm using on the ModalityCard component

import styled from 'styled-components/native';

import theme from '../../styles/theme';

export const Card = styled.View`
  justify-content: center;
  background-color: ${theme.accentColor};
  padding: 5px;
  border-radius: 2px;
  margin-top: 3px;
  border-radius: 2px;
`;

export const OddWrapper = styled.View`
  flex: 1;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid ${theme.primaryColor};
  border-radius: 2px;
`;

export const OddSelector = styled.TouchableOpacity`
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-basis: 30%;
  padding: 5px;

  ${({ multipleRows }) => multipleRows && `max-width: 33%;`}
`;

export const OddTypeText = styled.Text`
  color: ${props => (props.disabled ? theme.secondarycolorDisabled : '#000')};
`;

export const OddValueText = styled.Text`
  color: ${props => (props.disabled ? theme.secondarycolorDisabled : '#000')};
  font-weight: bold;
  font-size: 15px;
`;

I would like to see, which function is keeping my JS thread the most busy. But in any profiling option I just cant see any JS related stuff.

1) Profiling

The most useful would be the V8 profiler, which is accessible in debug mode (in Chrome DevTools or React Native Debugger). Somebody here suggests to look for debuggerWorker.js, but in my Profiling session this thread is missing.

2) Systrace

I found the JS thread (mqt_js), but it is collapsed and cant be drilled into. Any ideas? I run systrace.py --time=20 -o trace.html sched gfx view -a com.my.rnapp

3) RN "Enable Sampling Profiler"

I even tried the (undocumented) "Enable Sampling Profiler" option in RN debug menu, it seems working, and shows a message with trace location, but file is unfortunately empty everytime. (eg. /data/user/0/com.my.rnapp/cache/sampling-profiler-trace119834863.cpuprofile). Checked using adb shell and ls -la.

Other info:

• tested both dev/prod versions, local metro bundler/bundled app
• React Native 0.61.1
• Emulator with Android API 25 (physical device as well)
• macOS 10.14

This is not a question on what storing system use, but is a question on what are the possible strategies to store data locally on a mobile platform (iOS and Android).

I wouldn't use AsyncStorage because data is not encrypted, I see that Realm could be a good candidate, however I am open to other alternatives.

My cross-platform React Native application handles some sensible data that should be persistent on the device. The meaning of persistent that I intend is:

Some sensible data that must be not removed/deleted/cleared by iOS or Android without the permission of the user. Data that must be available at each application upgrade, e.g. at each new release, these data must be remain unchanged and available like nothing happened after App update. Data must not be removed/deleted/cleared if the App is put in background (task manager), turned off or restarted. Data must be available even if the device is rebooted.

I tried each of these cases by using Realm and it seemed to be very good, but since I have not so much experience in mobile development, I preferred to ask the community if my considerations about Realm are correct or not. If no, I would ask what are the possible alternatives and why I am wrong.

Unfortunately, I have no permission to use cloud storages (e.g. CloudKit, iCloud, Firebase and so on...). My App must handle this data only locally on the device.

New scenario

Same identical previous restrictions of above (sensible data that must be not removed/deleted/cleared [...]), but considering the possibility to use cloud storage systems, what are the best good practices in this scenario, or better: where can I find out "a state of the art documentation" about these things for both platforms?

I try to get user location (with permission step no problem), but Google approach with his package react-native-geolocation-service and method getCurrentPosition return this:

{"coords": {"accuracy": 3, "altitude": 0, "heading": 0, "latitude": 0, "longitude": 0, "speed": 0}, "mocked": false, "timestamp": 1580744874000}.

I use this code (example from official documentation).

In brief:

Geolocation.getCurrentPosition(
        (position) => {
          this.setState({ location: position, loading: false });
          console.log(position);
        },
        (error) => {
          this.setState({ location: error, loading: false });
          console.log(error);
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> added to AndroidManifest.xml

When trying to run react-native app in Android Studio on an AVD (Pixel XL API 29) I'm getting the following error when launching the app inside the device:

url==null

I start the server npm run start each time before running the app inside Android Studio.

The app runs perfectly on iOS emulator inside XCode and builds with no errors.

The build output in Android Studio is also completed successfully each time. If I close the error message (below) - I can see the app navigation but none of the content loads (offline) and I can't click any of the buttons.

I thought it may be down to the websocket (I'm using the live url) but that didn't fix thing's either. I've searched google and have seen only a couple of these errors but nothing that could help me or fix my specific problem.

Is there any files I'm missing in android studio?

I'm trying to run react native on windows 10. when I run npm run android i get this following error

Starting JS server... Building and installing the app on the device (cd android && gradlew.bat installDebug)...

FAILURE: Build failed with an exception.

• What went wrong: Could not determine java version from '11.0.1'.

• Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/getting-started.html