Skip to content

Commit d2528d7

Browse files
AmitM30AmitM30
committed
Add Side Menu, Update Readme
1 parent bef3a3d commit d2528d7

File tree

16 files changed

+180
-80
lines changed

16 files changed

+180
-80
lines changed

‎README.md‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
![Travis](https://api.travis-ci.com/AmitM30/react-native-typescript-boilerplate.svg?branch=master) ![License](https://img.shields.io/github/license/AmitM30/react-native-typescript-boilerplate.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./CONTRIBUTING.md) [![Code Climate](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate/badges/gpa.svg)](https://codeclimate.com/github/AmitM30/react-native-typescript-boilerplate)
44

5-
### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation v7](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [TSLint](https://github.com/airbnb/javascript) to build iOS / Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
5+
### An opinionated [React Native](https://facebook.github.io/react-native/docs/getting-started) Starter Kit with [React Native Navigation](https://github.com/wix/react-native-navigation) + [Redux](https://github.com/reactjs/redux) + [Airbnb TSLint](https://github.com/airbnb/javascript) to build iOS and Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
66

77
The project has been setup based off [RN Getting Started](https://facebook.github.io/react-native/docs/getting-started) and instructions from [Microsoft's Github TypeScript React Native Starter](https://github.com/Microsoft/TypeScript-React-Native-Starter) repo.
88

9-
### Supports React Native 0.63.3 and React Native Navigation v7
9+
### Supports React Native 0.63.3, React Native Navigation v7 and Flipper
1010

1111
This repo supports the latest version of React Native compatible with React Native Navigation.
1212

@@ -20,17 +20,17 @@ This repo supports the latest version of React Native compatible with React Nati
2020

2121
### Who is this for?
2222

23-
Someone looking to jumpstart building apps using RN and prefers TypeScript. The base setup has been taken care of, just `yarn install` and get going from respective IDEs.
23+
Jumpstart building robust apps using React Native, with TypeScript. The base setup has been taken care of, just `yarn install` and get going from respective IDEs.
2424

2525
You might also want to [rename](https://medium.com/the-react-native-log/how-to-rename-a-react-native-app-dafd92161c35) the app for your own use.
2626

2727
> _Disclaimer_: This is an **opinionated** approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
2828
29-
The project uses and encourages to use industry best practices / tools / libraries like React Native Navigation, redux, tslint, separation of concern and structure to build a maintainable app.
30-
31-
| ![Splash](./src/view/assets/images/sample/1.png "Splash") | ![Home](./src/view/assets/images/sample/2.png "Home") |
32-
| :-------------------------------------------------------: | :---------------------------------------------------: |
29+
| ![Splash](./src/view/assets/images/sample/1.png "Splash") | ![Home](./src/view/assets/images/sample/2.png "Home") |![Side Menu](./src/view/assets/images/sample/3.png "Side Menu") |
30+
| :-------------------------------------------------------: | :---------------------------------------------------: | :---------------------------------------------------: |
3331

32+
Flipper Support
33+
![Flipper](./src/view/assets/images/sample/4.png "Flipper")
3434

3535
### Table of Contents
3636

@@ -52,7 +52,7 @@ The project uses and encourages to use industry best practices / tools / librari
5252
├── android Android Native code
5353
├── ios iOS Native Code
5454
├── shared
55-
│ ├── redux Business Logic
55+
│ ├── redux Applications Logic
5656
│ │ ├── constants
5757
│ │ ├── actions
5858
│ │ ├── api
@@ -61,10 +61,10 @@ The project uses and encourages to use industry best practices / tools / librari
6161
│ │ └── thunk
6262
│ └── utilities
6363
├── src
64-
│ ├── config App Configuration
64+
│ ├── config Global Configuration
6565
│ ├── constants Screens, Localization
6666
│ ├── navigators Router, Navigation
67-
│ ├── view UI compoments - Screens, Widgets
67+
│ ├── view UI compoments
6868
│ │ ├── elements Custom elements
6969
│ │ ├── assets
7070
│ │ ├── screens
@@ -92,12 +92,9 @@ Everything related to application business logic (store) resides under this dire
9292
`src`
9393
Only presentation layer for the app, styles, images, icons are meant to be under this.
9494

95-
`web`
96-
Going forward, plan is to add a web folder to the project, that can leverage the business logic from shared folder.
97-
9895
#### Running
9996

100-
Make sure node version installed is `>=8.11.x <=9`
97+
Make sure node version installed is `>=10.x.x`
10198

10299
```
103100
yarn install
@@ -107,6 +104,10 @@ yarn install
107104

108105
###### iOS
109106

107+
```
108+
cd ios && pod install
109+
```
110+
110111
Launch application from XCode
111112

112113
###### Android
@@ -121,13 +122,13 @@ and then launch from IDE.
121122

122123
#### Lint
123124

124-
To run tslint on the application:
125+
To run lint on the application:
125126

126127
```
127128
yarn lint
128129
```
129130

130-
To fix most tslint issues automatically
131+
Fixes most tslint issues automatically:
131132

132133
```
133134
yarn lint:fix
@@ -151,22 +152,24 @@ npm run test:coverage
151152

152153
#### Cheat Sheet
153154

154-
##### React Native Navigation
155+
##### Single Screen vs Tabbed Based Navigation
156+
157+
The application launches with a splash screen, and then moves to a tabbed based navigation. Splash screen is a good place to fetch data / build application launch logic like getting user token from API or Async Store, load persist state etc.
155158

156-
The application launches with a blank splash screen, and then moves to a tabbed based home view. Developers can feel free to add application launch logic to this, like fetch user token, load persist state etc., or skip the splash if not required, or change this setup altogether.
159+
For Single screen application, replace this tabbed based navigation with a single screen - just `home`, or simply use the splash screen to setup the app, may be with a burger menu.
157160

158161
##### Styles
159162

160-
The `styles` folder contains `global` style and `typography` for the application. Styles for each screen has been placed with the screen, as they are going to be used together with the screen, unlike web.
163+
The `styles` folder contains `global` style and `typography` for the application. Styles for each screen has been placed with the screen, as they are used together with the screen, unlike web.
161164

162165
##### Widgets / Elements
163166

164167
The custom components have been broken into 2 major categories, namely - **widgets**, **elements**
165168

166169
A Good use case would be:
167170

168-
- widgets: carousels component, banner component, any component providing a complete functionality
169-
- elements: A custom, may be `<CText>` or `<ButtonDefault>`, element that has default font properties like font, size and overrides the native elements.
171+
- **widgets**: Any component providing a complete functionality. Like carousels component, banner component, etc.
172+
- **elements**: Smallest building blocks of application. A custom element, may be `<ButtonPrimary>` or `<CText>`, that has default font properties like font, size and so on.
170173

171174
#### Contributing
172175

@@ -178,8 +181,4 @@ Please check out [Contributing](https://github.com/AmitM30/react-native-typescri
178181
- [**Brian Varley**](https://github.com/BrianJVarley) - _Windows Setup_
179182
- [**Nelson Omuto**](https://github.com/nelsonomuto) - _Update Podfile_
180183

181-
See also the list of [contributors](https://github.com/AmitM30/react-native-typescript-boilerplate/contributors) who participated in this project.
182-
183-
#### TODO
184-
185-
- [ ] Build React web app using `shared` business logic
184+
See also the list of [contributors](https://github.com/AmitM30/react-native-typescript-boilerplate/contributors).

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
"cacheDirectory": ".jest/cache"
104104
},
105105
"engines": {
106-
"node": ">=8.11.0",
106+
"node": ">=10",
107107
"npm": ">=6.0.0",
108108
"yarn": ">=1.9.2"
109109
}

‎src/constants/screen.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const SCREENS = {
44
Splash: 'Splash',
55
Home: 'Home',
66
Settings: 'Settings',
7+
Drawer: 'Drawer',
78
};
89

910
export { SCREENS };

‎src/navigators/navigation.tsx‎

Lines changed: 63 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,65 +14,77 @@ export const showSplash = () => {
1414
export const tabbedNavigation = () =>
1515
Navigation.setRoot({
1616
root: {
17-
bottomTabs: {
18-
id: 'BottomTabsId',
19-
children: [
20-
{
21-
stack: {
22-
children: [
23-
{
24-
component: {
25-
name: SCREENS.Home,
26-
passProps: {
27-
text: 'This is Home',
17+
sideMenu: {
18+
left: {
19+
component: {
20+
name: SCREENS.Drawer,
21+
id: 'drawerComponentId',
22+
},
23+
},
24+
center: {
25+
bottomTabs: {
26+
id: 'BottomTabsId',
27+
children: [
28+
{
29+
stack: {
30+
children: [
31+
{
32+
component: {
33+
name: SCREENS.Home,
34+
passProps: {
35+
text: 'This is Home',
36+
},
37+
},
38+
},
39+
],
40+
options: {
41+
topBar: {
42+
visible: false,
43+
drawBehind: true,
44+
animate: true,
45+
},
46+
bottomTab: {
47+
fontSize: 14,
48+
text: 'Home',
49+
textColor: TYPOGRAPHY.COLOR.Primary,
50+
selectedTextColor: TYPOGRAPHY.COLOR.Warning,
51+
selectedIconColor: TYPOGRAPHY.COLOR.Warning,
52+
icon: require('../view/assets/images/tabbar/home.png'),
53+
selectedIcon: require('../view/assets/images/tabbar/home.png'),
2854
},
2955
},
3056
},
31-
],
32-
options: {
33-
topBar: {
34-
visible: false,
35-
drawBehind: true,
36-
animate: true,
37-
},
38-
bottomTab: {
39-
fontSize: 12,
40-
text: 'Home',
41-
textColor: TYPOGRAPHY.COLOR.Primary,
42-
selectedTextColor: TYPOGRAPHY.COLOR.Secondary,
43-
icon: require('../view/assets/images/tabbar/home.png'),
44-
selectedIcon: require('../view/assets/images/tabbar/home.png'),
45-
},
4657
},
47-
},
48-
},
49-
{
50-
stack: {
51-
children: [
52-
{
53-
component: {
54-
name: SCREENS.Settings,
58+
{
59+
stack: {
60+
children: [
61+
{
62+
component: {
63+
name: SCREENS.Settings,
64+
},
65+
},
66+
],
67+
options: {
68+
topBar: {
69+
visible: false,
70+
drawBehind: true,
71+
animate: true,
72+
},
73+
bottomTab: {
74+
text: 'Settings',
75+
fontSize: 14,
76+
textColor: TYPOGRAPHY.COLOR.Primary,
77+
selectedTextColor: TYPOGRAPHY.COLOR.Warning,
78+
selectedIconColor: TYPOGRAPHY.COLOR.Warning,
79+
icon: require('../view/assets/images/tabbar/settings.png'),
80+
selectedIcon: require('../view/assets/images/tabbar/settings.png'),
81+
},
5582
},
5683
},
57-
],
58-
options: {
59-
topBar: {
60-
visible: false,
61-
drawBehind: true,
62-
animate: true,
63-
},
64-
bottomTab: {
65-
text: 'Settings',
66-
fontSize: 12,
67-
textColor: TYPOGRAPHY.COLOR.Primary,
68-
selectedTextColor: TYPOGRAPHY.COLOR.Secondary,
69-
icon: require('../view/assets/images/tabbar/settings.png'),
70-
selectedIcon: require('../view/assets/images/tabbar/settings.png'),
71-
},
7284
},
73-
},
85+
],
7486
},
75-
],
87+
},
7688
},
7789
},
7890
});

‎src/view/assets/images/burger-menu.png‎

2.55 KB
Loading

‎src/view/assets/images/sample/1.png‎

101 KB
Loading

‎src/view/assets/images/sample/2.png‎

53 KB
Loading

‎src/view/assets/images/sample/3.png‎

53.8 KB
Loading

‎src/view/assets/images/sample/4.png‎

232 KB
Loading

‎src/view/screens/drawer/Component.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from 'react';
2+
import { SafeAreaView } from 'react-native';
3+
4+
import styles from './styles';
5+
import { CText } from '../../elements/custom';
6+
7+
export interface Props {
8+
name: string;
9+
}
10+
11+
interface State {
12+
name: string;
13+
}
14+
15+
class Drawer extends React.PureComponent<Props, State> {
16+
constructor(props: Props) {
17+
super(props);
18+
}
19+
20+
componentDidMount() {}
21+
22+
render() {
23+
return (
24+
<SafeAreaView style={styles.container}>
25+
<CText>Drawer Menu</CText>
26+
</SafeAreaView>
27+
);
28+
}
29+
}
30+
31+
export default Drawer;

0 commit comments

Comments
 (0)