Skip to content
This repository has been archived by the owner on Dec 29, 2022. It is now read-only.

This repo has moved. A React Native application with demo code for all of the Brightlayer UI design patterns

Notifications You must be signed in to change notification settings

brightlayer-ui/react-native-design-patterns

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This repo has been archived and moved here.

React Native Design Patterns

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.

Current Patterns

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.

Running Locally

To run this project (with all patterns) locally, first clone the repository:

git clone https://github.com/brightlayer-ui/react-native-design-patterns.git
cd 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.

Folder Structure

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

About

This repo has moved. A React Native application with demo code for all of the Brightlayer UI design patterns

Resources

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 91.7%
  • Java 3.6%
  • Objective-C 2.6%
  • JavaScript 1.3%
  • Other 0.8%