This repository holds the source code examples for Brightlayer UI design patterns, written in React Native. The code is organized to make it easy to copy and paste the examples into your own projects.
| Pattern | Description |
|---|---|
| Action List | A list with actions available on individual list items |
| Basic Bottom Sheet | At the top of the page, the app bar has a 3dot icon on right. When clicking on 3dot icon bottomsheet slides up from bottom of the page, revealing global actions that affect the whole page. |
| Collapsible App Bar | At the top of the page, the appbar is large, but if you click the appbar, it changes to a standard appbar. |
| Complex Bottom Sheet | At the top of the page, the app bar has a 3dot icon on right. When clicking on 3dot icon bottomsheet slides up from bottom of the page, revealing filters that affect the whole page. |
| Data List | A basic list dynamically built from a JSON data object. |
| Loading States | Displays skeleton placeholder elements while content is loading. |
| Multiselect List | A multiselect list with group actions. |
| Search Bar | At the top of the page, the app bar has a search icon on the right. After clicking on the search icon, the search bar slides in from the right of the app bar. |
| Sortable List | A sortable list with drag handles. |
| Status List | A basic list with status stripes for list items. |
To run this project (with all patterns) locally, first clone the repository:
git clone https://github.com/etn-ccis/blui-react-native-design-patterns.git
cd blui-react-native-design-patterns
Then you may run yarn && yarn android to start on an android device or yarn && cd ios && pod install && cd .. && yarn ios to start on an apple device.
All our design patterns are located inside /examples.
└── root
|── /screens/Home.tsx // the home page
|── /assets // constants used by the global layout
|── /router // the main application router
└── /examples // individual design patterns