├── .editorconfig
├── .gitattributes
├── .github
├── CODEOWNERS
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── dependabot.yml
└── workflows
│ ├── ci.yml
│ ├── dco.yml
│ └── release.yml
├── .gitignore
├── .npmrc
├── .watchmanconfig
├── LICENSE
├── README.md
├── SECURITY.md
├── babel.config.js
├── eslint.config.mjs
├── example
├── .bundle
│ └── config
├── .ruby-version
├── Gemfile
├── Gemfile.lock
├── android
│ ├── app
│ │ ├── build.gradle
│ │ ├── debug.keystore
│ │ ├── proguard-rules.pro
│ │ └── src
│ │ │ ├── debug
│ │ │ └── AndroidManifest.xml
│ │ │ └── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── assets
│ │ │ └── fonts
│ │ │ │ ├── IBMPlexMono-Regular.ttf
│ │ │ │ ├── IBMPlexSans-Bold.ttf
│ │ │ │ ├── IBMPlexSans-ExtraLight.ttf
│ │ │ │ ├── IBMPlexSans-Light.ttf
│ │ │ │ ├── IBMPlexSans-Medium.ttf
│ │ │ │ ├── IBMPlexSans-Regular.ttf
│ │ │ │ ├── IBMPlexSans-SemiBold.ttf
│ │ │ │ └── IBMPlexSans-Thin.ttf
│ │ │ ├── googleplay-web.png
│ │ │ ├── ic_launcher-playstore.png
│ │ │ ├── java
│ │ │ └── com
│ │ │ │ └── ibm
│ │ │ │ └── design
│ │ │ │ └── carbon
│ │ │ │ └── mobile
│ │ │ │ ├── MainActivity.kt
│ │ │ │ └── MainApplication.kt
│ │ │ └── res
│ │ │ ├── drawable
│ │ │ └── rn_edit_text_material.xml
│ │ │ ├── mipmap-anydpi-v26
│ │ │ ├── ic_launcher.xml
│ │ │ └── ic_launcher_round.xml
│ │ │ ├── mipmap-hdpi
│ │ │ ├── ic_launcher_background.png
│ │ │ └── ic_launcher_foreground.png
│ │ │ ├── mipmap-mdpi
│ │ │ ├── ic_launcher_background.png
│ │ │ └── ic_launcher_foreground.png
│ │ │ ├── mipmap-xhdpi
│ │ │ ├── ic_launcher_background.png
│ │ │ └── ic_launcher_foreground.png
│ │ │ ├── mipmap-xxhdpi
│ │ │ ├── ic_launcher_background.png
│ │ │ └── ic_launcher_foreground.png
│ │ │ ├── mipmap-xxxhdpi
│ │ │ ├── ic_launcher_background.png
│ │ │ └── ic_launcher_foreground.png
│ │ │ └── values
│ │ │ ├── strings.xml
│ │ │ └── styles.xml
│ ├── build.gradle
│ ├── gradle.properties
│ ├── gradle
│ │ └── wrapper
│ │ │ ├── gradle-wrapper.jar
│ │ │ └── gradle-wrapper.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── link-assets-manifest.json
│ └── settings.gradle
├── babel.config.js
├── index.js
├── ios
│ ├── .xcode.env
│ ├── .xcode.env.local
│ ├── CarbonReactNativeExample-Bridging-Header.h
│ ├── CarbonReactNativeExample.xcodeproj
│ │ ├── project.pbxproj
│ │ └── xcshareddata
│ │ │ └── xcschemes
│ │ │ └── CarbonReactNativeExample.xcscheme
│ ├── CarbonReactNativeExample.xcworkspace
│ │ ├── contents.xcworkspacedata
│ │ └── xcshareddata
│ │ │ └── IDEWorkspaceChecks.plist
│ ├── CarbonReactNativeExample
│ │ ├── AppDelegate.swift
│ │ ├── Images.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ ├── AppIcon_1024x1024@1x.png
│ │ │ │ ├── AppIcon_20x20@2x-1.png
│ │ │ │ ├── AppIcon_20x20@2x.png
│ │ │ │ ├── AppIcon_20x20@3x.png
│ │ │ │ ├── AppIcon_29x29@2x-1.png
│ │ │ │ ├── AppIcon_29x29@2x.png
│ │ │ │ ├── AppIcon_29x29@3x.png
│ │ │ │ ├── AppIcon_40x40@2x-1.png
│ │ │ │ ├── AppIcon_40x40@2x.png
│ │ │ │ ├── AppIcon_40x40@3x.png
│ │ │ │ ├── AppIcon_60x60@2x.png
│ │ │ │ ├── AppIcon_60x60@3x.png
│ │ │ │ ├── AppIcon_76x76@2x.png
│ │ │ │ ├── AppIcon_83.5x83.5@2x.png
│ │ │ │ └── Contents.json
│ │ │ ├── Contents.json
│ │ │ ├── iTunesArtwork.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ └── iTunesArtwork.png
│ │ │ └── splash_background.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ └── background.png
│ │ ├── Info.plist
│ │ ├── LaunchScreen.storyboard
│ │ └── PrivacyInfo.xcprivacy
│ ├── Podfile
│ ├── Podfile.lock
│ └── link-assets-manifest.json
├── metro.config.js
├── package-lock.json
├── package.json
├── react-native.config.js
└── src
│ ├── App.tsx
│ ├── Views
│ ├── AcceptsTerms.tsx
│ ├── Accordion.tsx
│ ├── ActionSheet.tsx
│ ├── BottomNavigationBar.tsx
│ ├── BottomToolbar.tsx
│ ├── BottomToolbarPrimaryAction.tsx
│ ├── Button.tsx
│ ├── Checkbox.tsx
│ ├── ComponentList.tsx
│ ├── ContentSwitcher.tsx
│ ├── DataTable.tsx
│ ├── DateInput.tsx
│ ├── DocumentViewer.tsx
│ ├── Dropdown.tsx
│ ├── ErrorState.tsx
│ ├── FileUploaderItem.tsx
│ ├── FormItem.tsx
│ ├── GrantPermission.tsx
│ ├── Icons.tsx
│ ├── LandingView.tsx
│ ├── Link.tsx
│ ├── List.tsx
│ ├── Loading.tsx
│ ├── Login.tsx
│ ├── LoginCreateAccount.tsx
│ ├── LoginCreatePassword.tsx
│ ├── LoginForgotPassword.tsx
│ ├── Menu.tsx
│ ├── Modal.tsx
│ ├── NavigationList.tsx
│ ├── Notification.tsx
│ ├── NumberInput.tsx
│ ├── Overlay.tsx
│ ├── OverrideTheme.tsx
│ ├── Pagination.tsx
│ ├── PasswordInput.tsx
│ ├── ProgressIndicator.tsx
│ ├── RadioButton.tsx
│ ├── RealLandingView.tsx
│ ├── Resources.tsx
│ ├── Search.tsx
│ ├── Slider.tsx
│ ├── Tabs.tsx
│ ├── Tag.tsx
│ ├── Text.tsx
│ ├── TextArea.tsx
│ ├── TextInput.tsx
│ ├── Tile.tsx
│ ├── Toggle.tsx
│ ├── Tooltip.tsx
│ ├── TopNavigationBar.tsx
│ ├── TopNavigationBarLogin.tsx
│ ├── UiPanel.tsx
│ ├── ViewWrapper.tsx
│ └── WebHeader.tsx
│ ├── assets
│ ├── app_icon.png
│ ├── companyImage.png
│ ├── components
│ │ ├── button-dark.png
│ │ └── button-light.png
│ ├── productImage.png
│ └── react.png
│ ├── constants
│ ├── privacyPolicy.ts
│ ├── termsConditions.ts
│ ├── testDocument.ts
│ ├── thirdPartyNotices.ts
│ └── versionCode.ts
│ └── react-app-env.d.ts
├── lefthook.yml
├── package-lock.json
├── package.json
├── scripts
└── bump-example.js
├── src
├── __tests__
│ └── index.test.tsx
├── assets
│ └── fonts
│ │ ├── IBMPlexMono-Regular.ttf
│ │ ├── IBMPlexSans-Bold.ttf
│ │ ├── IBMPlexSans-ExtraLight.ttf
│ │ ├── IBMPlexSans-Light.ttf
│ │ ├── IBMPlexSans-Medium.ttf
│ │ ├── IBMPlexSans-Regular.ttf
│ │ ├── IBMPlexSans-SemiBold.ttf
│ │ └── IBMPlexSans-Thin.ttf
├── components
│ ├── AcceptTerms
│ │ └── index.tsx
│ ├── Accordion
│ │ └── index.tsx
│ ├── ActionSheet
│ │ └── index.tsx
│ ├── BaseTextInputs
│ │ └── index.tsx
│ ├── BottomNavigationBar
│ │ └── index.tsx
│ ├── BottomSafeAreaColorOverride
│ │ └── index.tsx
│ ├── BottomToolbar
│ │ └── index.tsx
│ ├── BottomToolbarPrimaryAction
│ │ └── index.tsx
│ ├── Button
│ │ └── index.tsx
│ ├── Checkbox
│ │ └── index.tsx
│ ├── ContentSwitcher
│ │ └── index.tsx
│ ├── DataTable
│ │ ├── DataTable.tsx
│ │ ├── DataTableCell.tsx
│ │ ├── DataTableHeader.tsx
│ │ ├── DataTableHeaderSelected.tsx
│ │ ├── DataTableRow.tsx
│ │ └── index.tsx
│ ├── DateInput
│ │ └── index.tsx
│ ├── DocumentViewer
│ │ └── index.tsx
│ ├── Dropdown
│ │ └── index.tsx
│ ├── ErrorState
│ │ ├── access_error.png
│ │ ├── empty_error.png
│ │ ├── generic_error.png
│ │ └── index.tsx
│ ├── FileUploaderItem
│ │ └── index.tsx
│ ├── FormItem
│ │ └── index.tsx
│ ├── GrantPermission
│ │ ├── camera_permission.png
│ │ ├── file_permission.png
│ │ ├── index.tsx
│ │ ├── location_permission.png
│ │ └── notifications_permission.png
│ ├── InlineLink
│ │ └── index.tsx
│ ├── LandingView
│ │ └── index.tsx
│ ├── Link
│ │ └── index.tsx
│ ├── List
│ │ └── index.tsx
│ ├── Loading
│ │ └── index.tsx
│ ├── Menu
│ │ └── index.tsx
│ ├── MenuItem
│ │ └── index.tsx
│ ├── Modal
│ │ └── index.tsx
│ ├── NavigationList
│ │ └── index.tsx
│ ├── NavigationListItem
│ │ └── index.tsx
│ ├── Notification
│ │ └── index.tsx
│ ├── NumberInput
│ │ └── index.tsx
│ ├── Overlay
│ │ └── index.tsx
│ ├── Pagination
│ │ └── index.tsx
│ ├── PasswordInput
│ │ └── index.tsx
│ ├── ProgressIndicator
│ │ └── index.tsx
│ ├── RadioButton
│ │ └── index.tsx
│ ├── SafeAreaWrapper
│ │ └── index.tsx
│ ├── Search
│ │ └── index.tsx
│ ├── Slider
│ │ └── index.tsx
│ ├── Tabs
│ │ └── index.tsx
│ ├── Tag
│ │ └── index.tsx
│ ├── Text
│ │ └── index.tsx
│ ├── TextArea
│ │ └── index.tsx
│ ├── TextInput
│ │ └── index.tsx
│ ├── Tile
│ │ └── index.tsx
│ ├── Toggle
│ │ └── index.tsx
│ ├── Tooltip
│ │ └── index.tsx
│ ├── TopNavigationBar
│ │ └── index.tsx
│ ├── TopNavigationBarLogin
│ │ └── index.tsx
│ ├── UiPanel
│ │ └── index.tsx
│ ├── UiPanelItem
│ │ └── index.tsx
│ ├── ViewWrapper
│ │ └── index.tsx
│ └── WebHeader
│ │ └── index.tsx
├── constants
│ ├── constants.ts
│ └── defaultText.ts
├── helpers
│ └── index.tsx
├── index.tsx
├── react-app-env.d.ts
├── styles
│ ├── colors.ts
│ ├── typography.ts
│ └── z-index.ts
└── types
│ ├── navigation.ts
│ └── shared.ts
├── telemetry.yml
├── tsconfig.build.json
├── tsconfig.json
└── typedoc.json
/.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 | indent_style = space
10 | indent_size = 2
11 |
12 | end_of_line = lf
13 | charset = utf-8
14 | trim_trailing_whitespace = true
15 | insert_final_newline = true
16 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.pbxproj -text
2 | # specific for windows script files
3 | *.bat text eol=crlf
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | * @dabrad26
2 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | # Maintain dependencies for GitHub Actions
4 | - package-ecosystem: 'github-actions'
5 | directory: '/'
6 | schedule:
7 | interval: 'daily'
8 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: ci
2 | on:
3 | push:
4 | branches:
5 | - main
6 | pull_request:
7 | branches:
8 | - main
9 | merge_group:
10 | types: [checks_requested]
11 |
12 | concurrency:
13 | group: ${{ github.workflow }}-${{ github.ref }}
14 | cancel-in-progress: true
15 |
16 | jobs:
17 | lint:
18 | runs-on: ubuntu-latest
19 | steps:
20 | - uses: actions/checkout@v4
21 | - name: Use Node.js
22 | uses: actions/setup-node@v4
23 | with:
24 | node-version: '22.x'
25 | - name: Install dependencies
26 | run: npm ci && npm --prefix ./example ci
27 | - name: Lint JavaScript files
28 | run: npm run lint
29 |
30 | typescript:
31 | runs-on: ubuntu-latest
32 | steps:
33 | - uses: actions/checkout@v4
34 | - name: Use Node.js
35 | uses: actions/setup-node@v4
36 | with:
37 | node-version: '22.x'
38 | - name: Install dependencies
39 | run: npm ci && npm --prefix ./example ci
40 | - name: Run typescript
41 | run: npm run typescript
42 |
43 | test:
44 | runs-on: ubuntu-latest
45 | steps:
46 | - uses: actions/checkout@v4
47 | - name: Use Node.js
48 | uses: actions/setup-node@v4
49 | with:
50 | node-version: '22.x'
51 | - uses: actions/cache@v4
52 | id: cache
53 | with:
54 | path: |
55 | node_modules
56 | */**/node_modules
57 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
58 | - name: Install dependencies
59 | run: npm ci && npm --prefix ./example ci
60 | - name: Run tests
61 | run: npm run test --coverage
62 | - name: Archive code coverage results
63 | uses: actions/upload-artifact@v4
64 | with:
65 | name: code-coverage-report
66 | path: coverage
67 |
68 | build:
69 | runs-on: ubuntu-latest
70 | steps:
71 | - uses: actions/checkout@v4
72 | - name: Use Node.js
73 | uses: actions/setup-node@v4
74 | with:
75 | node-version: '22.x'
76 | - uses: actions/cache@v4
77 | id: cache
78 | with:
79 | path: |
80 | node_modules
81 | */**/node_modules
82 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
83 | - name: Install dependencies
84 | run: npm ci && npm --prefix ./example ci
85 | - name: Build package
86 | run: npm run prepare
87 |
--------------------------------------------------------------------------------
/.github/workflows/dco.yml:
--------------------------------------------------------------------------------
1 | name: 'DCO Assistant'
2 | on:
3 | issue_comment:
4 | types: [created]
5 | pull_request_target:
6 | types: [opened, closed, synchronize]
7 | merge_group:
8 | types: [checks_requested]
9 |
10 | jobs:
11 | DCO:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: 'DCO Assistant'
15 | if: (github.event.comment.body == 'recheck' || github.event.comment.body
16 | == 'I have read the DCO document and I hereby sign the DCO.') ||
17 | github.event_name == 'pull_request_target'
18 | uses: contributor-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 #2.6.1
19 | env:
20 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
21 | PERSONAL_ACCESS_TOKEN: ${{ secrets.DCO_PERSONAL_ACCESS_TOKEN }}
22 | with:
23 | path-to-signatures: 'dco-signatures.json'
24 | path-to-document: 'https://github.com/carbon-design-system/carbon-dco/blob/main/dco.md'
25 | branch: 'main'
26 | allowlist: bot*
27 | remote-organization-name: carbon-design-system
28 | remote-repository-name: carbon-dco
29 | create-file-commit-message: 'chore: create file to store dco signatures'
30 | signed-commit-message: 'chore: $contributorName has signed the dco in #$pullRequestNo'
31 | custom-notsigned-prcomment:
32 | 'Thanks for your submission! We ask that $you sign our [Developer
33 | Certificate of
34 | Origin](https://github.com/carbon-design-system/carbon-dco/blob/main/dco.md)
35 | before we can accept your contribution. You can sign the DCO by
36 | adding a comment below using this text:'
37 | custom-pr-sign-comment: 'I have read the DCO document and I hereby sign the DCO.'
38 | custom-allsigned-prcomment: 'All contributors have signed the DCO.'
39 | lock-pullrequest-aftermerge: false
40 | use-dco-flag: true
41 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | jobs:
8 | build:
9 | if:
10 | github.actor != 'carbon-bot'
11 | && !contains(github.event.head_commit.message, 'ci-skip')
12 | name: Create release - Node.js
13 | runs-on: ubuntu-latest
14 | permissions:
15 | contents: read
16 | id-token: write
17 |
18 | steps:
19 | - name: Checkout
20 | uses: actions/checkout@v4
21 | with:
22 | fetch-depth: 0
23 |
24 | - name: Use Node.js
25 | uses: actions/setup-node@v4
26 | with:
27 | node-version: '22.14.0'
28 | registry-url: 'https://registry.npmjs.org'
29 |
30 | - name: Install dependencies
31 | run: npm ci && npm --prefix ./example ci
32 |
33 | - name: Configure git
34 | uses: oleksiyrudenko/gha-git-credentials@v2.1
35 | with:
36 | global: true
37 | name: 'David Bradshaw'
38 | email: 'david.bradshaw@ibm.com'
39 | actor: 'david.bradshaw@ibm.com'
40 | token: '${{ secrets.DCO_PERSONAL_ACCESS_TOKEN }}'
41 |
42 | - name: Change git remote to use SSH
43 | run: |
44 | git remote set-url origin git@github.com:carbon-design-system/carbon-react-native.git
45 |
46 | - name: Attach SSH key
47 | uses: webfactory/ssh-agent@v0.9.1
48 | with:
49 | ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
50 |
51 | - name: Deploy to Github & NPM 🚀
52 | run: |
53 | npm set "//registry.npmjs.org/:_authToken" ${{ secrets.NPM_TOKEN }}
54 | npm run release -- --ci
55 | env:
56 | GITHUB_TOKEN: ${{ secrets.DCO_PERSONAL_ACCESS_TOKEN }}
57 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
58 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | #
3 | .DS_Store
4 |
5 | # XDE
6 | .expo/
7 |
8 | # VSCode
9 | .vscode/
10 | jsconfig.json
11 |
12 | # Xcode
13 | #
14 | build/
15 | *.pbxuser
16 | !default.pbxuser
17 | *.mode1v3
18 | !default.mode1v3
19 | *.mode2v3
20 | !default.mode2v3
21 | *.perspectivev3
22 | !default.perspectivev3
23 | xcuserdata
24 | *.xccheckout
25 | *.moved-aside
26 | DerivedData
27 | *.hmap
28 | *.ipa
29 | *.xcuserstate
30 | project.xcworkspace
31 |
32 | # Android/IJ
33 | #
34 | .classpath
35 | .cxx
36 | .gradle
37 | .idea
38 | .project
39 | .settings
40 | local.properties
41 | */android/app/release
42 | android.iml
43 | .kotlin
44 |
45 | # Cocoapods
46 | #
47 | example/ios/Pods
48 |
49 | # Ruby
50 | example/vendor/
51 |
52 | # node.js
53 | #
54 | node_modules/
55 | npm-debug.log
56 | yarn-debug.log
57 | yarn-error.log
58 |
59 | # BUCK
60 | buck-out/
61 | \.buckd/
62 | android/app/libs
63 | android/keystores/debug.keystore
64 |
65 | # Expo
66 | .expo/*
67 |
68 | # generated by bob
69 | lib/
70 |
71 | # Documentation
72 | /docs
73 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 |
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
1 | # Security Policy
2 |
3 | ## Supported Versions
4 |
5 | | Version | Supported |
6 | | ------- | ------------------ |
7 | | 1.x | :white_check_mark: |
8 |
9 | These supported versions include the different discrete version numbers of
10 | individual packages as listed in the
11 | [release changelogs](https://github.com/carbon-design-system/carbon-react-native/releases).
12 |
13 | ## Reporting a Vulnerability
14 |
15 | _Please do not report security vulnerabilities through public GitHub issues._
16 |
17 | Instead, report a vulnerability through GitHub's security advisory feature at
18 | https://github.com/carbon-design-system/carbon-react-native/security/advisories/new
19 |
20 | Please include a description of the issue, the steps you took to create the
21 | issue, affected versions, and, if known, mitigations for the issue. Our team
22 | aims to respond to all new vulnerability reports within 7 business days.
23 |
24 | Additional information on reporting vulnerabilities to IBM is available at
25 | https://www.ibm.com/trust/security-psirt
26 |
27 | ## Preferred languages
28 |
29 | We prefer all communications to be in English.
30 |
31 | ## Comments on this policy
32 |
33 | If you have suggestions on how this process could be improved please
34 | [submit a pull request](https://github.com/carbon-design-system/carbon-react-native/compare)
35 | or [file an issue](https://github.com/carbon-design-system/carbon-react-native/issues/new) to
36 | discuss.
37 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['module:@react-native/babel-preset'],
3 | };
4 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import globals from "globals";
2 | import pluginJs from "@eslint/js";
3 | import tseslint from "typescript-eslint";
4 | import pluginReact from "eslint-plugin-react";
5 |
6 | /** @type {import('eslint').Linter.Config[]} */
7 | export default [
8 | {files: ['**/*.{ts,jsx,tsx}']},
9 | {ignores: ['lib', 'node_modules', '**/*.{js,mjs}']},
10 | {languageOptions: { globals: globals.browser }},
11 | pluginJs.configs.recommended,
12 | ...tseslint.configs.recommended,
13 | pluginReact.configs.flat.recommended,
14 | {rules: {
15 | '@typescript-eslint/no-require-imports': 'off',
16 | 'semi': 'error',
17 | "quotes": ["error", "single", {"avoidEscape": true}],
18 | "quote-props": ["error", "as-needed"],
19 | "object-curly-spacing": ["error", "always"],
20 | "array-bracket-spacing": ["error", "never"],
21 | "computed-property-spacing": ["error", "never"],
22 | "no-console": ["error", {"allow": ["warn", "error"]}],
23 | "comma-dangle": ["error", "always-multiline"],
24 | }},
25 | ];
26 |
--------------------------------------------------------------------------------
/example/.bundle/config:
--------------------------------------------------------------------------------
1 | BUNDLE_PATH: "vendor/bundle"
2 | BUNDLE_FORCE_RUBY_PLATFORM: 1
3 |
--------------------------------------------------------------------------------
/example/.ruby-version:
--------------------------------------------------------------------------------
1 | 2.7.5
2 |
--------------------------------------------------------------------------------
/example/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4 | ruby '2.7.5'
5 |
6 | # Exclude problematic versions of cocoapods and activesupport that causes build failures.
7 | gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
8 | gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
9 | gem 'xcodeproj', '< 1.26.0'
10 | gem 'concurrent-ruby', '< 1.3.4'
11 |
12 | # Ruby 3.4.0 has removed some libraries from the standard library.
13 | gem 'bigdecimal'
14 | gem 'logger'
15 | gem 'benchmark'
16 | gem 'mutex_m'
17 |
--------------------------------------------------------------------------------
/example/Gemfile.lock:
--------------------------------------------------------------------------------
1 | GEM
2 | remote: https://rubygems.org/
3 | specs:
4 | CFPropertyList (3.0.6)
5 | rexml
6 | activesupport (6.1.7.6)
7 | concurrent-ruby (~> 1.0, >= 1.0.2)
8 | i18n (>= 1.6, < 2)
9 | minitest (>= 5.1)
10 | tzinfo (~> 2.0)
11 | zeitwerk (~> 2.3)
12 | addressable (2.8.5)
13 | public_suffix (>= 2.0.2, < 6.0)
14 | algoliasearch (1.27.5)
15 | httpclient (~> 2.8, >= 2.8.3)
16 | json (>= 1.5.1)
17 | atomos (0.1.3)
18 | benchmark (0.1.0)
19 | bigdecimal (2.0.0)
20 | claide (1.1.0)
21 | cocoapods (1.14.3)
22 | addressable (~> 2.8)
23 | claide (>= 1.0.2, < 2.0)
24 | cocoapods-core (= 1.14.3)
25 | cocoapods-deintegrate (>= 1.0.3, < 2.0)
26 | cocoapods-downloader (>= 2.1, < 3.0)
27 | cocoapods-plugins (>= 1.0.0, < 2.0)
28 | cocoapods-search (>= 1.0.0, < 2.0)
29 | cocoapods-trunk (>= 1.6.0, < 2.0)
30 | cocoapods-try (>= 1.1.0, < 2.0)
31 | colored2 (~> 3.1)
32 | escape (~> 0.0.4)
33 | fourflusher (>= 2.3.0, < 3.0)
34 | gh_inspector (~> 1.0)
35 | molinillo (~> 0.8.0)
36 | nap (~> 1.0)
37 | ruby-macho (>= 2.3.0, < 3.0)
38 | xcodeproj (>= 1.23.0, < 2.0)
39 | cocoapods-core (1.14.3)
40 | activesupport (>= 5.0, < 8)
41 | addressable (~> 2.8)
42 | algoliasearch (~> 1.0)
43 | concurrent-ruby (~> 1.1)
44 | fuzzy_match (~> 2.0.4)
45 | nap (~> 1.0)
46 | netrc (~> 0.11)
47 | public_suffix (~> 4.0)
48 | typhoeus (~> 1.0)
49 | cocoapods-deintegrate (1.0.5)
50 | cocoapods-downloader (2.1)
51 | cocoapods-plugins (1.0.0)
52 | nap
53 | cocoapods-search (1.0.1)
54 | cocoapods-trunk (1.6.0)
55 | nap (>= 0.8, < 2.0)
56 | netrc (~> 0.11)
57 | cocoapods-try (1.2.0)
58 | colored2 (3.1.2)
59 | concurrent-ruby (1.2.2)
60 | escape (0.0.4)
61 | ethon (0.16.0)
62 | ffi (>= 1.15.0)
63 | ffi (1.16.3)
64 | fourflusher (2.3.1)
65 | fuzzy_match (2.0.4)
66 | gh_inspector (1.1.3)
67 | httpclient (2.8.3)
68 | i18n (1.14.1)
69 | concurrent-ruby (~> 1.0)
70 | json (2.6.3)
71 | logger (1.4.2)
72 | minitest (5.19.0)
73 | molinillo (0.8.0)
74 | mutex_m (0.1.0)
75 | nanaimo (0.3.0)
76 | nap (1.1.0)
77 | netrc (0.11.0)
78 | public_suffix (4.0.7)
79 | rexml (3.2.6)
80 | ruby-macho (2.5.1)
81 | typhoeus (1.4.1)
82 | ethon (>= 0.9.0)
83 | tzinfo (2.0.6)
84 | concurrent-ruby (~> 1.0)
85 | xcodeproj (1.23.0)
86 | CFPropertyList (>= 2.3.3, < 4.0)
87 | atomos (~> 0.1.3)
88 | claide (>= 1.0.2, < 2.0)
89 | colored2 (~> 3.1)
90 | nanaimo (~> 0.3.0)
91 | rexml (~> 3.2.4)
92 | zeitwerk (2.6.11)
93 |
94 | PLATFORMS
95 | ruby
96 |
97 | DEPENDENCIES
98 | activesupport (>= 6.1.7.5, != 7.1.0)
99 | benchmark
100 | bigdecimal
101 | cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
102 | concurrent-ruby (< 1.3.4)
103 | logger
104 | mutex_m
105 | xcodeproj (< 1.26.0)
106 |
107 | RUBY VERSION
108 | ruby 2.7.5p203
109 |
110 | BUNDLED WITH
111 | 2.1.4
112 |
--------------------------------------------------------------------------------
/example/android/app/debug.keystore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/debug.keystore
--------------------------------------------------------------------------------
/example/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
12 | -keep class com.facebook.hermes.unicode.** { *; }
13 | -keep class com.facebook.jni.** { *; }
14 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
9 |
10 |
--------------------------------------------------------------------------------
/example/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexMono-Regular.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-Bold.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-ExtraLight.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-Light.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-Medium.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-Regular.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-SemiBold.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/assets/fonts/IBMPlexSans-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/assets/fonts/IBMPlexSans-Thin.ttf
--------------------------------------------------------------------------------
/example/android/app/src/main/googleplay-web.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/googleplay-web.png
--------------------------------------------------------------------------------
/example/android/app/src/main/ic_launcher-playstore.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/ic_launcher-playstore.png
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/ibm/design/carbon/mobile/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.ibm.design.carbon.mobile;
2 |
3 | import com.facebook.react.ReactActivity
4 | import com.facebook.react.ReactActivityDelegate
5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
6 | import com.facebook.react.defaults.DefaultReactActivityDelegate
7 |
8 | class MainActivity : ReactActivity() {
9 |
10 | /**
11 | * Returns the name of the main component registered from JavaScript. This is used to schedule
12 | * rendering of the component.
13 | */
14 | override fun getMainComponentName(): String = "CarbonReactNativeExample";
15 |
16 | /**
17 | * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
18 | * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
19 | */
20 | override fun createReactActivityDelegate(): ReactActivityDelegate = DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
21 | }
22 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/ibm/design/carbon/mobile/MainApplication.kt:
--------------------------------------------------------------------------------
1 | package com.ibm.design.carbon.mobile;
2 |
3 | import android.app.Application
4 | import com.facebook.react.PackageList
5 | import com.facebook.react.ReactApplication
6 | import com.facebook.react.ReactHost
7 | import com.facebook.react.ReactNativeHost
8 | import com.facebook.react.ReactPackage
9 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
10 | import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
11 | import com.facebook.react.defaults.DefaultReactNativeHost
12 | import com.facebook.react.soloader.OpenSourceMergedSoMapping
13 | import com.facebook.soloader.SoLoader
14 |
15 | class MainApplication : Application(), ReactApplication {
16 |
17 | override val reactNativeHost: ReactNativeHost =
18 | object : DefaultReactNativeHost(this) {
19 | override fun getPackages(): List =
20 | PackageList(this).packages.apply {
21 | // Packages that cannot be autolinked yet can be added manually here, for example:
22 | // add(MyReactNativePackage())
23 | }
24 |
25 | override fun getJSMainModuleName(): String = "index"
26 |
27 | override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
28 |
29 | override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
30 | override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
31 | }
32 |
33 | override val reactHost: ReactHost
34 | get() = getDefaultReactHost(applicationContext, reactNativeHost)
35 |
36 | override fun onCreate() {
37 | super.onCreate()
38 | SoLoader.init(this, OpenSourceMergedSoMapping)
39 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
40 | // If you opted-in for the New Architecture, we load the native entry point for this app.
41 | load()
42 | }
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/drawable/rn_edit_text_material.xml:
--------------------------------------------------------------------------------
1 |
2 |
16 |
22 |
23 |
24 |
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_background.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_background.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | CarbonReactNative Example
3 |
4 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/example/android/build.gradle:
--------------------------------------------------------------------------------
1 | buildscript {
2 | ext {
3 | buildToolsVersion = "35.0.0"
4 | minSdkVersion = 24
5 | compileSdkVersion = 35
6 | targetSdkVersion = 35
7 | ndkVersion = "27.1.12297006"
8 | kotlinVersion = "2.0.21"
9 | }
10 | repositories {
11 | google()
12 | mavenCentral()
13 | }
14 | dependencies {
15 | classpath("com.android.tools.build:gradle")
16 | classpath("com.facebook.react:react-native-gradle-plugin")
17 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
18 | }
19 | }
20 |
21 | apply plugin: "com.facebook.react.rootproject"
22 |
--------------------------------------------------------------------------------
/example/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | # AndroidX package structure to make it clearer which packages are bundled with the
21 | # Android operating system, and which are packaged with your app's APK
22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
23 | android.useAndroidX=true
24 |
25 | # Use this property to specify which architecture you want to build.
26 | # You can also override it from the CLI using
27 | # ./gradlew -PreactNativeArchitectures=x86_64
28 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
29 |
30 | # Use this property to enable support to the new architecture.
31 | # This will allow you to use TurboModules and the Fabric render in
32 | # your application. You should enable this flag either if you want
33 | # to write custom TurboModules/Fabric components OR use libraries that
34 | # are providing them.
35 | newArchEnabled=true
36 |
37 | # Use this property to enable or disable the Hermes JS engine.
38 | # If set to false, you will be using JSC instead.
39 | hermesEnabled=true
40 |
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Thu May 02 14:24:51 PDT 2024
2 | distributionBase=GRADLE_USER_HOME
3 | distributionPath=wrapper/dists
4 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
5 | networkTimeout=10000
6 | validateDistributionUrl=true
7 | zipStoreBase=GRADLE_USER_HOME
8 | zipStorePath=wrapper/dists
9 |
--------------------------------------------------------------------------------
/example/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 | @rem SPDX-License-Identifier: Apache-2.0
17 | @rem
18 |
19 | @if "%DEBUG%"=="" @echo off
20 | @rem ##########################################################################
21 | @rem
22 | @rem Gradle startup script for Windows
23 | @rem
24 | @rem ##########################################################################
25 |
26 | @rem Set local scope for the variables with windows NT shell
27 | if "%OS%"=="Windows_NT" setlocal
28 |
29 | set DIRNAME=%~dp0
30 | if "%DIRNAME%"=="" set DIRNAME=.
31 | @rem This is normally unused
32 | set APP_BASE_NAME=%~n0
33 | set APP_HOME=%DIRNAME%
34 |
35 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
36 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
37 |
38 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
39 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
40 |
41 | @rem Find java.exe
42 | if defined JAVA_HOME goto findJavaFromJavaHome
43 |
44 | set JAVA_EXE=java.exe
45 | %JAVA_EXE% -version >NUL 2>&1
46 | if %ERRORLEVEL% equ 0 goto execute
47 |
48 | echo. 1>&2
49 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
50 | echo. 1>&2
51 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2
52 | echo location of your Java installation. 1>&2
53 |
54 | goto fail
55 |
56 | :findJavaFromJavaHome
57 | set JAVA_HOME=%JAVA_HOME:"=%
58 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
59 |
60 | if exist "%JAVA_EXE%" goto execute
61 |
62 | echo. 1>&2
63 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
64 | echo. 1>&2
65 | echo Please set the JAVA_HOME variable in your environment to match the 1>&2
66 | echo location of your Java installation. 1>&2
67 |
68 | goto fail
69 |
70 | :execute
71 | @rem Setup the command line
72 |
73 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
74 |
75 |
76 | @rem Execute Gradle
77 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
78 |
79 | :end
80 | @rem End local scope for the variables with windows NT shell
81 | if %ERRORLEVEL% equ 0 goto mainEnd
82 |
83 | :fail
84 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
85 | rem the _cmd.exe /c_ return code!
86 | set EXIT_CODE=%ERRORLEVEL%
87 | if %EXIT_CODE% equ 0 set EXIT_CODE=1
88 | if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
89 | exit /b %EXIT_CODE%
90 |
91 | :mainEnd
92 | if "%OS%"=="Windows_NT" endlocal
93 |
94 | :omega
95 |
--------------------------------------------------------------------------------
/example/android/link-assets-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "migIndex": 1,
3 | "data": [
4 | {
5 | "path": "../src/assets/fonts/IBMPlexMono-Regular.ttf",
6 | "sha1": "047598848a4bdd7d0071e1fa52f7a02e3c3c186e"
7 | },
8 | {
9 | "path": "../src/assets/fonts/IBMPlexSans-Bold.ttf",
10 | "sha1": "ac554e892a1dd9e6d608b4858a86fea0aef10aec"
11 | },
12 | {
13 | "path": "../src/assets/fonts/IBMPlexSans-ExtraLight.ttf",
14 | "sha1": "0f2f7d79b051462c42ccd415fad82b06c1f6fc9a"
15 | },
16 | {
17 | "path": "../src/assets/fonts/IBMPlexSans-Light.ttf",
18 | "sha1": "012ed6763082fa21f566af32ce97f638321c1384"
19 | },
20 | {
21 | "path": "../src/assets/fonts/IBMPlexSans-Medium.ttf",
22 | "sha1": "de9962fe775cc845b1a67c04216249f0801b2e5f"
23 | },
24 | {
25 | "path": "../src/assets/fonts/IBMPlexSans-Regular.ttf",
26 | "sha1": "b8a09e192ea398424f73d3df900447bc6cb5e23b"
27 | },
28 | {
29 | "path": "../src/assets/fonts/IBMPlexSans-SemiBold.ttf",
30 | "sha1": "edc22f78a540bb9c1174b2c7a00d0cccfb2fca38"
31 | },
32 | {
33 | "path": "../src/assets/fonts/IBMPlexSans-Thin.ttf",
34 | "sha1": "2f4e001fce166529b72b959f7a7be9214f36f281"
35 | }
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/example/android/settings.gradle:
--------------------------------------------------------------------------------
1 | pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
2 | plugins { id("com.facebook.react.settings") }
3 | extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
4 | rootProject.name = 'CarbonReactNativeExample'
5 | include ':app'
6 | includeBuild('../node_modules/@react-native/gradle-plugin')
7 |
--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const pak = require('../package.json');
3 |
4 | module.exports = {
5 | presets: ['module:@react-native/babel-preset'],
6 | plugins: [
7 | [
8 | 'module-resolver',
9 | {
10 | root: ["../"],
11 | alias: {
12 | [pak.name]: path.join(__dirname, '..', pak.source),
13 | },
14 | },
15 | ],
16 | ],
17 | };
18 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import { AppRegistry } from 'react-native';
2 | import App from './src/App';
3 |
4 | AppRegistry.registerComponent('CarbonReactNativeExample', () => App);
5 |
--------------------------------------------------------------------------------
/example/ios/.xcode.env:
--------------------------------------------------------------------------------
1 | export NODE_BINARY=$(command -v node)
2 |
--------------------------------------------------------------------------------
/example/ios/.xcode.env.local:
--------------------------------------------------------------------------------
1 | export NODE_BINARY=/usr/local/bin/node
2 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample-Bridging-Header.h:
--------------------------------------------------------------------------------
1 | //
2 | // Use this file to import your target's public headers that you would like to expose to Swift.
3 | //
4 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample.xcodeproj/xcshareddata/xcschemes/CarbonReactNativeExample.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
31 |
32 |
42 |
44 |
50 |
51 |
52 |
53 |
59 |
61 |
67 |
68 |
69 |
70 |
72 |
73 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample.xcworkspace/contents.xcworkspacedata:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | IDEDidComputeMac32BitWarning
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/AppDelegate.swift:
--------------------------------------------------------------------------------
1 | import UIKit
2 | import React
3 | import React_RCTAppDelegate
4 | import ReactAppDependencyProvider
5 |
6 | @main
7 | class AppDelegate: UIResponder, UIApplicationDelegate {
8 | var window: UIWindow?
9 |
10 | var reactNativeDelegate: ReactNativeDelegate?
11 | var reactNativeFactory: RCTReactNativeFactory?
12 |
13 | func application(
14 | _ application: UIApplication,
15 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
16 | ) -> Bool {
17 | let delegate = ReactNativeDelegate()
18 | let factory = RCTReactNativeFactory(delegate: delegate)
19 | delegate.dependencyProvider = RCTAppDependencyProvider()
20 |
21 | reactNativeDelegate = delegate
22 | reactNativeFactory = factory
23 |
24 | window = UIWindow(frame: UIScreen.main.bounds)
25 |
26 | factory.startReactNative(
27 | withModuleName: "CarbonReactNativeExample",
28 | in: window,
29 | launchOptions: launchOptions
30 | )
31 |
32 | return true
33 | }
34 | }
35 |
36 | class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
37 | override func sourceURL(for bridge: RCTBridge) -> URL? {
38 | self.bundleURL()
39 | }
40 |
41 | override func bundleURL() -> URL? {
42 | #if DEBUG
43 | RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
44 | #else
45 | Bundle.main.url(forResource: "main", withExtension: "jsbundle")
46 | #endif
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_1024x1024@1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_1024x1024@1x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_20x20@2x-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_20x20@2x-1.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_20x20@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_20x20@2x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_20x20@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_20x20@3x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_29x29@2x-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_29x29@2x-1.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_29x29@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_29x29@2x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_29x29@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_29x29@3x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_40x40@2x-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_40x40@2x-1.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_40x40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_40x40@2x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_40x40@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_40x40@3x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_60x60@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_60x60@2x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_60x60@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_60x60@3x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_76x76@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_76x76@2x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_83.5x83.5@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/AppIcon_83.5x83.5@2x.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "AppIcon_20x20@2x.png",
5 | "idiom" : "iphone",
6 | "scale" : "2x",
7 | "size" : "20x20"
8 | },
9 | {
10 | "filename" : "AppIcon_20x20@3x.png",
11 | "idiom" : "iphone",
12 | "scale" : "3x",
13 | "size" : "20x20"
14 | },
15 | {
16 | "filename" : "AppIcon_29x29@2x.png",
17 | "idiom" : "iphone",
18 | "scale" : "2x",
19 | "size" : "29x29"
20 | },
21 | {
22 | "filename" : "AppIcon_29x29@3x.png",
23 | "idiom" : "iphone",
24 | "scale" : "3x",
25 | "size" : "29x29"
26 | },
27 | {
28 | "filename" : "AppIcon_40x40@2x.png",
29 | "idiom" : "iphone",
30 | "scale" : "2x",
31 | "size" : "40x40"
32 | },
33 | {
34 | "filename" : "AppIcon_40x40@3x.png",
35 | "idiom" : "iphone",
36 | "scale" : "3x",
37 | "size" : "40x40"
38 | },
39 | {
40 | "filename" : "AppIcon_60x60@2x.png",
41 | "idiom" : "iphone",
42 | "scale" : "2x",
43 | "size" : "60x60"
44 | },
45 | {
46 | "filename" : "AppIcon_60x60@3x.png",
47 | "idiom" : "iphone",
48 | "scale" : "3x",
49 | "size" : "60x60"
50 | },
51 | {
52 | "idiom" : "ipad",
53 | "scale" : "1x",
54 | "size" : "20x20"
55 | },
56 | {
57 | "filename" : "AppIcon_20x20@2x-1.png",
58 | "idiom" : "ipad",
59 | "scale" : "2x",
60 | "size" : "20x20"
61 | },
62 | {
63 | "idiom" : "ipad",
64 | "scale" : "1x",
65 | "size" : "29x29"
66 | },
67 | {
68 | "filename" : "AppIcon_29x29@2x-1.png",
69 | "idiom" : "ipad",
70 | "scale" : "2x",
71 | "size" : "29x29"
72 | },
73 | {
74 | "idiom" : "ipad",
75 | "scale" : "1x",
76 | "size" : "40x40"
77 | },
78 | {
79 | "filename" : "AppIcon_40x40@2x-1.png",
80 | "idiom" : "ipad",
81 | "scale" : "2x",
82 | "size" : "40x40"
83 | },
84 | {
85 | "idiom" : "ipad",
86 | "scale" : "1x",
87 | "size" : "76x76"
88 | },
89 | {
90 | "filename" : "AppIcon_76x76@2x.png",
91 | "idiom" : "ipad",
92 | "scale" : "2x",
93 | "size" : "76x76"
94 | },
95 | {
96 | "filename" : "AppIcon_83.5x83.5@2x.png",
97 | "idiom" : "ipad",
98 | "scale" : "2x",
99 | "size" : "83.5x83.5"
100 | },
101 | {
102 | "filename" : "AppIcon_1024x1024@1x.png",
103 | "idiom" : "ios-marketing",
104 | "scale" : "1x",
105 | "size" : "1024x1024"
106 | }
107 | ],
108 | "info" : {
109 | "author" : "xcode",
110 | "version" : 1
111 | }
112 | }
113 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "author" : "xcode",
4 | "version" : 1
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/iTunesArtwork.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "iTunesArtwork.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "idiom" : "universal",
10 | "scale" : "2x"
11 | },
12 | {
13 | "idiom" : "universal",
14 | "scale" : "3x"
15 | }
16 | ],
17 | "info" : {
18 | "author" : "xcode",
19 | "version" : 1
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/iTunesArtwork.imageset/iTunesArtwork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/iTunesArtwork.imageset/iTunesArtwork.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/splash_background.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "filename" : "background.png",
5 | "idiom" : "universal",
6 | "scale" : "1x"
7 | },
8 | {
9 | "idiom" : "universal",
10 | "scale" : "2x"
11 | },
12 | {
13 | "idiom" : "universal",
14 | "scale" : "3x"
15 | }
16 | ],
17 | "info" : {
18 | "author" : "xcode",
19 | "version" : 1
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Images.xcassets/splash_background.imageset/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/ios/CarbonReactNativeExample/Images.xcassets/splash_background.imageset/background.png
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | IBM Carbon
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | $(PRODUCT_BUNDLE_IDENTIFIER)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | $(MARKETING_VERSION)
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | 31
25 | ITSAppUsesNonExemptEncryption
26 |
27 | LSRequiresIPhoneOS
28 |
29 | NSAppTransportSecurity
30 |
31 | NSAllowsArbitraryLoads
32 |
33 | NSAllowsLocalNetworking
34 |
35 |
36 | NSLocationWhenInUseUsageDescription
37 |
38 | UIAppFonts
39 |
40 | IBMPlexMono-Regular.ttf
41 | IBMPlexSans-Bold.ttf
42 | IBMPlexSans-ExtraLight.ttf
43 | IBMPlexSans-Light.ttf
44 | IBMPlexSans-Medium.ttf
45 | IBMPlexSans-Regular.ttf
46 | IBMPlexSans-SemiBold.ttf
47 | IBMPlexSans-Thin.ttf
48 |
49 | UILaunchStoryboardName
50 | LaunchScreen
51 | UIRequiredDeviceCapabilities
52 |
53 | arm64
54 |
55 | UISupportedInterfaceOrientations
56 |
57 | UIInterfaceOrientationPortrait
58 | UIInterfaceOrientationLandscapeLeft
59 | UIInterfaceOrientationLandscapeRight
60 | UIInterfaceOrientationPortraitUpsideDown
61 |
62 | UIViewControllerBasedStatusBarAppearance
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/example/ios/CarbonReactNativeExample/PrivacyInfo.xcprivacy:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | NSPrivacyAccessedAPITypes
6 |
7 |
8 | NSPrivacyAccessedAPIType
9 | NSPrivacyAccessedAPICategoryFileTimestamp
10 | NSPrivacyAccessedAPITypeReasons
11 |
12 | C617.1
13 |
14 |
15 |
16 | NSPrivacyAccessedAPIType
17 | NSPrivacyAccessedAPICategoryUserDefaults
18 | NSPrivacyAccessedAPITypeReasons
19 |
20 | CA92.1
21 |
22 |
23 |
24 | NSPrivacyAccessedAPIType
25 | NSPrivacyAccessedAPICategorySystemBootTime
26 | NSPrivacyAccessedAPITypeReasons
27 |
28 | 35F9.1
29 |
30 |
31 |
32 | NSPrivacyCollectedDataTypes
33 |
34 | NSPrivacyTracking
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/example/ios/Podfile:
--------------------------------------------------------------------------------
1 | # Resolve react_native_pods.rb with node to allow for hoisting
2 | require Pod::Executable.execute_command('node', ['-p',
3 | 'require.resolve(
4 | "react-native/scripts/react_native_pods.rb",
5 | {paths: [process.argv[1]]},
6 | )', __dir__]).strip
7 |
8 | platform :ios, min_ios_version_supported
9 | prepare_react_native_project!
10 |
11 | linkage = ENV['USE_FRAMEWORKS']
12 | if linkage != nil
13 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
14 | use_frameworks! :linkage => linkage.to_sym
15 | end
16 |
17 | target 'CarbonReactNativeExample' do
18 | config = use_native_modules!
19 |
20 | use_react_native!(
21 | :path => config[:reactNativePath],
22 | # An absolute path to your application root.
23 | :app_path => "#{Pod::Config.instance.installation_root}/.."
24 | )
25 |
26 | post_install do |installer|
27 | # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
28 | react_native_post_install(
29 | installer,
30 | config[:reactNativePath],
31 | :mac_catalyst_enabled => false,
32 | # :ccache_enabled => true
33 | )
34 |
35 | installer.pods_project.targets.each do |target|
36 | target.build_configurations.each do |config|
37 | config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
38 | end
39 | end
40 | end
41 | end
42 |
--------------------------------------------------------------------------------
/example/ios/link-assets-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "migIndex": 1,
3 | "data": [
4 | {
5 | "path": "../src/assets/fonts/IBMPlexMono-Regular.ttf",
6 | "sha1": "047598848a4bdd7d0071e1fa52f7a02e3c3c186e"
7 | },
8 | {
9 | "path": "../src/assets/fonts/IBMPlexSans-Bold.ttf",
10 | "sha1": "ac554e892a1dd9e6d608b4858a86fea0aef10aec"
11 | },
12 | {
13 | "path": "../src/assets/fonts/IBMPlexSans-ExtraLight.ttf",
14 | "sha1": "0f2f7d79b051462c42ccd415fad82b06c1f6fc9a"
15 | },
16 | {
17 | "path": "../src/assets/fonts/IBMPlexSans-Light.ttf",
18 | "sha1": "012ed6763082fa21f566af32ce97f638321c1384"
19 | },
20 | {
21 | "path": "../src/assets/fonts/IBMPlexSans-Medium.ttf",
22 | "sha1": "de9962fe775cc845b1a67c04216249f0801b2e5f"
23 | },
24 | {
25 | "path": "../src/assets/fonts/IBMPlexSans-Regular.ttf",
26 | "sha1": "b8a09e192ea398424f73d3df900447bc6cb5e23b"
27 | },
28 | {
29 | "path": "../src/assets/fonts/IBMPlexSans-SemiBold.ttf",
30 | "sha1": "edc22f78a540bb9c1174b2c7a00d0cccfb2fca38"
31 | },
32 | {
33 | "path": "../src/assets/fonts/IBMPlexSans-Thin.ttf",
34 | "sha1": "2f4e001fce166529b72b959f7a7be9214f36f281"
35 | }
36 | ]
37 | }
38 |
--------------------------------------------------------------------------------
/example/metro.config.js:
--------------------------------------------------------------------------------
1 | const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
2 | const path = require("path");
3 |
4 | /**
5 | * Metro configuration
6 | * https://facebook.github.io/metro/docs/configuration
7 | *
8 | * @type {import('metro-config').MetroConfig}
9 | */
10 | const extraNodeModules = {
11 | shared: path.resolve(__dirname + "/../src"),
12 | };
13 |
14 | const watchFolders = [path.resolve(__dirname + "/../src")];
15 |
16 | const nodeModulesPaths = [path.resolve(path.join(__dirname, "./node_modules"))];
17 |
18 | const config = {
19 | resolver: {
20 | extraNodeModules,
21 | nodeModulesPaths,
22 | },
23 | watchFolders,
24 | };
25 |
26 | module.exports = mergeConfig(getDefaultConfig(__dirname), config);
27 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "carbon-react-native-example",
3 | "description": "Example app for carbon-react-native",
4 | "version": "1.0.0",
5 | "private": true,
6 | "scripts": {
7 | "android": "react-native run-android",
8 | "ios": "react-native run-ios",
9 | "start": "react-native start --reset-cache",
10 | "pods": "pod-install --quiet"
11 | },
12 | "license": "Apache-2.0",
13 | "dependencies": {
14 | "@carbon/icon-helpers": "^10.55.0",
15 | "@carbon/icons": "^11.56.0",
16 | "@carbon/themes": "^11.47.0",
17 | "@react-native-async-storage/async-storage": "^2.1.2",
18 | "react": "19.0.0",
19 | "react-native": "0.79.2",
20 | "react-native-safe-area-context": "^5.3.0",
21 | "react-native-svg": "^15.11.2",
22 | "react-native-webview": "^13.13.2"
23 | },
24 | "devDependencies": {
25 | "@babel/core": "^7.25.2",
26 | "@babel/preset-env": "^7.25.3",
27 | "@babel/runtime": "^7.26.10",
28 | "@react-native-community/cli": "18.0.0",
29 | "@react-native-community/cli-platform-android": "18.0.0",
30 | "@react-native-community/cli-platform-ios": "18.0.0",
31 | "@react-native/babel-preset": "0.79.2",
32 | "@react-native/metro-config": "0.79.2",
33 | "@react-native/typescript-config": "0.79.2",
34 | "@tsconfig/react-native": "^3.0.5",
35 | "babel-plugin-module-resolver": "^5.0.2"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/example/react-native.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | project: {
3 | ios: {},
4 | android: {},
5 | },
6 | assets: ['../src/assets/fonts/'],
7 | };
8 |
--------------------------------------------------------------------------------
/example/src/Views/AcceptsTerms.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, Alert } from 'react-native';
3 | import { AcceptTerms, Button, Checkbox } from '@carbon/react-native';
4 | import { testDocument } from '../constants/testDocument';
5 |
6 | const styles = StyleSheet.create({
7 | view: {
8 | padding: 16,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {
16 | marginTop: 16,
17 | },
18 | });
19 |
20 | export default class TestAcceptTerms extends React.Component {
21 | state = {
22 | open: false,
23 | forceIos: false,
24 | forceAndroid: false,
25 | loadSite: false,
26 | };
27 |
28 | private textStrings = {
29 | agree: 'Agree',
30 | disagree: 'Disagree',
31 | modalTitle: 'Are you sure?',
32 | modalBody: 'The use of this app requires agreement to the terms and conditions.',
33 | modalSecondaryAction: 'Disagree',
34 | modalPrimaryAction: 'Continue',
35 | };
36 |
37 | private open = (): void => {
38 | this.setState({ open: true });
39 | };
40 |
41 | private resultCallback = (result: boolean): void => {
42 | this.setState({ open: false });
43 | Alert.alert(result ? 'You accepted the terms' : 'You did not accept the terms', result ? 'Your app show save they have accepted and never show again unless terms change.' : 'Your app should exit or return to landing.');
44 | };
45 |
46 | render(): React.ReactNode {
47 | const { open, forceIos, forceAndroid, loadSite } = this.state;
48 | let forceType = undefined as 'android' | 'ios' | undefined;
49 |
50 | if (forceAndroid) {
51 | forceType = 'android';
52 | } else if (forceIos) {
53 | forceType = 'ios';
54 | }
55 |
56 | return (
57 |
58 | this.setState({ forceIos: value })} label="Force iOS mode" />
59 | this.setState({ forceAndroid: value })} label="Force Android mode" />
60 | this.setState({ loadSite: value })} label="Load website" />
61 |
62 | {open && }
63 |
64 | );
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/example/src/Views/Accordion.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView } from 'react-native';
3 | import { Accordion, Button, Text } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 0,
8 | paddingTop: 32,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | testNotFull: {
16 | marginBottom: 16,
17 | alignSelf: 'flex-start',
18 | },
19 | itemStyle: {
20 | marginTop: 8,
21 | },
22 | });
23 |
24 | export default class TestAccordion extends React.Component {
25 | state = {
26 | openControl: false,
27 | };
28 |
29 | render(): React.ReactNode {
30 | const { openControl } = this.state;
31 |
32 | return (
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
44 |
45 |
46 |
47 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/example/src/Views/BottomToolbarPrimaryAction.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View, Alert } from 'react-native';
3 | import { ToolbarButton, Checkbox, BottomToolbarPrimaryAction, RadioButton, getColor, BottomToolbarPrimaryActionPosition } from '@carbon/react-native';
4 | import DashboardIcon from '@carbon/icons/es/dashboard/20';
5 | import MapIcon from '@carbon/icons/es/map/20';
6 | import AddIcon from '@carbon/icons/es/add/24';
7 |
8 | const styles = StyleSheet.create({
9 | parentView: {
10 | flex: 1,
11 | },
12 | view: {
13 | padding: 16,
14 | flex: 1,
15 | },
16 | container: {
17 | flexGrow: 1,
18 | paddingBottom: 64,
19 | },
20 | appBreaker: {
21 | backgroundColor: getColor('tagBackgroundMagenta'),
22 | height: 20,
23 | },
24 | });
25 |
26 | export default class TestBottomToolbarPrimaryAction extends React.Component {
27 | state = {
28 | disabled: false,
29 | disabledAction: false,
30 | type: 'center' as BottomToolbarPrimaryActionPosition,
31 | noItems: false,
32 | };
33 |
34 | private get items(): ToolbarButton[] {
35 | const { disabled } = this.state;
36 |
37 | return [
38 | {
39 | text: 'Dashboard',
40 | icon: DashboardIcon,
41 | alignItem: 'left',
42 | onPress: () => {
43 | Alert.alert('Pressed dashboard');
44 | },
45 | },
46 | {
47 | text: 'Map',
48 | icon: MapIcon,
49 | disabled: disabled,
50 | onPress: () => {
51 | Alert.alert('Pressed map');
52 | },
53 | },
54 | ];
55 | }
56 |
57 | render(): React.ReactNode {
58 | const { disabled, type, noItems, disabledAction } = this.state;
59 |
60 | const textTypes: {[key: string]: string} = {
61 | center: 'Center button',
62 | left: 'Left button',
63 | right: 'Right button',
64 | };
65 |
66 | let itemsToUseLeft = this.items;
67 | let itemsToUseRight = this.items;
68 |
69 | if (type === 'left') {
70 | itemsToUseRight = [...itemsToUseRight, ...itemsToUseLeft];
71 | } else if (type === 'right') {
72 | itemsToUseLeft = [...itemsToUseRight, ...itemsToUseLeft];
73 | }
74 |
75 | if (noItems) {
76 | itemsToUseLeft = [];
77 | itemsToUseRight = [];
78 | }
79 |
80 | return (
81 |
82 |
83 | {Object.keys(textTypes).map((item) => (
84 | this.setState({ type: item })} />
85 | ))}
86 | this.setState({ disabled: value })} label="Disable second item" />
87 | this.setState({ disabledAction: value })} label="Disable primary action" />
88 | this.setState({ noItems: value })} label="No items only primary action" />
89 |
90 | Alert.alert('Pressed primary button')} />
91 |
92 |
93 | );
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/example/src/Views/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Checkbox } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | itemStyle: {
15 | paddingRight: 16,
16 | },
17 | });
18 |
19 | export default class TestCheckbox extends React.Component {
20 | state = {
21 | value1: false,
22 | value2: true,
23 | value3: false,
24 | value4: false,
25 | };
26 |
27 | private changeText = (field: string, value: boolean): void => {
28 | this.setState({ [field]: value });
29 | };
30 |
31 | render(): React.ReactNode {
32 | const { value1, value2, value3, value4 } = this.state;
33 |
34 | return (
35 |
36 |
37 | this.changeText('value1', value)} />
38 |
39 |
40 | this.changeText('value2', value)} />
41 |
42 |
43 | this.changeText('value3', value)} />
44 |
45 |
46 | this.changeText('value4', value)} />
47 |
48 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/example/src/Views/DateInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { DateInput } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 8,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {},
16 | });
17 |
18 | export default class TestDateInput extends React.Component {
19 | state = {
20 | value1: '',
21 | value2: '01/02/1995',
22 | value3: '',
23 | value4: '',
24 | value5: '',
25 | value6: '12/25/1985',
26 | value7: '',
27 | };
28 |
29 | private changeText = (field: string, value: string): void => {
30 | this.setState({ [field]: value });
31 | };
32 |
33 | render(): React.ReactNode {
34 | const { value1, value2, value3, value4, value5, value6, value7 } = this.state;
35 |
36 | return (
37 |
38 |
39 | this.changeText('value1', value)} />
40 |
41 |
42 | this.changeText('value2', value)} />
43 |
44 |
45 | this.changeText('value3', value)} />
46 |
47 |
48 | this.changeText('value4', value)} />
49 |
50 |
51 | this.changeText('value5', value)} getErrorText={() => 'Item is required'} />
52 |
53 |
54 | value?.toLowerCase().indexOf('https') !== 0} value={value7} placeholder="I must start with https or will error" onChangeText={(value) => this.changeText('value7', value)} getErrorText={() => 'Must start with https'} />
55 |
56 |
57 | this.changeText('value6', value)} />
58 |
59 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/example/src/Views/DocumentViewer.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView } from 'react-native';
3 | import { Button, Checkbox, DocumentViewer } from '@carbon/react-native';
4 | import { testDocument } from '../constants/testDocument';
5 | import WebView from 'react-native-webview';
6 |
7 | const styles = StyleSheet.create({
8 | view: {
9 | padding: 16,
10 | flex: 1,
11 | },
12 | container: {
13 | flexGrow: 1,
14 | paddingBottom: 64,
15 | },
16 | itemStyle: {
17 | marginTop: 16,
18 | },
19 | customWebView: {
20 | width: '100%',
21 | height: '100%',
22 | },
23 | });
24 |
25 | export default class TestDocumentViewer extends React.Component {
26 | state = {
27 | open: false,
28 | forceIos: false,
29 | forceAndroid: false,
30 | loadSite: false,
31 | loadCustomWebView: false,
32 | };
33 |
34 | private open = (): void => {
35 | this.setState({ open: true });
36 | };
37 |
38 | render(): React.ReactNode {
39 | const { open, forceIos, forceAndroid, loadSite, loadCustomWebView } = this.state;
40 | let forceType = undefined as 'android' | 'ios' | undefined;
41 |
42 | if (forceAndroid) {
43 | forceType = 'android';
44 | } else if (forceIos) {
45 | forceType = 'ios';
46 | }
47 |
48 | let mainView = this.setState({ open: false })} dismissText="Done" forceView={forceType} />;
49 |
50 | if (loadCustomWebView) {
51 | mainView = } onDismiss={() => this.setState({ open: false })} dismissText="Done" forceView={forceType} />;
52 | }
53 |
54 | return (
55 |
56 | this.setState({ forceIos: value })} label="Force iOS mode" />
57 | this.setState({ forceAndroid: value })} label="Force Android mode" />
58 | this.setState({ loadSite: value })} label="Load website" />
59 | this.setState({ loadCustomWebView: value })} label="Load custom web view (disable scroll view)" />
60 |
61 | {open && mainView}
62 |
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/example/src/Views/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Dropdown, DropdownItem, getColor } from '@carbon/react-native';
4 | import CodeIcon from '@carbon/icons/es/code/20';
5 |
6 | const styles = StyleSheet.create({
7 | view: {
8 | padding: 16,
9 | paddingTop: 32,
10 | flex: 1,
11 | },
12 | container: {
13 | flexGrow: 1,
14 | paddingBottom: 64,
15 | },
16 | itemStyle: {
17 | marginBottom: 24,
18 | },
19 | });
20 |
21 | export default class TestDropdown extends React.Component {
22 | state = {
23 | value1: '',
24 | value2: 'Item 2',
25 | value3: 'Item 3',
26 | value4: 'Item 4',
27 | value5: 'Item 5',
28 | value6: 'Can not change me',
29 | };
30 |
31 | private changeText = (field: string, value: DropdownItem): void => {
32 | this.setState({ [field]: value.text });
33 | };
34 |
35 | private get items(): DropdownItem[] {
36 | return [
37 | {
38 | id: '1',
39 | text: 'Item 1',
40 | },
41 | {
42 | id: '2',
43 | text: 'Item 2',
44 | },
45 | {
46 | id: '3',
47 | text: 'Item 3',
48 | },
49 | {
50 | id: '4',
51 | text: 'Item 4',
52 | icon: CodeIcon,
53 | iconColor: getColor('supportError'),
54 | },
55 | {
56 | text: 'Item 5',
57 | },
58 | {
59 | id: '6',
60 | text: 'Item 6',
61 | disabled: true,
62 | },
63 | {
64 | id: '67',
65 | text: 'Super long item with text that will not fit most views but should wrap in the dropdown but on the main view should ellipsis.',
66 | },
67 | ];
68 | }
69 |
70 | render(): React.ReactNode {
71 | const { value1, value2, value3, value4, value5, value6 } = this.state;
72 |
73 | return (
74 |
75 |
76 | this.changeText('value1', value)} />
77 |
78 |
79 | this.changeText('value2', value)} />
80 |
81 |
82 | this.changeText('value3', value)} />
83 |
84 |
85 | this.changeText('value4', value)} />
86 |
87 |
88 | this.changeText('value5', value)} />
89 |
90 |
91 | this.changeText('value6', value)} />
92 |
93 |
94 | );
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/example/src/Views/ErrorState.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Checkbox, RadioButton, getColor, ErrorStateTypes, ErrorState, Text } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | radioWrapper: {
15 | flexDirection: 'row',
16 | flexWrap: 'wrap',
17 | },
18 | radioButton: {
19 | marginRight: 16,
20 | },
21 | appBreaker: {
22 | backgroundColor: getColor('tagBackgroundMagenta'),
23 | height: 20,
24 | },
25 | });
26 |
27 | export default class TestErrorState extends React.Component {
28 | state = {
29 | type: 'generic' as ErrorStateTypes,
30 | hasSubtitle: true,
31 | hasErrorCode: false,
32 | noImage: false,
33 | };
34 |
35 | render(): React.ReactNode {
36 | const { hasSubtitle, type, hasErrorCode, noImage } = this.state;
37 |
38 | return (
39 |
40 |
41 |
42 | this.setState({ type: 'generic' })} />
43 | this.setState({ type: 'access' })} />
44 | this.setState({ type: 'empty' })} />
45 |
46 | this.setState({ hasSubtitle: value })} label="Show sub title" />
47 | this.setState({ hasErrorCode: value })} label="Show error code" />
48 | this.setState({ noImage: value })} label="No image" />
49 |
50 |
51 | );
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/example/src/Views/FileUploaderItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { FileUploaderItem } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 32,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {
16 | marginBottom: 16,
17 | },
18 | });
19 |
20 | export default class TestFileUploaderItem extends React.Component {
21 | state = {
22 | deletedItem: false,
23 | deletedItem2: false,
24 | };
25 |
26 | render(): React.ReactNode {
27 | const { deletedItem, deletedItem2 } = this.state;
28 |
29 | return (
30 |
31 |
32 |
33 |
34 | {!deletedItem && (
35 |
36 | this.setState({ deletedItem: true })} />
37 |
38 | )}
39 |
40 |
41 |
42 | {!deletedItem2 && (
43 |
44 | this.setState({ deletedItem2: true })} />
45 |
46 | )}
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/example/src/Views/Icons.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { createIcon, getColor } from '@carbon/react-native';
4 | import AddIcon from '@carbon/icons/es/add/20';
5 | import CaretRightIcon from '@carbon/icons/es/caret--right/20';
6 | import ArrowLeftIcon from '@carbon/icons/es/arrow--left/20';
7 | import CodeIcon from '@carbon/icons/es/code/20';
8 | import FavoriteIcon from '@carbon/icons/es/favorite/20';
9 |
10 | const styles = StyleSheet.create({
11 | view: {
12 | padding: 16,
13 | paddingTop: 32,
14 | flex: 1,
15 | },
16 | container: {
17 | flexGrow: 1,
18 | flexWrap: 'wrap',
19 | flexDirection: 'row',
20 | paddingBottom: 64,
21 | },
22 | itemStyle: {
23 | marginRight: 16,
24 | },
25 | });
26 |
27 | export default class TestIcons extends React.Component {
28 | render(): React.ReactNode {
29 | return (
30 |
31 | {createIcon(AddIcon, 32, 32)}
32 | {createIcon(CaretRightIcon, 32, 32, getColor('interactive'))}
33 | {createIcon(ArrowLeftIcon, 20, 20, getColor('supportError'))}
34 | {createIcon(CodeIcon, 16, 16, getColor('supportSuccess'))}
35 | {createIcon(FavoriteIcon, 32, 32, getColor('supportWarning'))}
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/example/src/Views/LandingView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { DocumentViewer, LandingView } from '@carbon/react-native';
3 | import { testDocument } from '../constants/testDocument';
4 |
5 | export default class TestLandinView extends React.Component<{
6 | goHome: () => void;
7 | }> {
8 | state = {
9 | showPrivacy: false,
10 | };
11 |
12 | private onContinue = (): void => {
13 | const { goHome } = this.props;
14 | goHome();
15 | };
16 |
17 | private onPrivacyPolicy = (): void => {
18 | this.setState({ showPrivacy: true });
19 | };
20 |
21 | render(): React.ReactNode {
22 | const { showPrivacy } = this.state;
23 |
24 | return (
25 | <>
26 |
27 | {showPrivacy && (
28 | {
32 | this.setState({ showPrivacy: false });
33 | }}
34 | />
35 | )}
36 | >
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/example/src/Views/Link.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View, Alert } from 'react-native';
3 | import { Link } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | testNotFull: {
15 | marginBottom: 16,
16 | alignSelf: 'flex-start',
17 | },
18 | itemStyle: {
19 | marginBottom: 16,
20 | },
21 | });
22 |
23 | export default class TestLink extends React.Component {
24 | private alert = (text: string): void => {
25 | Alert.alert(text);
26 | };
27 |
28 | render(): React.ReactNode {
29 | return (
30 |
31 |
32 | this.alert('Pressed link')} onLongPress={() => this.alert('Long Pressed link')} text="Example link" />
33 |
34 |
35 | this.alert('Pressed link')} onLongPress={() => this.alert('Long Pressed link')} text="Example of disabled link" />
36 |
37 |
38 | this.alert('Pressed link. But had to click the text!')} onLongPress={() => this.alert('Long Pressed link')} text="Example link not full width" />
39 |
40 |
41 | this.alert('Pressed link')} onLongPress={() => this.alert('Long Pressed link')} text="Example link with really long text that should wrap and show how wrapping looks when really long text is used" />
42 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/example/src/Views/List.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Checkbox, List, Text } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | itemStyle: {
15 | marginBottom: 16,
16 | },
17 | });
18 |
19 | export default class TestList extends React.Component {
20 | state = {
21 | unordered: true,
22 | nested: false,
23 | longList: false,
24 | };
25 |
26 | private getLongList(neverNested?: boolean): (string | React.ReactNode)[] {
27 | const { nested, unordered, longList } = this.state;
28 |
29 | const getItem = (num: number): string | React.ReactNode => {
30 | if (nested && !neverNested && num === 1) {
31 | return (
32 | <>
33 |
34 |
35 | >
36 | );
37 | }
38 | return num % 4 === 0 ? `Item ${num} with longer text for testing and seeing how it looks` : `Item ${num}`;
39 | };
40 |
41 | const results: (string | React.ReactNode)[] = [];
42 | let counter = 1;
43 |
44 | while (counter < (longList ? 800 : 200)) {
45 | results.push(getItem(counter));
46 | counter++;
47 | }
48 |
49 | return results;
50 | }
51 |
52 | render(): React.ReactNode {
53 | const { unordered, nested, longList } = this.state;
54 |
55 | return (
56 |
57 | this.setState({ unordered: value })} label="Show unordered list" />
58 | this.setState({ nested: value })} label="Add nested list" />
59 | this.setState({ longList: value })} label="Super long list" />
60 |
61 |
62 |
63 |
64 | );
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/example/src/Views/Loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Loading } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 32,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | centerWrapping: {
16 | alignItems: 'center',
17 | marginBottom: 16,
18 | },
19 | itemStyle: {
20 | marginBottom: 16,
21 | },
22 | });
23 |
24 | export default class TestLoading extends React.Component {
25 | render(): React.ReactNode {
26 | return (
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | );
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/example/src/Views/Modal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Button, Checkbox, Text, TextInput, Modal } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | });
15 |
16 | export default class TestModal extends React.Component {
17 | state = {
18 | open: false,
19 | showDescription: true,
20 | hasPrimary: true,
21 | hasSecondary: true,
22 | hasInputContent: false,
23 | textValue: '',
24 | };
25 |
26 | private openModal = (): void => {
27 | this.setState({ open: true });
28 | };
29 |
30 | private primaryPress = (): void => {
31 | this.setState({ open: false });
32 | };
33 |
34 | private secondaryPress = (): void => {
35 | this.setState({ open: false });
36 | };
37 |
38 | private get modalChild(): React.ReactNode {
39 | const { hasPrimary, hasSecondary, hasInputContent, textValue } = this.state;
40 |
41 | if (!hasPrimary && !hasSecondary) {
42 | return (
43 |
44 |
45 |
53 | );
54 | } else if (hasInputContent) {
55 | return (
56 |
57 | this.setState({ textValue: value })} />
58 |
59 | );
60 | } else {
61 | return (
62 |
63 |
64 |
65 | );
66 | }
67 | }
68 |
69 | render(): React.ReactNode {
70 | const { open, showDescription, hasPrimary, hasSecondary, hasInputContent } = this.state;
71 |
72 | return (
73 |
74 | this.setState({ showDescription: value })} label="Show description" />
75 | this.setState({ hasPrimary: value })} label="Has primary button" />
76 | this.setState({ hasSecondary: value })} label="Has secondary button" />
77 | this.setState({ hasInputContent: value })} label="Has input content" />
78 |
79 |
80 | {this.modalChild}
81 |
82 |
83 | );
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/example/src/Views/NumberInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { NumberInput } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | itemStyle: {},
15 | });
16 |
17 | export default class TestNumberInput extends React.Component {
18 | state = {
19 | value1: '',
20 | value2: '30',
21 | value3: '',
22 | value4: '',
23 | value5: '',
24 | value6: '500',
25 | value7: '',
26 | };
27 |
28 | private changeText = (field: string, value: string): void => {
29 | this.setState({ [field]: value });
30 | };
31 |
32 | render(): React.ReactNode {
33 | const { value1, value2, value3, value4, value5, value6, value7 } = this.state;
34 |
35 | return (
36 |
37 |
38 | this.changeText('value1', value)} />
39 |
40 |
41 | this.changeText('value2', value)} />
42 |
43 |
44 | this.changeText('value3', value)} />
45 |
46 |
47 | this.changeText('value4', value)} />
48 |
49 |
50 | this.changeText('value5', value)} getErrorText={() => 'Item is required'} />
51 |
52 |
53 | value?.toLowerCase().indexOf('https') !== 0} value={value7} placeholder="I must start with https or will error" onChangeText={(value) => this.changeText('value7', value)} getErrorText={() => 'Must start with https'} />
54 |
55 |
56 | this.changeText('value6', value)} />
57 |
58 |
59 | );
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/example/src/Views/Overlay.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Text, Overlay, Button } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | flex: 1,
8 | },
9 | innerView: {
10 | padding: 16,
11 | flex: 1,
12 | },
13 | container: {
14 | flexGrow: 1,
15 | },
16 | overlay: {
17 | position: 'absolute',
18 | zIndex: 2,
19 | top: 0,
20 | right: 0,
21 | left: 0,
22 | bottom: 0,
23 | },
24 | baseSpacing: {
25 | marginTop: 20,
26 | },
27 | });
28 |
29 | export default class TestOverlay extends React.Component {
30 | render(): React.ReactNode {
31 | return (
32 |
33 |
34 |
35 |
36 |
38 |
39 | );
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/example/src/Views/OverrideTheme.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import * as g10 from '@carbon/themes/src/g10.js';
3 | import { StyleSheet, ScrollView, Platform } from 'react-native';
4 | import { Text, Button, overrideDarkTheme, overrideLightTheme, ThemeDefinition, componentsG10, overrideFonts, FontWeights, RegularFont } from '@carbon/react-native';
5 |
6 | const styles = StyleSheet.create({
7 | view: {
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | },
13 | baseSpacing: {
14 | marginTop: 20,
15 | fontFamily: '',
16 | },
17 | });
18 |
19 | export default class TestOverrideTheme extends React.Component<{ reloadView: () => void }> {
20 | private randomTheme = (): void => {
21 | const { reloadView } = this.props;
22 |
23 | const newTheme: ThemeDefinition = {};
24 | const componentKeys = [...Object.keys(componentsG10), ...Object.keys(g10)];
25 |
26 | componentKeys.forEach((key) => {
27 | const testString = Math.floor(Math.random() * 16777215).toString(16);
28 | newTheme[key] = `#${testString.length === 6 ? testString : '123abc'}`;
29 | });
30 |
31 | overrideDarkTheme(newTheme);
32 | overrideLightTheme(newTheme);
33 |
34 | reloadView();
35 | };
36 |
37 | private get fontList(): string[] {
38 | const iosList = ['Times New Roman', 'Papyrus', 'Menlo', 'Helvetica', 'Chalkboard S', 'San Francisco'];
39 | const androidList = ['normal', 'notoserif', 'sans-serif', 'Roboto', 'monospace', 'sans-serif-condensed'];
40 |
41 | return Platform.OS === 'ios' ? iosList : androidList;
42 | }
43 |
44 | private randomFont = (): void => {
45 | const { reloadView } = this.props;
46 |
47 | const fontFamily = this.fontList[Math.floor(Math.random() * (this.fontList.length - 1))];
48 |
49 | if (fontFamily) {
50 | overrideFonts({
51 | light: {
52 | fontWeight: '300' as FontWeights,
53 | fontFamily,
54 | },
55 | regular: {
56 | fontWeight: '400' as FontWeights,
57 | fontFamily,
58 | },
59 | semiBold: {
60 | fontWeight: '600' as FontWeights,
61 | fontFamily,
62 | },
63 | monoRegular: {
64 | fontWeight: '400' as FontWeights,
65 | fontFamily,
66 | },
67 | });
68 |
69 | reloadView();
70 | }
71 | };
72 |
73 | private resetTheme = (): void => {
74 | const { reloadView } = this.props;
75 |
76 | overrideDarkTheme({});
77 | overrideLightTheme({});
78 | overrideFonts({});
79 |
80 | reloadView();
81 | };
82 |
83 | render(): React.ReactNode {
84 | return (
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | );
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/example/src/Views/Pagination.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Pagination } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 32,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {
16 | marginBottom: 16,
17 | },
18 | });
19 |
20 | export default class TestPagination extends React.Component {
21 | state = {
22 | page1: 1,
23 | page2: 4,
24 | page3: 1,
25 | };
26 |
27 | render(): React.ReactNode {
28 | const { page1, page2, page3 } = this.state;
29 |
30 | return (
31 |
32 |
33 | this.setState({ page1: page })} totalPages={3} currentPage={page1} />
34 |
35 |
36 | this.setState({ page2: page })} totalPages={10} currentPage={page2} />
37 |
38 |
39 | this.setState({ page3: page })} totalPages={30} currentPage={page3} />
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/example/src/Views/PasswordInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { PasswordInput } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 8,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {},
16 | });
17 |
18 | export default class TestPasswordInput extends React.Component {
19 | state = {
20 | value1: '',
21 | value2: 'Starting item',
22 | value3: '',
23 | value4: '',
24 | value5: '',
25 | value6: 'Can not change me',
26 | value7: '',
27 | };
28 |
29 | private changeText = (field: string, value: string): void => {
30 | this.setState({ [field]: value });
31 | };
32 |
33 | render(): React.ReactNode {
34 | const { value1, value2, value3, value4, value5, value6, value7 } = this.state;
35 |
36 | return (
37 |
38 |
39 | this.changeText('value1', value)} />
40 |
41 |
42 | this.changeText('value2', value)} />
43 |
44 |
45 | this.changeText('value3', value)} />
46 |
47 |
48 | this.changeText('value4', value)} />
49 |
50 |
51 | this.changeText('value5', value)} getErrorText={() => 'Item is required'} />
52 |
53 |
54 | value?.toLowerCase().indexOf('https') !== 0} value={value7} placeholder="I must start with https or will error" onChangeText={(value) => this.changeText('value7', value)} getErrorText={() => 'Must start with https'} />
55 |
56 |
57 | this.changeText('value6', value)} />
58 |
59 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/example/src/Views/ProgressIndicator.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView } from 'react-native';
3 | import { ProgressIndicator, Button, Text } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 0,
8 | paddingTop: 32,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | testNotFull: {
16 | marginBottom: 16,
17 | alignSelf: 'flex-start',
18 | },
19 | });
20 |
21 | export default class TestProgressIndicator extends React.Component {
22 | state = {
23 | openControl: false,
24 | };
25 |
26 | render(): React.ReactNode {
27 | const { openControl } = this.state;
28 |
29 | return (
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
56 |
57 |
58 |
59 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/example/src/Views/RadioButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { RadioButton } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | itemStyle: {},
15 | });
16 |
17 | export default class TestRadioButton extends React.Component {
18 | state = {
19 | value: 'value1',
20 | };
21 |
22 | private changeText = (field: string): void => {
23 | this.setState({ value: field });
24 | };
25 |
26 | render(): React.ReactNode {
27 | const { value } = this.state;
28 |
29 | return (
30 |
31 |
32 | this.changeText('value1')} />
33 |
34 |
35 | this.changeText('value2')} />
36 |
37 |
38 | this.changeText('value3')} />
39 |
40 |
41 | this.changeText('value4')} />
42 |
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/example/src/Views/RealLandingView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { AcceptTerms, DocumentViewer, LandingView } from '@carbon/react-native';
3 | import { privacyPolicy } from '../constants/privacyPolicy';
4 | import { versionCode } from '../constants/versionCode';
5 | import { version } from '../../package.json';
6 | import AsyncStorage from '@react-native-async-storage/async-storage';
7 | import { termsConditions } from '../constants/termsConditions';
8 |
9 | const storageKey = '@carbon-react-native-example/accepted-terms';
10 |
11 | export default class RealLandingView extends React.Component<{
12 | continueAction: () => void;
13 | }> {
14 | state = {
15 | showPrivacy: false,
16 | showAcceptTerms: false,
17 | loading: true,
18 | };
19 |
20 | private acceptedTerms = false;
21 |
22 | private textStrings = {
23 | agree: 'Agree',
24 | disagree: 'Disagree',
25 | modalTitle: 'Are you sure?',
26 | modalBody: 'The use of this app requires agreement to the terms and conditions.',
27 | modalSecondaryAction: 'Disagree',
28 | modalPrimaryAction: 'Continue',
29 | };
30 |
31 | private onPrivacyPolicy = (): void => {
32 | this.setState({ showPrivacy: true });
33 | };
34 |
35 | private termsResultCallback = (result: boolean): void => {
36 | const { continueAction } = this.props;
37 |
38 | if (result) {
39 | AsyncStorage.setItem(storageKey, 'TRUE')
40 | .then(() => {
41 | continueAction();
42 | })
43 | .catch((error) => {
44 | console.error('Unable to set storage item for terms accepting', error);
45 | continueAction();
46 | });
47 | } else {
48 | this.setState({ showAcceptTerms: false });
49 | }
50 | };
51 |
52 | componentDidMount(): void {
53 | AsyncStorage.getItem(storageKey)
54 | .then((data) => {
55 | this.acceptedTerms = !!data;
56 | this.setState({ loading: false });
57 | })
58 | .catch((error) => {
59 | console.error('Unable to get storage item for terms accepting', error);
60 | this.setState({ loading: false });
61 | });
62 | }
63 |
64 | render(): React.ReactNode {
65 | const { showPrivacy, showAcceptTerms, loading } = this.state;
66 | const { continueAction } = this.props;
67 |
68 | return (
69 | <>
70 | {
79 | if (this.acceptedTerms) {
80 | continueAction();
81 | } else {
82 | this.setState({ showAcceptTerms: true });
83 | }
84 | }}
85 | privacyPolicyText="Privacy Policy"
86 | privacyPolicyOnPress={this.onPrivacyPolicy}
87 | />
88 | {showPrivacy && (
89 | {
93 | this.setState({ showPrivacy: false });
94 | }}
95 | />
96 | )}
97 | {showAcceptTerms && }
98 | >
99 | );
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/example/src/Views/Search.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Search } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 8,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {},
16 | });
17 |
18 | export default class TestSearch extends React.Component {
19 | state = {
20 | value1: '',
21 | value2: 'Starting item',
22 | value3: '',
23 | value4: '',
24 | value5: '',
25 | value6: 'Can not change me',
26 | };
27 |
28 | private changeText = (field: string, value: string): void => {
29 | this.setState({ [field]: value });
30 | };
31 |
32 | render(): React.ReactNode {
33 | const { value1, value2, value3, value4, value5, value6 } = this.state;
34 |
35 | return (
36 |
37 |
38 | this.changeText('value1', value)} />
39 |
40 |
41 | this.changeText('value2', value)} />
42 |
43 |
44 | this.changeText('value3', value)} />
45 |
46 |
47 | this.changeText('value4', value)}
52 | buttonProps={{
53 | text: 'Cancel',
54 | kind: 'ghost',
55 | disableDesignPadding: true,
56 | onPress: () => {
57 | this.changeText('value4', '');
58 | },
59 | }}
60 | />
61 |
62 |
63 | this.changeText('value5', value)} />
64 |
65 |
66 | this.changeText('value6', value)} />
67 |
68 |
69 | );
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/example/src/Views/Slider.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Slider } from '@carbon/react-native';
4 |
5 | const minValue = 0;
6 | const maxValue = 100;
7 |
8 | const styles = StyleSheet.create({
9 | view: {
10 | padding: 16,
11 | flex: 1,
12 | },
13 | container: {
14 | flexGrow: 1,
15 | paddingBottom: 64,
16 | },
17 | itemStyle: {
18 | marginBottom: 16,
19 | },
20 | });
21 |
22 | export default class TestSlider extends React.Component {
23 | state = {
24 | value1: 50,
25 | value2: 50,
26 | value3: 50,
27 | value4: 50,
28 | };
29 |
30 | private changeValue = (field: string, value: number): void => {
31 | this.setState({ [field]: value });
32 | };
33 |
34 | render(): React.ReactNode {
35 | const { value1, value2, value3, value4 } = this.state;
36 |
37 | return (
38 |
39 |
40 | this.changeValue('value1', value)} />
41 |
42 |
43 | this.changeValue('value2', value)} />
44 |
45 |
46 | this.changeValue('value3', value)} />
47 |
48 |
49 | this.changeValue('value4', value)} />
50 |
51 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/example/src/Views/Tag.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, Alert } from 'react-native';
3 | import { Tag, Checkbox, TagTypes } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | baseSpacing: {
15 | marginTop: 16,
16 | },
17 | tags: {
18 | marginTop: 16,
19 | },
20 | });
21 |
22 | export default class TestTag extends React.Component {
23 | state = {
24 | disabled: false,
25 | showFilterClose: false,
26 | showWrapping: false,
27 | };
28 |
29 | private textTypes: TagTypes[] = ['red', 'magenta', 'purple', 'blue', 'cyan', 'teal', 'green', 'gray', 'cool-gray', 'warm-gray', 'high-contrast'];
30 |
31 | render(): React.ReactNode {
32 | const { disabled, showFilterClose, showWrapping } = this.state;
33 |
34 | return (
35 |
36 | this.setState({ showFilterClose: value })} label="Show close" />
37 | this.setState({ disabled: value })} label="Make disabled" />
38 | this.setState({ showWrapping: value })} label="Make all wrap" />
39 | Alert.alert('Pressed filter close', 'default') : undefined} />
40 | {this.textTypes.map((type) => (
41 | Alert.alert('Pressed filter close', type) : undefined} />
42 | ))}
43 |
44 | );
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/example/src/Views/Text.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView } from 'react-native';
3 | import { Text, TextTypes } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 32,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | baseSpacing: {
16 | marginBottom: 16,
17 | },
18 | });
19 |
20 | export default class TestText extends React.Component {
21 | private textTypes: TextTypes[] = ['code-01', 'code-02', 'label-01', 'label-02', 'helper-text-01', 'helper-text-02', 'legal-01', 'legal-02', 'body-compact-01', 'body-compact-02', 'body-01', 'body-02', 'heading-compact-01', 'heading-compact-02', 'heading-01', 'heading-02', 'heading-03', 'heading-04', 'heading-05', 'heading-06', 'heading-07'];
22 |
23 | render(): React.ReactNode {
24 | return (
25 |
26 | {this.textTypes.map((type) => (
27 |
28 | ))}
29 |
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/example/src/Views/TextArea.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { TextArea } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 8,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {},
16 | });
17 |
18 | export default class TestTextArea extends React.Component {
19 | state = {
20 | value1: '',
21 | value2: 'Starting item',
22 | value3: '',
23 | value4: '',
24 | value5: '',
25 | value6: 'Can not change me',
26 | value7: '',
27 | };
28 |
29 | private changeText = (field: string, value: string): void => {
30 | this.setState({ [field]: value });
31 | };
32 |
33 | render(): React.ReactNode {
34 | const { value1, value2, value3, value4, value5, value6, value7 } = this.state;
35 |
36 | return (
37 |
38 |
39 |
41 |
42 |
44 |
45 |
47 |
48 |
50 |
51 |
53 |
54 |
56 |
57 |
59 |
60 | );
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/example/src/Views/TextInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { TextInput } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 8,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {},
16 | });
17 |
18 | export default class TestTextInput extends React.Component {
19 | state = {
20 | value1: '',
21 | value2: 'Starting item',
22 | value3: '',
23 | value4: '',
24 | value5: '',
25 | value6: 'Can not change me',
26 | value7: '',
27 | value8: '',
28 | };
29 |
30 | private changeText = (field: string, value: string): void => {
31 | this.setState({ [field]: value });
32 | };
33 |
34 | render(): React.ReactNode {
35 | const { value1, value2, value3, value4, value5, value6, value7, value8 } = this.state;
36 |
37 | return (
38 |
39 |
40 | this.changeText('value1', value)} />
41 |
42 |
43 | this.changeText('value2', value)} />
44 |
45 |
46 | this.changeText('value3', value)} />
47 |
48 |
49 | this.changeText('value4', value)} />
50 |
51 |
52 | this.changeText('value5', value)} getErrorText={() => 'Item is required'} />
53 |
54 |
55 | value?.toLowerCase().indexOf('https') !== 0} value={value7} placeholder="I must start with https or will error" onChangeText={(value) => this.changeText('value7', value)} getErrorText={() => 'Must start with https'} />
56 |
57 |
58 | this.changeText('value8', value)} getErrorText={() => 'This is required.'} />
59 |
60 |
61 | this.changeText('value6', value)} />
62 |
63 |
64 | );
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/example/src/Views/Tile.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View, Alert } from 'react-native';
3 | import { Tile, Text } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | flex: 1,
9 | },
10 | container: {
11 | flexGrow: 1,
12 | paddingBottom: 64,
13 | },
14 | baseSpacing: {
15 | marginBottom: 16,
16 | },
17 | maxHeight: {
18 | maxHeight: 90,
19 | },
20 | });
21 |
22 | export default class TestTile extends React.Component {
23 | private alert = (text: string): void => {
24 | Alert.alert(text);
25 | };
26 |
27 | render(): React.ReactNode {
28 | return (
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | this.alert('Pressed tile')} onLongPress={() => this.alert('Long pressed tile')}>
54 |
55 |
56 |
57 |
58 | );
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/example/src/Views/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, View } from 'react-native';
3 | import { Toggle } from '@carbon/react-native';
4 |
5 | const styles = StyleSheet.create({
6 | view: {
7 | padding: 16,
8 | paddingTop: 8,
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | itemStyle: {},
16 | });
17 |
18 | export default class TestToggle extends React.Component {
19 | state = {
20 | value1: false,
21 | value2: true,
22 | value3: false,
23 | value4: false,
24 | value5: false,
25 | };
26 |
27 | private changeText = (field: string, value: boolean): void => {
28 | this.setState({ [field]: value });
29 | };
30 |
31 | render(): React.ReactNode {
32 | const { value1, value2, value3, value4, value5 } = this.state;
33 |
34 | return (
35 |
36 |
37 | this.changeText('value1', value)} />
38 |
39 |
40 | this.changeText('value2', value)} />
41 |
42 |
43 | this.changeText('value3', value)} />
44 |
45 |
46 | this.changeText('value4', value)} />
47 |
48 |
49 | this.changeText('value5', value)} />
50 |
51 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/example/src/Views/ViewWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView } from 'react-native';
3 | import { Button, Checkbox, getColor, RadioButton, Text, ViewWrapper } from '@carbon/react-native';
4 |
5 | export default class TestViewWrapper extends React.Component<{
6 | goHome: () => void;
7 | }> {
8 | state = {
9 | topNavColor: false,
10 | topCustomColor: false,
11 | bottomNavColor: false,
12 | bottomCustomColor: false,
13 | statusBar: 'unset',
14 | };
15 |
16 | private get styles() {
17 | return StyleSheet.create({
18 | scrollView: {
19 | padding: 16,
20 | flex: 1,
21 | },
22 | scrollContainer: {
23 | flexGrow: 1,
24 | paddingBottom: 64,
25 | },
26 | buttonStyle: {
27 | marginTop: 32,
28 | },
29 | section: {
30 | marginTop: 24,
31 | },
32 | });
33 | }
34 |
35 | render(): React.ReactNode {
36 | const { topNavColor, topCustomColor, bottomNavColor, bottomCustomColor, statusBar } = this.state;
37 | const { goHome } = this.props;
38 | let statusBarType = undefined as 'dark-content' | 'light-content' | undefined;
39 |
40 | if (statusBar === 'dark') {
41 | statusBarType = 'dark-content';
42 | } else if (statusBar === 'light') {
43 | statusBarType = 'light-content';
44 | }
45 |
46 | return (
47 |
48 |
49 |
50 | this.setState({ topNavColor: value })} label="Top color for navigation" />
51 | this.setState({ topCustomColor: value })} label="Top color is custom" />
52 | this.setState({ bottomNavColor: value })} label="Bottom color for navigation" />
53 | this.setState({ bottomCustomColor: value })} label="Bottom color is custom" />
54 |
55 | this.setState({ statusBar: 'unset' })} />
56 | this.setState({ statusBar: 'dark' })} />
57 | this.setState({ statusBar: 'light' })} />
58 |
59 |
60 |
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/example/src/Views/WebHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, ScrollView, Alert, View } from 'react-native';
3 | import { Checkbox, WebHeader, WebHeaderAction } from '@carbon/react-native';
4 | import InformationIcon from '@carbon/icons/es/information/20';
5 | import HomeIcon from '@carbon/icons/es/home/20';
6 |
7 | const styles = StyleSheet.create({
8 | view: {
9 | flex: 1,
10 | },
11 | container: {
12 | flexGrow: 1,
13 | paddingBottom: 64,
14 | },
15 | baseSpacing: {
16 | marginBottom: 16,
17 | },
18 | controls: {
19 | padding: 16,
20 | },
21 | });
22 |
23 | export default class TestWebHeader extends React.Component {
24 | state = {
25 | showActions: true,
26 | };
27 |
28 | private get headerActions(): WebHeaderAction[] {
29 | return [
30 | {
31 | text: 'Information',
32 | icon: InformationIcon,
33 | onPress: () => {
34 | Alert.alert('Pressed info');
35 | },
36 | },
37 | {
38 | text: 'Go home',
39 | icon: HomeIcon,
40 | onPress: () => {
41 | Alert.alert('Pressed home');
42 | },
43 | },
44 | ];
45 | }
46 |
47 | render(): React.ReactNode {
48 | const { showActions } = this.state;
49 |
50 | return (
51 |
52 |
53 | this.setState({ showActions: value })} label="Show actions" />
54 |
55 |
56 |
57 |
58 |
59 | );
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/example/src/assets/app_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/src/assets/app_icon.png
--------------------------------------------------------------------------------
/example/src/assets/companyImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/src/assets/companyImage.png
--------------------------------------------------------------------------------
/example/src/assets/components/button-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/src/assets/components/button-dark.png
--------------------------------------------------------------------------------
/example/src/assets/components/button-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/src/assets/components/button-light.png
--------------------------------------------------------------------------------
/example/src/assets/productImage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/src/assets/productImage.png
--------------------------------------------------------------------------------
/example/src/assets/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/example/src/assets/react.png
--------------------------------------------------------------------------------
/example/src/constants/thirdPartyNotices.ts:
--------------------------------------------------------------------------------
1 | export const thirdPartyNotices = `IBM Third Party Notices
2 |
3 | This document is not available yet. Will be added prior to app going live.
4 | `;
5 |
--------------------------------------------------------------------------------
/example/src/constants/versionCode.ts:
--------------------------------------------------------------------------------
1 | export const versionCode = 31;
2 |
--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@carbon/icons/*';
2 |
--------------------------------------------------------------------------------
/lefthook.yml:
--------------------------------------------------------------------------------
1 | pre-commit:
2 | parallel: true
3 | commands:
4 | lint:
5 | files: git diff --name-only @{push}
6 | glob: "*.{js,ts,jsx,tsx}"
7 | run: npx eslint {files}
8 | types:
9 | files: git diff --name-only @{push}
10 | glob: "*.{js,ts, jsx, tsx}"
11 | run: npx tsc --noEmit
12 | commit-msg:
13 | parallel: true
14 | commands:
15 | commitlint:
16 | run: npx commitlint --edit
17 |
--------------------------------------------------------------------------------
/scripts/bump-example.js:
--------------------------------------------------------------------------------
1 | const {execSync} = require('child_process');
2 | const fs = require('fs');
3 | const gradleRegex = /versionCode [0-9]+\n/;
4 | const plistFile = 'example/ios/CarbonReactNativeExample/Info.plist';
5 | const gradleFile = 'example/android/app/build.gradle';
6 | const versionCodFile = 'example/src/constants/versionCode.ts';
7 |
8 | let androidGradle = fs.readFileSync(gradleFile, {encoding: 'utf8'});
9 | const oldCode = androidGradle.match(gradleRegex)[0].replace('versionCode ', '').trim();
10 | const newCode = String(Number(oldCode) + 1);
11 |
12 | console.info(`Bumping iOS to versionCode ${newCode}`);
13 | execSync(`/usr/libexec/PlistBuddy -c "Set :CFBundleVersion ${newCode}" "${plistFile}"`, {stdio: 'inherit'});
14 |
15 | console.info(`Bumping Android to versionCode ${newCode}`);
16 |
17 | if (typeof androidGradle === 'string') {
18 | androidGradle = androidGradle.replace(gradleRegex, `versionCode ${newCode}\n`);
19 | } else {
20 | throw new Error('bump.js: unable to read android gradle file');
21 | }
22 |
23 | fs.writeFileSync(gradleFile, androidGradle);
24 |
25 | console.info(`Bumping version code for app to versionCode ${newCode}`);
26 |
27 | fs.writeFileSync(versionCodFile, `export const versionCode = ${newCode};\n`);
28 |
--------------------------------------------------------------------------------
/src/__tests__/index.test.tsx:
--------------------------------------------------------------------------------
1 | it.todo('write a test');
2 |
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexMono-Regular.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-Bold.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-ExtraLight.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-Light.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-Medium.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-Regular.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-SemiBold.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/IBMPlexSans-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/assets/fonts/IBMPlexSans-Thin.ttf
--------------------------------------------------------------------------------
/src/components/BottomSafeAreaColorOverride/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleSheet, View, Dimensions, EmitterSubscription } from 'react-native';
3 | import { zIndexes } from '../../styles/z-index';
4 | import { Overlay } from '../Overlay';
5 |
6 | /**
7 | * @ignore
8 | * Props for BottomSafeAreaColorOverride
9 | */
10 | export type BottomSafeAreaColorOverrideProps = {
11 | /** Color to force the safe area bottom to be */
12 | color: string;
13 | /** Custom margin to the right */
14 | marginRight?: number;
15 | /** Include overlay behind the color box */
16 | backgroundOverlay?: boolean;
17 | };
18 |
19 | /**
20 | * @ignore
21 | * This component is for setting a color to apply to bottom zone under safe areas.
22 | * This is used for specific flows who are full screen and need to override the bottom while not touching the top.
23 | * This component is not exported.
24 | */
25 | export class BottomSafeAreaColorOverride extends React.Component {
26 | private resizeEvent: EmitterSubscription | undefined;
27 |
28 | private get styles() {
29 | const { color, marginRight } = this.props;
30 |
31 | return StyleSheet.create({
32 | parentWrapper: {
33 | zIndex: zIndexes.behind,
34 | position: 'absolute',
35 | bottom: 0,
36 | right: 0,
37 | left: 0,
38 | height: 34,
39 | },
40 | wrapper: {
41 | marginRight: marginRight || 0,
42 | height: '100%',
43 | backgroundColor: color,
44 | },
45 | blurBackground: {
46 | zIndex: zIndexes.behind,
47 | position: 'absolute',
48 | top: 0,
49 | right: 0,
50 | left: 0,
51 | bottom: 0,
52 | flex: 1,
53 | },
54 | });
55 | }
56 |
57 | private get isPortrait(): boolean {
58 | const dim = Dimensions.get('window');
59 |
60 | return dim.height >= dim.width;
61 | }
62 |
63 | componentWillUnmount(): void {
64 | if (this.resizeEvent && typeof this.resizeEvent.remove === 'function') {
65 | this.resizeEvent.remove();
66 | }
67 | }
68 |
69 | componentDidMount(): void {
70 | this.resizeEvent = Dimensions.addEventListener('change', () => {
71 | this.setState({});
72 | });
73 | }
74 |
75 | render(): React.ReactNode {
76 | const { backgroundOverlay } = this.props;
77 |
78 | if (this.isPortrait) {
79 | return (
80 |
81 |
82 | {backgroundOverlay && }
83 |
84 | );
85 | } else {
86 | return null;
87 | }
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/components/BottomToolbar/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { styleReferenceBreaker } from '../../helpers';
5 | import type { ToolbarButton } from '../../types/navigation';
6 | import { Button } from '../Button';
7 | import { Link } from '../Link';
8 |
9 | /** Props for BottomToolbar component */
10 | export type BottomToolbarProps = {
11 | /** Toolbar items to load */
12 | items: ToolbarButton[];
13 | /** Style to set on the item */
14 | style?: StyleProp;
15 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
16 | componentProps?: ViewProps;
17 | };
18 |
19 | /**
20 | * BottomToolbar component for rendering the bottom toolbar. This is similar to BottomNavigationBar but offers a call to action
21 | *
22 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/BottomToolbar.tsx | Example code}
23 | */
24 | export class BottomToolbar extends React.Component {
25 | private get styles() {
26 | return StyleSheet.create({
27 | wrapper: {
28 | height: 49,
29 | maxHeight: 49,
30 | width: '100%',
31 | backgroundColor: getColor('layer01'),
32 | flexDirection: 'row',
33 | justifyContent: 'space-evenly',
34 | borderTopColor: getColor('borderSubtle01'),
35 | borderTopWidth: 1,
36 | },
37 | itemTextStyle: {},
38 | itemIconStyle: {
39 | width: 48,
40 | },
41 | linkStyle: {
42 | padding: 13,
43 | },
44 | });
45 | }
46 |
47 | private get items(): React.ReactNode {
48 | const { items } = this.props;
49 |
50 | return items.map((item, index) => {
51 | const iconMode = !!item.icon;
52 | const finalStyles = styleReferenceBreaker(iconMode ? this.styles.itemIconStyle : this.styles.itemTextStyle, item.style);
53 | let finalColor = getColor('iconPrimary');
54 |
55 | if (item.disabled) {
56 | finalColor = getColor('iconDisabled');
57 | }
58 |
59 | switch (item.alignItem) {
60 | case 'left':
61 | finalStyles.marginRight = 'auto';
62 | break;
63 | case 'right':
64 | finalStyles.marginLeft = 'auto';
65 | break;
66 | case 'center':
67 | default:
68 | finalStyles.marginRight = 'auto';
69 | finalStyles.marginLeft = 'auto';
70 | break;
71 | }
72 |
73 | return (
74 |
75 | {iconMode ? : }
76 |
77 | );
78 | });
79 | }
80 |
81 | render(): React.ReactNode {
82 | const { componentProps, style } = this.props;
83 | const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
84 |
85 | return (
86 |
87 | {this.items}
88 |
89 | );
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/DataTable/DataTable.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleProp, StyleSheet, ViewStyle, View, ViewProps } from 'react-native';
3 | import { styleReferenceBreaker } from '../../helpers';
4 |
5 | /** Props for DataTable component */
6 | export type DataTableProps = {
7 | /** Content of the row. Should be list of DataTableHeader or DataTableRow. */
8 | children: React.ReactNode;
9 | /** Style to set on the item */
10 | style?: StyleProp;
11 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
12 | componentProps?: ViewProps;
13 | };
14 |
15 | /**
16 | * DataTable component for rendering a data table.
17 | * Children components should be DataTableRow, DataTableCell, DataTableHeader, DataTableHeaderSelected
18 | *
19 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
20 | */
21 | export class DataTable extends React.Component {
22 | private get styles() {
23 | return StyleSheet.create({
24 | wrapper: {
25 | flexDirection: 'column',
26 | width: '100%',
27 | flex: 1,
28 | alignContent: 'flex-start',
29 | },
30 | });
31 | }
32 | render(): React.ReactNode {
33 | const { componentProps, style, children } = this.props;
34 | const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
35 |
36 | return (
37 |
38 | {children}
39 |
40 | );
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/DataTable/DataTableHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, StyleSheet, ViewStyle, View, ScrollView } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { styleReferenceBreaker } from '../../helpers';
5 | import { Button, ButtonProps } from '../Button';
6 |
7 | /** Props for DataTableHeader component */
8 | export type DataTableHeaderProps = {
9 | /** Primary action to render (right side action) */
10 | primaryAction?: ButtonProps;
11 | /** Secondary actions to render (left side action. Should only be icons normally. But not limited). If kind and overrideColor are not set will auto set to best combo for tables. */
12 | secondaryActions?: ButtonProps[];
13 | /** Style to set on the item */
14 | style?: StyleProp;
15 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
16 | componentProps?: ViewProps;
17 | };
18 |
19 | /**
20 | * DataTableHeader component for rendering a data table header.
21 | * Used as a child of DataTable
22 | *
23 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
24 | */
25 | export class DataTableHeader extends React.Component {
26 | private get styles() {
27 | return StyleSheet.create({
28 | wrapper: {
29 | height: 48,
30 | backgroundColor: getColor('layer01'),
31 | flexDirection: 'row',
32 | },
33 | secondaryActions: {
34 | flexDirection: 'row',
35 | flex: 1,
36 | },
37 | });
38 | }
39 |
40 | private get secondaryActions(): React.ReactNode {
41 | const { secondaryActions } = this.props;
42 |
43 | return (
44 |
45 | {(secondaryActions || []).map((item, index) => {
46 | return ;
47 | })}
48 |
49 | );
50 | }
51 |
52 | private get primaryAction(): React.ReactNode {
53 | const { primaryAction } = this.props;
54 |
55 | if (primaryAction) {
56 | return ;
57 | }
58 |
59 | return null;
60 | }
61 |
62 | render(): React.ReactNode {
63 | const { componentProps, style } = this.props;
64 | const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
65 |
66 | return (
67 |
68 | {this.secondaryActions}
69 | {this.primaryAction}
70 |
71 | );
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/DataTable/DataTableRow.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleProp, StyleSheet, ViewStyle, GestureResponderEvent, Pressable, ViewProps, View, PressableStateCallbackType } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
5 |
6 | /** Props for DataTableRow component */
7 | export type DataTableRowProps = {
8 | /** Content of the row. Should be list of . */
9 | children: React.ReactNode;
10 | /** onPress event for the row (ignored if DataTableCell has press events) */
11 | onPress?: (event: GestureResponderEvent) => void;
12 | /** onLongPress event for the row (ignored if DataTableCell has press events) */
13 | onLongPress?: (event: GestureResponderEvent) => void;
14 | /** Style to set on the item */
15 | style?: StyleProp;
16 | /** Text to use for row (accessibility). Not set by default. */
17 | rowText?: string;
18 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
19 | componentProps?: ViewProps;
20 | };
21 |
22 | /**
23 | * DataTableRow component for rendering a data table row.
24 | * Used as a child of DataTable
25 | *
26 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DataTable.tsx | Example code}
27 | */
28 | export class DataTableRow extends React.Component {
29 | private get styles() {
30 | return StyleSheet.create({
31 | wrapper: {
32 | backgroundColor: getColor('layer01'),
33 | minHeight: 48,
34 | flexDirection: 'row',
35 | width: '100%',
36 | borderTopColor: getColor('borderSubtle00'),
37 | borderTopWidth: 1,
38 | },
39 | });
40 | }
41 |
42 | private getStateStyle = (state: PressableStateCallbackType): StyleProp => {
43 | return state.pressed ? { backgroundColor: getColor('layerActive01') } : undefined;
44 | };
45 |
46 | render(): React.ReactNode {
47 | const { componentProps, style, onPress, onLongPress, rowText, children } = this.props;
48 | const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
49 |
50 | if (onPress || onLongPress) {
51 | return (
52 | pressableFeedbackStyle(state, finalStyles, this.getStateStyle)} {...(componentProps || {})} onPress={onPress} onLongPress={onLongPress} accessibilityLabel={rowText}>
53 | {children}
54 |
55 | );
56 | } else {
57 | return (
58 |
59 | {children}
60 |
61 | );
62 | }
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/components/DataTable/index.tsx:
--------------------------------------------------------------------------------
1 | export * from './DataTable';
2 | export * from './DataTableCell';
3 | export * from './DataTableRow';
4 | export * from './DataTableHeader';
5 | export * from './DataTableHeaderSelected';
6 |
--------------------------------------------------------------------------------
/src/components/DateInput/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTextInput } from '../BaseTextInputs';
3 | import { TextInputProps } from '../../types/shared';
4 |
5 | /**
6 | * This component is just basic text inpput with style.
7 | * Deciding on calendar system or native system is pending.
8 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/DateInput.tsx | Example code}
9 | */
10 | export class DateInput extends React.Component {
11 | render(): React.ReactNode {
12 | return ;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/ErrorState/access_error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/ErrorState/access_error.png
--------------------------------------------------------------------------------
/src/components/ErrorState/empty_error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/ErrorState/empty_error.png
--------------------------------------------------------------------------------
/src/components/ErrorState/generic_error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/ErrorState/generic_error.png
--------------------------------------------------------------------------------
/src/components/ErrorState/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, StyleSheet, ViewStyle, View, ImageSourcePropType, Image, ImageStyle } from 'react-native';
3 | import { styleReferenceBreaker } from '../../helpers';
4 | import { Text } from '../Text';
5 | const accessImage = require('./access_error.png');
6 | const emptyImage = require('./empty_error.png');
7 | const genericImage = require('./generic_error.png');
8 |
9 | /** Types of errors */
10 | export type ErrorStateTypes = 'generic' | 'access' | 'empty';
11 |
12 | /** Props for ErrorState component */
13 | export type ErrorStateProps = {
14 | /** Type of error state (default is generic) */
15 | type?: ErrorStateTypes;
16 | /** Title of error state (primary reason) */
17 | title: string;
18 | /** Sub title of error state (longer reason or explanation) */
19 | subTitle?: string;
20 | /** Technical help or codes (shows as mono text) */
21 | errorCode?: string;
22 | /** Indicate if no image should be used (text only error) */
23 | noImage?: boolean;
24 | /** Custom image (override type image) */
25 | customImage?: ImageSourcePropType;
26 | /** Custom image styles */
27 | imageStyle?: StyleProp;
28 | /** Style to set on the item */
29 | style?: StyleProp;
30 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
31 | componentProps?: ViewProps;
32 | };
33 |
34 | /**
35 | * ErrorState component for showing an error message and screen
36 | *
37 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ErrorState.tsx | Example code}
38 | */
39 | export class ErrorState extends React.Component {
40 | private get styles() {
41 | return StyleSheet.create({
42 | wrapper: {
43 | flexDirection: 'row',
44 | flexWrap: 'wrap',
45 | },
46 | image: {
47 | width: 320,
48 | height: 405,
49 | margin: 16,
50 | marginRight: 32,
51 | },
52 | textWrapper: {
53 | flex: 1,
54 | minWidth: 300,
55 | },
56 | title: {
57 | marginBottom: 16,
58 | },
59 | subTitle: {
60 | marginBottom: 16,
61 | },
62 | errorCode: {},
63 | });
64 | }
65 |
66 | private get image(): ImageSourcePropType {
67 | const { customImage, type } = this.props;
68 |
69 | if (customImage) {
70 | return customImage;
71 | }
72 |
73 | switch (type) {
74 | case 'access':
75 | return accessImage;
76 | case 'empty':
77 | return emptyImage;
78 | case 'generic':
79 | default:
80 | return genericImage;
81 | }
82 | }
83 |
84 | render(): React.ReactNode {
85 | const { componentProps, style, title, subTitle, errorCode, imageStyle, noImage } = this.props;
86 |
87 | return (
88 |
89 | {!noImage && }
90 |
91 |
92 | {!!subTitle && }
93 | {!!errorCode && }
94 |
95 |
96 | );
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/components/GrantPermission/camera_permission.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/GrantPermission/camera_permission.png
--------------------------------------------------------------------------------
/src/components/GrantPermission/file_permission.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/GrantPermission/file_permission.png
--------------------------------------------------------------------------------
/src/components/GrantPermission/location_permission.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/GrantPermission/location_permission.png
--------------------------------------------------------------------------------
/src/components/GrantPermission/notifications_permission.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/carbon-design-system/carbon-react-native/883b6c64881ff79867f363a7123d7c4c59bb02a2/src/components/GrantPermission/notifications_permission.png
--------------------------------------------------------------------------------
/src/components/InlineLink/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { GestureResponderEvent, Keyboard, StyleProp, StyleSheet, ViewStyle } from 'react-native';
3 | import { styleReferenceBreaker } from '../../helpers';
4 | import { getColor } from '../../styles/colors';
5 | import { Text, TextTypes } from '../Text';
6 |
7 | /** Props for InlineLink component */
8 | export type InlineLinkProps = {
9 | /** Text to render */
10 | text: string;
11 | /** Text type to render (Standard is default) */
12 | textType?: TextTypes;
13 | /** onPress event */
14 | onPress?: (event: GestureResponderEvent) => void;
15 | /** onLongPress event */
16 | onLongPress?: (event: GestureResponderEvent) => void;
17 | /** Indicate if keyboard should be dismissed onPress */
18 | dismissKeyboardOnPress?: boolean;
19 | /** Indicate if links are rendered on dark mode */
20 | forceDarkMode?: boolean;
21 | /** Style to set on the item */
22 | style?: StyleProp;
23 | };
24 |
25 | /**
26 | * InlineLink component
27 | * Link for using in inline with other text.
28 | *
29 | * To use import React Native Text wrapper `import { Text as ReactText } from 'react-native';`
30 | * Use `Text` from the Carbon package.
31 | * Then use something like:
32 | * ```javascript
33 | *
34 | *
35 | * openLink('https://carbondesignsystem.com')} />
36 | *
37 | *
38 | * ```
39 | *
40 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Link.tsx | Example code}
41 | */
42 | export class InlineLink extends React.Component {
43 | private get styles() {
44 | const { forceDarkMode } = this.props;
45 |
46 | return StyleSheet.create({
47 | wrapper: {
48 | flexDirection: 'row',
49 | alignItems: 'center',
50 | color: getColor('linkPrimary', forceDarkMode ? 'dark' : undefined),
51 | },
52 | });
53 | }
54 |
55 | private onPress = (event: GestureResponderEvent): void => {
56 | const { dismissKeyboardOnPress, onPress } = this.props;
57 |
58 | if (dismissKeyboardOnPress && typeof Keyboard?.dismiss === 'function') {
59 | Keyboard.dismiss();
60 | }
61 |
62 | if (typeof onPress === 'function') {
63 | onPress(event);
64 | }
65 | };
66 |
67 | render(): React.ReactNode {
68 | const { text, onLongPress, textType, style } = this.props;
69 |
70 | return ;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/List/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
3 | import { Text, TextTypes } from '../Text';
4 |
5 | /** Props for List component */
6 | export type ListProps = {
7 | /** Type of list (default is unordered) */
8 | type?: 'unordered' | 'ordered';
9 | /** Items to render. If strings will apply proper typeface. If passing element you need to set this.styles. */
10 | items: (string | React.ReactNode)[];
11 | /** Indicate if list is nested in another list */
12 | nested?: boolean;
13 | /** Text type to render (Standard is default. Normally only body 01 or 02 should be used) */
14 | textType?: TextTypes;
15 | /** Style to set on the item */
16 | style?: StyleProp;
17 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
18 | componentProps?: ViewProps;
19 | };
20 |
21 | /**
22 | * List component for rendering an ordered or unordered list
23 | *
24 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/List.tsx | Example code}
25 | */
26 | export class List extends React.Component {
27 | private letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
28 |
29 | private get styles() {
30 | return StyleSheet.create({
31 | itemWrapper: {
32 | flexDirection: 'row',
33 | paddingBottom: 4,
34 | },
35 | indicator: {
36 | marginRight: 10,
37 | },
38 | content: {
39 | flex: 1,
40 | },
41 | });
42 | }
43 |
44 | private getIndicator(index: number): React.ReactNode {
45 | const { type, nested } = this.props;
46 |
47 | if (type === 'ordered') {
48 | if (nested) {
49 | let value = this.letters[index % 26] || '?';
50 |
51 | if (index >= 26) {
52 | const subIndex = Math.floor(index / 26) - 1;
53 | const subValue = this.letters[subIndex % 26] || '?';
54 |
55 | value = subValue + value;
56 | }
57 |
58 | return ;
59 | } else {
60 | return ;
61 | }
62 | } else {
63 | if (nested) {
64 | return ;
65 | } else {
66 | return ;
67 | }
68 | }
69 | }
70 |
71 | private getListItem(item: string | React.ReactNode, index: number): React.ReactNode {
72 | const { textType } = this.props;
73 |
74 | return (
75 |
76 | {this.getIndicator(index)}
77 | {typeof item === 'string' ? : item}
78 |
79 | );
80 | }
81 |
82 | render(): React.ReactNode {
83 | const { items, componentProps, style } = this.props;
84 |
85 | return (
86 |
87 | {items.map((item, index) => this.getListItem(item, index))}
88 |
89 | );
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/Menu/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, StyleSheet, ViewStyle, ScrollView } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { styleReferenceBreaker } from '../../helpers';
5 | import { MenuItem, MenuItemProps } from '../MenuItem';
6 |
7 | /** Props for Menu component */
8 | export type MenuProps = {
9 | /** Items to render in the menu */
10 | items: MenuItemProps[];
11 | /** Height in pixels to max out the menu (defaults to 280) */
12 | maxMenuHeight?: number;
13 | /** Style to set on the item */
14 | style?: StyleProp;
15 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
16 | componentProps?: ViewProps;
17 | };
18 |
19 | /**
20 | * Menu component for rendering a menu (list of clickable options)
21 | *
22 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Menu.tsx | Example code}
23 | */
24 |
25 | export class Menu extends React.Component {
26 | private get styles() {
27 | const { maxMenuHeight } = this.props;
28 |
29 | return StyleSheet.create({
30 | wrapper: {
31 | maxHeight: maxMenuHeight || 280,
32 | backgroundColor: getColor('layer01'),
33 | },
34 | });
35 | }
36 |
37 | render(): React.ReactNode {
38 | const { items, componentProps, style } = this.props;
39 | const finalItems = items || [];
40 |
41 | return (
42 |
43 | {finalItems.map((item, index) => (
44 |
45 | ))}
46 |
47 | );
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/NavigationList/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, ViewStyle, View } from 'react-native';
3 | import { NavigationListItem, NavigationListItemProps } from '../NavigationListItem';
4 |
5 | /** Props for NavigationList component */
6 | export type NavigationListProps = {
7 | /** Items to render in the navigation list */
8 | items: NavigationListItemProps[];
9 | /** Style to set on the item */
10 | style?: StyleProp;
11 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
12 | componentProps?: ViewProps;
13 | };
14 |
15 | /**
16 | * NavigationList component for rendering a list of navigation items
17 | *
18 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/NavigationList.tsx | Example code}
19 | */
20 | export class NavigationList extends React.Component {
21 | render(): React.ReactNode {
22 | const { items, componentProps, style } = this.props;
23 | const allItems = items || [];
24 |
25 | return (
26 |
27 | {allItems.map((item, index) => (
28 |
29 | ))}
30 |
31 | );
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/NumberInput/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTextInput } from '../BaseTextInputs';
3 | import { TextInputProps } from '../../types/shared';
4 |
5 | /**
6 | * NumberInput component for rendering an input for numbers with increment/decrement
7 | *
8 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/NumberInput.tsx | Example code}
9 | */
10 | export class NumberInput extends React.Component {
11 | render(): React.ReactNode {
12 | return ;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/Overlay/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { styleReferenceBreaker } from '../../helpers';
5 |
6 | /** Props for Overlay component */
7 | export type OverlayProps = {
8 | /** Style to set on the item */
9 | style?: StyleProp;
10 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
11 | componentProps?: ViewProps;
12 | };
13 |
14 | /**
15 | * Overlay component for rendering overlay under floating items or menus
16 | *
17 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Overlay.tsx | Example code}
18 | */
19 | export class Overlay extends React.Component {
20 | private get styles() {
21 | return StyleSheet.create({
22 | wrapper: {
23 | backgroundColor: getColor('overlay'),
24 | width: '100%',
25 | height: '100%',
26 | },
27 | });
28 | }
29 |
30 | render(): React.ReactNode {
31 | const { componentProps, style } = this.props;
32 |
33 | return ;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/Pagination/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Pressable, ScrollView, StyleProp, StyleSheet, ViewProps, ViewStyle, PressableStateCallbackType } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
5 | import { defaultText } from '../../constants/defaultText';
6 | import CircleIcon from '@carbon/icons/es/circle--solid/20';
7 |
8 | /** Props for Pagination component */
9 | export type PaginationProps = {
10 | /** Number of pages */
11 | totalPages: number;
12 | /** Current page (1 - totalPages) */
13 | currentPage: number;
14 | /** Text to use for pagination wrapper (accessibility). Defaults to ENGLISH "Pagination" */
15 | paginationText?: string;
16 | /** Callback when page changes */
17 | onPageChange: (page: number) => void;
18 | /** Style to set on the item */
19 | style?: StyleProp;
20 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
21 | componentProps?: ViewProps;
22 | };
23 |
24 | /**
25 | * Pagination component for rendering a pagination menu
26 | *
27 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Pagination.tsx | Example code}
28 | */
29 |
30 | export class Pagination extends React.Component {
31 | private get styles() {
32 | return StyleSheet.create({
33 | wrapper: {
34 | width: '100%',
35 | flexDirection: 'column',
36 | },
37 | wrapperContent: {
38 | marginRight: 'auto',
39 | marginLeft: 'auto',
40 | },
41 | item: {
42 | padding: 8,
43 | paddingLeft: 4,
44 | paddingRight: 4,
45 | },
46 | });
47 | }
48 |
49 | private changePage = (page: number): void => {
50 | const { onPageChange } = this.props;
51 |
52 | if (typeof onPageChange === 'function') {
53 | onPageChange(page);
54 | }
55 | };
56 |
57 | private getPageItem(index: number): React.ReactNode {
58 | const { currentPage } = this.props;
59 | const page = index + 1;
60 |
61 | const getStateStyle = (state: PressableStateCallbackType): StyleProp => {
62 | return state.pressed ? { backgroundColor: getColor('layerActive01') } : undefined;
63 | };
64 |
65 | return (
66 | pressableFeedbackStyle(state, this.styles.item, getStateStyle)} key={index} onPress={() => this.changePage(page)} accessibilityLabel={String(page)}>
67 | {createIcon(CircleIcon, 8, 8, currentPage === page ? getColor('buttonTertiary') : getColor('iconOnColorDisabled'))}
68 |
69 | );
70 | }
71 |
72 | render(): React.ReactNode {
73 | const { componentProps, style, paginationText, totalPages } = this.props;
74 | const elements: React.ReactNode[] = [];
75 |
76 | for (let i = 0; i < totalPages; i++) {
77 | elements.push(this.getPageItem(i));
78 | }
79 |
80 | return (
81 |
82 | {elements.map((item) => item)}
83 |
84 | );
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/PasswordInput/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTextInput } from '../BaseTextInputs';
3 | import { TextInputProps } from '../../types/shared';
4 |
5 | /**
6 | * PasswordInput component for rendering an input field for passwords with toggle to view
7 | *
8 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/PasswordInput.tsx | Example code}
9 | */
10 |
11 | export class PasswordInput extends React.Component {
12 | render(): React.ReactNode {
13 | return ;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/RadioButton/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { GestureResponderEvent, Pressable, StyleProp, StyleSheet, TextStyle, View } from 'react-native';
3 | import { defaultText } from '../../constants/defaultText';
4 | import { createIcon, styleReferenceBreaker } from '../../helpers';
5 | import { getColor } from '../../styles/colors';
6 | import { Text } from '../Text';
7 | import RadioButtonIcon from '@carbon/icons/es/radio-button/20';
8 | import RadioButtonCheckedIcon from '@carbon/icons/es/radio-button--checked/20';
9 | import { checkboxRadioBaseStyle, CheckboxRadioProps } from '../Checkbox';
10 |
11 | /**
12 | * RadioButton component for rendering a radio button
13 | *
14 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/RadioButton.tsx | Example code}
15 | */
16 | export class RadioButton extends React.Component {
17 | private get styles() {
18 | return StyleSheet.create({
19 | wrapper: checkboxRadioBaseStyle,
20 | });
21 | }
22 |
23 | private get textStyle(): StyleProp {
24 | const { disabled } = this.props;
25 |
26 | const finalStyle: TextStyle = {
27 | color: getColor(disabled ? 'textDisabled' : 'textPrimary'),
28 | marginLeft: 8,
29 | lineHeight: 20,
30 | };
31 |
32 | return finalStyle;
33 | }
34 |
35 | private get radioButton(): React.ReactNode {
36 | const { checked, disabled } = this.props;
37 | const color = disabled ? getColor('iconDisabled') : getColor('iconPrimary');
38 |
39 | return {checked ? createIcon(RadioButtonCheckedIcon, 20, 20, color) : createIcon(RadioButtonIcon, 20, 20, color)};
40 | }
41 |
42 | private onPress = (event: GestureResponderEvent): void => {
43 | const { onPress, checked, id } = this.props;
44 |
45 | if (typeof onPress === 'function') {
46 | onPress(!checked, id, event);
47 | }
48 | };
49 |
50 | private onLongPress = (event: GestureResponderEvent): void => {
51 | const { onLongPress, id } = this.props;
52 |
53 | if (typeof onLongPress === 'function') {
54 | onLongPress(id, event);
55 | }
56 | };
57 |
58 | render(): React.ReactNode {
59 | const { disabled, componentProps, label, accessibleText, hideLabel, style } = this.props;
60 |
61 | return (
62 |
63 | {this.radioButton}
64 | {!hideLabel && }
65 |
66 | );
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/components/SafeAreaWrapper/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, SafeAreaView, ViewStyle, Platform, AccessibilityRole } from 'react-native';
3 | import { SafeAreaView as ContextSafeAreaView } from 'react-native-safe-area-context';
4 |
5 | export type SafeAreaWrapperProps = {
6 | style?: StyleProp;
7 | accessibilityRole?: AccessibilityRole;
8 | children?: React.ReactNode;
9 | }
10 |
11 | export class SafeAreaWrapper extends React.Component {
12 | render() {
13 | return Platform.OS === 'ios' ? : ;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/TextArea/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTextInput } from '../BaseTextInputs';
3 | import { TextInputProps } from '../../types/shared';
4 |
5 | /**
6 | * TextArea component for rendering a text area (large text input block with newline support)
7 | *
8 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TextArea.tsx | Example code}
9 | */
10 | export class TextArea extends React.Component {
11 | render(): React.ReactNode {
12 | return ;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/TextInput/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { BaseTextInput } from '../BaseTextInputs';
3 | import { TextInputProps } from '../../types/shared';
4 |
5 | /**
6 | * TextInput component for rendering text input box
7 | *
8 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/TextInput.tsx | Example code}
9 | */
10 | export class TextInput extends React.Component {
11 | render(): React.ReactNode {
12 | return ;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/Tile/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleProp, StyleSheet, ViewStyle, ScrollView, View, GestureResponderEvent, Pressable, PressableStateCallbackType } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
5 | import { defaultText } from '../../constants/defaultText';
6 |
7 | /** Props for Tile component */
8 | export type TileProps = {
9 | /** Type of tile */
10 | type?: 'default' | 'scroll' | 'clickable';
11 | /** onPress event for clickable tile */
12 | onPress?: (event: GestureResponderEvent) => void;
13 | /** onLongPress event for clickable tile */
14 | onLongPress?: (event: GestureResponderEvent) => void;
15 | /** Style to set on the item */
16 | style?: StyleProp;
17 | /** Text to use for tile clickable (accessibility). Defaults to ENGLISH "Tile" */
18 | tileText?: string;
19 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
20 | componentProps?: ViewProps;
21 | /** Children to render */
22 | children?: React.ReactNode;
23 | };
24 |
25 | /**
26 | * Tile component for rendering a carbon tile
27 | *
28 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tile.tsx | Example code}
29 | */
30 | export class Tile extends React.Component {
31 | private get styles() {
32 | return StyleSheet.create({
33 | wrapper: {
34 | minHeight: 64,
35 | minWidth: 128,
36 | backgroundColor: getColor('layer01'),
37 | padding: 16,
38 | },
39 | scrollContent: {
40 | padding: 16,
41 | },
42 | });
43 | }
44 |
45 | private getStateStyle = (state: PressableStateCallbackType): StyleProp => {
46 | return state.pressed ? { backgroundColor: getColor('layerActive01') } : undefined;
47 | };
48 |
49 | render(): React.ReactNode {
50 | const { children, componentProps, style, type, onPress, onLongPress, tileText } = this.props;
51 | const finalStyles = styleReferenceBreaker(this.styles.wrapper, style);
52 |
53 | switch (type) {
54 | case 'scroll':
55 | finalStyles.padding = undefined;
56 | return (
57 |
58 | {children}
59 |
60 | );
61 | case 'clickable':
62 | return (
63 | pressableFeedbackStyle(state, finalStyles, this.getStateStyle)} {...(componentProps || {})}>
64 | {children}
65 |
66 | );
67 | case 'default':
68 | default:
69 | return (
70 |
71 | {children}
72 |
73 | );
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/components/Toggle/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { StyleProp, StyleSheet, Switch, SwitchProps, View, ViewStyle } from 'react-native';
3 | import { getColor } from '../../styles/colors';
4 | import { styleReferenceBreaker } from '../../helpers';
5 | import { getTextInputStyle } from '../BaseTextInputs';
6 | import { Text } from '../Text';
7 |
8 | /** Props for Toggle component */
9 | export type ToggleProps = {
10 | /** Text to render */
11 | label: string;
12 | /** Helper text to render */
13 | helperText?: string;
14 | /** Indicate if toggled */
15 | toggled: boolean;
16 | /** Indicate if disabled */
17 | disabled?: boolean;
18 | /** Indicate if label should be hidden (label is used for accessibility even when hidden) */
19 | hideLabel?: boolean;
20 | /** Selected label text (if not set will not show) */
21 | selectedLabelText?: {
22 | on: string;
23 | off: string;
24 | };
25 | /** onPress event returns the current value */
26 | onChange: (value: boolean) => void;
27 | /** Style to set on the item */
28 | style?: StyleProp;
29 | /** Style to set on the toggle wrapper itself */
30 | toggleWrapperStyle?: StyleProp;
31 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
32 | componentProps?: SwitchProps;
33 | };
34 |
35 | /**
36 | * Toggle component for rendering a boolean toggle switch
37 | * This component utilizes Native Switch from iOS and Android.
38 | * It is styled to be similar to Carbon.
39 | * But relies on the final styling from the OS.
40 | *
41 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Toggle.tsx | Example code}
42 | */
43 | export class Toggle extends React.Component {
44 | private get styles() {
45 | return StyleSheet.create({
46 | wrapper: {
47 | paddingTop: 22,
48 | },
49 | switchWrapper: {
50 | flexDirection: 'row',
51 | paddingTop: 4,
52 | },
53 | selectedText: {
54 | marginLeft: 8,
55 | marginTop: 4,
56 | },
57 | });
58 | }
59 |
60 | private get textInputStyles() {
61 | return getTextInputStyle();
62 | }
63 |
64 | private get trackColor(): { false: string; true: string } {
65 | return {
66 | false: getColor('toggleOff'),
67 | true: getColor('supportSuccess'),
68 | };
69 | }
70 |
71 | private onChange = (value: boolean): void => {
72 | const { onChange } = this.props;
73 |
74 | if (typeof onChange === 'function') {
75 | onChange(value);
76 | }
77 | };
78 |
79 | render(): React.ReactNode {
80 | const { disabled, componentProps, hideLabel, label, helperText, style, selectedLabelText, toggled, toggleWrapperStyle } = this.props;
81 |
82 | return (
83 |
84 | {!!(label && !hideLabel) && }
85 |
86 |
87 | {!!selectedLabelText && }
88 |
89 | {!!helperText && }
90 |
91 | );
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/components/ViewWrapper/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ViewProps, StyleSheet, StatusBar, View } from 'react-native';
3 | import { getColor, useDarkMode } from '../../styles/colors';
4 | import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
5 | import { SafeAreaWrapper } from '../SafeAreaWrapper';
6 |
7 | /** Props for ViewWrapper component */
8 | export type ViewWrapperProps = {
9 | /** Children to load */
10 | children?: React.ReactNode;
11 | /** Indicate if top navigation is in use (TopNavigationBar) */
12 | hasTopNavigation?: boolean;
13 | /** Indicate if bottom navigation is in use (BottomNavigationBar or any BottomToolbar) */
14 | hasBottomNavigation?: boolean;
15 | /** Override top background (for custom uses) */
16 | topBackgroundColor?: string;
17 | /** Override bottom background (for custom uses) */
18 | bottomBackgroundColor?: string;
19 | /** Override default status bar style (for dark backgrounds use 'light-content' and for light background use 'dark-content'). Will rely on useDarkMode otherwise */
20 | statusBarStyle?: 'light-content' | 'dark-content';
21 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
22 | componentProps?: ViewProps;
23 | };
24 |
25 | /**
26 | * The ViewWrapper component provides a unified way to load main views without worrying about StatusBar or safe zone stylings.
27 | * For most usages simply indicate if you are using Navigation for top and bottom.
28 | * For Layout views that are full screen (Landing for example) you do not need to wrap them in this.
29 | *
30 | * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ViewWrapper.tsx | Example code}
31 | */
32 | export class ViewWrapper extends React.Component {
33 | private get topColor(): string {
34 | const { topBackgroundColor, hasTopNavigation } = this.props;
35 |
36 | if (topBackgroundColor) {
37 | return topBackgroundColor;
38 | } else if (hasTopNavigation) {
39 | return getColor('layer01');
40 | }
41 |
42 | return getColor('background');
43 | }
44 |
45 | private get bottomColor(): string {
46 | const { bottomBackgroundColor, hasBottomNavigation } = this.props;
47 |
48 | if (bottomBackgroundColor) {
49 | return bottomBackgroundColor;
50 | } else if (hasBottomNavigation) {
51 | return getColor('layer01');
52 | }
53 |
54 | return getColor('background');
55 | }
56 |
57 | private get needsBottomCover(): boolean {
58 | return this.topColor !== this.bottomColor;
59 | }
60 |
61 | private get styles() {
62 | return StyleSheet.create({
63 | wrapper: {
64 | backgroundColor: this.topColor,
65 | flexGrow: 1,
66 | position: 'relative',
67 | },
68 | safeWrapper: {
69 | flexGrow: 1,
70 | },
71 | childrenWrapper: {
72 | flexGrow: 1,
73 | backgroundColor: getColor('background'),
74 | },
75 | });
76 | }
77 |
78 | render(): React.ReactNode {
79 | const { children, componentProps, statusBarStyle } = this.props;
80 |
81 | return (
82 |
83 | {this.needsBottomCover && }
84 |
85 |
86 | {children}
87 |
88 |
89 | );
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/constants/constants.ts:
--------------------------------------------------------------------------------
1 | /** The modal presentations to support for iOS */
2 | export const modalPresentations: Array<'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right'> = ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'];
3 |
--------------------------------------------------------------------------------
/src/constants/defaultText.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Default text strings used in the app.
3 | * This is mostly for accessibility strings.
4 | * All places should support input from consumer to set to other items for translations.
5 | */
6 | export const defaultText = {
7 | passwordRevealButton: 'Show/hide password',
8 | checkbox: 'Checkbox',
9 | radioButton: 'Radio button',
10 | slider: 'Slider',
11 | tile: 'Tile',
12 | loading: 'Loading',
13 | deleteFile: 'Delete',
14 | close: 'Close',
15 | pagination: 'Pagination',
16 | clear: 'Clear',
17 | search: 'Search',
18 | done: 'Done',
19 | incrementNumber: 'Increment',
20 | decrementNumber: 'Decrement',
21 | };
22 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | // Component exports
2 | export * from './components/Button';
3 | export * from './components/Text';
4 | export * from './components/WebHeader';
5 | export * from './components/LandingView';
6 | export * from './components/Link';
7 | export * from './components/InlineLink';
8 | export * from './components/TextInput';
9 | export * from './components/TextArea';
10 | export * from './components/PasswordInput';
11 | export * from './components/Checkbox';
12 | export * from './components/RadioButton';
13 | export * from './components/Toggle';
14 | export * from './components/Loading';
15 | export * from './components/FileUploaderItem';
16 | export * from './components/NumberInput';
17 | export * from './components/Menu';
18 | export * from './components/MenuItem';
19 | export * from './components/BottomNavigationBar';
20 | export * from './components/TopNavigationBar';
21 | export * from './components/TopNavigationBarLogin';
22 | export * from './components/NavigationListItem';
23 | export * from './components/NavigationList';
24 | export * from './components/BottomToolbar';
25 | export * from './components/ErrorState';
26 | export * from './components/DocumentViewer';
27 | export * from './components/AcceptTerms';
28 | export * from './components/ViewWrapper';
29 | export * from './components/GrantPermission';
30 | export * from './components/BottomToolbarPrimaryAction';
31 | export * from './components/Search';
32 | export * from './components/Tile';
33 | export * from './components/Dropdown';
34 | export * from './components/ActionSheet';
35 | export * from './components/Modal';
36 | export * from './components/Accordion';
37 | export * from './components/Tag';
38 | export * from './components/Notification';
39 | export * from './components/ContentSwitcher';
40 | export * from './components/Tabs';
41 | export * from './components/ProgressIndicator';
42 | export * from './components/List';
43 | export * from './components/Overlay';
44 | export * from './components/Pagination';
45 | export * from './components/DataTable';
46 | export * from './components/UiPanel';
47 | export * from './components/UiPanelItem';
48 | export * from './components/Tooltip';
49 | export * from './components/DateInput';
50 | export * from './components/Slider';
51 | export * from './components/FormItem';
52 | export * from './components/SafeAreaWrapper';
53 |
54 | // Style exports
55 | export * from './styles/colors';
56 | export * from './styles/typography';
57 |
58 | // Helper exports
59 | export * from './helpers';
60 |
61 | // Constant exports
62 | export * from './constants/defaultText';
63 | export * from './constants/constants';
64 |
65 | // Type exports
66 | export * from './types/shared';
67 | export * from './types/navigation';
68 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@carbon/themes/*';
2 | declare module '@carbon/icons/*';
3 | declare module '@carbon/icon-helpers';
4 |
--------------------------------------------------------------------------------
/src/styles/z-index.ts:
--------------------------------------------------------------------------------
1 | /** Basic z-indexes to use for different use cases */
2 | export const zIndexes = {
3 | behind: -1,
4 | base: 1,
5 | baseOver: 2,
6 | document: 10,
7 | modal: 100,
8 | dropdown: 200,
9 | actionSheet: 500,
10 | permissions: 600,
11 | };
12 |
--------------------------------------------------------------------------------
/src/types/navigation.ts:
--------------------------------------------------------------------------------
1 | import type { GestureResponderEvent, StyleProp, ViewStyle, PressableProps } from 'react-native';
2 | import type { TextTypes } from '../components/Text';
3 | import type { CarbonIcon } from './shared';
4 |
5 | /**
6 | * Represents a navigation button for all navigation components and flows.
7 | */
8 | export type NavigationButton = {
9 | /** Text to use for label of navigation item */
10 | text: string;
11 | /** Icon to use for navigation item (size 20) */
12 | icon: CarbonIcon;
13 | /** Indicate if navigatioin item is active */
14 | active?: boolean;
15 | /** Indicate if navigation item is disabled */
16 | disabled?: boolean;
17 | /** onPress event for navigation item */
18 | onPress?: (event: GestureResponderEvent) => void;
19 | /** onLongPress event for navigation item */
20 | onLongPress?: (event: GestureResponderEvent) => void;
21 | /** Style to set on the item */
22 | style?: StyleProp;
23 | /** Direct props to set on the React Native component (including iOS and Android specific props). Most use cases should not need this. */
24 | componentProps?: PressableProps;
25 | };
26 |
27 | /**
28 | * Represents a toolbar button for all navigation components and flows.
29 | */
30 | export type ToolbarButton = {
31 | /** Text to use for label of toolbar item. When used with icon is not shown and used for accessibility only. */
32 | text: string;
33 | /** Icon to use for toolbar item (size 20) */
34 | icon?: CarbonIcon;
35 | /** Indicate if toolbar item is disabled */
36 | disabled?: boolean;
37 | /** Alignment (defaults to center) */
38 | alignItem?: 'left' | 'right' | 'center';
39 | /** Text type to render (Standard is default) */
40 | textType?: TextTypes;
41 | /** onPress event for toolbar item */
42 | onPress?: (event: GestureResponderEvent) => void;
43 | /** onLongPress event for toolbar item */
44 | onLongPress?: (event: GestureResponderEvent) => void;
45 | /** Style to set on the item */
46 | style?: StyleProp;
47 | };
48 |
--------------------------------------------------------------------------------
/src/types/shared.ts:
--------------------------------------------------------------------------------
1 | import { LinkProps } from '../components/Link';
2 | import { TextBreakModes } from '../components/Text';
3 | import { NativeSyntheticEvent, TextInputProps as ReactTextInputProps, StyleProp, TextInputFocusEventData, ViewStyle, TextStyle } from 'react-native';
4 |
5 | /**
6 | * Icon type to pass to components that take icon directly.
7 | * Icon should not use createIcon. Pass directly from import
8 | * `import AddIcon from '@carbon/icons/es/add/20';` for example
9 | * */
10 | export type CarbonIcon = unknown;
11 |
12 | /** Basic text input types */
13 | export type BaseTextInputTypes = 'text' | 'text-area' | 'password' | 'number' | 'date';
14 |
15 | /** Basic style handling for style prop and raw style */
16 | export type StylePassing = StyleProp|ViewStyle|TextStyle;
17 |
18 | /** Shared props for Text, Password and TextArea */
19 | export type TextInputProps = {
20 | /** Value of text (Controlled component) */
21 | value: string;
22 | /** Label string to use */
23 | label?: string;
24 | /** Helper string to use */
25 | helperText?: string;
26 | /** Check is invalid */
27 | isInvalid?: (value: string) => boolean;
28 | /** Error string to use. Set custom rules or return required text */
29 | getErrorText?: (value: string) => string;
30 | /** Warning string to use. This will show if NOT in error. */
31 | warningText?: string;
32 | /** Placeholder text to use */
33 | placeholder?: string;
34 | /** Indicate if required */
35 | required?: boolean;
36 | /** Indicate if disabled */
37 | disabled?: boolean;
38 | /** Label break mode */
39 | labelBreakMode?: TextBreakModes;
40 | /** Change event when text changed */
41 | onChangeText: (value: string) => void;
42 | /** Blur event when focus is lost */
43 | onBlur?: (event: NativeSyntheticEvent) => void;
44 | /** Focus event when focus is gained */
45 | onFocus?: (event: NativeSyntheticEvent) => void;
46 | /** Indicate if autoCorrect should be used (default is true) */
47 | autoCorrect?: boolean;
48 | /** Define auto cap rule (default is normally sentences) */
49 | autoCapitalize?: 'characters' | 'words' | 'sentences' | 'none';
50 | /** Trigger ENTER event (consumer should validate if form is valid and submit if this is called) */
51 | onSubmitEditing?: () => void;
52 | /** Indicate if should be secured (password) */
53 | secureTextEntry?: boolean;
54 | /** Max length of field */
55 | maxLength?: number;
56 | /** Indicate if text box is used on layer */
57 | light?: boolean;
58 | /** minHeight for text area */
59 | textAreaMinHeight?: number;
60 | /** @remarks password only. Text to use for toggle password button (accessibility). Defaults to ENGLISH "Show/hide password" */
61 | togglePasswordText?: string;
62 | /** @remarks number only. Text to use for increment number button (accessibility). Defaults to ENGLISH "Increment" */
63 | incrementNumberText?: string;
64 | /** @remarks number only. Text to use for decrement number button (accessibility). Defaults to ENGLISH "Decrement" */
65 | decrementNumberText?: string;
66 | /** @remarks number only. Min and Max for numbers. If not set any number (including negative is valid) */
67 | numberRules?: {
68 | min?: number;
69 | max?: number;
70 | };
71 | /** Link to render to right of label */
72 | labelLink?: LinkProps;
73 | /** Style to set on the item */
74 | style?: StyleProp;
75 | /** Direct props to set on the React Native component (including iOS and Android specific props). Helpful for fully customizing text input behavior. */
76 | componentProps?: ReactTextInputProps;
77 | };
78 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "./tsconfig",
4 | "exclude": ["example"]
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "./",
4 | "paths": {
5 | "@carbon/react-native": ["src/index"]
6 | },
7 | "allowUnreachableCode": false,
8 | "allowUnusedLabels": false,
9 | "esModuleInterop": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "jsx": "react",
12 | "lib": ["esnext"],
13 | "module": "esnext",
14 | "moduleResolution": "node",
15 | "noFallthroughCasesInSwitch": true,
16 | "noImplicitReturns": true,
17 | "noImplicitUseStrict": false,
18 | "noStrictGenericChecks": false,
19 | "noUncheckedIndexedAccess": true,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "resolveJsonModule": true,
23 | "skipLibCheck": true,
24 | "strict": true,
25 | "target": "esnext"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": ["src/index.tsx"],
3 | "out": "docs",
4 | "excludePrivate": true,
5 | "excludeNotDocumented": true,
6 | "sourceLinkExternal": true
7 | }
8 |
--------------------------------------------------------------------------------