$ yarn storybook
- Storyboard: Add storybook example for every ui components.
- Hooks: Replace class component by functional component with
React.memo. - useMemoStyle: Use
useMemoStyleor other memorized methods to improve performance. - Remove T: Remove the
Tprefix of each component props. - Interface: Replace the
typedefinition of each component props byinterface. - Renderer: Separate logic and pure renderer.
| Storybook | Hooks | useMemoStyle | Remove T | Interface | Renderer | |
|---|---|---|---|---|---|---|
| Alert | - | ✔️ | - | ✔️ | ✔️ | - |
| Badge | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| Button | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| Card | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| Flex | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | - |
| HeaderButtons | ✔️ | ✔️ | ||||
| KeyboardAvoidingView | App Only | ✔️ | - | ✔️ | ✔️ | - |
| Image | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| InputSpinner | ✔️ | ✔️ | ||||
| List | ✔️ | ✔️ | ✔️ | |||
| ListItem | ✔️ | ✔️ | ✔️ | |||
| LoadingSpinner | ✔️ | ✔️ | ✔️ | |||
| Modal | ✔️ | |||||
| Rating | ✔️ | ✔️ | ✔️ | |||
| ReadMore | ✔️ | ✔️ | ✔️ | |||
| Screen | - | ✔️ | ✔️ | ✔️ | ✔️ | |
| SearchBar | ✔️ | ✔️ | ✔️ | ✔️ | ||
| Separator | ✔️ | ✔️ | ✔️ | |||
| Stack | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | - |
| Text | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| TextInput | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
| Toolbar | ✔️ | ✔️ | ✔️ |
DON'T use defaultProps for any UI Component. It will break the overrides effect.