add results components

src/components/BlankResults.tsx

@@ -0,0 +1,27 @@
+import React, { Component }from 'react';
+
+import {
+  Text,
+  View,
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    } as React.ViewStyle,
+});
+
+interface Props {
+}
+
+
+export default function BlankResults(props : Props) {
+  return (
+    <View style={styles.container}>
+      <Text>Something</Text>
+    </View>
+  );
+}

src/components/Input.tsx

@@ -3,7 +3,6 @@ import React, { Component }from 'react';
 import { TextInput, View, StyleSheet } from 'react-native';
 import { BRAND_PRIMARY } from '../settings/styles';
 
-
 const styles = StyleSheet.create({
     inputBorder: {
       borderWidth: 1,

src/components/Results.tsx

@@ -0,0 +1,32 @@
+import React, { Component }from 'react';
+import zxcvbn from 'zxcvbn';
+import {
+  Text,
+  View,
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    } as React.ViewStyle,
+});
+
+interface Props {
+  value: string;
+}
+
+interface State {
+
+}
+
+export default function Result(props : Props) {
+  const resultData = zxcvbn(props.value);
+  return (
+    <View style={styles.container}>
+      <Text>{resultData.score}</Text>
+    </View>
+  );
+}

src/types/index.ts

@@ -4,3 +4,8 @@ declare module "react-native-vector-icons/FontAwesome" {
   var noTypeInfoYet: any; // any var name here really
   export = noTypeInfoYet;
 }
+
+declare module "zxcvbn" {
+  var noTypeInfoYet: any; // any var name here really
+  export = noTypeInfoYet;
+}

src/views/main.tsx

@@ -5,11 +5,14 @@ import {
     View
 } from 'react-native';
 import Input from '../components/Input';
+import Results from '../components/Results';
+import BlankResults from '../components/BlankResults';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'stretch',
+    justifyContent: 'center',
     backgroundColor: '#FFF',
   } as React.ViewStyle,
 
@@ -39,12 +42,15 @@ export default class App extends Component<any, State> {
   }
 
   render() {
+    const results = this.state.text ? (
+      <Results value={this.state.text} />
+    ) : (
+      <BlankResults />
+    );
     return (
       <View style={styles.container}>
         <Input onSubmit={this.handleSubmit} value={this.state.text} />
-        <Text style={styles.text}>
+        { results }
-          Welcome to React Native!
-        </Text>
       </View>
     );
   }