title: React Native - Expo: Invariant Violation: Nesting of <View> within <Text> is not currently supported
body: <p>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:
  <a href="https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough" rel="nofollow noreferrer">https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough</a>
  to check for any breaking changes.</p>
  
  <p>I went, step-by-step through upgrading expo:
  <a href="https://docs.expo.io/versions/v31.0.0/workflow/upgrading-expo" rel="nofollow noreferrer">https://docs.expo.io/versions/v31.0.0/workflow/upgrading-expo</a></p>
  
  <p>Old package.json:</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p>Old app.json:</p>
  
  <pre><code>{
    "expo": {
      "sdkVersion": "27.0.0"
    }
  }
  </code></pre>
  
  <p>Upgraded package.json:</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p>Upgraded app.json:</p>
  
  <pre><code>{
    "expo": {
      "sdkVersion": "31.0.0"
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Now the app is throwing errors on both iOS and Android.
  On iOS i get the error:</p>
  
  <p><a href="https://i.stack.imgur.com/CE9nU.jpg" rel="nofollow noreferrer">Error received on physical device</a></p>
  
  <p>Where the first error is located(the Icon-related):</p>
  
  <pre><code>&lt;Button style={styles.buttonStyle} textStyle={{ flex: 1 }} onPress={() =&gt; this.authUser()}&gt;
              &lt;Icon
                iconStyle={styles.iconStyle}
                size={iconSize}
                color={'#ea8a8a'}
                type='simple-line-icon'
                name={'heart'}
              /&gt;
              Login
            &lt;/Button&gt;
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>class Button extends Component {
  
    render() {
      return (
        &lt;TouchableOpacity onPress={this.props.onPress} style={[styles.buttonStyle, this.props.style]}&gt;
          &lt;Text style={[styles.textStyle, this.props.textStyle]}&gt;{this.props.children}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      )
    }
  }
  
  export { Button }
  </code></pre>
  
  <p>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.</p>