I have recently started building apps using React Native. I would like to know how to push local storage data to the server automatically when the device connects to the internet in React Native?

I know there is react-native for IOS and Android but what about building a website at same time also with a ready to go desktop code , like in unity we can make IOS and Android and Desktop apps with few tweaks on code is that available now for other APPS ? i asked cause i dont wanna waste more time focusing in one language or technique , this last years i started some android studio programming and stopped cause most projects want an IOS and Android app also , i learned some php ,java script ,sql,java SE, and unity (did some games with it). but when i search for work i found that each company wanted a special techniques or languages and i dont think someone will know all programming (& network,Operating systems) technologies at same time , so is there some popular technology to do that at same time (ios+android+website+desktop) ?

I had implemented deeplinking in react-native both ios and android.

If I click the link http://mysampleapp.net/user/_id from Whatsapp or messages etc in android a custom dialogue is opened and we can select you application to open the link, it works fine but if we open the same link in chrome browser it doesn't redirect to my application even the application is installed. How can we do that?

For example, if we search for a product in amazon web in chrome browser and click the product link it automatically redirects and opens the amazon application if the app is installed in you device how can we do that in the react-native application.

I am using "react-native": "0.61.2"

Here is the code that I implemented in my manifest.xml file

<intent-filter>
     <action android:name="android.intent.action.VIEW" />
     <category android:name="android.intent.category.DEFAULT" />
     <category android:name="android.intent.category.BROWSABLE" />
     <data android:scheme="http" android:host="mysampleapp.net" />
   </intent-filter>

Deep linking works fine when I open the link http://mysampleapp.net/user/_id from my Whatsapp or any other source, I want to redirect to my application even when I open my link in chrome browser also.

I want to open several other applications from my React Native app.
Linking (https://facebook.github.io/react-native/docs/linking.html) works great for apps like facebook, google maps, tel, skype when I know their intent urls, but what I want to run is default ebook reader, youtube, IPLA and a bunch of games preinstalled on tablet, which urls / package names I don't know.

My team ex-member year ago creates other app with cordova and he uses this tool: https://github.com/lampaa/com.lampa.startapp.

Questions:
- whether there is some tool like lampaa startapp above, but for React Native, where I can run app with a package name, not url?
- how can I check the intent url (like 'fb:' for facebook, 'geo:' for g.maps) and package names (like 'com.google.android.apps.maps') of installed apps?
- how to run installed games and ebook reader, when I already have their package name but not url?

Android only, don't care about iOS.

I am trying to open a another app(https://play.google.com/store/apps/details?id=com.inova.velocity) from my app. But there are all the tutorial just redirecting url to playstore only.(I found a github link(https://github.com/FiberJW/react-native-app-link) and it opens the app for iOS only, but for Android it is redirecting to playstore). Is there is any way to solve this problem?

Linking.canOpenURL('market://details?id=com.inova.velocity')
      .then((canOpen) => {
        if (canOpen) { 
          console.log('open app'); 
          return Linking.openURL('market://details?id=com.inova.velocity')
                 };
        }).catch(err => console.log('An error occurred', err));

Am new to React-native. We are trying to implement a react-native App in which a button will be provided so that whenever a user clicks on the button he will be directed to play store if the app is not installed. If the App is already installed on the button click he should be able to open the app which is currently not happening.

AndroidManifest.xml

<intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 <intent-filter>
    <action android:name="android.intent.action.VIEW"></action>
    <category android:name="android.intent.category.DEFAULT">
  </category>
    <category android:name="android.intent.category.BROWSABLE">
  </category>
    <data  android:scheme="whatsapp"></data>
 </intent-filter>

Above is the code which we modified with in the AndroidManifest.xml file.

App.js We have a method called handle() which will handle the events

 handle(){
 let appName = 'whatsapp';
 let url = 'https://play.google.com/store/apps/details?id=com.whatsapp';
 Linking.openURL(url).catch(err => {
  if (err.code === 'EUNSPECIFIED') {
        if (Platform.OS === 'android') {
          Linking.openURL(
            url
          );
        }
      } else {
        throw new Error(`Could not open ${appname}. ${err.toString()}`);
      }
    });}

The above code is working fine for opening an app in Playstore. But when the app is installed already in the device it on the button click it should directly open the App using Custom url.

When we are using canOpenURL() with Custom Url schema it does nothing. And when i use Custom Url schema with openURL() it is giving me a warning saying no action is provided or defined in the android.intent.action.VIEW but it is provided.

const url = 'whatsapp://';
   Linking.canOpenURL(url).then(supported => {
    if (!supported) {
      console.log('Can\'t handle url: ' + url);
 }else {
      return Linking.openURL(url);
}
 }).catch(err => console.error('An error occurred', err));

Please help us. Thanks in Advace!!

I want to open New React native App by clicking on Button in which I have used

Linking Concepts in React native

React native Code : Test is the name of the Other App

Linking.openURL('Test://app');

Also Following URL for adding Intent in the android.manifest.xml file Andriod Intent

Code : Android.manifestfile.xml

<activity
        android:name=".MainActivity"
        android:launchMode="singleTask"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
          <intent-filter>
              <action android:name="android.intent.action.VIEW" />
              <category android:name="com.Test" />
              <category android:name="android.intent.category.BROWSABLE" />
              <data android:scheme="Test" android:host="app" />
          </intent-filter>
      </activity>

Please help to resolve the issue , thanks in advance!

I am trying to make my first React Native Android app and I am getting this error:

undefined is not an object (evaluating 'this.props.navigation.navigate')

This is the code:

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;    

    return (
      <View>
        <Button 
          title="Show Centers near me"
          onPress={() =>
            navigate('Results', "Search Term")
          }
          />
        <Text>or</Text>
      </View>
    );
  }
}


class ResultsScreen extends React.Component {

  static navigationOptions = {
    title: 'Results',
  };


  render() {
  const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Results: { screen: ResultsScreen }
});

I can not figure out why the error is coming.

I am trying to expose the VideoSupportFragment inside a React Native UI component. I have used the solution presented here. Like so:

public class LeanbackExoplayerViewManager extends ViewGroupManager<FrameLayout> {

    private static final String REACT_CLASS = "RCTVideo";
    @NonNull
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @NonNull
    @Override
    protected FrameLayout createViewInstance(@NonNull ThemedReactContext reactContext) {
        final FrameLayout view = new FrameLayout(reactContext);
        PlaybackVideoFragment fragment = new PlaybackVideoFragment();
        FragmentActivity activity = (FragmentActivity) reactContext.getCurrentActivity();
        activity.getSupportFragmentManager()
                .beginTransaction()
                .add(fragment, "My_TAG")
                .commit();
        activity.getSupportFragmentManager().executePendingTransactions();
        addView(view, fragment.getView(), 0);
        return view;
    }
}

This calls the fragment but the classes in the leanback library cannot find the resources present in the library. And gives an error when inflating the layout files. This fragment works perfectly when run on its own.

2019-11-22 12:01:32.121 8740-8740/com.videoproject E/unknown:ReactNative: Exception in native call
    android.view.InflateException: Binary XML file line #33: Binary XML file line #33: Error inflating class <unknown>
    Caused by: android.view.InflateException: Binary XML file line #33: Error inflating class <unknown>
    Caused by: java.lang.reflect.InvocationTargetException
        at java.lang.reflect.Constructor.newInstance0(Native Method)
        at java.lang.reflect.Constructor.newInstance(Constructor.java:334)
        at android.view.LayoutInflater.createView(LayoutInflater.java:647)
        at com.android.internal.policy.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:58)
        at android.view.LayoutInflater.onCreateView(LayoutInflater.java:720)
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:788)
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:730)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:863)
        at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:824)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:866)
        at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:824)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:515)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:423)
        at androidx.leanback.widget.PlaybackTransportRowPresenter.createRowViewHolder(PlaybackTransportRowPresenter.java:684)
        at androidx.leanback.widget.RowPresenter.onCreateViewHolder(RowPresenter.java:326)
        at androidx.leanback.widget.ItemBridgeAdapter.onCreateViewHolder(ItemBridgeAdapter.java:363)
        at androidx.recyclerview.widget.RecyclerView$Adapter.createViewHolder(RecyclerView.java:6794)
        at androidx.recyclerview.widget.RecyclerView$Recycler.tryGetViewHolderForPositionByDeadline(RecyclerView.java:5975)
        at androidx.recyclerview.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5858)
        at androidx.recyclerview.widget.RecyclerView$Recycler.getViewForPosition(RecyclerView.java:5854)
        at androidx.leanback.widget.GridLayoutManager.getViewForPosition(GridLayoutManager.java:1086)
        at androidx.leanback.widget.GridLayoutManager$2.createItem(GridLayoutManager.java:1614)
        at androidx.leanback.widget.SingleRow.appendVisibleItems(SingleRow.java:113)
        at androidx.leanback.widget.Grid.appendOneColumnVisibleItems(Grid.java:389)
        at androidx.leanback.widget.GridLayoutManager.appendOneColumnVisibleItems(GridLayoutManager.java:1840)
        at androidx.leanback.widget.GridLayoutManager.onLayoutChildren(GridLayoutManager.java:2277)
        at androidx.recyclerview.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:3924)
        at androidx.recyclerview.widget.RecyclerView.dispatchLayout(RecyclerView.java:3641)
        at androidx.recyclerview.widget.RecyclerView.onLayout(RecyclerView.java:4194)
        at android.view.View.layout(View.java:19586)
        at android.view.ViewGroup.layout(ViewGroup.java:6053)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
        at android.view.View.layout(View.java:19586)
        at android.view.ViewGroup.layout(ViewGroup.java:6053)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
        at android.view.View.layout(View.java:19586)
        at android.view.ViewGroup.layout(ViewGroup.java:6053)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:323)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:261)
        at android.view.View.layout(View.java:19586)
        at android.view.ViewGroup.layout(ViewGroup.java:6053)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.updateLayout(NativeViewHierarchyManager.java:251)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.updateLayout(NativeViewHierarchyManager.java:219)
        at com.facebook.react.uimanager.UIViewOperationQueue$UpdateLayoutOperation.execute(UIViewOperationQueue.java:154)
        at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:779)
        at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:888)
        at com.f

And another:

2019-11-22 12:12:40.728 20319-20319/com.videoproject E/unknown:ReactNative: Exception in native call
    java.lang.NullPointerException: Attempt to invoke virtual method 'android.graphics.Bitmap android.graphics.drawable.BitmapDrawable.getBitmap()' on a null object reference
        at androidx.leanback.widget.PlaybackControlsRow$ClosedCaptioningAction.<init>(PlaybackControlsRow.java:726)
        at androidx.leanback.widget.PlaybackControlsRow$ClosedCaptioningAction.<init>(PlaybackControlsRow.java:711)
        at com.brentvatne.exoplayer.leanback.VideoPlayerGlue.<init>(VideoPlayerGlue.java:46)
        at com.brentvatne.exoplayer.leanback.PlaybackVideoFragment.initializePlayer(PlaybackVideoFragment.java:180)
        at com.brentvatne.exoplayer.leanback.PlaybackVideoFragment.onStart(PlaybackVideoFragment.java:123)

I am very new to react native. I need to use a pure native SDK provided by external source in a React Native Application. This is the link I found(the toast example).

https://facebook.github.io/react-native/docs/native-modules-android.html

I have gone through the documentation but I really don't get it. Can someone walk through the Toast module specifying what really needs to be written where in the default project structure of react native that is created using react-native init "ProjectName"?

In recent update of the facebook SDK, i got this issue while syncing the gradle file in android project.

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

facebook-core:5.11.1 failed to resolve

Hi after creating the universal apk application does not open on the device and crash

React Native Version:

• System:

  • OS: macOS Mojave 10.14.6
  • CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
  • Memory: 74.69 MB / 8.00 GB
  • Shell: 3.2.57 - /bin/bash

• Binaries:

  • Node: 10.16.3 - /usr/local/bin/node
  • Yarn: 1.17.3 - /usr/local/bin/yarn
  • npm: 6.9.0 - /usr/local/bin/npm

• SDKs:

  • iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
  • Android SDK: API Levels: 22, 23, 24, 25, 26, 27, 28, 29 Build Tools: 27.0.3, 28.0.3, 29.0.2

• IDEs:

  • Android Studio: 3.5 AI-191.8026.42.35.5900203

  • Xcode: 11.2/11B52 - /usr/bin/xcodebuild

  • npmPackages:

  • react: 16.8.6 => 16.8.6

  • react-native: 0.60.5 => 0.60.5

  • npmGlobalPackages:

  react-native-cli: 2.0.1

android/app/build.gradle

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    defaultConfig {
        applicationId "com.detaysoft.mobile.bnet"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 325
        versionName "6.3.3"
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            if (project.hasProperty('RELEASE_STORE_FILE')) {
                storeFile file(RELEASE_STORE_FILE)
                storePassword RELEASE_STORE_PASSWORD
                keyAlias RELEASE_KEY_ALIAS
                keyPassword RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }

    packagingOptions {
        pickFirst '**/armeabi-v7a/libc++_shared.so'
        pickFirst '**/x86/libc++_shared.so'
        pickFirst '**/arm64-v8a/libc++_shared.so'
        pickFirst '**/x86_64/libc++_shared.so'
        pickFirst '**/x86/libjsc.so'
        pickFirst '**/armeabi-v7a/libjsc.so'
    }
}

I am new to React-native . I'm trying to style a view element in my component, and when attempting to apply style tag , I'm getting the following error:
NOTE : My style tag in separate js file
In styles.js

import {Dimensions} from 'react-native';

    const DEVICE_WIDTH= Dimensions.get('window').width;
    const DEVICE_HEIGHT= Dimensions.get('window').height;

    export default {
       container:{
          backgroundColor: 'white',
          flex:1 ,
          width: DEVICE_WIDTH,
          height: DEVICE_HEIGHT,
         }
    };

in Main.js file

import React,{ Component } from 'react';
import { Router,Scene,Actions} from "react-native-router-flux";
import {View} from 'react-native';

import styles from './styles.js'

class Main extends Component{

render(){
    return(
            <View style={styles.container} >
                    <Text>
                        Hello pages
                    </Text>
            </View>

    );
  }
}

 export default Main;

Error screen:

I have a mobile app with user signup by email and password working correctly. I want to change it as mentioned below.

I want to signup a user with his email and phone number without specifying the password. This is done by a system admin. Then at the first signing in, the user should be able to do a phone auth and then set the password. Do firebase support this? If yes, can someone point me out how to do it?

I created a new React-Native project using react-native init AppName and when I tried to run in Android it throws Cannot get property 'dependencies' on null object in line @react-native-community\cli-platform-android\native_modules.gradle' line: 183 I am not sure why I am getting this exception. I didn't even do any changes in the project

Following is the command I use

react-native init Example
cd Example
npm i
react-native run-android

Version of react-native

react-native-cli: 2.0.1
react-native: 0.61.3

Version of npm - 6.11.2

I have problem with module 'react-navigation-stack' I've written the same code from https://facebook.github.io/react-native/docs/navigation#react-navigation. Platform: Android. OS: ubuntu

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import SearchScreen from './scr/screen/SearchScreen';

const navigator = createStackNavigator(
    {
        Search: SearchScreen
    },
    {
        initialRouteName: 'Search',
        defaultNavigationOptions: {
            title: 'App'
        }
    }
);
const App = createAppContainer(navigator);
export default App;

I have an app to connect user and I have a problem to upload images and put download url in database.
I'm using:

• Node: 12.9.1
  
• Yarn: 1.13.0
  
• npm: 6.10.2
  
• react-native-cli: 2.0.1
  
• react-native: 0.60.5
  

I will put my code here:

import React, {useState} from 'react';
import {
    View,
    ImageBackground,
    Image,
    Text,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    AsyncStorage,
    Platform,
} from 'react-native';
import {Avatar} from 'react-native-elements';
import ImagePicker from 'react-native-image-picker';
import RNFetchBlob from 'react-native-fetch-blob';

import firebaseApp from '../config/firebaseConfig';

import background from '../assets/background.png';
import logo from '../assets/logo.png';

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

export default class Logon extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userID: null,
            email: '',
            password: '',
            name: '',
            surname: '',
            birthdate: null,
            picture: null,
            title: '',
            nickname: '',
            errorMessage: null,
            city: '',
        };
    }

    render() {
        return (
            <ImageBackground style={styles.background} source={background}>
                <View style={styles.container}>
                    <Image style={styles.logo} source={logo} />

                    <View style={styles.formContainer}>
                        <ScrollView>
                            <View style={styles.iconContainer}>
                                <Avatar
                                    size="xlarge"
                                    rounded
                                    title="GS"
                                    source={{uri: this.state.picture}}
                                    activeOpacity={0.7}
                                    onPress={() => this.handlePicture()}
                                />
                            </View>
                            <View style={styles.inputContainer}>
                                <Text style={styles.inputText}>Email: </Text>
                                <TextInput
                                    keyboardType="email-address"
                                    autoCapitalize="none"
                                    autoCorrect={false}
                                    placeholder="email@email.com"
                                    placeholderTextColor="#999"
                                    onChangeText={email => this.setState({email})}
                                    style={styles.input}
                                />
                            </View>
                            <View style={styles.inputContainer}>
                                <Text style={styles.inputText}>Senha: </Text>
                                <TextInput
                                    secureTextEntry={true}
                                    autoCapitalize="none"
                                    autoCorrect={false}
                                    onChangeText={password => this.setState({password})}
                                    style={styles.input}
                                />
                            </View>
                            <View style={styles.inputContainer}>
                                <Text style={styles.inputText}>Nome: </Text>
                                <TextInput
                                    style={styles.input}
                                    onChangeText={name => this.setState({name})}
                                />
                            </View>
                            <View style={styles.inputContainer}>
                                <Text style={styles.inputText}>Sobrenome: </Text>
                                <TextInput
                                    style={styles.input}
                                    onChangeText={surname => this.setState({surname})}
                                />
                            </View>
                            <View style={styles.inputContainer}>
                                <Text style={styles.inputText}>Nickname: </Text>
                                <TextInput
                                    style={styles.input}
                                    onChangeText={nickname => this.setState({nickname})}
                                />
                            </View>
                            <View style={styles.buttonContainer}>
                                <TouchableOpacity
                                    style={styles.sendButton}
                                    onPress={() => this.handleLogon()}>
                                    <Text style={styles.sendButtonText}>Enviar</Text>
                                </TouchableOpacity>
                            </View>
                            {/* {this.renderErrorMessage()} */}
                            <View style={styles.logonContainer}>
                                <Text style={styles.logonText}>Já tens a tua conta?</Text>
                                <TouchableOpacity onPress={() => this.handleLogin()}>
                                    <Text style={styles.logoButtonText}>Clica aqui</Text>
                                </TouchableOpacity>
                            </View>
                        </ScrollView>
                    </View>
                </View>
            </ImageBackground>
        );
    }

    handleLogin = () => {
        this.props.navigation.navigate('Login');
    };

    handlePicture = () => {
        ImagePicker.showImagePicker(options, response => {
            if (response.didCancel) {
                return;
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                this.setState({
                    picture: response.uri,
                });
            }
        });
    };

    handleLogon = async () => {
        await firebaseApp
            .auth()
            .createUserWithEmailAndPassword(this.state.email, this.state.password)
            .then(userData => {
                uploadImage(userData.user.uid);
            });
    };
}

export const uploadImage = (userId, mime = 'application/octet-stream') => {
    return dispatch => {
        return new Promise((resolv, reject) => {
            const uri = () => {
                this.state.picture;
            };
            const uploadUri =
                Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
            let uploadBlob = null;
            const imageRef = firebaseApp
                .storage()
                .ref('users')
                .child(userId);
            fs.readFile(uploadUri, 'base64')
                .then(data => {
                    return Blob.build(data, {type: `${mime};BASE64`});
                })
                .then(blob => {
                    uploadBlob = blob;
                    return imageRef.put(blob._ref, blob, {contentType: mime});
                })
                .then(() => {
                    uploadBlob.close();
                    return imageRef.getDownloadURL();
                })
                .then(url => {
                    resolv(url);
                    console.log(url);
                    storeReference(url, userId);
                })
                .catch(error => {
                    reject(error);
                });
        });
    };
};

const storeReference = (downloadUrl, sessionId) => {
    const data = {
        ID: sessionId,
        email: this.state.email,
        name: this.state.name,
        surname: this.state.surname,
        nickname: this.state.nickname,
        picture: downloadUrl,
    };
    firebaseApp
        .database()
        .ref('users/' + sessionId)
        .set(data);
};

const options = {
    title: 'Select Avatar',
    takePhotoButtonTitle: 'Capturar foto',
    chooseFromLibraryButtonTitle: 'Escolher da galeria',
    storageOptions: {
        skipBackup: true,
        path: 'GameSolv',
    },
};

const styles = StyleSheet.create({
    background: {
        width: '100%',
        height: '100%',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    logo: {
        width: 500,
        height: 150,
        top: 20,
    },
    formContainer: {
        flex: 1,
        width: '80%',
        paddingTop: 70,
    },
    iconContainer: {
        alignItems: 'center',
        paddingBottom: 20,
    },
    inputContainer: {
        paddingBottom: 20,
    },
    inputText: {
        color: '#FFF',
        fontSize: 16,
        letterSpacing: 3,
    },
    email: {
        height: 46,
        alignSelf: 'stretch',
        backgroundColor: '#FFF',
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 4,
        marginTop: 0,
        paddingHorizontal: 15,
    },
    input: {
        height: 46,
        alignSelf: 'stretch',
        backgroundColor: '#FFF',
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 4,
        marginTop: 0,
        paddingHorizontal: 15,
    },
    sendButton: {
        marginTop: 20,
        marginBottom: 30,
        width: 200,
        height: 45,
        backgroundColor: '#FFF',
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonContainer: {
        alignItems: 'center',
    },
    sendButtonText: {
        fontSize: 30,
        fontWeight: 'bold',
        color: '#622980',
        letterSpacing: 7,
        fontFamily: 'Roboto-Light',
    },
    logonContainer: {
        alignItems: 'center',
        paddingBottom: 20,
    },
    logonText: {
        color: '#FFF',
        fontSize: 16,
        letterSpacing: 3,
    },
    logoButtonText: {
        color: '#fcef21',
        fontSize: 16,
        letterSpacing: 3,
        textDecorationLine: 'underline',
    },
});

Image with the error
It says:

Attempt to invoke interface method 'java.lang.String com.facebook.react.bridge.ReadableMap.getString(java.lang.String)' on a null object reference

I am new to react-native. when I try to run my app from the android-studio with my phone connected via USB (debug mode enabled). Build succeeded& App got installed into the phone. but when I try to open the app, it crashes immediately. please check the screenshot for the error and java line from the debug mode.

error in debug:

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.parable.rnmvp, PID: 18237
    java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
        at java.util.ArrayList.get(ArrayList.java:437)
        at com.dooboolab.RNIap.RNIapModule.onPurchasesUpdated(RNIapModule.java:517)
        at com.dooboolab.RNIap.RNIapModule$11.run(RNIapModule.java:544)
        at com.dooboolab.RNIap.RNIapModule$2.onBillingSetupFinished(RNIapModule.java:103)
        at com.android.billingclient.api.BillingClientImpl$BillingServiceConnection$1.run(BillingClientImpl.java:1521)
        at android.os.Handler.handleCallback(Handler.java:873)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:232)
        at android.app.ActivityThread.main(ActivityThread.java:7165)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:576)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:888)

ArrayList.java (error block)

public E get(int index) {
        if (index >= size)
            throw new IndexOutOfBoundsException(outOfBoundsMsg(index)); //line 437 (from this line it throws error)
        return (E) elementData[index];
    }

Please help me to fix this issue. if I need to share any extra info. please ask in the comments.

I am Android developer, I am new in flutter/react-native application development. Need help about development possibility regarding below requirements,

I am developing chat application like Slack with all the features including, single, group chat, media sharing, read receipt, typing intimation, add/remove participants, admin assignments (for group chat), video and voice calling (single and conference calls), screen sharing, integration with external apps etc.

Is this all possible with Flutter/react-native? What are the libraries provided for the communication with chat servers like Mongooseim - XMPP, Socket.io etc.?

Questions:

• The performance of application in Android and IOS as compare to Native developed apps.
• Is there background service works for Android/IOS?
• Notification supports
• Video and audio calling performance.
• Database handling (like export database file and push over cloud for backup form app)
• Alarm manager support for task execution in particular time.

which framework is better native or cross-platform for this kind of app development?

Play Store now requires that your app uses API level 28:

Both new apps and app updates must target at least Android 9 (API level 28).

Source

My app was currently using targetSdkVersion = 26 with this configuration:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
        googlePlayServicesAuthVersion = "15.0.1"
        googlePlayServicesVersion = "15.0.1"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        classpath 'com.google.gms:google-services:4.2.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}


task wrapper(type: Wrapper) {
    gradleVersion = '4.7'
    distributionUrl = distributionUrl.replace("bin", "all")
}

/**
* Project-wide gradle configuration properties for use by all modules
*/
ext {
    compileSdkVersion               = 28
    targetSdkVersion                = 28
    buildToolsVersion               = "28.0.3"
    googlePlayServicesVersion       = "12.0.1"
    googlePlayServicesVisionVersion = "15.0.2"
    supportLibVersion               = "28.0.0"
}
subprojects {
    project.configurations.all {
        resolutionStrategy.eachDependency { details ->
            if (details.requested.group == 'com.android.support'&& !details.requested.name.contains('multidex') ) {
            details.useVersion "28.0.0"
            }
        }
    }
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 28
                buildToolsVersion '28.0.3'
            }
        }
    }
}

Trying to fix this I've changed to this:

ext {
    compileSdkVersion               = 28
    targetSdkVersion                = 28
    buildToolsVersion               = "28.0.3"
    googlePlayServicesVersion       = "12.0.1"
    googlePlayServicesVisionVersion = "15.0.2"
    supportLibVersion               = "28.0.0"
}

The app seems to run just fine in a device we have here which has Android 6.0, but in other devices like Android 9, the app crashes on the start, throwing the error bellow:

What am I doing wrong?