title: react-native can't open expo project
body: <p>I am trying to run an expo project <a href="https://snack.expo.io/@kirimi/collapsible-header-with-tabview" rel="nofollow noreferrer">Collapsible Header with TabView</a> it works fine in this link. </p>
  
  <p>But when I copy and paste the code to my own expo project, it gives me an error. </p>
  
  <p><code>Invariant Violation: Element type is invalid: expected a string or a class/function.</code> <code>Check the render method of App</code></p>
  
  <p>The only thing I changed is <code>class TabView</code> to <code>class App</code> but it is giving me this error. </p>
  
  <p>Also, if I want to build a native code project not expo. How would I run this code? because there is <code>import {Constants } from expo</code> this wouldn't work in <code>react-native run-ios</code></p>
  
  <pre><code>import * as React from 'react';
  import {
    View,
    StyleSheet,
    Dimensions,
    ImageBackground,
    Animated,
    Text
  } from 'react-native';
  import { Constants } from 'expo';
  import { TabViewAnimated, TabBar } from 'react-native-tab-view'; // Version can be specified in package.json
  import ContactsList from './components/ContactsList';
  
  const initialLayout = {
    height: 0,
    width: Dimensions.get('window').width,
  };
  
  const HEADER_HEIGHT = 240;
  const COLLAPSED_HEIGHT = 52 + Constants.statusBarHeight;
  const SCROLLABLE_HEIGHT = HEADER_HEIGHT - COLLAPSED_HEIGHT;
  
  export default class TabView extends React.Component {
    constructor(props: Props) {
       super(props);
  
       this.state = {
         index: 0,
         routes: [
           { key: '1', title: 'First' },
           { key: '2', title: 'Second' },
           { key: '3', title: 'Third' },
         ],
         scroll: new Animated.Value(0),
       };
     }
  
     _handleIndexChange = index =&gt; {
       this.setState({ index });
     };
  
     _renderHeader = props =&gt; {
       const translateY = this.state.scroll.interpolate({
         inputRange: [0, SCROLLABLE_HEIGHT],
         outputRange: [0, -SCROLLABLE_HEIGHT],
         extrapolate: 'clamp',
       });
  
       return (
         &lt;Animated.View style={[styles.header, { transform: [{ translateY }] }]}&gt;
           &lt;ImageBackground
             source={{ uri: 'https://picsum.photos/900' }}
             style={styles.cover}&gt;
             &lt;View style={styles.overlay} /&gt;
             &lt;TabBar {...props} style={styles.tabbar} /&gt;
           &lt;/ImageBackground&gt;
         &lt;/Animated.View&gt;
       );
     };
  
     _renderScene = () =&gt; {
       return (
         &lt;ContactsList
           scrollEventThrottle={1}
           onScroll={Animated.event(
             [{ nativeEvent: { contentOffset: { y: this.state.scroll } } }],
             { useNativeDriver: true }
           )}
           contentContainerStyle={{ paddingTop: HEADER_HEIGHT }}
         /&gt;
       );
     };
  
    render() {
      return (
       &lt;TabViewAnimated
         style={styles.container}
         navigationState={this.state}
         renderScene={this._renderScene}
         renderHeader={this._renderHeader}
         onIndexChange={this._handleIndexChange}
         initialLayout={initialLayout}
       /&gt;
     );
   }
  }
  
  const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
   overlay: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, .32)',
   },
   cover: {
     height: HEADER_HEIGHT,
   },
   header: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     zIndex: 1,
   },
   tabbar: {
     backgroundColor: 'rgba(0, 0, 0, .32)',
     elevation: 0,
     shadowOpacity: 0,
   },
  });
  </code></pre>