android/app/build.gradle

@@ -179,6 +179,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-vector-icons')
     implementation project(':@react-native-community_async-storage')
     implementation fileTree(dir: "libs", include: ["*.jar"])
     implementation "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/java/com/ankilan/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
 import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ankilan'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':@react-native-community_async-storage'
 project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/Podfile

@@ -36,6 +36,8 @@ target 'ankilan' do
 
   pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
 
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+
   target 'ankilanTests' do
     inherit! :search_paths
     # Pods for testing

ios/ankilan.xcodeproj/project.pbxproj

@@ -16,6 +16,22 @@
 		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		2DCD954D1E0B4F2C00145EB5 /* ankilanTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ankilanTests.m */; };
+		4D52FDE523E84B2791C3D67D /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3000D2B3834E4C66A28382F8 /* AntDesign.ttf */; };
+		B90493FFE9264DF5B6CC7C44 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = ADE75B0AF3E84621B5059B43 /* Entypo.ttf */; };
+		31DBC812F4DE446B9D3DC7B1 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7AD629F9A4B44BFE9AFEA2E9 /* EvilIcons.ttf */; };
+		52508E432BC44BF7A5E64891 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4712AA6A09254CA2B29AF3F5 /* Feather.ttf */; };
+		BA64553EADB24FB9AB6E0F82 /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DE8FAE89F42A46C381F68DAF /* FontAwesome.ttf */; };
+		42092AB24C2F4A0987A993FA /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = F6F0D28CAB1A451DAA9BA6AE /* FontAwesome5_Brands.ttf */; };
+		A2E24CE7C18C4CFF97F78377 /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BCC0EEAD424E456DA490EE4F /* FontAwesome5_Regular.ttf */; };
+		631DA64D244F4F8F915F2121 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BDB3D4C6185B4CB69E360505 /* FontAwesome5_Solid.ttf */; };
+		369E14D730C449659A20A504 /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 256E5C94D0AC40E381A107A5 /* Fontisto.ttf */; };
+		0F7CA4B8C6454C77B1E45705 /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D3378FED83674C7297D95B3C /* Foundation.ttf */; };
+		D2D1008687164C9CB74A95D7 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CCF85275316C4FA29EBEBEF3 /* Ionicons.ttf */; };
+		659D1586ED4C433BA9DD67DB /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 37CF45EBB8E541AFB0AEEED1 /* MaterialCommunityIcons.ttf */; };
+		97EA10A37A0942C0B0FD6C44 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 99E0F4267E0B4BB69A5994F3 /* MaterialIcons.ttf */; };
+		60D08C8669D9491891F0EAE0 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 006C0665080F4DB581A45597 /* Octicons.ttf */; };
+		157D60FEAF7C49948291342D /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 00E332BD0E6B4F69AD2BFB66 /* SimpleLineIcons.ttf */; };
+		31C2D4A00BF24B9989303435 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 16C65B2FFA244990A98EED99 /* Zocial.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -51,6 +67,22 @@
 		2D02E4901E0B4A5D006451C7 /* ankilan-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "ankilan-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+		3000D2B3834E4C66A28382F8 /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		ADE75B0AF3E84621B5059B43 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		7AD629F9A4B44BFE9AFEA2E9 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		4712AA6A09254CA2B29AF3F5 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		DE8FAE89F42A46C381F68DAF /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		F6F0D28CAB1A451DAA9BA6AE /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		BCC0EEAD424E456DA490EE4F /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		BDB3D4C6185B4CB69E360505 /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		256E5C94D0AC40E381A107A5 /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		D3378FED83674C7297D95B3C /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		CCF85275316C4FA29EBEBEF3 /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		37CF45EBB8E541AFB0AEEED1 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		99E0F4267E0B4BB69A5994F3 /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		006C0665080F4DB581A45597 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		00E332BD0E6B4F69AD2BFB66 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		16C65B2FFA244990A98EED99 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -140,6 +172,7 @@
 				00E356EF1AD99517003FC87E /* ankilanTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				F26EA599C9CA4864823C1698 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -157,6 +190,30 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		F26EA599C9CA4864823C1698 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				3000D2B3834E4C66A28382F8 /* AntDesign.ttf */,
+				ADE75B0AF3E84621B5059B43 /* Entypo.ttf */,
+				7AD629F9A4B44BFE9AFEA2E9 /* EvilIcons.ttf */,
+				4712AA6A09254CA2B29AF3F5 /* Feather.ttf */,
+				DE8FAE89F42A46C381F68DAF /* FontAwesome.ttf */,
+				F6F0D28CAB1A451DAA9BA6AE /* FontAwesome5_Brands.ttf */,
+				BCC0EEAD424E456DA490EE4F /* FontAwesome5_Regular.ttf */,
+				BDB3D4C6185B4CB69E360505 /* FontAwesome5_Solid.ttf */,
+				256E5C94D0AC40E381A107A5 /* Fontisto.ttf */,
+				D3378FED83674C7297D95B3C /* Foundation.ttf */,
+				CCF85275316C4FA29EBEBEF3 /* Ionicons.ttf */,
+				37CF45EBB8E541AFB0AEEED1 /* MaterialCommunityIcons.ttf */,
+				99E0F4267E0B4BB69A5994F3 /* MaterialIcons.ttf */,
+				006C0665080F4DB581A45597 /* Octicons.ttf */,
+				00E332BD0E6B4F69AD2BFB66 /* SimpleLineIcons.ttf */,
+				16C65B2FFA244990A98EED99 /* Zocial.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -240,7 +297,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0940;
+				LastUpgradeCheck = 940;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
@@ -293,6 +350,22 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				4D52FDE523E84B2791C3D67D /* AntDesign.ttf in Resources */,
+				B90493FFE9264DF5B6CC7C44 /* Entypo.ttf in Resources */,
+				31DBC812F4DE446B9D3DC7B1 /* EvilIcons.ttf in Resources */,
+				52508E432BC44BF7A5E64891 /* Feather.ttf in Resources */,
+				BA64553EADB24FB9AB6E0F82 /* FontAwesome.ttf in Resources */,
+				42092AB24C2F4A0987A993FA /* FontAwesome5_Brands.ttf in Resources */,
+				A2E24CE7C18C4CFF97F78377 /* FontAwesome5_Regular.ttf in Resources */,
+				631DA64D244F4F8F915F2121 /* FontAwesome5_Solid.ttf in Resources */,
+				369E14D730C449659A20A504 /* Fontisto.ttf in Resources */,
+				0F7CA4B8C6454C77B1E45705 /* Foundation.ttf in Resources */,
+				D2D1008687164C9CB74A95D7 /* Ionicons.ttf in Resources */,
+				659D1586ED4C433BA9DD67DB /* MaterialCommunityIcons.ttf in Resources */,
+				97EA10A37A0942C0B0FD6C44 /* MaterialIcons.ttf in Resources */,
+				60D08C8669D9491891F0EAE0 /* Octicons.ttf in Resources */,
+				157D60FEAF7C49948291342D /* SimpleLineIcons.ttf in Resources */,
+				31C2D4A00BF24B9989303435 /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/ankilan/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,5 +53,24 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+	</array>
 </dict>
 </plist>

package.json

@@ -20,6 +20,7 @@
         "react-native": "^0.61.5",
         "react-native-ankidroid": "^0.4.0",
         "react-native-material-textfield": "^0.16.1",
+        "react-native-vector-icons": "^6.6.0",
         "react-redux": "^7.2.0",
         "redux": "^4.0.5",
         "redux-devtools-extension": "^2.13.8",

src/components/add-anklan-model.jsx

@@ -7,18 +7,25 @@ import DeckPicker from './view/deck-picker';
 import AddWordForm from './anki-form';
 import AnkiTemplate from './view/add-main-template';
 import {Grid, Row} from 'native-base';
-import {checkAnkiLanModelForExisting, getDeckList, getModelList} from '../actions/anki-get-actions';
+import {
+	checkAnkiLanModelForExisting,
+	getDeckList,
+	getModelList,
+} from '../actions/anki-get-actions';
 
 const StartScreen = props => {
 	useEffect(() => {
 		props.getDeckList();
 		props.getModelList();
-    }, [])
+	}, []);
 	useEffect(() => {
-    props.checkAnkiLanModelForExisting(props.modelName, props.modelList);
+		props.checkAnkiLanModelForExisting(
+			props.modelName,
+			props.modelList,
+		);
 	});
 	return (
-    <ScrollView>
+		<ScrollView keyboardShouldPersistTaps="handled">
 			{props.ankiAvailable ? (
 				props.ankiLanModelExists ? (
 					<AddWordForm />
@@ -43,5 +50,6 @@ export default connect(
 	{
 		checkAnkiLanModelForExisting,
 		getDeckList,
-      getModelList
+		getModelList,
-  })(StartScreen);
+	},
+)(StartScreen);

src/components/anki-form.jsx

@@ -5,11 +5,13 @@ import {Form, Container, Item} from 'native-base';
 import {checkAnkiLanModelForExisting} from '../actions/anki-get-actions';
 import InputWord from './view/translatable-word';
 import SubmitButton from './view/submit-button';
-import {wordInfo} from "../actions/api/dictionary";
+import {wordInfo} from '../actions/api/dictionary';
+import FieldEditor from './view/field-editor';
 
 const AnkiForm = props => {
-    const [target, setTarget] = useState('')
+	const [target, setTarget] = useState('');
-    const [fields, setFields] = useState({})
+	const [fields, setFields] = useState({});
+	const [submitted, setSubmitted] = useState(true);
 	useEffect(() => {
 		// props.wordInfo('Urge');
 		//   props.wordInfo('Maze');
@@ -18,13 +20,14 @@ const AnkiForm = props => {
 		//   props.wordInfo('Entrepreneurship');
 		//   props.wordInfo('meagre');
 		//   props.wordInfo('meager');
-
 	}, []);
-  const getWord = (word) => {
+	const getWord = word => {
-      setTarget(word)
+		setTarget(word);
 	};
 	const submit = () => {
 		props.wordInfo(target);
+		setSubmitted(true);
+		console.log(props.data)
 	};
 
 	return (
@@ -32,7 +35,16 @@ const AnkiForm = props => {
 			<Form>
 				<DeckPicker />
 				<InputWord word={getWord} onSubmit={submit} />
+				{submitted ? (
+					<FieldEditor
+						data={{
+							type: 'part of speech',
+							values: ['1', '2', '3','5',],
+						}}
+					/>
+				) : (
 					<SubmitButton onSubmit={submit} />
+				)}
 			</Form>
 		</Container>
 	);
@@ -44,10 +56,10 @@ export default connect(
 		modelName: state.anki.ankiLanModelName,
 		modelList: state.anki.modelList,
 		creator: state.anki.noteCreator,
+		data: state
 	}),
 	{
 		checkAnkiLanModelForExisting,
-      wordInfo
+		wordInfo,
-
 	},
 )(AnkiForm);

src/components/view/field-editor.jsx

@@ -0,0 +1,132 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {connect} from 'react-redux';
+
+import TextField from 'react-native-material-textfield/src/components/field';
+import {StyleSheet} from 'react-native';
+import {View, Text, Button, Picker} from 'native-base';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import IconedButton from './iconed-button.jsx';
+const FieldEditor = props => {
+	const [data, setData] = useState({});
+	const [editing, setEditing] = useState(true);
+	const label = props.data.label;
+	const [selectedValue, setSelectedValue] = useState(
+		props.data.values[0],
+	);
+				const [userTyped, setUserTyped] = useState('');
+	const input = useRef();
+	useEffect(() => {
+		setData(props.data);
+	}, []);
+
+	const selectValue = value => {
+		setSelectedValue(value);
+	};
+	const typing = text => {
+					setUserTyped(text)
+	};
+				const confirmTyped = () => {
+								const values = data.values
+								setData({...data, values: [...values, userTyped]})
+				}
+
+	const styles = StyleSheet.create({
+		wrapper: {},
+		inner: {
+			display: 'flex',
+			justifyContent: 'space-between',
+			flexDirection: 'row',
+			alignItems: 'center',
+			alignContent: 'center',
+		},
+		row: {
+			display: 'flex',
+			flexDirection: 'row',
+			justifyContent: 'space-between',
+			width: 90,
+		},
+		button: {
+			width: 40,
+			height: 40,
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center',
+		},
+		tfWrapper: {
+			width: editing ? '75%' : '84%',
+		},
+	});
+
+	return (
+		<View style={styles.wrapper}>
+			<Text>{label}</Text>
+			<View style={styles.inner}>
+				<View style={styles.tfWrapper}>
+					{editing ? (
+						<TextField
+							multiline={true}
+							label={data.type}
+							value={selectedValue}
+							ref={input}
+							onChangeText={text =>
+								typing(text)
+							}
+						/>
+					) : (
+						<Picker
+							selectedValue={
+								selectedValue
+							}
+							onValueChange={value =>
+								selectValue(
+									value,
+								)
+							}>
+							{data.values.map(
+								(value, id) => {
+									return (
+										<Picker.Item
+											value={
+												value
+											}
+											label={
+												value
+											}
+											key={
+												id
+											}
+										/>
+									);
+								},
+							)}
+						</Picker>
+					)}
+				</View>
+				{editing ? (
+					<View style={styles.row}>
+						<IconedButton
+							icon="caret-down"
+							onPress={() => {
+								setEditing(
+									!editing,
+								);
+							}}
+						/>
+						<IconedButton
+							icon="check"
+							onPress={confirmTyped}
+						/>
+					</View>
+				) : (
+					<IconedButton
+						icon="pen"
+						onPress={() => {
+							setEditing(!editing);
+						}}
+					/>
+				)}
+			</View>
+		</View>
+	);
+};
+export default connect()(FieldEditor);

src/components/view/iconed-button.jsx

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+
+import TextField from 'react-native-material-textfield/src/components/field';
+import {StyleSheet} from 'react-native';
+import {View, Text, Button, Picker} from 'native-base';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+
+const IconedButton = props => {
+	return (
+		<Button bordered style={styles.button} onPress={props.onPress}>
+			<Icon name={props.icon} size={20} color={'blue'} />
+		</Button>
+	);
+};
+
+const styles = StyleSheet.create({
+	button: {
+		width: 40,
+		height: 40,
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+});
+
+export default IconedButton;