├── .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 |