Data lost with last version of react-native and AsyncStorage - react-native

Question

When I try to update my application (android/ios) with react-native and expo my data is lost and i don't know why :
old version :
"react-native": "0.51.0",
"redux-persist": "4.8.2",
new version :
"redux-persist": "4.8.2",
"react-native": "~0.61.5",
"expo": "^37.0.12",
Build with expo for the newer version
How I persist the data. The code hasn't changed between versions.
useEffect(() => {
persistStore(
store,
{
storage: AsyncStorage,
whitelist: ['data', 'data2' ],
transforms: [
createTransform(
state => state,
state => ({
...state,
infosOpened: false,
}),
{
whitelist: 'app',
}
),
],
},
() => {
setRehydrated(true)
}
)
}, [])
AsyncStorage is imported from react-native and I keep react-native with expo. #react-native-community/async-storage isn't compatible.
As what I saw inside the older version data is persisted with SQLlite format 3 inside "data user". Data appears to be always here with the newer version but it is no longer recovered.
I don't know if there is some braking changes react-native from version 51 to 61. I see nothing inside github release tags.
Edit1: OK so it seems that the problem is that RN use RCTAsyncLocalStorage_V1 folder and expo RCTAsyncLocalStorage. How I can fix that with the easiest way for IOS and Android ? Is it better to eject expo app or to add migration code ?
Edit2: Finally I opted for an RN version with react-native-unimodules like that I have no problem with path storage and I can use some dependencies from expo. (https://blog.expo.io/you-can-now-use-expo-apis-in-any-react-native-app-7c3a93041331)
Maybe the solution under works... I didn't test it
Another possible solution here. I didn't test it too :
https://github.com/expo/expo/issues/8220#issuecomment-656300244

Answer 1

You can find the sample code for migration in the snippet. This snippet is migration from Expo to pure RN. You will only have to reverse migration.
import React, { Component } from 'react';
import { View, ActivityIndicator, AsyncStorage } from 'react-native';
import PropTypes from 'prop-types';
import RNFS from 'react-native-fs';
export default class WalletMigrate extends Component {
componentDidMount() {
this.migrateDataFromExpo();
}
migrationComplete() {
console.log('Migration was successful. Exiting migration...')
this.props.onComplete();
}
// Migrate Document directory from Expo
async migrateDataFromExpo() {
const expoDirectoryExists = await RNFS.exists(RNFS.DocumentDirectoryPath + '/ExponentExperienceData');
if (!expoDirectoryExists) {
console.log('Expo data was previously migrated. Exiting migration...');
this.props.onComplete();
return;
}
try {
await RNFS.unlink(RNFS.DocumentDirectoryPath + '/RCTAsyncLocalStorage_V1')
console.log('/RCTAsyncLocalStorage_V1 has been deleted. Continuing...')
} catch {
console.log('/RCTAsyncLocalStorage_V1 does not exist. Continuing...')
}
RNFS.copyFile(
RNFS.DocumentDirectoryPath + '/ExponentExperienceData/%40USERNAME%2FAPPNAME/RCTAsyncLocalStorage',
RNFS.DocumentDirectoryPath + '/RCTAsyncLocalStorage_V1',
)
.then(() => {
RNFS.readDir(RNFS.DocumentDirectoryPath + '/RCTAsyncLocalStorage_V1').then(files => {
files.forEach(file => {
if (file.name !== 'manifest.json') {
RNFS.readFile(file.path).then(fileContents => {
AsyncStorage.setItem('data', fileContents)
.then(() => {
RNFS.unlink(RNFS.DocumentDirectoryPath + '/ExponentExperienceData').then(() => this.migrationComplete());
})
.catch(() => {
console.log('An error was encountered when trying to delete /ExponentExperienceData. Exiting migration...');
this.props.onComplete();
})
.then(() => this.migrationComplete())
});
}
});
})
.catch(error => {
console.log('An error was encountered when trying to read the /RTCAsyncLocalStorage_V1 directory. Exiting migration...');
console.log(error);
this.props.onComplete();
});
})
.catch(_error => this.props.onComplete());
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}>
<ActivityIndicator />
</View>
);
}
}
WalletMigrate.propTypes = {
onComplete: PropTypes.func,
};