WIP

Author: jeremyfelder

src/components/index.tsx

@@ -0,0 +1,5 @@
+import Cell from './cell';
+import TextInput from './textInput';
+import TabBarIcon from './tabBarIcon';
+
+export { Cell, TextInput, TabBarIcon}

src/components/textInput.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { View, StyleSheet } from "react-native";
+import { Colors } from '../assets';
+
+export default function TextInput(props: any) {
+  const {placeholder} = props
+  const [hasFocus, setHasFocus] = useState(false)
+  return (
+    <View style={styles.container}>
+      <TextInput
+        placeholderTextColor={Colors.lightgrey}
+        multiline={false}
+        keyboardType='default'
+        textContentType='none'
+        autoCapitalize='none'
+        returnKeyType='done'
+        autoCorrect={false}
+        clearButtonMode='never'
+        autoFocus={false}
+        selectionColor={Colors.mintcream}
+        style={styles.input}
+        placeholder={hasFocus ? undefined : placeholder}
+        underlineColorAndroid={'transparent'}
+        onFocus={() => {
+          setHasFocus(true)
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'stretch',
+    marginHorizontal: 16
+  },
+  input: {
+    width: '100%'
+  }
+})

src/navigation/MainTabNavigator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { StatsStack, BookListsStack, AccountStack } from './index';
-import { Colors, Images } from '../assets/';
+import { Colors, Images } from '../assets';
 import TabBarIcon, { tabBarIconArguments } from '../components/tabBarIcon';
 
 

src/navigation/index.tsx

@@ -1,7 +1,7 @@
 import AccountStack from './AccountStack'; 
 import BookListsStack from './BookListsStack'; 
 import StatsStack from './StatsStack'; 
-import MainTabNavigator from './MainTabNavigator'; 
+import MainTabNavigator from './MainTabNavigator';
 
 const ScreenNames = {
   NEW_BOOK: "Book",

src/screens/books/bookList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SectionList, Text, View, StyleSheet, Alert } from "react-native";
+import { SectionList, Text, View, StyleSheet } from "react-native";
 import { Colors, Images } from '../../assets';
 import { Divider } from 'react-native-elements';
 import Cell, { CellProps, CellDivider } from '../../components/cell';

src/screens/notes/note.tsx

@@ -1,24 +1,26 @@
 import * as React from 'react';
-import { TextInput } from "react-native-gesture-handler";
-import { Strings } from "../../assets";
-import { View, Text, StyleSheet } from "react-native";
+import { TextInput } from '../../components';
+import { Strings } from '../../assets';
+import { View, Text, StyleSheet, KeyboardAvoidingView } from "react-native";
 
 export default function Note (props: any) {
   return (
-    <View>
-      <Text style={styles.title}>{"New Note Test String"}</Text>
-      <TextInput
-        defaultValue={Strings.exampleTitle}
-      />
-      <Text style={styles.author}>{Strings.Author}</Text>
-      <TextInput
-        defaultValue={Strings.exampleAuthor}
-      />
-      <Text style={styles.pages}>{Strings.NumPages}</Text>
-      <TextInput
-        defaultValue={Strings.exampleNumPages}
-      />
-    </View>
+    <KeyboardAvoidingView behavior='padding' keyboardVerticalOffset={20}>
+      <View>
+        <Text style={styles.title}>{"New Note Test String"}</Text>
+        <TextInput
+          placeholder={Strings.exampleTitle}
+        />
+        <Text style={styles.author}>{Strings.Author}</Text>
+        <TextInput
+          defaultValue={Strings.exampleAuthor}
+        />
+        <Text style={styles.pages}>{Strings.NumPages}</Text>
+        <TextInput
+          defaultValue={Strings.exampleNumPages}
+        />
+      </View>
+    </KeyboardAvoidingView>
   )
 }
 

src/screens/notes/noteList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { StyleSheet, View, SectionList, TouchableHighlight, Text, Alert } from 'react-native';
+import { StyleSheet, View, SectionList, TouchableHighlight, Text } from 'react-native';
 import EmptyNoteList from '../notes/emptyNoteList';
-import { CellDivider, CellProps } from '../../components/cell';
+import { CellDivider } from '../../components/cell';
 import { Colors } from 'react-native/Libraries/NewAppScreen';
 import { ScreenNames } from '../../navigation';
 import { deviceWidth } from '../../utilities';

tsconfig.json

@@ -15,8 +15,10 @@
     "moduleResolution": "node",               
     "baseUrl": "./",                          
     "paths": {
-      "@assets/*": ["src/assets/*"],
-      "@components/*": ["src/components/*"],
+      "@assets": ["./src/assets"],
+      "@assets/*": ["./src/assets/*"],
+      "@components": ["./src/components"],
+      "@components/*": ["./src/components/*"],
     },
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,