Create new record view

[vidbina]

Upon clicking the "add record" button (see FAB in Android, see ➕ in iOS) a camera view should pop up which allows one to snap a picture followed by a view which allows one to specify a price and description.

[vidbina]

As a user I want to enter information such as the description, the monetary value and date or time for every entry.

We have to figure out how we will support this but at least we will need inputs for the description (text), price (numeric value where the keyboard should be a keypad and there should be a dropdown for the currency) and the date (use DatePicker).

Dont worry about saving. We just need the layouts in place, the functional will be added later. Create RecordFormIOS and RecordFormAndroid components which will contain the views to be used. And display the views whenever one clicks the "new record" button.

I believe we currently have the "camera" set up here, but let's just have the "new record" click fire a "CreateRecord" event which may fire up the camera first of the form depending on a setting which we will define later.

[zirconias]

what about a mockup ?
are we going to think about reusable components or each platform has its own design ? do we look after versatility ? or user experience used to be for each platform?

[vidbina]

We go for native experience UI-wise, so own designs 😉. I'm drafting mockups at the moment.

[zirconias]

ok cool ,

[vidbina]

In iOS we allow the scanning of a document through the displayed "Add scan" option, which will eventually fetch an image from the camera.

[vidbina]

The floating action button in Android should allow the user to take a picture of the entry.

[vidbina]

I've already set up components/RecordFormViewAndroid.js and components/RecordFormViewIOS.js which should contain the forms we want. I've done this because I needed to explore to which extent the keyboardType prop of the TextInput offered the ability to customise the keyboards. See commit 70f2903 for details.

Just focus on getting the form to look and feel like the mockups. The functionality will be added later when we have the dispatcher and other plumbing for actions and stores set up 😉

TODO

• Compose component/PriceInput.js which contains the currency and value inputs (clicking on currency should trigger some callback that will eventually display a list of selectable options)
• Style iOS form
• Style Android form

[AlinaChernenko]

Hi @vidbina ! Could you help me with icons for this view? do you have a source assets? Thanks!

[zirconias]

@AlinaChernenko can you push it we can work on it together .

[AlinaChernenko]

@vidbina - I will update iOS with DatePicket and Camera on next commit.

[AlinaChernenko]

@zirconias sure, it's in the last commit of the setup/new-record-form branch.

[AlinaChernenko]

@vidbina Hi David! Need your help =)
I placed the ActionButton on the new screen, but can't get its position changed or make it without ActionButton.Item working - my goal is to have just one 'camera' icon as a parent item. I tried add position/offsetX/offsetY and use just ActionButton element - and no result so far. Do you have an idea what can help me?

[vidbina]

Hey @AlinaChernenko, I did something but it is somewhat ugly still. I assumed that for every screen size offsetting the FAB (floating action button) by the height of the screen hWindow minus the padding needed because of the elements along the top, hStatusBar + 56 (height of our toolbar) + 168 (height of priceblockAndroid) + hSoftMenuBar (the one at the bottom, if even present). From that difference I subtract about 28 units which are about half the size of the action button in order to align the button's center to the bottom border of the price container.

[vidbina]

Great work @AlinaChernenko 👍 . Just the finishing touches left.

• take care of the warnings near the bottom of the screen
• active input when clicking on it's label (e.g.: to input a description, you have to tap on the input field, but I doubt that users will do that. I guess they will just tap on the row and a tap anywhere in the row should trigger the input) for both descriptions and time
• set up the icon to a random Icon asset (perhaps the camera vector icon we used for the floating action button in the Android UI) 😉
• style the colored circle which we will need for the categories

[vidbina]

For Android we need the following:

• replace the back icon for a material-design compliant alternative https://design.google.com/icons/#ic_close
• replace save icon for material-design compliant alternative https://design.google.com/icons/#ic_check
• ensure that left alignment of description, datetime and categories is similar (they are all somewhat differently aligned at the moment)

[AlinaChernenko]

@vidbina sure, will update everything. Just one thing with warnings. I was trying to get rid of it and it seems other guys have the issue facebook/react-native#4547 even though the code is appropriate. I used temporary solution and ignore Warning: Failed propType for now. Hope that is fine.

[vidbina]

OK. I'll keep that in mind. It is fine.