title: ES6 Arrow Function with Typescript
body: <p>Extremely new to Typescript,
  I'm not sure how to make this work.</p>
  
  <p>Did some research like destructuring but still am not able to get it right.</p>
  
  <pre><code>import React from "react";
  import { StyleSheet, Text, View } from "react-native";
  
  const styles = {
    container: {
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center"
    }
  };
  
  const App = (style: any): {} =&gt; {
    const { container } = styles;
    return (
      &lt;View style={container}&gt;
        &lt;Text&gt;Open up App.tsx to start working on your app!&lt;/Text&gt;
      &lt;/View&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p>Error below:</p>
  
  <pre><code>(JSX attribute) style?: StyleProp&lt;ViewStyle&gt;
  Type '{ flex: number; backgroundColor: string; alignItems: string; justifyContent: string; }' is not assignable to type 'StyleProp&lt;ViewStyle&gt;'.
    Type '{ flex: number; backgroundColor: string; alignItems: string; justifyContent: string; }' is not assignable to type 'ViewStyle'.
      Types of property 'alignItems' are incompatible.
        Type 'string' is not assignable to type 'FlexAlignType'.ts(2322)
  index.d.ts(2206, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;View&gt; &amp; Readonly&lt;ViewProps&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt;'
  </code></pre>