extract logo loading from Credits into a new component

Author: hawkrives

source/views/components/logo.js

@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react'
+import * as Icons from '@hawkrives/react-native-alternate-icons'
+import glamorous from 'glamorous-native'
+
+import {lookup as getAppIcon} from '../../../images/icon-images'
+
+const LogoImage = glamorous.image({
+	width: 100,
+	height: 100,
+	alignSelf: 'center',
+})
+
+type Props = {
+	style?: StyleSheet,
+}
+
+type State = {
+	icon: number,
+}
+
+export class AppLogo extends React.Component<Props, State> {
+	state = {
+		icon: getAppIcon('default'),
+	}
+
+	async componentWillMount() {
+		const name = await Icons.getIconName()
+		console.warn(name)
+		this.setState(() => ({icon: getAppIcon(name)}))
+	}
+
+	render() {
+		console.warn(this.state.icon)
+		return <LogoImage source={this.state.icon} style={this.props.style} />
+	}
+}

source/views/settings/credits.js

@@ -5,23 +5,14 @@ import {data as credits} from '../../../docs/credits.json'
 import glamorous from 'glamorous-native'
 import {Platform} from 'react-native'
 import {iOSUIKit, material} from 'react-native-typography'
-
-import {icons as appIcons} from '../../../images/icon-images'
-import * as Icons from '@hawkrives/react-native-alternate-icons'
-import type {TopLevelViewPropsType} from '../types'
+import {AppLogo} from '../components/logo'
 
 const Container = glamorous.scrollView({
 	backgroundColor: c.white,
 	paddingHorizontal: 5,
 	paddingVertical: 10,
 })
 
-const Logo = glamorous.image({
-	width: 100,
-	height: 100,
-	alignSelf: 'center',
-})
-
 const Title = glamorous.text({
 	textAlign: 'center',
 	marginTop: 10,
@@ -58,49 +49,22 @@ const Contributors = glamorous(About)({
 
 const formatPeopleList = arr => arr.map(w => w.replace(' ', ' ')).join(' • ')
 
-type Props = TopLevelViewPropsType
-
-type State = {
-	iconType: null | string,
-}
-
-export default class CreditsView extends React.Component<Props, State> {
-	static navigationOptions = {
-		title: 'Credits',
-	}
+export default function CreditsView() {
+	return (
+		<Container contentInsetAdjustmentBehavior="automatic">
+			<AppLogo />
 
-	state = {
-		iconType: null,
-	}
+			<Title>{credits.name}</Title>
+			<About>{credits.content}</About>
 
-	componentWillMount() {
-		this.getIcon()
-	}
+			<Heading>Contributors</Heading>
+			<Contributors>{formatPeopleList(credits.contributors)}</Contributors>
 
-	getIcon = async () => {
-		const name = await Icons.getIconName()
-		this.setState(() => ({iconType: name}))
-	}
-
-	render() {
-		const image =
-			this.state.iconType === 'default' ? appIcons.oldMain : appIcons.windmill
-
-		return (
-			<Container contentInsetAdjustmentBehavior="automatic">
-				<Logo source={image} />
-
-				<Title>{credits.name}</Title>
-				<About>{credits.content}</About>
-
-				<Heading>Contributors</Heading>
-				<Contributors>{formatPeopleList(credits.contributors)}</Contributors>
-
-				<Heading>Acknowledgements</Heading>
-				<Contributors>
-					{formatPeopleList(credits.acknowledgements)}
-				</Contributors>
-			</Container>
-		)
-	}
+			<Heading>Acknowledgements</Heading>
+			<Contributors>{formatPeopleList(credits.acknowledgements)}</Contributors>
+		</Container>
+	)
+}
+CreditsView.navigationOptions = {
+	title: 'Credits',
 }