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

Had the same issue here.

My ejected Expo app runs well on iOS but gets the error for Android.

I fixed it by removing a "duplicated" AsyncStorage package from my package.json for some reason I had the community package as well as the package recommended by ReactNative.dev

Once removing the community package, cleaned the node_modules and build everything without issues.

Answer 2

"@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.