├── .buckconfig
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .github
└── screenshots
│ ├── 1.png
│ └── text_typography.png
├── .gitignore
├── .prettierrc.js
├── .watchmanconfig
├── App.tsx
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── __tests__
└── App-test.tsx
├── android
├── app
│ ├── _BUCK
│ ├── build.gradle
│ ├── build_defs.bzl
│ ├── debug.keystore
│ ├── proguard-rules.pro
│ └── src
│ │ ├── debug
│ │ └── AndroidManifest.xml
│ │ └── main
│ │ ├── AndroidManifest.xml
│ │ ├── java
│ │ └── com
│ │ │ └── reactnativetheme
│ │ │ ├── MainActivity.java
│ │ │ └── MainApplication.java
│ │ └── res
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.png
│ │ └── ic_launcher_round.png
│ │ └── values
│ │ ├── strings.xml
│ │ └── styles.xml
├── build.gradle
├── gradle.properties
├── gradle
│ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
└── settings.gradle
├── app.json
├── babel.config.js
├── component
└── Text.tsx
├── index.js
├── ios
├── Podfile
├── ReactNativeTheme-tvOS
│ └── Info.plist
├── ReactNativeTheme-tvOSTests
│ └── Info.plist
├── ReactNativeTheme.xcodeproj
│ ├── project.pbxproj
│ └── xcshareddata
│ │ └── xcschemes
│ │ ├── ReactNativeTheme-tvOS.xcscheme
│ │ └── ReactNativeTheme.xcscheme
├── ReactNativeTheme
│ ├── AppDelegate.h
│ ├── AppDelegate.m
│ ├── Base.lproj
│ │ └── LaunchScreen.xib
│ ├── Images.xcassets
│ │ ├── AppIcon.appiconset
│ │ │ └── Contents.json
│ │ └── Contents.json
│ ├── Info.plist
│ └── main.m
└── ReactNativeThemeTests
│ ├── Info.plist
│ └── ReactNativeThemeTests.m
├── metro.config.js
├── package.json
└── theme
├── ThemeContext.ts
├── ThemeProvider.tsx
├── colors.ts
├── dimens.ts
├── index.ts
├── spacing.ts
├── theme.ts
└── typography.ts
/.buckconfig:
--------------------------------------------------------------------------------
1 |
2 | [android]
3 | target = Google Inc.:Google APIs:23
4 |
5 | [maven_repositories]
6 | central = https://repo1.maven.org/maven2
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | extends: '@react-native-community',
4 | };
5 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 |
--------------------------------------------------------------------------------
/.github/screenshots/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanjeevyadavIT/react-native-theme/c7fd954d2e91aa7ed26ae815a78bf3d678835918/.github/screenshots/1.png
--------------------------------------------------------------------------------
/.github/screenshots/text_typography.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sanjeevyadavIT/react-native-theme/c7fd954d2e91aa7ed26ae815a78bf3d678835918/.github/screenshots/text_typography.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # Xcode
6 | #
7 | build/
8 | *.pbxuser
9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 |
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 |
33 | # Visual Studio Code
34 | #
35 | .vscode/
36 |
37 | # node.js
38 | #
39 | node_modules/
40 | *.log
41 | .nvm
42 | package-lock.json
43 | yarn.lock
44 | npm-debug.log
45 | yarn-error.log
46 |
47 | # BUCK
48 | buck-out/
49 | \.buckd/
50 | *.keystore
51 | !debug.keystore
52 |
53 | # fastlane
54 | #
55 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
56 | # screenshots whenever they are needed.
57 | # For more information about the recommended setup visit:
58 | # https://docs.fastlane.tools/best-practices/source-control/
59 |
60 | */fastlane/report.xml
61 | */fastlane/Preview.html
62 | */fastlane/screenshots
63 |
64 | # Bundle artifact
65 | *.jsbundle
66 |
67 | # CocoaPods
68 | /ios/Pods/
69 |
--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | bracketSpacing: false,
3 | jsxBracketSameLine: true,
4 | singleQuote: true,
5 | trailingComma: 'all',
6 | };
7 |
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { Children } from 'react';
2 | import {
3 | View,
4 | SafeAreaView,
5 | StatusBar,
6 | ScrollView,
7 | } from 'react-native';
8 | import Text from './component/Text';
9 | import { ThemeProvider, theme, Theme } from './theme';
10 |
11 | const Toolbar: React.SFC = props => (
12 |
13 | React Native Theme
14 |
15 | )
16 |
17 | const Button: React.SFC = props => (
18 |
19 | {props.children}
20 |
21 | )
22 |
23 | const App: React.SFC = () => {
24 | return (
25 |
26 |
27 |
28 |
29 |
30 |
31 | This is a Heading
32 | This is a SubHeading
33 | This is a Body
34 | Default is a Body
35 | This is a label
36 | This is a caption
37 |
38 |
39 | This is a Bold Heading
40 | This is a Bold SubHeading
41 | This is a Bold Body
42 | This is a Bold label
43 | This is a Bold caption
44 |
45 |
46 | This is a custom success Text
47 |
48 |
49 | This is a custom error Text
50 |
51 |
52 |
53 |
54 |
55 | );
56 | };
57 |
58 | const styles = {
59 | toolbar: (theme: Theme) => ({
60 | height: theme.dimens.toolbarHeight,
61 | backgroundColor: theme.colors.primary,
62 | justifyContent: 'center',
63 | paddingLeft: theme.spacing.large,
64 | }),
65 | button: (theme: Theme) => ({
66 | padding: theme.spacing.small,
67 | alignItems: 'center',
68 | backgroundColor: theme.colors.secondary,
69 | borderWidth: 1,
70 | borderColor: theme.colors.secondaryDark,
71 | borderRadius: theme.dimens.borderRadius,
72 | marginTop: theme.spacing.large,
73 | }),
74 | buttonText: (theme: Theme) => ({
75 | color: theme.colors.white,
76 | }),
77 | container: (theme: Theme) => ({
78 | flex: 1,
79 | backgroundColor: theme.colors.background,
80 | }),
81 | section: (theme: Theme) => ({
82 | marginHorizontal: theme.spacing.large,
83 | marginTop: theme.spacing.large,
84 | padding: theme.spacing.small,
85 | backgroundColor: theme.colors.surface,
86 | borderWidth: 1,
87 | borderColor: theme.colors.border,
88 | borderRadisu: theme.dimens.borderRadius,
89 | }),
90 | successText: (theme: Theme) => ({
91 | fontSize: theme.dimens.customFontSize,
92 | color: theme.colors.success,
93 | }),
94 | errorText: (theme: Theme) => ({
95 | fontSize: theme.dimens.customFontSize,
96 | color: theme.colors.error,
97 | }),
98 | };
99 |
100 | export default App;
101 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies within all project spaces, and it also applies when
49 | an individual is representing the project or its community in public spaces.
50 | Examples of representing a project or community include using an official
51 | project e-mail address, posting via an official social media account, or acting
52 | as an appointed representative at an online or offline event. Representation of
53 | a project may be further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |
78 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to MageCart
2 |
3 | :+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
4 |
5 | We would love for you to contribute to React Native Theme and help make it even better. As a contributor, here are some guidelines which will help you to understand the project:
6 |
7 | - [About Project](#about)
8 | - [Project Management](#management)
9 | - [Branch organization](#branch)
10 | - [How Can I Contribute?](#contribute)
11 | - [Reporting Bugs](#issue)
12 | - [Suggesting Enhancements](#feature)
13 | - [Your First Code Contribution](#first-contribution)
14 | - [Pull Requests](#pull-requests)
15 | - [Styleguides](#rules)
16 | - [Git Branch Naming](#branch-styleguide)
17 | - [Commit Message Convention](#commit)
18 | - [JavaScript Styleguide](#javascript-styleguide)
19 | - [Community](#community)
20 | - [Code of Conduct](#coc)
21 |
22 | ## About Project
23 |
24 | React Native theme is a single source of truth for your App Design. It's a scalable theme for your React Native project. You can easily integrate it in your workflow, and modify entire look of your app in seconds. The basic idology can be implemented outside React Native realm.
25 |
26 | ## Project Management
27 |
28 | We use [Github issues](https://github.com/alexakasanjeev/react-native-theme/issues) to track all the features and bug. We follow this project management strategy.
29 |
30 | 1. Each new feature or bug, first get listed in [Github issues](https://github.com/alexakasanjeev/react-native-theme/issues).
31 | 2. The issue card is imported into [Github Project board](https://github.com/alexakasanjeev/react-native-theme/projects/2).
32 | 3. By default, card is imported into `To do` column of the project board.
33 | 4. If a feature/bug is being worked on, the card is moved into `In progress` column, and a corresponding `feature/awesome-feature-title` or `hotfix/terrible-bug-title` branch is created.
34 | 5. Once completed
35 | * The branch is merged into `develop` branch
36 | * Card is moved into `Done` column of the project board
37 | * Issue is finally closed.
38 |
39 | ### Branch Organization
40 |
41 | We follow [Git branch strategy](https://www.youtube.com/watch?v=aJnFGMclhU8). The `develop` branch is the default and base branch for the project. It is used for development and all Pull Requests should go there. Follow [this](#branch-styleguide) naming convention for your branches.
42 |
43 | ## How Can I Contribute?
44 |
45 | ### Reporting Bugs
46 |
47 | - **Ensure the bug was not already reported** by [searching all issues.](https://github.com/alexakasanjeev/react-native-theme/issues)
48 | - If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/alexakasanjeev/react-native-theme/issues/new?labels=bug&template=bug_report.md&title=). When you are creating a bug report, please include as many details as possible. Fill out the [required template](.github/ISSUE_TEMPLATE/bug_report.md), the information it asks for helps us resolve issues faster.
49 |
50 | You can help the team even more and [submit a Pull Request with a fix](#pull-requests).
51 |
52 | ### Suggesting Enhancements
53 |
54 | Feature suggestions are tracked as [GitHub issues](https://github.com/alexakasanjeev/react-native-theme/issues). Feature requests are welcome. **But first, already open issues marked as [`Type: enhancement`](https://github.com/alexakasanjeev/react-native-theme/issues?q=is%3Aopen+is%3Aissue+label%3A%22Type%3A+Enhancement%22) will take priority**. So take a moment to find out whether your idea fits with the scope and aims of the project. Please provide as much detail and [context](.github/ISSUE_TEMPLATE/feature_request.md) as possible.
55 |
56 | - Make a [new feature request](https://github.com/alexakasanjeev/react-native-theme/issues/new?&labels=enhancement&template=feature_request.md&title=)
57 |
58 | ### Your First Code Contribution
59 |
60 | To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first issues](https://github.com/alexakasanjeev/react-native-theme/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) that contain small functionality/bug that have a relatively limited scope. This is a great place to get started.
61 |
62 | If you are familiar with the codebase, checkout [Help wanted issues](https://github.com/alexakasanjeev/react-native-theme/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
63 |
64 | If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don’t accidentally duplicate your effort.
65 |
66 | ### Pull Requests
67 |
68 | If you never created a pull request before, welcome :tada: :smile: [Here is a great tutorial](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) on how to send one :)
69 |
70 | Good pull requests - patches, improvements, new features - are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
71 |
72 | Please ask first before embarking on any significant pull request (e.g. implementing features, refactoring code), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
73 |
74 | 1. Search [GitHub](https://github.com/alexakasanjeev/react-native-theme/pulls) for an open or closed PR that relates to your submission. You don't want to duplicate effort.
75 |
76 | 2. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes:
77 |
78 | ```bash
79 | # Clone your fork of the repo into the current directory
80 | git clone https://github.com//
81 | # Navigate to the newly cloned directory
82 | cd
83 | # Assign the original repo to a remote called "upstream"
84 | git remote add upstream https://github.com/alexakasanjeev/react-native-theme.git
85 | ```
86 |
87 | 3. If you cloned a while ago, get the latest changes from upstream:
88 |
89 | ```bash
90 | git checkout develop
91 | git pull upstream develop
92 | ```
93 |
94 | 4. Create a new topic branch (off the main project development branch) to contain your feature, change, or fix: follow [this](#branch-styleguide) naming convention for branch
95 |
96 | ```bash
97 | git checkout -b
98 | ```
99 |
100 | 5. Commit your changes using a descriptive commit message that follows our [commit message conventions](#commit).
101 |
102 | 6. Push your branch to GitHub:
103 |
104 | ```bash
105 | git push origin
106 | ```
107 |
108 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) using your branch and fill the [required template](.github/pull_request_template.md).
109 |
110 | **IMPORTANT**: By submitting a patch, you agree to license your work under the same license as that used by the project.
111 |
112 |
113 | ## Styleguides
114 |
115 | To ensure consistency throughout the source code, keep these rules in mind as you are working:
116 |
117 | ### Git Branch Naming
118 |
119 | If you are working on an enhancement(feature) issue, start you branch name like this `feature/short-descriptive-title`.
120 |
121 | If you are working on a bug fix issue, start your branch name like this `hotfix/issue-title`
122 |
123 | **Example**
124 |
125 | Suppose you are working on *add to cart* feature, name your branch
126 |
127 | ```
128 | feature/add-to-cart
129 | ```
130 |
131 | Suppose you are working on issue *Navigation drawer render multiple times*, name your branch
132 |
133 | ```
134 | hotfix/navigation-multiple-render
135 | ```
136 |
137 | ### Commit Message Convention
138 |
139 | A commit message consists of a header, body and footer. The header has a type and subject:
140 |
141 | ```
142 | :
143 |
144 |
145 |
146 |