diff --git a/src/components/BlankResults.tsx b/src/components/BlankResults.tsx
new file mode 100644
index 0000000..6e00402
--- /dev/null
+++ b/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 (
+
+ Something
+
+ );
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index e5eadfd..0ca5a3d 100644
--- a/src/components/Input.tsx
+++ b/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,
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
new file mode 100644
index 0000000..81fefcf
--- /dev/null
+++ b/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 (
+
+ {resultData.score}
+
+ );
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index 7f1c6d5..bcd6432 100644
--- a/src/types/index.ts
+++ b/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;
+}
diff --git a/src/views/main.tsx b/src/views/main.tsx
index 000eff7..3cf2540 100644
--- a/src/views/main.tsx
+++ b/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 {
}
render() {
+ const results = this.state.text ? (
+
+ ) : (
+
+ );
return (
-
- Welcome to React Native!
-
+ { results }
);
}