Skip to content

Commit c1e2f6d

Browse files
leinstayleinstay
committed
Initial commit
0 parents  commit c1e2f6d

File tree

137 files changed

+4387
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

137 files changed

+4387
-0
lines changed

‎.github/README.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# RNBNR Starter Kit
2+
3+
This project is a [React Native](https://facebook.github.io/react-native/) boilerplate template powered by NativeBase, ReactNavigation, ReduxToolkit and TypeScript that can be used to kickstart a mobile application. The boilerplate provides **an optimized architecture for building solid cross-platform mobile applications** through separation of concerns between the UI and business logic. Live preview on [Google Play](https://play.google.com/store/apps/details?id=com.rnbnrstarterkit).
4+
5+
Inspiration: https://github.com/mcnamee/react-native-starter-kit
6+
7+
![_1](https://user-images.githubusercontent.com/8215580/205414454-ffd036e5-7e2b-4e8e-a0e2-7fb803500137.gif)
8+
![_2](https://user-images.githubusercontent.com/8215580/205414460-9e18f865-9a6f-4706-90cc-be702b366a71.gif)
9+
![_3](https://user-images.githubusercontent.com/8215580/205414461-7eb6f37a-fd9a-4781-b978-72f9fb57c1bb.gif)
10+
11+
## Features
12+
13+
This template consists of four screens and three components showing the interaction between used libraries and offers a predefined project structure.
14+
15+
### Views
16+
17+
- **Screens**
18+
- Cards.tsx - _Demonstrates the use of a grid, images embedded in the application and a component constructed from a large number of props;_
19+
- Forms.tsx - _Demonstrates integration between NativeBase UI, Formik form controller, Yup validator and RTK store;_
20+
- Gallery.tsx - _Demonstrates the use of local state, remote images and gallery implementation;_
21+
- Session.tsx - _Demonstrates access to user files and basic CRUD operations on store;_
22+
- **Components**
23+
- AppBar.tsx - _Demonstrates basic examples of use of reducers and preservation of application data in offline mode;_
24+
- Card.tsx - _Demonstrates reuse of a component by using props;_
25+
- Modal.tsx - _Demonstrates reuse of a component by using store;_
26+
27+
### Dependencies
28+
29+
- **Mandatory**
30+
- [React v18](reactjs.org) - _base library;_
31+
- [React Native v0.70](https://reactnative.dev/) - _base library;_
32+
- [Native Base v3.4](https://nativebase.io/) - _user interface toolkit;_
33+
- [React Navigation v6](https://reactnavigation.org/) - _routing and navigation;_
34+
- [Redux Toolkit v1.9](https://redux-toolkit.js.org/) - _flux architecture;_
35+
- **Optional**
36+
- [Formik v2.2](https://formik.org/) - _advanced form controller_
37+
- [YUP v0.32](https://github.com/jquense/yup) - _validation schema builder_
38+
- [React Native Document Picker v8.1](https://github.com/rnmods/react-native-document-picker) - _interface to access documents;_
39+
- [React Native Image Viewing v0.2.2](https://github.com/jobtoday/react-native-image-viewing) - _gallery plugin;_
40+
- [React Native Vector Icons v9.2](https://github.com/oblador/react-native-vector-icons) - _additional icons from Feather, FontAwesome, etc;_
41+
- **Development**
42+
- [TypeScript v4.9](https://www.typescriptlang.org/) - _extends javascript by adding types to the language_
43+
- [Prettier v2.8](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - _code formatter_
44+
- [ESLint v7.32](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - _code linter (config extends @react-native-community/eslint-config rules)_
45+
46+
### Structure
47+
48+
- src
49+
- assets - _static assets such as videos, fonts, images, etc_;
50+
- components - _custom components for use in screens_;
51+
- ...
52+
- Component.tsx
53+
- screens - _finished screens, i.e. views for your application_;
54+
- ...
55+
- Screen.tsx
56+
- slices - _business logic implemented using Redux reducers;_
57+
- ...
58+
- Slice.tsx
59+
- Theme.tsx - _global theme parameters, as an example this application uses the [Poppins](https://fonts.google.com/specimen/Poppins) font;_
60+
- Store.tsx - _state container which holds the application's global state;_
61+
- Types.tsx - _custom types and interfaces;_
62+
- App.tsx - _handles your app startup and routing;_
63+
64+
## Installation
65+
66+
- Install [React Native Debugger](https://github.com/jhen0409/react-native-debugger/releases) and open before running the app
67+
- Install `eslint` and `prettier` plugins into your IDE (you can adjust settings in .eslintrc.js and .prettierrc.js)
68+
- Ensure your machine has the [React Native dependencies installed](https://facebook.github.io/react-native/docs/getting-started)
69+
70+
To create a new project using the boilerplate simply run:
71+
72+
```bash
73+
npx react-native init MyApp --template rnbnr-template
74+
```
75+
76+
Than install dependencies:
77+
78+
```bash
79+
npm install && ( cd ios && pod install )
80+
```
81+
82+
For Android devices or Android Simulator:
83+
84+
```bash
85+
npx react-native run-android
86+
```
87+
88+
For iOS devices or iOS Simulator:
89+
90+
```bash
91+
npx react-native run-ios
92+
```

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
.vscode/
3+
.DS_Store
4+
.idea/

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Leinstay
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# RNBNR Starter Kit
2+
3+
This project is a [React Native](https://facebook.github.io/react-native/) boilerplate template powered by NativeBase, ReactNavigation, ReduxToolkit and TypeScript that can be used to kickstart a mobile application. The boilerplate provides **an optimized architecture for building solid cross-platform mobile applications** through separation of concerns between the UI and business logic. Live preview on [Google Play](https://play.google.com/store/apps/details?id=com.rnbnrstarterkit).
4+
5+
Inspiration: https://github.com/mcnamee/react-native-starter-kit
6+
7+
![_1](https://user-images.githubusercontent.com/8215580/205414454-ffd036e5-7e2b-4e8e-a0e2-7fb803500137.gif)
8+
![_2](https://user-images.githubusercontent.com/8215580/205414460-9e18f865-9a6f-4706-90cc-be702b366a71.gif)
9+
10+
## Features
11+
12+
This template consists of four screens and three components showing the interaction between used libraries and offers a predefined project structure.
13+
14+
### Views
15+
16+
- **Screens**
17+
- Cards.tsx - _Demonstrates the use of a grid, images embedded in the application and a component constructed from a large number of props;_
18+
- Forms.tsx - _Demonstrates integration between NativeBase UI, Formik form controller, Yup validator and RTK store;_
19+
- Gallery.tsx - _Demonstrates the use of local state, remote images and gallery implementation;_
20+
- Session.tsx - _Demonstrates access to user files and basic CRUD operations on store;_
21+
- **Components**
22+
- AppBar.tsx - _Demonstrates basic examples of use of reducers and preservation of application data in offline mode;_
23+
- Card.tsx - _Demonstrates reuse of a component by using props;_
24+
- Modal.tsx - _Demonstrates reuse of a component by using store;_
25+
26+
### Dependencies
27+
28+
- **Mandatory**
29+
- [React v18](reactjs.org) - _base library;_
30+
- [React Native v0.70](https://reactnative.dev/) - _base library;_
31+
- [Native Base v3.4](https://nativebase.io/) - _user interface toolkit;_
32+
- [React Navigation v6](https://reactnavigation.org/) - _routing and navigation;_
33+
- [Redux Toolkit v1.9](https://redux-toolkit.js.org/) - _flux architecture;_
34+
- **Optional**
35+
- [Formik v2.2](https://formik.org/) - _advanced form controller_
36+
- [YUP v0.32](https://github.com/jquense/yup) - _validation schema builder_
37+
- [React Native Document Picker v8.1](https://github.com/rnmods/react-native-document-picker) - _interface to access documents;_
38+
- [React Native Image Viewing v0.2.2](https://github.com/jobtoday/react-native-image-viewing) - _gallery plugin;_
39+
- [React Native Vector Icons v9.2](https://github.com/oblador/react-native-vector-icons) - _additional icons from Feather, FontAwesome, etc;_
40+
- **Development**
41+
- [TypeScript v4.9](https://www.typescriptlang.org/) - _extends javascript by adding types to the language_
42+
- [Prettier v2.8](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - _code formatter_
43+
- [ESLint v7.32](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - _code linter (config extends @react-native-community/eslint-config rules)_
44+
45+
### Structure
46+
47+
- src
48+
- assets - _static assets such as videos, fonts, images, etc_;
49+
- components - _custom components for use in screens_;
50+
- ...
51+
- Component.tsx
52+
- screens - _finished screens, i.e. views for your application_;
53+
- ...
54+
- Screen.tsx
55+
- slices - _business logic implemented using Redux reducers;_
56+
- ...
57+
- Slice.tsx
58+
- Theme.tsx - _global theme parameters, as an example this application uses the [Poppins](https://fonts.google.com/specimen/Poppins) font;_
59+
- Store.tsx - _state container which holds the application's global state;_
60+
- Types.tsx - _custom types and interfaces;_
61+
- App.tsx - _handles your app startup and routing;_
62+
63+
## Installation
64+
65+
- Install [React Native Debugger](https://github.com/jhen0409/react-native-debugger/releases) and open before running the app
66+
- Install `eslint` and `prettier` plugins into your IDE (you can adjust settings in .eslintrc.js and .prettierrc.js)
67+
- Ensure your machine has the [React Native dependencies installed](https://facebook.github.io/react-native/docs/getting-started)
68+
69+
To create a new project using the boilerplate simply run:
70+
71+
```bash
72+
npx react-native init MyApp --template rnbnr-template
73+
```
74+
75+
Than install dependencies:
76+
77+
```bash
78+
npm install && ( cd ios && pod install )
79+
```
80+
81+
For Android devices or Android Simulator:
82+
83+
```bash
84+
npx react-native run-android
85+
```
86+
87+
For iOS devices or iOS Simulator:
88+
89+
```bash
90+
npx react-native run-ios
91+
```

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "rnbnr-template",
3+
"version": "0.0.6",
4+
"description": "React Native boilerplate template powered by NativeBase, ReactNavigation, ReduxToolkit and TypeScript that can be used to kickstart a mobile application.",
5+
"scripts": {
6+
"test": "exit 0"
7+
},
8+
"files": [
9+
"template",
10+
"template.config.js"
11+
],
12+
"repository": {
13+
"type": "git",
14+
"url": "git+https://github.com/leinstay/rnbnr-template.git"
15+
},
16+
"keywords": [
17+
"react-native",
18+
"template",
19+
"starterkit",
20+
"typescript",
21+
"nativebase",
22+
"reduxtoolkit",
23+
"reactnavigation"
24+
],
25+
"author": "Leinstay",
26+
"license": "MIT",
27+
"bugs": {
28+
"url": "https://github.com/leinstay/rnbnr-template/issues"
29+
},
30+
"homepage": "https://github.com/leinstay/rnbnr-template#readme"
31+
}

‎template.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
placeholderName: "rnbnrstarterkit",
3+
templateDir: "./template",
4+
};

‎template/.buckconfig

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[android]
2+
target = Google Inc.:Google APIs:23
3+
4+
[maven_repositories]
5+
central = https://repo1.maven.org/maven2

‎template/.bundle/config

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎template/.eslintrc.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
root: true,
3+
extends: ['@react-native-community', 'prettier'],
4+
plugins: ['@typescript-eslint', 'eslint-plugin-prettier', 'import'],
5+
parser: '@typescript-eslint/parser',
6+
overrides: [
7+
{
8+
files: ['*.ts', '*.tsx'],
9+
rules: {
10+
'@typescript-eslint/no-shadow': ['error'],
11+
'no-shadow': 'off',
12+
'no-undef': 'off',
13+
'prettier/prettier': ['error', {}],
14+
'max-len': ['error', { code: 200, ignoreUrls: true }],
15+
'linebreak-style': 0,
16+
'@typescript-eslint/no-use-before-define': ['error'],
17+
'no-use-before-define': 'off',
18+
'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
19+
'no-underscore-dangle': 0,
20+
'import/no-amd': 0,
21+
'import/no-dynamic-require': 0,
22+
},
23+
},
24+
],
25+
};

0 commit comments

Comments
 (0)