Wsrtjtyk

I upgraded my react native project created with CRNA.
Project was running just fine on iOS before the upgrade but I had some issues when loading it on an android device/emulator and I was hoping the upgrade would solve them.
I upgraded expo from version 27.0.1 to 31.0.4,
I read through the whole:
https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough
to check for any breaking changes.

I went, step-by-step through upgrading expo:
https://docs.expo.io/versions/v31.0.0/workflow/upgrading-expo

Old package.json:

{

  "name": "FamScore3",

  "version": "0.1.0",

  "private": true,

  "devDependencies": {

    "react-native-scripts": "1.14.0",

    "jest-expo": "~27.0.0",

    "react-test-renderer": "16.3.1"

  },

  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",

  "scripts": {

    "start": "react-native-scripts start",

    "eject": "react-native-scripts eject",

    "android": "react-native-scripts android",

    "ios": "react-native-scripts ios",

    "test": "jest"

  },

  "jest": {

    "preset": "jest-expo"

  },

  "dependencies": {

    "@firebase/auth": "^0.7.6",

    "@firebase/database": "^0.3.6",

    "axios": "^0.18.0",

    "expo": "^27.0.1",

    "firebase": "^5.5.1",

    "react": "16.3.1",

    "react-native": "~0.55.2",

    "react-native-elements": "^0.19.1",

    "react-native-material-dropdown": "^0.11.1",

    "react-native-router-flux": "^4.0.1",

    "react-redux": "^5.0.7",

    "redux": "^4.0.0",

    "redux-thunk": "^2.3.0"

  }

}

Old app.json:

{

  "expo": {

    "sdkVersion": "27.0.0"

  }

}

Upgraded package.json:

{

  "name": "FamScore3",

  "version": "0.1.0",

  "private": true,

  "devDependencies": {

    "react-native-scripts": "1.14.0",

    "jest-expo": "^31.0.0",

    "react-test-renderer": "16.3.1"

  },

  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",

  "scripts": {

    "start": "react-native-scripts start",

    "eject": "react-native-scripts eject",

    "android": "react-native-scripts android",

    "ios": "react-native-scripts ios",

    "test": "jest"

  },

  "jest": {

    "preset": "jest-expo"

  },

  "dependencies": {

    "@firebase/auth": "^0.7.6",

    "@firebase/database": "^0.3.6",

    "axios": "^0.18.0",

    "metro-react-native-babel-preset": "^0.45.0",

    "expo": "^31.0.4",

    "firebase": "^5.5.1",

    "react": "16.5.0",

    "react-native": "https://github.com/expo/react-native/archive/sdk-31.0.1.tar.gz",

    "react-native-elements": "^0.19.1",

    "react-native-material-dropdown": "^0.11.1",

    "react-native-router-flux": "^4.0.1",

    "react-redux": "^5.0.7",

    "redux": "^4.0.0",

    "redux-thunk": "^2.3.0"

  }

}

Upgraded app.json:

{

  "expo": {

    "sdkVersion": "31.0.0"

  }

}

After the upgrade was complete, I reinstalled the expo app on my iPhone 6s. I cleared the cache in expo. Shut down the expo packager and terminal and rebooted my computer.

Now the app is throwing errors on both iOS and Android.
On iOS i get the error:

Error received on physical device

Where the first error is located(the Icon-related):

<Button style={styles.buttonStyle} textStyle={{ flex: 1 }} onPress={() => this.authUser()}>

            <Icon

              iconStyle={styles.iconStyle}

              size={iconSize}

              color={'#ea8a8a'}

              type='simple-line-icon'

              name={'heart'}

            />

            Login

          </Button>

The Button used here is actually not imported from react-native but a custom one I made with the same name(probably a bad idea but hey):

class Button extends Component {



  render() {

    return (

      <TouchableOpacity onPress={this.props.onPress} style={[styles.buttonStyle, this.props.style]}>

        <Text style={[styles.textStyle, this.props.textStyle]}>{this.props.children}</Text>

      </TouchableOpacity>

    )

  }

}



export { Button }

This was never an issue before the update and I really can't seem to find what broke this code.
Any help would be much appreciated as I find myself running in circles over here.
If you want me to provide you with any additional code, I'll gladly do so.
Thanks a bunch in advance.

Button doesn't accept this syntax. If you need an icon in your button, try TouchableHighlight or similar:

<TouchableHighlight onPress={()=>{}}>

     <View>

         <Icon

              iconStyle={styles.iconStyle}

              size={iconSize}

              color={'#ea8a8a'}

              type='simple-line-icon'

              name={'heart'}

            />

        <Text> Login </Text>

     </View>

 </TouchableHighlight>