It’s easier to debug locally, so I downloaded the ZIP file, unzipped it, ran yarn in the unzipped directory, ran expo start and opened it in Expo Go. At that point I got the following printed in the terminal and a similar error in Expo Go:
Logs for your project will appear below. Press Ctrl+C to exit.
Android Bundling complete 14998ms
Android Running app on SM-G950F
Invariant Violation: Invalid prop `resizeMode` of value `` supplied to `StyleSheet cardImage`, expected one of ["center","contain","cover","repeat","stretch"].
StyleSheet cardImage: {
"width": null,
"backgroundColor": "red",
"alignSelf": "center",
"alignItems": "center",
"borderRadius": 20,
"marginBottom": 20,
"resizeMode": ""
}
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:204:6 in guardedLoadModule
at http://192.168.1.2:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&minify=false:118795:3 in global code
Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
After removing “resizeMode” it just crashes Expo Go.
Then I deleted all of the contents of the StyleSheet.create(...) call:
const styles = StyleSheet.create({
cardImage: {
},
card: {
},
swipablecard: {
},
profileStatus: {
},
});
At that point it no longer crashes.
If I put back only the contents of the cardImage styles, Expo Go doesn’t crash, but there are several errors.
const styles = StyleSheet.create({
cardImage: {
width: win - 50,
backgroundColor: 'red',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginBottom: 20,
},
card: {
},
swipablecard: {
},
profileStatus: {
},
});
If I put back just the card or swipablecard styles there are no errors or crashes.
const styles = StyleSheet.create({
cardImage: {
},
card: {
flex: 1,
flexGrow: 1,
borderRadius: 10,
borderWidth: 2,
borderColor: '#E8E8E8',
justifyContent: 'center',
backgroundColor: 'white',
},
swipablecard: {
},
profileStatus: {
},
});
or:
const styles = StyleSheet.create({
cardImage: {
},
card: {
},
swipablecard: {
width: '98%',
height: 600,
overflow: 'hidden',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginBottom: 20,
},
profileStatus: {
},
});
If I put back just the profileStatus styles Expo Go crashes immediately.
const styles = StyleSheet.create({
cardImage: {
},
card: {
},
swipablecard: {
},
profileStatus: {
height: 'fitContent',
paddingTop: 20,
paddingBottom: 20,
paddingLeft: 5,
paddingRight: 5,
backgroundColor: 'grey',
borderRadius: 10,
marginBottom: 20,
},
});
So it seems that the problems are in the profileStatus and cardImage styles.
If I put back just the card and swipablecard styles without the cardImage and profileStatus styles then there is still no crash/error.
const styles = StyleSheet.create({
cardImage: {
},
card: {
flex: 1,
flexGrow: 1,
borderRadius: 10,
borderWidth: 2,
borderColor: '#E8E8E8',
justifyContent: 'center',
backgroundColor: 'white',
},
swipablecard: {
width: '98%',
height: 600,
overflow: 'hidden',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginBottom: 20,
},
profileStatus: {
},
});
The most suspicious-looking part of the profileStatus styles is this line:
height: 'fitContent',
If I remove the cardImage styles and remove the height style from profileStatus then again there’s no crash and no error.
OK, so let’s look at cardImage next. The most suspicious looking part of that is this line:
width: win - 50,
where win is defined as follows:
const win = Dimensions.get('screen');
If I get rid of the width line from the cardImage styles, again there are no crashes or errors. If you log the contents of win you’ll see it’s not a number, so win - 50 doesn’t make sense:
const win = Dimensions.get('screen');
console.log(JSON.stringify(win));
{"width":360,"height":740,"scale":3,"fontScale":1}
So you need to use win.width rather than just win, like this:
// [...]
const win = Dimensions.get('screen');
const styles = StyleSheet.create({
cardImage: {
width: win.width - 50,
backgroundColor: 'red',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginBottom: 20,
},
card: {
flex: 1,
flexGrow: 1,
borderRadius: 10,
borderWidth: 2,
borderColor: '#E8E8E8',
justifyContent: 'center',
backgroundColor: 'white',
},
swipablecard: {
width: '98%',
height: 600,
overflow: 'hidden',
alignSelf: 'center',
alignItems: 'center',
borderRadius: 20,
marginBottom: 20,
},
profileStatus: {
paddingTop: 20,
paddingBottom: 20,
paddingLeft: 5,
paddingRight: 5,
backgroundColor: 'grey',
borderRadius: 10,
marginBottom: 20,
},
});
// [...]
