Skip to content

Commit aedde7c

Browse files
AmitM30AmitM30
committed
Contributing
1 parent 9863e24 commit aedde7c

File tree

11 files changed

+292
-196
lines changed

11 files changed

+292
-196
lines changed

‎CONTRIBUTING.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Contributing
2+
3+
The repo is open to contributions from anyone. The aim is to build a jumpstarter that also encourages industry best pratices to build enterprise applications using React Native.
4+
5+
## Workflow
6+
7+
We use [GitHub Flow](https://guides.github.com/introduction/flow/), so all code changes happen through pull requests.
8+
9+
1. Fork the repository and create your branch from `master`.
10+
2. If you've changed the functionality, update the documentation.
11+
3. Create the pull request!
12+
13+
## License
14+
15+
By contributing, you agree that your contributions will be licensed under the [MIT License](https://choosealicense.com/licenses/mit/).
16+
17+
## Code style
18+
19+
We use airbnb eslint for maintaing code readablitiy. The project has been written in VSCode with [Prettier](https://prettier.io/) code formatter.
20+
21+
Recommend contributors to run lint on code before creating PRs. Thank :tada:

‎README.md

Lines changed: 56 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,34 @@
11
# React Native Typescript Boilerplate
22

3-
### 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) + [Eslint](https://github.com/airbnb/javascript) to build iOS / Android apps using TypeScript
3+
### 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) + [Eslint](https://github.com/airbnb/javascript) to build iOS / Android apps using [TypeScript](https://github.com/Microsoft/TypeScript-React-Native-Starter)
44

5-
##### Built using Microsft TypeScript & React Native
5+
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.
66

7-
The project has been setup based off instructions from [Microsoft's Github TypeScript React Native](https://github.com/Microsoft/TypeScript-React-Native-Starter) Starter repo
7+
This repo supports the latest version of React Native (v0.57.8+) supported by RNN (at the time of writing).
8+
9+
### Who is this for?
10+
11+
Someone looking to jumpstart building apps using RN and loves TS. The base setup has been taken care of, just `npm install` and get going.
12+
13+
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.
14+
15+
_Disclaimer_:
16+
This is an **opinionated** approach to building apps with RN. The project structure is inspired by multiple production apps built by the contributors.
17+
18+
The project uses and encourages to use industry best practices / tools / libraries like RNN, redux, eslint, separation of concern and structure to build a maintainable app.
819

920
### Table of Contents
1021

1122
- [Project Structure](#project-structure)
1223
- [Running](#running)
13-
- [Deployment](#deployment)
14-
- [Codepush](#codepush)
1524
- [Lint](#lint)
1625
- [Unit Tests](#unit-tests)
17-
- [TODO](#todo)
1826
- [Cheat Sheet](#cheat-sheet)
27+
- [React Native Navigation](#react-native-navigation)
28+
- [Styles](#styles)
29+
- [Widgets / Elements](#widgets---elements)
30+
- [Contributing](#contributing)
31+
- [TODO](#todo)
1932

2033
#### Project Structure
2134

@@ -43,7 +56,7 @@ The project has been setup based off instructions from [Microsoft's Github TypeS
4356
│ │ ├── styles Typography
4457
│ │ └── widgets Custom components
4558
│ └── utilities
46-
├── __tests__ Unit Tests
59+
├── __tests__ Unit Tests
4760
│ ├── presentation
4861
│ └── redux
4962
├── .babelrc
@@ -56,94 +69,44 @@ The project has been setup based off instructions from [Microsoft's Github TypeS
5669
└── README.md
5770
```
5871

59-
#### Running
60-
61-
Make sure node version installed is `>=8.11.x <=9`
62-
63-
```
64-
yarn install
65-
```
72+
`shared`
73+
Everything related to application business logic (store) resides under this directory.
6674

67-
##### iOS
75+
`src`
76+
Only presentation layer for the app, styles, images, icons are meant to be under this.
6877

69-
move to `ios` directory
78+
`web`
79+
Going forward, plann is to add a web folder to the project, that can leverage the business logic from shared folder.
7080

71-
```
72-
$ cd ios
73-
```
81+
#### Running
7482

75-
install pods
83+
Make sure node version installed is `>=8.11.x <=9`
7684

7785
```
78-
$ pod install
86+
yarn install
7987
```
8088

81-
##### Launch
82-
83-
Launch application from iOS and Android IDEs
84-
85-
#### Deployment
89+
#### Launch
8690

87-
##### CodePush
91+
###### iOS
8892

89-
What is React Native without CodePush. The application uses Microsoft [AppCenter](https://github.com/Microsoft/appcenter-cli) cli.
93+
Launch application from XCode
9094

91-
Generate Bundle:
95+
###### Android
9296

93-
`Development:`
97+
For android, you will need to first create the bundle:
9498

9599
```
96100
react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/main.jsbundle --assets-dest ./ --dev false
97101
```
98102

99-
`Production:`
100-
101-
```
102-
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
103-
```
104-
105-
Push:
106-
107-
```
108-
appcenter codepush release -a <ownerName>/<appName> -t <targetBinaryVersion> -d <deploymentName>
109-
```
110-
111-
Example:
112-
113-
```
114-
appcenter codepush release-react -a AmitM30/rnts-ios -d Staging --description "Code Push !"
115-
```
116-
117-
###### Command Options
118-
119-
List apps registered.
120-
`<ownerName>/<appName>`
121-
122-
```
123-
$ appcenter apps list
124-
AmitM30/rnts-android
125-
AmitM30/rnts-ios
126-
```
127-
128-
`<deploymentName>`
103+
then run the Metro Bundler from the terminal
129104

130105
```
131-
$ appcenter codepush deployment list -a AmitM30/rnts-ios
106+
npm run start
132107
```
133108

134-
###### Release History
135-
136-
Command:
137-
138-
```
139-
appcenter codepush deployment history -a AmitM30/rnts-ios Staging
140-
```
141-
142-
Or:
143-
144-
```
145-
code-push deployment history AmitM30/rnts-ios Staging
146-
```
109+
and the launch from IDE.
147110

148111
#### Lint
149112

@@ -177,9 +140,26 @@ npm run test:coverage
177140

178141
#### Cheat Sheet
179142

180-
##### Items to come here
143+
##### React Native Navigation
144+
145+
The application launches with a blank splash screen, and the moves to a tabbed based home view. Developers can feel free to add application launch logic to this, or entirely skip the splash if not required, or change this altogether.
146+
147+
##### Styles
148+
149+
The `styles` folder contain global style and typography for the application. Styles for each screen has been placed with the screen, and not together, as they are going to be used together, unlike web.
150+
151+
##### Widgets / Elements
152+
153+
The custom components have been broken into 2 major categories, namely - **widgets**, **elements**
154+
155+
A Good use case would be:
156+
157+
- widgets: carousels component, banner component etc.
158+
- elements: a custom, may be `<CText>` or `<ButtonDefault>`, element that has default font properties like font, size.
159+
160+
#### Contributing
181161

182-
Test Item
162+
Please check out [Contributing] document(https://github.com/AmitM30/react-native-typescript-boilerplate/blob/master/CONTRIBUTING.md).
183163

184164
#### TODO
185165

‎src/constants/screen.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
const Screens = {
44
Splash: 'Splash',
5-
Home: 'Home'
5+
Home: 'Home',
6+
Settings: 'Settings'
67
};
78

89
export default Screens;

‎src/navigators/navigation.tsx

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,6 @@ import { Navigation } from 'react-native-navigation';
33
import Screens from '../constants/screen';
44
import TYPOGRAPHY from '../view/styles/typography';
55

6-
export const showOnBoarding = () => {
7-
Navigation.setRoot({
8-
root: {
9-
component: {
10-
name: Screens.OnBoarding
11-
}
12-
}
13-
});
14-
};
15-
166
export const showSplash = () => {
177
Navigation.setRoot({
188
root: {
@@ -46,7 +36,7 @@ export const tabbedNavigation = () => Navigation.setRoot({
4636
bottomTab: {
4737
fontSize: 12,
4838
text: 'Home',
49-
textColor: TYPOGRAPHY.Color.SecondaryText,
39+
textColor: TYPOGRAPHY.Color.Primary,
5040
selectedTextColor: TYPOGRAPHY.Color.Primary,
5141
icon: require('../view/assets/images/tabbar/home.png'),
5242
selectedIcon: require('../view/assets/images/tabbar/home.png')
@@ -62,17 +52,17 @@ export const tabbedNavigation = () => Navigation.setRoot({
6252
children: [
6353
{
6454
component: {
65-
name: Screens.Branches,
55+
name: Screens.Settings,
6656
options: {
6757
topBar: {
6858
visible: false,
6959
drawBehind: true,
7060
animate: true
7161
},
7262
bottomTab: {
73-
text: 'Branches',
63+
text: 'Settings',
7464
fontSize: 12,
75-
textColor: TYPOGRAPHY.Color.SecondaryText,
65+
textColor: TYPOGRAPHY.Color.Primary,
7666
selectedTextColor: TYPOGRAPHY.Color.Primary,
7767
icon: require('../view/assets/images/tabbar/settings.png'),
7868
selectedIcon: require('../view/assets/images/tabbar/settings.png')

‎src/view/screens/index.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import Screens from '../../constants/screen';
44

55
import Splash from './splash';
66
import Home from './home';
7+
import Settings from './settings';
78

8-
const registerComponentWithRedux = redux => (name, component) => {
9+
const registerComponentWithRedux = (redux: any) => (name: string, component: any) => {
910
Navigation.registerComponentWithRedux(name, () => component, redux.Provider, redux.store);
1011
};
1112

12-
export default function registerScreens(redux) {
13-
registerComponentWithRedux(redux)(Screens.Home, Home);
13+
export default function registerScreens(redux: any) {
1414
registerComponentWithRedux(redux)(Screens.Splash, Splash);
15-
// registerComponent(redux)(Screens.Splash, Splash);
15+
registerComponentWithRedux(redux)(Screens.Home, Home);
16+
registerComponentWithRedux(redux)(Screens.Settings, Settings);
1617
}

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

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

‎src/view/screens/settings/index.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { connect } from 'react-redux';
2+
3+
import Settings from './Component';
4+
5+
const mapStateToProps = () => ({});
6+
7+
const mapDispatchToProps = () => ({});
8+
9+
const SettingsContainer = connect(
10+
mapStateToProps,
11+
mapDispatchToProps
12+
)(Settings);
13+
14+
export default SettingsContainer;

‎src/view/screens/settings/styles.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
import TYPOGRAPHY from '../../styles/typography';
4+
5+
const Styles = StyleSheet.create({
6+
container: {
7+
flex: 1,
8+
display: 'flex',
9+
backgroundColor: TYPOGRAPHY.Color.Default
10+
}
11+
});
12+
13+
export default Styles;

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React, { PureComponent } from 'react';
2-
import { View, Text } from 'react-native';
2+
import {
3+
View, Text, SafeAreaView, Button
4+
} from 'react-native';
35

6+
import { tabbedNavigation } from '../../../navigators/navigation';
47
import styles from './styles';
58

69
export interface Props {}
@@ -15,11 +18,18 @@ class Splash extends PureComponent<Props, State> {
1518

1619
componentDidMount() {}
1720

21+
navigateToHome = () => {
22+
tabbedNavigation();
23+
};
24+
1825
render() {
1926
return (
20-
<View style={styles.container}>
21-
<Text>Splash</Text>
22-
</View>
27+
<SafeAreaView style={{ flex: 1 }}>
28+
<View style={styles.container}>
29+
<Text>Splash</Text>
30+
<Button title="Continue" onPress={this.navigateToHome} />
31+
</View>
32+
</SafeAreaView>
2333
);
2434
}
2535
}

‎src/view/styles/typography.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
const Color = {
22
// CTA
3-
Primary: '#ed6c0d',
4-
Secondary: '#255394',
3+
Primary: '#565656',
4+
Secondary: '#399be0',
55
Default: '#FFFFFF',
66
Border: '#E7E7E8',
7-
Success: '#2bc480',
8-
Warning: '#d91e5b'
7+
Success: '#2BC480',
8+
Warning: '#D91E5B'
99
};
1010

1111
const Font = {

0 commit comments

Comments
 (0)