Native module RNC_AsyncSQLiteDBStorage tried to override AsyncStorageModule

Question

java.lang.IllegalStateException: Native module RNC_AsyncSQLiteDBStorage tried to override AsyncStorageModule. Check the getPackages() method in MainApplication.java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. This error may also be present if the package is present only once in getPackages() but is also automatically added later during build time by autolinking. Try removing the existing entry and rebuild.

MainApplication.java

@Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      return packages;
    }

Register/index.js

import React, {useState} from 'react';
import {StyleSheet, View, ScrollView} from 'react-native';
import {Button, Gap, Header, Input, Loading} from '../../components';
 import {colors, storeData, useForm} from '../../utils';
import {Fire} from '../../config';
import {showMessage} from 'react-native-flash-message';

const Register = ({navigation}) => {
 const [form, setForm] = useForm({
fullName: '',
profession: '',
email: '',
password: '',
  });
    const [loading, setLoading] = useState(false);

   const onContinue = () => {
     console.log(form);
     const data = {
    fullName: form.fullName,
    profession: form.profession,
     email: form.email,
    };
     navigation.navigate('UploadPhoto', data);

// setLoading(true);
// Fire.auth()
//   .createUserWithEmailAndPassword(form.email, form.password)
//   .then((success) => {
//     setLoading(false);
//     setForm('reset');

//     const data = {
//       fullName: form.fullName,
//       profession: form.profession,
//       email: form.email,
//     };

//     Fire.database()
//       .ref('users/' + success.user.uid + '/')
//       .set(data);
//     storeData('user', data);
//     navigation.navigate('UploadPhoto', data);

//     console.log('register success:', success);
//   })
//   .catch((error) => {
//     const errorMessage = error.message;
//     setLoading(false);
//     showMessage({
//       message: errorMessage,
//       type: 'default',
//       backgroundColor: colors.error,
//       color: colors.white,
//     });
//     console.log('error:', error);
//   });
          };

  return (
   <>
  <View style={styles.page}>
    <Header onPress={() => navigation.goBack()} title="Daftar Akun" />
    <View style={styles.content}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <Input
          label="Full Name"
          value={form.fullName}
          onChangeText={(value) => setForm('fullName', value)}
        />
        <Gap height={24} />
        <Input
          label="Pekerjaan"
          value={form.profession}
          onChangeText={(value) => setForm('profession', value)}
        />
        <Gap height={24} />
        <Input
          label="Email"
          value={form.email}
          onChangeText={(value) => setForm('email', value)}
        />
        <Gap height={24} />
        <Input
          label="Password"
          value={form.password}
          onChangeText={(value) => setForm('password', value)}
          secureTextEntry
        />
        <Gap height={40} />
        <Button title="Continue" onPress={onContinue} />
      </ScrollView>
    </View>
  </View>
  {loading && <Loading />}
</>
    );
 };

 export default Register;

   const styles = StyleSheet.create({
   page: {backgroundColor: colors.white, flex: 1},
    content: {padding: 40, paddingTop: 0},
   });

UploadPhoto/index.js

  import React, {useState} from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import {IconAddPhoto, ILNullPhoto, IconRemovePhoto} from '../../assets';
import {Header, Link, Button, Gap} from '../../components';
import {colors, fonts} from '../../utils';
import {launchImageLibrary} from 'react-native-image-picker';
import {showMessage} from 'react-native-flash-message';

export default function index({navigation, route}) {
const {fullName, profession, email} = route.params;
console.log('fullName:', fullName)
console.log('profession:', profession)
console.log('email:', email)

const [hasPhoto, setHasPhoto] = useState(false);
const [photo, setPhoto] = useState(ILNullPhoto);
const getImage = () => {
launchImageLibrary({}, (response) => {
  console.log('response:', response);
  if (response.didCancel || response.error) {
    showMessage({
      message: 'oops, sepertinya anda tidak memilih fotonya?',
      type: 'default',
      backgroundColor: colors.error,
      color: colors.white,
    });
  } else {
    const source = {uri: response.uri};
    setPhoto(source);
    setHasPhoto(true);
    }
  });
 };

return (
<View style={styles.page}>
  <Header title="Upload Photo" />
  <View style={styles.content}>
    <View style={styles.profile}>
      <TouchableOpacity style={styles.avatarWrapper} onPress={getImage}>
        <Image source={photo} style={styles.avatar} />
        {hasPhoto && <IconRemovePhoto style={styles.addPhoto} />}
        {!hasPhoto && <IconAddPhoto style={styles.addPhoto} />}
      </TouchableOpacity>
      <Text style={styles.name}>Ferdiansyah</Text>
      <Text style={styles.profession}>Programmer</Text>
    </View>
    <View>
      <Button
        disable={!hasPhoto}
        title="Upload and Continue"
        onPress={() => navigation.replace('MainApp')}
      />
      <Gap height={30} />
      <Link
        title="Skip for this"
        align="center"
        size={16}
        onPress={() => navigation.replace('MainApp')}
      />
    </View>
  </View>
</View>
);
}

 const styles = StyleSheet.create({
  page: {flex: 1, backgroundColor: colors.white},
  content: {
paddingHorizontal: 40,
paddingBottom: 64,
flex: 1,
justifyContent: 'space-between',
},
 profile: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
 },
 avatar: {width: 110, height: 110, borderRadius: 110 / 2},
 avatarWrapper: {
width: 130,
height: 130,
borderWidth: 1,
borderColor: colors.border,
borderRadius: 130 / 2,
alignItems: 'center',
justifyContent: 'center',
 },
    addPhoto: {position: 'absolute', bottom: 8, right: 6},
  name: {
fontSize: 24,
color: colors.text.primary,
fontFamily: fonts.primary[600],
textAlign: 'center',
 },
 profession: {
fontSize: 18,
fontFamily: fonts.primary.normal,
textAlign: 'center',
color: colors.text.secondary,
marginTop: 4,
 },
 });

Answer 1

"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/async-storage": "~1.12.0",

In package.json, I removed the community one, rebuilt the project then it worked.

Answer 2

To solve native module rnc_asyncsqlitedbstorage tried to override asyncstorage module, you should do like this:

1. npm install react-scripts --save

2. npm install -g react-native-cli

3. npm i @react-native-async-storage/async-storage

4. npm i @react-native-community/async-storage

5. npm rebuild

6. Delete the Community async line from package.json (your version may be different)

"@react-native-community/async-storage": "^1.12.1",

PS: if red screen reappears again then npm rebuild and then re run.

Answer 3

I fixed it by running this

npm i @react-native-async-storage/async-storage