My Android app crashes. Seems like this has something to do with react-native-reanimated but can't get a working fix on this.
The iOS works just fine, only android has issues.
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@babel/preset-typescript": "^7.18.6",
"@expo/react-native-action-sheet": "^3.8.0",
"@expo/vector-icons": "^12.0.0",
"@react-native-async-storage/async-storage": "react-native-async-storage/async-storage",
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.10.0",
"@react-navigation/drawer": "^5.10.0",
"@react-navigation/material-bottom-tabs": "^5.2.18",
"@react-navigation/native": "^6.0.12",
"@react-navigation/stack": "^5.10.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.8.1",
"eslint-config-prettier": "^6.11.0",
"expo": "^44.0.6",
"expo-app-loading": "~1.2.1",
"expo-blur": "~10.0.3",
"expo-constants": "~12.1.3",
"expo-image-picker": "~11.0.3",
"expo-linear-gradient": "~10.0.3",
"expo-linking": "~2.4.2",
"expo-local-authentication": "~12.0.1",
"expo-notifications": "~0.13.3",
"expo-optimize": "^0.1.46",
"expo-permissions": "~13.0.3",
"expo-secure-store": "~11.0.3",
"expo-sharing": "~10.0.3",
"expo-status-bar": "~1.1.0",
"lottie-react-native": "4.0.3",
"moment": "^2.27.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-link": "^1.0.3",
"react-native": "0.64.3",
"react-native-animatable": "^1.3.3",
"react-native-gesture-handler": "~1.10.2",
"react-native-input-credit-card": "^0.5.5",
"react-native-loading-placeholder": "^0.0.6",
"react-native-modalize": "^2.0.6",
"react-native-paper": "^4.2.0",
"react-native-picker-select": "^7.0.0",
"react-native-portalize": "^1.0.7",
"react-native-reanimated": "2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-step-indicator": "^1.0.3",
"react-number-format": "^4.4.1",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-form": "^8.3.6",
"redux-thunk": "^2.3.0",
"yarn": "^1.22.5"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"babel-preset-expo": "8.5.1"
},
"private": true
}
App.js
// import 'react-native-reanimated';
import 'react-native-gesture-handler';
import React, { useState } from 'react';
//Redux
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import ReduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
//Reducer
import {
authReducer,
cartReducer,
favoriteReducer,
orderReducer,
productReducer,
} from './src/reducers';
//Navigator
import { AppNavigator } from './src/navigation';
import AppLoading from 'expo-app-loading';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
//redux form
import { reducer as formReducer } from 'redux-form';
import { StatusBar } from 'expo-status-bar';
//Notification
import LocalNotication from './src/components/Notification/LocalNotification';
const rootReducer = combineReducers({
store: productReducer,
cart: cartReducer,
order: orderReducer,
auth: authReducer,
fav: favoriteReducer,
form: formReducer,
});
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(ReduxThunk)));
const LoadAssets = async () => {
const imageAssets = Asset.loadAsync([
require('./src/assets/Images/banner1.jpg'),
require('./src/assets/Images/banner3.jpg'),
require('./src/assets/Images/banner4.jpg'),
require('./src/assets/Images/banner5.jpg'),
require('./src/assets/Images/banner6.jpg'),
require('./src/assets/Images/bg1.jpg'),
require('./src/assets/Images/bg2.jpg'),
require('./src/assets/Images/bg3.jpg'),
require('./src/assets/Images/defaultprofile.jpg'),
require('./src/assets/Images/flower3.jpg'),
require('./src/assets/Images/logoNoText.png'),
require('./src/assets/Images/logo1.png'),
require('./src/assets/Images/logoTextWhite.png'),
require('./src/assets/Images/slide1.png'),
require('./src/assets/Images/slide2.png'),
require('./src/assets/Images/slide3.png'),
require('./src/assets/Images/social1.png'),
require('./src/assets/Images/social2.png'),
require('./src/assets/Images/social3.png'),
require('./src/assets/Images/creditcards.png'),
require('./src/assets/Images/faceid.png'),
]);
const fetchFonts = Font.loadAsync({
'Roboto-Bold': require('./src/assets/Fonts/Roboto-Bold.ttf'),
'Roboto-BoldItalic': require('./src/assets/Fonts/Roboto-BoldItalic.ttf'),
'Roboto-Italic': require('./src/assets/Fonts/Roboto-Italic.ttf'),
'Roboto-LightItalic': require('./src/assets/Fonts/Roboto-LightItalic.ttf'),
'Roboto-Medium': require('./src/assets/Fonts/Roboto-Medium.ttf'),
'Roboto-MediumItalic': require('./src/assets/Fonts/Roboto-MediumItalic.ttf'),
'Roboto-Regular': require('./src/assets/Fonts/Roboto-Regular.ttf'),
});
return await Promise.all([imageAssets, fetchFonts]);
};
export default function App() {
const [assetLoaded, setAssetLoaded] = useState(false);
if (!assetLoaded) {
return (
<AppLoading
startAsync={LoadAssets}
onFinish={() => setAssetLoaded(true)}
onError={console.warn}
/>
);
}
return (
<Provider store={store}>
<StatusBar style="dark" />
<LocalNotication />
<AppNavigator />
</Provider>
);
}
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
What could be the issue?