first commit with working example

.gitignore

@@ -0,0 +1,8 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+yarn.lock
+*.jks
+*.p12
+*.key
+*.mobileprovision

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,8 @@
+// App.js
+import React from 'react';
+import Main from './app/main';
+export default class App extends React.Component {
+  render() {
+    return <Main />;
+  }
+}

app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "My flash cards",
+    "slug": "flash_cards",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

app/components/header.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+const Header = ({ title }) => (
+  <View style={styles.headerContainer}>
+    <Text style={styles.headerText}>{title.toUpperCase()}</Text>
+  </View>
+);
+const styles = StyleSheet.create({
+  headerContainer: {
+    marginTop: 40
+  },
+  headerText: {
+    color: 'white',
+    fontSize: 22,
+    fontWeight: '500'
+  }
+});
+export default Header;

app/components/input.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import { inputPlaceholder } from '../utils/colors';
+const Input = ({ inputValue, onChangeText, onDoneAddItem }) => (
+  <TextInput
+    style={styles.input}
+    value={inputValue}
+    onChangeText={onChangeText}
+    placeholder="Type here to add note."
+    placeholderTextColor={inputPlaceholder}
+    multiline={true}
+    autoCapitalize="sentences"
+    underlineColorAndroid="transparent"
+    selectionColor={'white'}
+    maxLength={30}
+    returnKeyType="done"
+    autoCorrect={false}
+    blurOnSubmit={true}
+    onSubmitEditing={onDoneAddItem}
+  />
+);
+const styles = StyleSheet.create({
+  input: {
+    paddingTop: 10,
+    paddingRight: 15,
+    fontSize: 34,
+    color: 'white',
+    fontWeight: '500'
+  }
+});
+export default Input;

app/main.js

@@ -0,0 +1,47 @@
+
+import React from 'react';
+import { StyleSheet, Text, View, StatusBar } from 'react-native';
+import { LinearGradient } from 'expo';
+import { primaryGradientArray } from './utils/colors';
+import Header from './components/header';
+import Input from './components/input';
+const headerTitle = 'To Do';
+export default class Main extends React.Component {
+  state = {
+    inputValue: ''
+  };
+  newInputValue = value => {
+    this.setState({
+      inputValue: value
+    });
+  };
+  render() {
+    const { inputValue } = this.state;
+    return (
+      <LinearGradient
+        colors={primaryGradientArray}
+        style={styles.container}
+      >
+        <StatusBar barStyle="light-content" />
+        <View style={styles.centered}>
+          <Header title={headerTitle} />
+        </View>
+        <View style={styles.inputContainer}>
+          <Input inputValue={inputValue} onChangeText={this.newInputValue} />
+        </View>
+      </LinearGradient>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  centered: {
+    alignItems: 'center'
+  },
+  inputContainer: {
+    marginTop: 40,
+    paddingLeft: 15
+  }
+});

app/utils/colors.js

@@ -0,0 +1,11 @@
+const primaryStart = '#f18a69';
+const primaryEnd = '#d13e60';
+export const primaryGradientArray = [primaryStart, primaryEnd];
+export const lightWhite = '#fcefe9';
+export const inputPlaceholder = '#f1a895';
+export const lighterWhite = '#f4e4e2';
+export const circleInactive = '#ecbfbe';
+export const circleActive = '#90ee90';
+export const itemListText = '#555555';
+export const itemListTextStrike = '#c4c4cc';
+export const deleteIconColor = '#bc2e4c';

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package.json

@@ -0,0 +1,18 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  },
+  "private": true
+}