Setting Up
- Extract the bundle.zip folder.
- In the extracted directory, Go to app and Run npm install.
Project structure
- Assets – Contains all the assets for the application
- Components – Contains all the Reusable React Native components that are specific to this application.
- Navigation – Contains all routing for the application.
- Screens – Contains all layout screens for application.
- Tools – Contains the common utility code used across the app.
Package
{
“name”: “material_tmpl”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“android”: “react-native run-android”,
“ios”: “react-native run-ios”,
“start”: “react-native start”,
“test”: “jest”,
“lint”: “eslint .”
},
“dependencies”: {
“@react-native-community/datetimepicker”: “^2.2.3”,
“react”: “16.9.0”,
“react-native”: “0.61.5”,
“react-native-maps”: “0.26.1”,
“react-native-sound-player”: “^0.10.3”
},
“devDependencies”: {
“@babel/core”: “^7.7.7”,
“@babel/runtime”: “^7.7.7”,
“@react-native-community/eslint-config”: “^0.0.5”,
“babel-jest”: “^24.9.0”,
“eslint”: “^6.7.2”,
“jest”: “^24.9.0”,
“metro-react-native-babel-preset”: “^0.57.0”,
“react-test-renderer”: “16.9.0”
},
“jest”: {
“preset”: “react-native”
}
}
Props
CircularProgress
| Props | Description | Default |
| size | Diameter of circle | 50 |
| thickness | Border width of circle progress | 5 |
| bgColor | Default background color of circle progress | ‘gray’ |
| progressColor | Color of progress | ‘blue’ |
DrawerMenuLeft
Swipe drawer menu from left
| Props | Description | Required |
| menuWidth | Width of drawer menu (default = 300) | No |
| renderPage | Page component | Yes |
| renderMenuComponent | Menu component | Yes |
| style | Additional style for menu container | No |
FloatingButton
| Props | Description | Required |
| size | Outer size of button (default = 57) | No |
| style | Additional style for button container | No |
| onPress | Function will be executed | Yes |
| image | Image source locally | Yes |
| imageStyle | Additional style for image | No |
HeaderChat
Header component for chatting activity
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| morePress | Callback function when button pressed. | Yes |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| user | Name of user | No |
| lastseen | Last seen information of user | No |
HeaderFiveButton
Header component with button navigation and four action buttons (share, edit, delete, more)
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| sharePress | Callback function when button pressed. | Yes |
| editPress | Callback function when button pressed. | Yes |
| deletePress | Callback function when button pressed. | Yes |
| morePress | Callback function when button pressed. | Yes |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| title | Title of header | No |
HeaderFourButton
Header component with button navigation and three action buttons.
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| editPress | Callback function when button pressed. | Yes |
| searchPress | Callback function when button pressed. | Yes |
| morePress | Callback function when button pressed. | Yes |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| isEdit | If screen status in editing mode (action button change to save and close, default = false) | No |
| title | Title of header | No |
HeaderOneButton
Header component with button navigation and three action buttons.
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| title | Title of header | No |
| titleStyle | Additional style for title | No |
HeaderShopping
Header component for shopping activity screen. Contains three action button search, cart and more. Also can display a count of shopping cart items.
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| searchAction | If screen need search action button (default = false) | No |
| searchPress | Callback function when button pressed. This props is required when searchAction = true | No |
| moreAction | if screen need more action button (default = false) | No |
| morePress | Callback function when button pressed. This props is required when moreAction = true | No |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| title | Title of header | No |
| numItems | Count of shopping cart items. | No |
HeaderThreeButton
Header component with button navigation and two action buttons.
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| enableMore | if screen need more action button (default = false) | No |
| morePress | Callback function when button pressed. This props is required when enableMore = true | No |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| title | Title of header | No |
HeaderTwoButton
Header component with button navigation and more action buttons.
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| morePress | Callback function when button pressed. | Yes |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| title | Title of header | No |
HeaderTwoRows
Header component with two rows of text, main title and subtitle.
| Props | Description | Required |
| navPress | Callback function when button pressed. | Yes |
| isHome | If this screen is home screen (not display back navigation, default = false) | No |
| morePress | Callback function when button pressed. | Yes |
| bgColor | Background color of component (default = ‘transparent” | No |
| shadow | If shadow under component displayed (default = true) | No |
| title | Title of header | No |
| subTitle | Detail of header | No |
ImageAutoHeight
| Props | Description | Required |
| source | The image source (remote URL only) | Yes |
| imageWidth | The width of image | Yes |
| style | Function on button more pressed. | No |
LoveBar
| Props | Description | Default |
| size | Size of love image | 12 |
| space | Space between image | 3 |
| rating | Rating value (from 0 to 5) | 0 |
| containerStyle | Additional style for container |
MapNavigation
| Props | Description | Required |
| zoomInPress | Callback function when button pressed. | Yes |
| zoomOutPress | Callback function when button pressed. | Yes |
| myLocationPress | Callback function when button pressed. | Yes |
| style | Additional style for container | No |
MaterialButton
| Props | Description | Required |
| buttonPress | Callback function when button pressed. | Yes |
| title | Title of button | Yes |
| style | Additional style for button | No |
| titleStyle | Additional style for title | No |
MaterialCheckBox
| Props | Description | Required |
| title | Description text | Yes |
| color | Tint color of text and checkbox (default = ‘black’) | No |
| style | Additional style for button | No |
MaterialInput
| Props | Description | Default |
| placeholder | The string that will be rendered before text input has been entered | |
| type | Determines keyboard type (‘default’, ‘number-pad’, ‘decimal-pad’, ‘numeric’, ’email-address’, ‘phone-pad’ | ‘default’ |
| isPassword | If text is secure or text entered so sensitive like password | false |
| margin | The margin of input | 10 |
| bgColor | The background color of input | ‘transparent’ |
| borderWidth | The border width of input | 0 |
| theme | Theme of input (‘light’ or ‘dark’) | ‘light’ |
| style | Additional style for input |
MaterialSnackbar
| Props | Description | Required |
| title | Description text | Yes |
| color | Tint color of text and checkbox (default = ‘black’) | No |
| style | Additional style for button | No |
MultiColumnView
Like flatlist but not scrollable
| Props | Description | Required |
| data | Data source in array | Yes |
| numColumn | Number column of view (default 1) | No |
| renderItem | Render item component | Yes |
| containerStyle | Additional style for container | No |
PageSwiper
Multipage that able to swipe horizontally like viewpager in android
| Props | Description | Required |
| data | Data source in array | Yes |
| renderItem | Render item component | Yes |
| itemWidth | The width of page | Yes |
| itemHeight | The width of height | Yes |
| containerStyle | Additional style for container | No |
ParallaxHeader
Multipage that able to swipe horizontally like viewpager in android
| Props | Description | Required |
| headerImage | Source image header (either a remote URL or a local file resource) | No |
| renderHeader | Render header component | Yes |
| headerColor | Tint color of header | Yes |
| contentContainerStyle | Additional style for container | No |
| renderFloatingButton | Component for floating button | No |
RangeSlider
| Props | Description | Default |
| sliderSize | Size of the slider | 100 |
| trackColor | Default color of horizontal line track | ‘#f1f5f7’ |
| trackActiveColor | Color of track in selected range | ‘#ff9800’ |
| thumbColor | Tint color of thumb | ‘#ff9800’ |
| minValue | Minimum value available in the slider | 0 |
| maxValue | Maximum value available in the slider | 100 |
| initMinValue | Initial minimal selected value | 10 |
| initMaxValue | Initial maximal selected value | 90 |
| onChange | Callback function when the value changes | |
| contentContainerStyle | Additional style for container |
SizeSelector
This component is used for select size of product in ecommerce activity
| Props | Description | Required |
| style | Additional style for container | No |
Slider
| Props | Description | Default |
| sliderSize | Size of the slider | 100 |
| trackColor | Default color of horizontal line track | ‘#f1f5f7’ |
| trackActiveColor | Color of track in selected range | ‘#ff9800’ |
| thumbTintColor | Tint color of thumb | ‘#ff9800’ |
| initValue | Initial selected value | 90 |
| onChange | Callback function when the value changes | |
| style | Additional style for container |
StaggeredView
Like flatlist but height of item is dynamically adjusted by content
| Props | Description | Required |
| data | Data source in array | Yes |
| numColumn | Number column of view (default 1) | No |
| renderItem | Render item component | Yes |
| containerStyle | Additional style for container | No |
StarBar
| Props | Description | Default |
| size | Size of love image | 12 |
| space | Space between image | 3 |
| rating | Rating value (from 0 to 5) | 0 |
| containerStyle | Additional style for container |
SwipeMenuLeft
| Props | Description | Required |
| menuWidth | Width of swipe menu (default = 300) | No |
| renderPage | Page component | Yes |
| renderMenuComponent | Menu component | Yes |
SwipeMenuRight
| Props | Description | Required |
| menuWidth | Width of swipe menu (default = 300) | No |
| renderPage | Page component | Yes |
| renderMenuComponent | Menu component | Yes |
| style | Additional style for menu container | No |
TabHeader
Material tab header with text or icon
| Props | Description | Default |
| titles | Array of string title | |
| icons | Array of source icon locally | |
| bgColor | Background color of tabs | ‘#ff5722’ |
| stripColor | The color of strip color (indicator selected tab) | ‘white’ |
| activeIndex | Initial index of active tab | 0 |
| onActiveChanged | Callback function when active tab changes |
TimelineStaggeredView
| Props | Description | Required |
| data | Data source in array | Yes |
| renderItem | Render item component | Yes |
ViewPagerIndicator
| Props | Description | Required |
| size | Size of dot indicator (default = 10) | No |
| space | Space between dot indicator (default = 2) | No |
| numPages | Number of pages | Yes |
| activeIndex | Active index of pages | Yes |
| defaultColor | Default tint color of dot indicator | Yes |
| activeColor | Active tint color of dot indicator | Yes |
| horizontal | If dot indicator arranged in horizontal (default = horizontal) | No |