React App Native Basic Design System

gistfile1.md

Setup basic design system

Addresable points

1. Setup react-native-paper theme

This is not correclty configured and we are not using this theme in our components properly

Output (WIP)

Done. Guidelines for using theming on your components

TODO: See to add all the colors that we can to this parametrized theme. So far we are using only primaryColor. This can be done after implementing all the screens. Will be easier to see what are hte common values

2. Create smaller components with defined styles

e.g. Titles, Buttons, Icons, TextInput

Output (WIP)

Worked on some of them:

• CustomButton
• PushButton
• BackButton
• InputRecipient

Still work to do in:

• Address
• Avatar
• BigGoodDollar
• BigNumber.js
• CopyButton
• CustomDialog
• EventDialog
• IconButton
• InputGoodDollar
• LoadingIndicator
• NumPadKeyboard
• ScanQRButton
• TopBar
• UserAvatar

We should create:

TODO: See if we need any new base components This will be easier to do while implementing new screens. We can assign the tasks explicitly or create a new task to do all of this separately TODO: Test more extensivelly this components with several props configurations This should be done while implementing each component

3. Create one file which handle styles for the whole app

This would be as the theming feature for react-native-paper, so maybe we can use that one or a similar approach. In that file we can define some color variables, font variables, padding and margin variables (so we have definitions for each page and we only need to use them in specific cases)

TODO: Check if we are going to use EStyleSheets or we can use input parameters on our current library. UPDATE: Waiting Hadar confirmation about how to proceed.
TODO: Implenent an example and docs. This should be done as soon as we make a decision about the above todo

4. Review the platform, and make it consistent with components

e.g. Create CustomTextInput, we can decide which Input we are going to use there, and we should use this CustomTextInput from everywhere, replacing TextInput from react-native-paper and TextInput from react-native We've tried to use TextInput from react-native-paper with textAlignCenter unsuccesfuly for a while now. Either we need to conclude that we cannot use it and move all Inputs to a different component or we need to find a hack and use the one from react-native-paper. Maybe asking a question on github/ stackoverflow?

TODO: Extract all the inputs to one CustomInput with the properties that we want in a way that no matter what componet we endup using all the screens can build safely on top of this component. This can be done now TODO: Ask on stackoverflow/github to decide if we can or we cannot use react-native-paper for this.This can be done now TODO: Give another try to decide if we can or we cannot use react-native-paper for this.This can be done now

5. Define and Document Components Structure Guidelines

I think we have different buttons defined in multiple files, like NextButton, PushButton, BackButton, Button, CustomButton, DoneButton, TabButton, LinkButton so we can group them in one place, and check if all of them are necessary.

Output (DONE)

https://github.com/GoodDollar/GoodDAPP/tree/166905283-folder-structure-change Separated PR cause are a lot of changes and this hides the real changes

6. Create a Material StyleGuide page with examples

Just to see available components, with customisations, styles, etc..). It's a nice to have

TODO: Give this a try to see how much time it takes to setup this styleguide. This can be done now, doing it while doing (2) would make more sense

7. Replace custom components by react-native-paper components if it's possible (e.g. TopBar)

Output (WIP)

Worked on some of them as guideline:

• NavBar
• TabBar

Still work to do in:

We need to decide if we want to use react-native-paper for:

• Text
• InputText
• CustomDialog
• EventDialog

TODO: Decide the pending ones and implement them if necesary

8. We need to create icon set component using the design icons

TODO: Create one or two examples: With and without button. Drop a line with guidelines on how to use them.This can be done now

9. Define guidelines and create examples on how to do Layout

We are using flex in several places. We can create an abstraction on top to standardise Grids, Rows, Columns, and write some guidelines on how to do layouts We center multiple sections and components, so we can create a style we can import from different place that basically center the component, and either we can add a prop to some components to center them if the prop is passed. We can check if this behaviour is only for center style, or we should more props related to styles on the components we have.

Output (DONE)

Section component is handling all this layout responsability in this way:

• Section as a group with rounded borders with white background is the way or organizing blocks together
• Section.Stack, Section.Row can be used with the following properties as modifiers: justifyContent, alignItems, grow

Examples on Send an Receive screens.

This is probably covering most of our use cases. If while doing any screen some new case appears we should extend or modify this and comunicate quickly so this new property or compoent can be used on other screens

TODO: There is a problem to solve yet that is adding ad-hoc margins and separations between components. We need to create an example for that and put this in the docs.

10. Choose a screen to use as example with updated design and using new components

Send screen is a good option

Output (DONE)

We will use Send and Receive home screens.

Styling and Layout Guidelines

• We write the styles as local as possible to the component. We prefer this ways or reusing styles in this order:

  • Extracting common styling to configurable components such as CustomButton, UserAvatar etc.
  • Extracting to the react-native-paper theme variable such as primaryColor
  • Extracting to a common theme TODO: DEFINE EXACTLY HOW TO DO THIS

• Fonts and font properties should be defined in reusable components and not on each screen components. This should be done in styling components as CustomButton or CustomText.

• No layout on text or button components. All should be handled with Views and flex on it.

• No custom paddings and margins should be defined on each screen, the layout and the components should define them.

• Reuse styles and use always a variable for the style if the variable exist...so it's more maintainable.