devendra-skill-package 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/skills/boiler-project-generator/SKILL.md +103 -0
- package/.github/skills/boiler-project-generator/assets/templates/android/README.md +3 -0
- package/.github/skills/boiler-project-generator/assets/templates/angular/README.md +3 -0
- package/.github/skills/boiler-project-generator/assets/templates/flutter/README.md +3 -0
- package/.github/skills/boiler-project-generator/assets/templates/ios/README.md +3 -0
- package/.github/skills/boiler-project-generator/assets/templates/react/README.md +3 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/README.md +3 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/api-setup.ts +76 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/component-primary-button.tsx +29 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/env-config.env +4 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/feature-auth-screen.tsx +45 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/feature-dashboard-screen.tsx +45 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/feature-profile-screen.tsx +45 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/hook-use-app-boot.ts +11 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/navigation-setup.tsx +25 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/project-structure.md +24 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/redux-hooks.ts +5 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/redux-session-slice.ts +29 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/redux-store.ts +15 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/theme-index.ts +23 -0
- package/.github/skills/boiler-project-generator/assets/templates/react-native/utils-helpers.ts +7 -0
- package/.github/skills/boiler-project-generator/metadata.yaml +29 -0
- package/.github/skills/boiler-project-generator/references/android.md +19 -0
- package/.github/skills/boiler-project-generator/references/angular.md +14 -0
- package/.github/skills/boiler-project-generator/references/flutter.md +17 -0
- package/.github/skills/boiler-project-generator/references/ios.md +17 -0
- package/.github/skills/boiler-project-generator/references/react-native.md +103 -0
- package/.github/skills/boiler-project-generator/references/react.md +17 -0
- package/.github/skills/boiler-project-generator/scripts/angular.js +43 -0
- package/.github/skills/boiler-project-generator/scripts/generate-project.mjs +107 -0
- package/.github/skills/boiler-project-generator/scripts/init.js +105 -0
- package/.github/skills/boiler-project-generator/scripts/react-native.js +1041 -0
- package/.github/skills/boiler-project-generator/scripts/react.js +32 -0
- package/.github/skills/clean-architecture-generator/SKILL.md +235 -0
- package/.github/skills/clean-architecture-generator/references/architecture-core.md +126 -0
- package/.github/skills/clean-architecture-generator/references/platform-angular.md +374 -0
- package/.github/skills/clean-architecture-generator/references/platform-flutter.md +366 -0
- package/.github/skills/clean-architecture-generator/references/platform-react-native.md +590 -0
- package/.github/skills/clean-architecture-generator/references/platform-react.md +261 -0
- package/.github/skills/code-test-coverage-analyzer/SKILL.md +1358 -0
- package/.github/skills/code-test-coverage-analyzer/assets/config-questionnaire.md +118 -0
- package/.github/skills/code-test-coverage-analyzer/assets/conflict-resolution-protocol.md +99 -0
- package/.github/skills/code-test-coverage-analyzer/assets/coverage-calculation-rules.md +294 -0
- package/.github/skills/code-test-coverage-analyzer/assets/multi-strategy-search.md +145 -0
- package/.github/skills/code-test-coverage-analyzer/assets/output-file-contracts.md +651 -0
- package/.github/skills/code-test-coverage-analyzer/assets/status-definitions.md +273 -0
- package/.github/skills/code-test-coverage-analyzer/examples/example-invocation.md +208 -0
- package/.github/skills/code-test-coverage-analyzer/references/android-patterns.md +229 -0
- package/.github/skills/code-test-coverage-analyzer/references/angular-patterns.md +177 -0
- package/.github/skills/code-test-coverage-analyzer/references/backend-patterns.md +383 -0
- package/.github/skills/code-test-coverage-analyzer/references/flutter-patterns.md +254 -0
- package/.github/skills/code-test-coverage-analyzer/references/ios-patterns.md +228 -0
- package/.github/skills/code-test-coverage-analyzer/references/react-native-patterns.md +431 -0
- package/.github/skills/code-test-coverage-analyzer/references/react-patterns.md +206 -0
- package/.github/skills/code-test-coverage-analyzer/scripts/detect-platform.ps1 +261 -0
- package/.github/skills/code-test-coverage-analyzer/scripts/scan-repository.ps1 +242 -0
- package/.github/skills/code-test-coverage-analyzer/templates/brd-compliance-row.md +107 -0
- package/.github/skills/code-test-coverage-analyzer/templates/test-case-row.md +130 -0
- package/.github/skills/code-test-coverage-analyzer/templates/user-story-compliance-row.md +170 -0
- package/.github/skills/custom-font-integrator/SKILL.md +373 -0
- package/.github/skills/custom-font-integrator/assets/FontTestScreen.js +150 -0
- package/.github/skills/custom-font-integrator/references/example-info-plist.xml +21 -0
- package/.github/skills/custom-font-integrator/scripts/setup-fonts.sh +99 -0
- package/.github/skills/encryption-decryption-utility/Instructions.md +282 -0
- package/.github/skills/encryption-decryption-utility/README.md +222 -0
- package/.github/skills/encryption-decryption-utility/SKILL.md +645 -0
- package/.github/skills/encryption-decryption-utility/assets/encryption-config-template.json +13 -0
- package/.github/skills/encryption-decryption-utility/assets/platform-matrix.json +180 -0
- package/.github/skills/encryption-decryption-utility/metadata.yaml +51 -0
- package/.github/skills/encryption-decryption-utility/references/android-crypto.md +157 -0
- package/.github/skills/encryption-decryption-utility/references/angular-crypto.md +130 -0
- package/.github/skills/encryption-decryption-utility/references/approach-1-webcrypto.md +95 -0
- package/.github/skills/encryption-decryption-utility/references/approach-2-rsa-aes-cbc.md +111 -0
- package/.github/skills/encryption-decryption-utility/references/approach-3-aes-sharedkey.md +114 -0
- package/.github/skills/encryption-decryption-utility/references/architecture.md +233 -0
- package/.github/skills/encryption-decryption-utility/references/backend-alignment.md +506 -0
- package/.github/skills/encryption-decryption-utility/references/dependency-guidance.md +234 -0
- package/.github/skills/encryption-decryption-utility/references/ec-implementation.md +832 -0
- package/.github/skills/encryption-decryption-utility/references/error-handling-playbook.md +234 -0
- package/.github/skills/encryption-decryption-utility/references/flutter-crypto.md +105 -0
- package/.github/skills/encryption-decryption-utility/references/ios-crypto.md +338 -0
- package/.github/skills/encryption-decryption-utility/references/native-rsa-implementation.md +373 -0
- package/.github/skills/encryption-decryption-utility/references/node-crypto.md +86 -0
- package/.github/skills/encryption-decryption-utility/references/react-crypto.md +105 -0
- package/.github/skills/encryption-decryption-utility/references/react-native-crypto.md +1001 -0
- package/.github/skills/encryption-decryption-utility/references/react-web-crypto.md +668 -0
- package/.github/skills/encryption-decryption-utility/references/security-checklist.md +176 -0
- package/.github/skills/encryption-decryption-utility/references/web-crypto.md +74 -0
- package/.github/skills/encryption-decryption-utility/scripts/detect.js +128 -0
- package/.github/skills/encryption-decryption-utility/scripts/install.js +1713 -0
- package/.github/skills/encryption-decryption-utility/scripts/setup.js +800 -0
- package/.github/skills/encryption-decryption-utility/template.md +241 -0
- package/.github/skills/encryption-decryption-utility/templates/config-questionnaire.md +467 -0
- package/.github/skills/encryption-decryption-utility/templates/delivery-checklist.md +206 -0
- package/.github/skills/encryption-decryption-utility/templates/implementation-plan.md +304 -0
- package/.github/skills/feature-generator/SKILL.MD +2741 -0
- package/.github/skills/feature-generator/assets/fingerprint-schema.json +385 -0
- package/.github/skills/feature-generator/assets/spec-template.md +172 -0
- package/.github/skills/feature-generator/assets/transform-rules.json +82 -0
- package/.github/skills/feature-generator/references/api-envelope-patterns.md +327 -0
- package/.github/skills/feature-generator/references/screen-logic-patterns.md +399 -0
- package/.github/skills/feature-generator/references/state-library-patterns.md +464 -0
- package/.github/skills/figma-ui-mapper/README.md +34 -0
- package/.github/skills/figma-ui-mapper/SKILL.md +101 -0
- package/.github/skills/figma-ui-mapper/assets/templates/component-map-template.md +30 -0
- package/.github/skills/figma-ui-mapper/assets/templates/generation-report-template.md +49 -0
- package/.github/skills/figma-ui-mapper/metadata.yaml +22 -0
- package/.github/skills/figma-ui-mapper/references/android.md +11 -0
- package/.github/skills/figma-ui-mapper/references/angular.md +18 -0
- package/.github/skills/figma-ui-mapper/references/capacitor.md +18 -0
- package/.github/skills/figma-ui-mapper/references/common.md +23 -0
- package/.github/skills/figma-ui-mapper/references/expo.md +18 -0
- package/.github/skills/figma-ui-mapper/references/flutter.md +18 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/angular/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/capacitor/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/expo/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/flutter/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/ionic/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/kotlin-multiplatform/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/native-android/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/native-ios/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/next/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/nuxt/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/react/rules.md +19 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/react-native/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/svelte/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/frameworks/vue/rules.md +23 -0
- package/.github/skills/figma-ui-mapper/references/ionic.md +18 -0
- package/.github/skills/figma-ui-mapper/references/ios.md +11 -0
- package/.github/skills/figma-ui-mapper/references/kotlin-multiplatform.md +18 -0
- package/.github/skills/figma-ui-mapper/references/native-android.md +18 -0
- package/.github/skills/figma-ui-mapper/references/native-ios.md +18 -0
- package/.github/skills/figma-ui-mapper/references/next.md +18 -0
- package/.github/skills/figma-ui-mapper/references/nuxt.md +18 -0
- package/.github/skills/figma-ui-mapper/references/react-figma-guideline.md +21 -0
- package/.github/skills/figma-ui-mapper/references/react-native.md +18 -0
- package/.github/skills/figma-ui-mapper/references/react.md +18 -0
- package/.github/skills/figma-ui-mapper/references/script-usage.md +46 -0
- package/.github/skills/figma-ui-mapper/references/svelte.md +18 -0
- package/.github/skills/figma-ui-mapper/references/vue.md +18 -0
- package/.github/skills/figma-ui-mapper/references/workflow.md +74 -0
- package/.github/skills/figma-ui-mapper/scripts/generate-page-through-figma.js +635 -0
- package/.github/skills/figma-ui-mapper/scripts/generate-react-page-through-figma.js +4 -0
- package/.github/skills/frontend-task-breakdown/SKILL.md +734 -0
- package/.github/skills/md-file-converter/SKILL.md +291 -0
- package/.github/skills/md-file-converter/config/formats.json +114 -0
- package/.github/skills/md-file-converter/extractors/extract-docx.sh +120 -0
- package/.github/skills/md-file-converter/extractors/extract-eml.py +108 -0
- package/.github/skills/md-file-converter/extractors/extract-pdf.sh +97 -0
- package/.github/skills/md-file-converter/extractors/extract-pptx.py +143 -0
- package/.github/skills/md-file-converter/extractors/extract-xlsx.py +175 -0
- package/.github/skills/md-file-converter/scripts/check-tools.sh +47 -0
- package/.github/skills/md-file-converter/scripts/extract-archive.sh +83 -0
- package/.github/skills/md-file-converter/scripts/extract-ocr.sh +77 -0
- package/.github/skills/md-file-converter/scripts/get-metadata.sh +57 -0
- package/.github/skills/md-file-converter/templates/output.md +73 -0
- package/.github/skills/md-file-converter/templates/unsupported-object.md +6 -0
- package/.github/skills/mockAPI-contract-generator/SKILL.md +607 -0
- package/.github/skills/test-case-validator/CHANGELOG.md +155 -0
- package/.github/skills/test-case-validator/CONFIGURATION.md +130 -0
- package/.github/skills/test-case-validator/EXAMPLES.md +50 -0
- package/.github/skills/test-case-validator/QUALITY_SCORING.md +98 -0
- package/.github/skills/test-case-validator/README.md +111 -0
- package/.github/skills/test-case-validator/REPORT_TEMPLATE.md +116 -0
- package/.github/skills/test-case-validator/SKILL.md +209 -0
- package/.github/skills/test-case-validator/SYSTEM_PROMPT.md +127 -0
- package/.github/skills/test-case-validator/TRACEABILITY_ENGINE.md +152 -0
- package/.github/skills/test-case-validator/VALIDATION_RULES.md +411 -0
- package/.github/skills/test-case-validator/config/default.config.yaml +62 -0
- package/.github/skills/test-case-validator/docs/ARCHITECTURE.md +66 -0
- package/.github/skills/test-case-validator/docs/EXTENDING.md +85 -0
- package/.github/skills/test-case-validator/docs/FAQ.md +88 -0
- package/.github/skills/test-case-validator/docs/VERSIONING.md +55 -0
- package/.github/skills/test-case-validator/examples/example-1-manual-qa-ecommerce/input-brd.md +43 -0
- package/.github/skills/test-case-validator/examples/example-1-manual-qa-ecommerce/input-test-cases.csv +9 -0
- package/.github/skills/test-case-validator/examples/example-1-manual-qa-ecommerce/input-user-story.md +29 -0
- package/.github/skills/test-case-validator/examples/example-1-manual-qa-ecommerce/output-report.md +303 -0
- package/.github/skills/test-case-validator/examples/example-2-automated-frontend-suite/input-spec.md +43 -0
- package/.github/skills/test-case-validator/examples/example-2-automated-frontend-suite/input-test-files-index.md +56 -0
- package/.github/skills/test-case-validator/examples/example-2-automated-frontend-suite/output-report.md +274 -0
- package/.github/skills/test-case-validator/prompts/00-applicability-resolution.md +61 -0
- package/.github/skills/test-case-validator/prompts/01-extraction-user-story.md +58 -0
- package/.github/skills/test-case-validator/prompts/02-extraction-brd.md +64 -0
- package/.github/skills/test-case-validator/prompts/03-extraction-test-cases.md +92 -0
- package/.github/skills/test-case-validator/prompts/04-traceability-matrix.md +41 -0
- package/.github/skills/test-case-validator/prompts/05-coverage-analysis.md +46 -0
- package/.github/skills/test-case-validator/prompts/06-missing-scenario-detection.md +32 -0
- package/.github/skills/test-case-validator/prompts/07-duplicate-detection.md +36 -0
- package/.github/skills/test-case-validator/prompts/08-risk-analysis.md +39 -0
- package/.github/skills/test-case-validator/prompts/09-gated-wiring-validation.md +53 -0
- package/.github/skills/test-case-validator/prompts/10-observation-report.md +56 -0
- package/.github/skills/test-case-validator/prompts/11-final-report-assembly.md +57 -0
- package/.github/skills/test-case-validator/templates/coverage-table.md +25 -0
- package/.github/skills/test-case-validator/templates/executive-summary.md +38 -0
- package/.github/skills/test-case-validator/templates/final-summary-block.md +87 -0
- package/.github/skills/test-case-validator/templates/observation-entry.md +41 -0
- package/.github/skills/test-case-validator/templates/rtm-row.md +25 -0
- package/.github/skills/validation-engine-builder/README.md +50 -0
- package/.github/skills/validation-engine-builder/SKILL.md +241 -0
- package/.github/skills/validation-engine-builder/references/core.md +158 -0
- package/.github/skills/validation-engine-builder/references/platform-angular.md +166 -0
- package/.github/skills/validation-engine-builder/references/platform-flutter.md +118 -0
- package/.github/skills/validation-engine-builder/references/platform-react-native.md +170 -0
- package/.github/skills/validation-engine-builder/references/platform-react.md +94 -0
- package/.github/skills/validation-engine-builder/scripts/apply-to-project.js +80 -0
- package/.github/skills/validation-engine-builder/scripts/generate-angular.js +271 -0
- package/.github/skills/validation-engine-builder/scripts/generate-flutter.js +298 -0
- package/.github/skills/validation-engine-builder/scripts/generate-react-native.js +217 -0
- package/.github/skills/validation-engine-builder/scripts/generate-react.js +163 -0
- package/.github/skills/validation-engine-builder/scripts/install-deps.js +53 -0
- package/.github/skills/validation-engine-builder/scripts/shared/detect-platform.js +68 -0
- package/.github/skills/validation-engine-builder/scripts/shared/npm-deps.js +103 -0
- package/.github/skills/validation-engine-builder/scripts/shared/rhf-hook.js +43 -0
- package/.github/skills/validation-engine-builder/scripts/shared/ts-messages-regex.js +62 -0
- package/.github/skills/validation-engine-builder/scripts/shared/util.js +44 -0
- package/.github/skills/validation-engine-builder/scripts/shared/yup-schemas.js +80 -0
- package/.github/skills/validation-engine-builder/template.md +73 -0
- package/.github/skills/validation-engine-builder/templates/messages.json +22 -0
- package/.github/skills/validation-engine-builder/templates/regex.json +16 -0
- package/.github/skills/validation-engine-builder/templates/schemas.json +48 -0
- package/bin/index.js +145 -0
- package/package.json +22 -0
- package/readme.md +0 -0
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
# Test Case Row Template
|
|
2
|
+
|
|
3
|
+
Use this template for each test case entry in `04_TEST_CASE_COMPLIANCE.md`.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Test Case Block Template
|
|
8
|
+
|
|
9
|
+
```markdown
|
|
10
|
+
### TC-{ID} — {Scenario Name}
|
|
11
|
+
|
|
12
|
+
**Type**: Functional | Validation | Navigation | API | Business Logic | Edge Case | Negative
|
|
13
|
+
**Related Story**: {US-ID or "None"}
|
|
14
|
+
**Related BRD**: {BRD-ID or "None"}
|
|
15
|
+
**Verdict**: PASS | PARTIAL_PASS | FAIL | NOT_IMPLEMENTED | BLOCKED | UNKNOWN
|
|
16
|
+
**Confidence**: HIGH | MEDIUM | LOW
|
|
17
|
+
|
|
18
|
+
#### Test Steps vs Implementation
|
|
19
|
+
|
|
20
|
+
| # | Test Step | Expected Outcome | Actual Implementation | Step Status |
|
|
21
|
+
|---|-----------|-----------------|----------------------|-------------|
|
|
22
|
+
| 1 | {action from TC} | {expected from TC} | {what code actually does, with file ref} | PASS / FAIL |
|
|
23
|
+
| 2 | | | | |
|
|
24
|
+
...
|
|
25
|
+
|
|
26
|
+
#### Evidence Files
|
|
27
|
+
- `{file path}` — {why this file is evidence}
|
|
28
|
+
- `{file path}` — {why this file is evidence}
|
|
29
|
+
|
|
30
|
+
#### Verdict Reason
|
|
31
|
+
{Specific reason for the verdict — must be precise, not vague.}
|
|
32
|
+
|
|
33
|
+
#### Recommendation
|
|
34
|
+
{What must change to make this test pass, or "No action required."}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Verdict Decision Rules
|
|
40
|
+
|
|
41
|
+
### PASS
|
|
42
|
+
ALL of the following are true:
|
|
43
|
+
- Every test step can be traced to implementing code
|
|
44
|
+
- The expected outcome matches what the code produces
|
|
45
|
+
- No test step fails
|
|
46
|
+
|
|
47
|
+
### PARTIAL_PASS
|
|
48
|
+
- Most steps pass
|
|
49
|
+
- At least one step fails (wrong message, wrong navigation, missing state)
|
|
50
|
+
- The feature fundamentally exists but has gaps
|
|
51
|
+
|
|
52
|
+
### FAIL
|
|
53
|
+
- The feature exists but the implementation actively produces the wrong behavior
|
|
54
|
+
- The expected result is demonstrably NOT what the code produces
|
|
55
|
+
|
|
56
|
+
### NOT_IMPLEMENTED
|
|
57
|
+
- A required screen, API endpoint, or core feature referenced in the test steps does not exist
|
|
58
|
+
- The test cannot even start
|
|
59
|
+
|
|
60
|
+
### BLOCKED
|
|
61
|
+
- The test case itself is valid
|
|
62
|
+
- It depends on another feature/screen/API that is MISSING
|
|
63
|
+
- Name the blocker explicitly: "Blocked by: {missing feature, MISS-n}"
|
|
64
|
+
|
|
65
|
+
### UNKNOWN
|
|
66
|
+
- Searched extensively but cannot determine from static code analysis
|
|
67
|
+
- Code is generated, obfuscated, or behind a runtime flag
|
|
68
|
+
- State explicitly what was searched and why conclusion is not possible
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## "Actual Implementation" Column Rules
|
|
73
|
+
|
|
74
|
+
Write what the CODE DOES, not what the file is named.
|
|
75
|
+
|
|
76
|
+
Wrong: "LoginScreen.tsx exists"
|
|
77
|
+
Correct: "LoginScreen.tsx — handleSubmit() calls POST /auth/login with {mobile, pin} payload, stores JWT in AsyncStorage, navigates to Dashboard on 200 response"
|
|
78
|
+
|
|
79
|
+
Wrong: "Validation file exists"
|
|
80
|
+
Correct: "LoginSchema.ts — validates mobile as required + 10-digit numeric; validates pin as required, no length or format check implemented"
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Example Test Case Blocks
|
|
85
|
+
|
|
86
|
+
```markdown
|
|
87
|
+
### TC-005 — Login with valid mobile and PIN
|
|
88
|
+
|
|
89
|
+
**Type**: Functional
|
|
90
|
+
**Related Story**: US-003
|
|
91
|
+
**Related BRD**: BRD-001, BRD-005
|
|
92
|
+
**Verdict**: PARTIAL_PASS
|
|
93
|
+
**Confidence**: HIGH
|
|
94
|
+
|
|
95
|
+
#### Test Steps vs Implementation
|
|
96
|
+
|
|
97
|
+
| # | Test Step | Expected Outcome | Actual Implementation | Step Status |
|
|
98
|
+
|---|-----------|-----------------|----------------------|-------------|
|
|
99
|
+
| 1 | Enter valid 10-digit mobile number | Field accepts input, no error | TextInput accepts numeric input, maxLength=10 — `LoginScreen.tsx:45` | PASS |
|
|
100
|
+
| 2 | Enter valid 6-digit PIN | Field accepts input as password | SecureTextEntry PIN field present — `LoginScreen.tsx:62` | PASS |
|
|
101
|
+
| 3 | Tap Login button | Loading spinner shown | ActivityIndicator shown while `isLoading=true` — `LoginScreen.tsx:89` | PASS |
|
|
102
|
+
| 4 | API returns 200 with token | Navigate to Dashboard | Navigates to HomeScreen, not DashboardScreen — `LoginScreen.tsx:105` | FAIL |
|
|
103
|
+
| 5 | Token stored for subsequent calls | Token in secure storage | Stores in AsyncStorage (not SecureStore) — `AuthService.ts:34` | PARTIAL |
|
|
104
|
+
|
|
105
|
+
#### Evidence Files
|
|
106
|
+
- `src/screens/LoginScreen.tsx` — main login UI and submit handler
|
|
107
|
+
- `src/services/AuthService.ts` — API call and token storage
|
|
108
|
+
|
|
109
|
+
#### Verdict Reason
|
|
110
|
+
Steps 1–3 pass. Step 4 fails: navigation target is HomeScreen but requirement specifies DashboardScreen.
|
|
111
|
+
Step 5 partial: token stored but in AsyncStorage (unencrypted) rather than SecureStore.
|
|
112
|
+
|
|
113
|
+
#### Recommendation
|
|
114
|
+
1. Change navigation in LoginScreen.tsx:105 to navigate to 'Dashboard' not 'Home'.
|
|
115
|
+
2. Replace AsyncStorage with SecureStore for token storage in AuthService.ts:34.
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## Sorting Order in Report
|
|
121
|
+
|
|
122
|
+
Sort test cases in this order within the report:
|
|
123
|
+
1. FAIL — shown first (most critical)
|
|
124
|
+
2. NOT_IMPLEMENTED — shown second
|
|
125
|
+
3. BLOCKED — shown third
|
|
126
|
+
4. PARTIAL_PASS — shown fourth
|
|
127
|
+
5. UNKNOWN — shown fifth
|
|
128
|
+
6. PASS — shown last
|
|
129
|
+
|
|
130
|
+
Within each group, sort by TC-ID numerically.
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# User Story Compliance Row Template
|
|
2
|
+
|
|
3
|
+
Use this template for each user story section in `03_USER_STORY_COMPLIANCE.md`.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## User Story Block Template
|
|
8
|
+
|
|
9
|
+
```markdown
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Story {US-ID} — {Story Title}
|
|
13
|
+
|
|
14
|
+
**As a** {role}
|
|
15
|
+
**I want to** {goal}
|
|
16
|
+
**So that** {value}
|
|
17
|
+
|
|
18
|
+
**Related BRD**: {BRD-ID list or "None identified"}
|
|
19
|
+
**Overall Status**: FULLY_SATISFIED | PARTIALLY_SATISFIED | NOT_SATISFIED | NOT_VERIFIABLE
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
### Acceptance Criteria
|
|
24
|
+
|
|
25
|
+
| AC-ID | Criterion | Status | Evidence | Issues |
|
|
26
|
+
|-------|-----------|--------|----------|--------|
|
|
27
|
+
| {US-ID}-AC-01 | {exact AC text from document} | SATISFIED | {file + function} | {gap or "-"} |
|
|
28
|
+
| {US-ID}-AC-02 | | | | |
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
### Business Flow Verification
|
|
33
|
+
|
|
34
|
+
| Aspect | Required (from Story) | Implemented | Status | Evidence |
|
|
35
|
+
|--------|-----------------------|-------------|--------|----------|
|
|
36
|
+
| Entry Screen | {screen name} | {YES/NO/PARTIAL + file} | MATCH/MISMATCH/MISSING | {file path} |
|
|
37
|
+
| Primary API | {method + endpoint} | {implemented endpoint} | | {file path} |
|
|
38
|
+
| Core Validation | {validation rule} | {implemented rule} | | {file path} |
|
|
39
|
+
| Success Navigation | {target screen} | {actual target} | | {file path} |
|
|
40
|
+
| Error Handling | {expected error behavior} | {actual behavior} | | {file path} |
|
|
41
|
+
| Loading State | {required/not required} | {YES/NO} | | {file path} |
|
|
42
|
+
| Empty State | {required/not required} | {YES/NO} | | {file path} |
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
### Validation Detail
|
|
47
|
+
|
|
48
|
+
| Field | Required Rule | Required Message | Implemented Rule | Implemented Message | Match |
|
|
49
|
+
|-------|--------------|-----------------|-----------------|---------------------|-------|
|
|
50
|
+
| {fieldName} | {e.g., required, min:6} | {exact message} | {found rule} | {found message} | EXACT/SIMILAR/MISMATCH/MISSING |
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
### Missing Elements
|
|
55
|
+
|
|
56
|
+
{Bullet list of what is missing. If nothing is missing, write: "None — story is fully implemented."}
|
|
57
|
+
|
|
58
|
+
- [ ] {Specific missing element with BRD-ID reference}
|
|
59
|
+
- [ ] {Another missing element}
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### Recommendation
|
|
64
|
+
|
|
65
|
+
{Specific, actionable guidance. If nothing to do: "No action required."}
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## Overall Status Determination Rules
|
|
73
|
+
|
|
74
|
+
### FULLY_SATISFIED
|
|
75
|
+
ALL acceptance criteria are SATISFIED.
|
|
76
|
+
Business flow verification shows all aspects matched.
|
|
77
|
+
|
|
78
|
+
### PARTIALLY_SATISFIED
|
|
79
|
+
At least one AC is SATISFIED but not all ACs are SATISFIED.
|
|
80
|
+
OR: All ACs satisfied but business flow has gaps (loading state missing, error handling incomplete).
|
|
81
|
+
|
|
82
|
+
### NOT_SATISFIED
|
|
83
|
+
Zero ACs are SATISFIED (all are NOT_SATISFIED or NOT_VERIFIABLE).
|
|
84
|
+
OR: The core feature does not exist.
|
|
85
|
+
|
|
86
|
+
### NOT_VERIFIABLE
|
|
87
|
+
Cannot determine satisfaction from source code alone.
|
|
88
|
+
AC describes a UX behavior, performance metric, or user emotion that cannot be read from code.
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Evidence Format Rules
|
|
93
|
+
|
|
94
|
+
**Good evidence**:
|
|
95
|
+
```
|
|
96
|
+
src/features/loan/LoanApplicationScreen.tsx → submitApplication() — calls POST /loan/apply
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
**Bad evidence** (too vague):
|
|
100
|
+
```
|
|
101
|
+
LoanApplicationScreen exists
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
**Good AC evidence**:
|
|
105
|
+
```
|
|
106
|
+
src/validation/loanSchema.ts → loanSchema — has Yup required() + min(5000) on amount field
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**Bad AC evidence**:
|
|
110
|
+
```
|
|
111
|
+
Validation exists in the project
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Example Story Block
|
|
117
|
+
|
|
118
|
+
```markdown
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## Story US-007 — Apply for Personal Loan
|
|
122
|
+
|
|
123
|
+
**As a** registered customer
|
|
124
|
+
**I want to** apply for a personal loan online
|
|
125
|
+
**So that** I can get funds without visiting a branch
|
|
126
|
+
|
|
127
|
+
**Related BRD**: BRD-012, BRD-013, BRD-014
|
|
128
|
+
**Overall Status**: PARTIALLY_SATISFIED
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
### Acceptance Criteria
|
|
133
|
+
|
|
134
|
+
| AC-ID | Criterion | Status | Evidence | Issues |
|
|
135
|
+
|-------|-----------|--------|----------|--------|
|
|
136
|
+
| US-007-AC-01 | User can enter loan amount between 5,000 and 5,00,000 | SATISFIED | `LoanApplicationScreen.tsx:78` → amountInput with min/max Yup validation | - |
|
|
137
|
+
| US-007-AC-02 | User can select loan tenure from 12 to 60 months | SATISFIED | `LoanApplicationScreen.tsx:95` → TenureDropdown with options 12,24,36,48,60 | - |
|
|
138
|
+
| US-007-AC-03 | EMI is calculated and shown before submission | PARTIALLY_SATISFIED | `LoanCalculationService.ts:23` → calculateEMI() — formula implemented but not shown on screen until Submit tapped | EMI display is post-submit, not real-time |
|
|
139
|
+
| US-007-AC-04 | System shows confirmation screen after successful application | NOT_SATISFIED | `LoanApplicationScreen.tsx:112` → navigates to HomeScreen, not LoanConfirmationScreen | LoanConfirmationScreen not found in codebase |
|
|
140
|
+
|
|
141
|
+
---
|
|
142
|
+
|
|
143
|
+
### Business Flow Verification
|
|
144
|
+
|
|
145
|
+
| Aspect | Required | Implemented | Status | Evidence |
|
|
146
|
+
|--------|----------|-------------|--------|----------|
|
|
147
|
+
| Entry Screen | LoanApplicationScreen | YES | MATCH | `src/screens/loan/LoanApplicationScreen.tsx` |
|
|
148
|
+
| Primary API | POST /loan/apply | POST /loan/apply | MATCH | `src/services/LoanService.ts:45` |
|
|
149
|
+
| Core Validation | Amount 5000–500000 | YES | MATCH | `src/validation/loanSchema.ts:12` |
|
|
150
|
+
| Success Navigation | LoanConfirmationScreen | HomeScreen (WRONG) | MISMATCH | `LoanApplicationScreen.tsx:112` |
|
|
151
|
+
| Error Handling | Show API error message | Partial — 400 handled, 500 not | PARTIAL | `LoanApplicationScreen.tsx:125` |
|
|
152
|
+
| Loading State | Required | YES — ActivityIndicator | MATCH | `LoanApplicationScreen.tsx:88` |
|
|
153
|
+
| Empty State | Not required | N/A | N/A | - |
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
### Missing Elements
|
|
158
|
+
|
|
159
|
+
- [ ] LoanConfirmationScreen not implemented (BRD-014 — confirmation after loan approval)
|
|
160
|
+
- [ ] Real-time EMI calculation on screen (AC-03 gap)
|
|
161
|
+
- [ ] HTTP 500 error handling in loan application flow
|
|
162
|
+
|
|
163
|
+
---
|
|
164
|
+
|
|
165
|
+
### Recommendation
|
|
166
|
+
|
|
167
|
+
1. Create LoanConfirmationScreen and update navigation in LoanApplicationScreen.tsx:112.
|
|
168
|
+
2. Wire calculateEMI() to amount and tenure inputs via onChange for real-time display.
|
|
169
|
+
3. Add HTTP 500 catch block in LoanApplicationScreen.tsx:125.
|
|
170
|
+
```
|
|
@@ -0,0 +1,373 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: custom-font-integrator
|
|
3
|
+
description: Set up and integrate custom .ttf fonts into React Native projects for both iOS and Android. Use this skill whenever a user provides .ttf font files and wants to use them in their Bare React Native app. Trigger when the user mentions custom fonts, .ttf files, adding fonts to React Native, font integration, or wants to use specific font families in their project. This skill handles file placement, configuration, and code examples for both platforms.
|
|
4
|
+
compatibility: Requires a Bare React Native project (not Expo)
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# React Native Custom Fonts Setup
|
|
8
|
+
|
|
9
|
+
Integrate custom .ttf fonts into your Bare React Native project for both iOS and Android with proper configuration and usage examples.
|
|
10
|
+
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
Custom fonts in React Native require platform-specific setup:
|
|
14
|
+
- **iOS**: Add fonts to `Info.plist` and link them via Xcode
|
|
15
|
+
- **Android**: Place fonts in `android/app/src/main/assets/fonts/`
|
|
16
|
+
|
|
17
|
+
This skill handles the complete setup process and provides code examples for using your fonts.
|
|
18
|
+
|
|
19
|
+
## Prerequisites
|
|
20
|
+
|
|
21
|
+
- Bare React Native project (initialized with `npx react-native init`)
|
|
22
|
+
- `.ttf` font files ready to integrate
|
|
23
|
+
- Access to project files on both iOS and Android sides
|
|
24
|
+
|
|
25
|
+
## Font Path Resolution (MANDATORY — before any setup step)
|
|
26
|
+
|
|
27
|
+
Before running any step, resolve `<fontsPath>` using this priority order:
|
|
28
|
+
|
|
29
|
+
1. **User-provided path** — if the user explicitly states a folder (e.g. `src/assets/fonts`, `assets/fonts`, `resources/fonts`), use that value as `<fontsPath>`.
|
|
30
|
+
2. **Codebase scan** — if no path is provided, scan the project root for `.ttf` / `.otf` files recursively. Use the directory of the first match as `<fontsPath>`.
|
|
31
|
+
3. **Default fallback** — if no font files are found on disk, use `assets/fonts` as `<fontsPath>` and create the folder.
|
|
32
|
+
|
|
33
|
+
Emit one line before proceeding:
|
|
34
|
+
```
|
|
35
|
+
INFO: fontsPath resolved to '<fontsPath>' (source: user-provided | codebase-scan | default-fallback)
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
All commands, config snippets, and file references below use `<fontsPath>` as a placeholder. Replace it with the resolved value before applying.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## Already-Configured Check (MANDATORY — run after Font Path Resolution, before Setup)
|
|
43
|
+
|
|
44
|
+
Before executing any setup step, build a **per-font status table** by checking each font file individually across both platforms. Only fonts that are missing from a platform are configured — already-present fonts are skipped entirely.
|
|
45
|
+
|
|
46
|
+
### Step A — Enumerate fonts to integrate
|
|
47
|
+
|
|
48
|
+
Collect the list of `.ttf` / `.otf` files from `<fontsPath>`. Each file is one font entry.
|
|
49
|
+
|
|
50
|
+
Example input:
|
|
51
|
+
```
|
|
52
|
+
<fontsPath>/
|
|
53
|
+
Poppins-Regular.ttf
|
|
54
|
+
Poppins-Bold.ttf
|
|
55
|
+
Roboto-Regular.ttf
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Step B — Per-font status check
|
|
59
|
+
|
|
60
|
+
For each font file `<FontFile>.ttf`, check three locations independently:
|
|
61
|
+
|
|
62
|
+
| Location | PASS condition |
|
|
63
|
+
|----------|----------------|
|
|
64
|
+
| **Android** — `android/app/src/main/assets/fonts/<FontFile>.ttf` | File exists |
|
|
65
|
+
| **iOS copy** — `ios/<AppName>/<FontFile>.ttf` | File exists |
|
|
66
|
+
| **Info.plist** — `ios/<AppName>/Info.plist` (or `ios/<AppName>/<AppName>/Info.plist`) | `<string><FontFile>.ttf</string>` entry present inside `<key>UIAppFonts</key>` array |
|
|
67
|
+
|
|
68
|
+
Build a status table before proceeding:
|
|
69
|
+
|
|
70
|
+
```
|
|
71
|
+
Font | Android | iOS copy | Info.plist | Action
|
|
72
|
+
-----------------------|---------|----------|------------|-------
|
|
73
|
+
Poppins-Regular.ttf | PASS | PASS | PASS | SKIP
|
|
74
|
+
Poppins-Bold.ttf | FAIL | PASS | PASS | Android only
|
|
75
|
+
Roboto-Regular.ttf | FAIL | FAIL | FAIL | Full setup
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Step C — Decision per font
|
|
79
|
+
|
|
80
|
+
For each font entry in the table:
|
|
81
|
+
|
|
82
|
+
- **All 3 PASS** → skip this font entirely; emit:
|
|
83
|
+
```
|
|
84
|
+
INFO: Poppins-Regular.ttf already configured on all platforms. Skipping.
|
|
85
|
+
```
|
|
86
|
+
- **Android FAIL only** → copy file to `android/app/src/main/assets/fonts/` only
|
|
87
|
+
- **iOS copy FAIL only** → copy file to `ios/<AppName>/` only
|
|
88
|
+
- **Info.plist FAIL only** → add `<string><FontFile>.ttf</string>` entry to `UIAppFonts` only
|
|
89
|
+
- **Multiple FAILs** → run only the failing sub-steps for that font
|
|
90
|
+
- **All 3 FAIL** → run full setup for that font
|
|
91
|
+
|
|
92
|
+
After the table, emit a summary:
|
|
93
|
+
|
|
94
|
+
```
|
|
95
|
+
INFO: 1 font(s) fully configured — skipped.
|
|
96
|
+
INFO: 1 font(s) need Android copy only.
|
|
97
|
+
INFO: 1 font(s) need full setup.
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
> **Rule**: Never copy or modify configuration for a font that already passes all 3 checks. Only act on the specific platform(s) where the check failed.
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Setup Process
|
|
105
|
+
|
|
106
|
+
### Step 1: Organize Your Font Files
|
|
107
|
+
|
|
108
|
+
Create a fonts directory in your project if it does not already exist:
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
mkdir -p <fontsPath>
|
|
112
|
+
# Place your .ttf files here
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Your project structure should look like:
|
|
116
|
+
```
|
|
117
|
+
MyApp/
|
|
118
|
+
├── <fontsPath>/
|
|
119
|
+
│ ├── MyFont-Regular.ttf
|
|
120
|
+
│ ├── MyFont-Bold.ttf
|
|
121
|
+
│ └── MyFont-Italic.ttf
|
|
122
|
+
├── android/
|
|
123
|
+
├── ios/
|
|
124
|
+
├── App.js
|
|
125
|
+
└── package.json
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Step 2: Android Setup
|
|
129
|
+
|
|
130
|
+
#### Recommended: Link fonts via react-native.config.js (auto-copies to both platforms)
|
|
131
|
+
|
|
132
|
+
Add an `assets` array to `react-native.config.js` in your project root (create the file if it doesn't exist):
|
|
133
|
+
|
|
134
|
+
```javascript
|
|
135
|
+
// react-native.config.js
|
|
136
|
+
module.exports = {
|
|
137
|
+
assets: ['./<fontsPath>'], // replace <fontsPath> with the resolved path, e.g. 'assets/fonts' or 'src/assets/fonts'
|
|
138
|
+
};
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
> The skill fills in the exact resolved `<fontsPath>` value here — it is never hardcoded to `assets/fonts`.
|
|
142
|
+
|
|
143
|
+
Then run:
|
|
144
|
+
|
|
145
|
+
```bash
|
|
146
|
+
npx react-native-asset
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
This automatically:
|
|
150
|
+
- Copies fonts to `android/app/src/main/assets/fonts/`
|
|
151
|
+
- Copies fonts to `ios/<AppName>/` and updates `Info.plist` UIAppFonts
|
|
152
|
+
|
|
153
|
+
> **Re-run `npx react-native-asset` every time you add or remove a font file.**
|
|
154
|
+
|
|
155
|
+
#### Manual fallback: Copy fonts to Android assets
|
|
156
|
+
|
|
157
|
+
```bash
|
|
158
|
+
mkdir -p android/app/src/main/assets/fonts
|
|
159
|
+
cp <fontsPath>/*.ttf android/app/src/main/assets/fonts/
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Android automatically recognizes fonts in this directory. No additional configuration needed!
|
|
163
|
+
|
|
164
|
+
**Font naming for Android**: Use the exact filename (without .ttf extension) as the `fontFamily` in your StyleSheet.
|
|
165
|
+
|
|
166
|
+
### Step 3: iOS Setup
|
|
167
|
+
|
|
168
|
+
#### 1. Copy fonts to iOS project
|
|
169
|
+
|
|
170
|
+
> Skip this step if you used `react-native-asset` above — it handles iOS automatically.
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
mkdir -p ios/<AppName>
|
|
174
|
+
cp <fontsPath>/*.ttf ios/<AppName>/
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Replace `<AppName>` with your actual Xcode target folder name (the folder containing `AppDelegate.swift` / `AppDelegate.m`). Using `ios/Fonts/` is **not** recommended — fonts must sit inside the app target bundle.
|
|
178
|
+
|
|
179
|
+
#### 2. Add fonts to Xcode (Important!)
|
|
180
|
+
|
|
181
|
+
1. Open `ios/YourProject.xcworkspace` in Xcode
|
|
182
|
+
2. Select your project in the navigator
|
|
183
|
+
3. Select your app target
|
|
184
|
+
4. Go to **Build Phases** → **Copy Bundle Resources**
|
|
185
|
+
5. Click the **+** button
|
|
186
|
+
6. Select all `.ttf` files from the `ios/<AppName>` folder
|
|
187
|
+
7. Ensure "Copy items if needed" is checked and files are added to your target
|
|
188
|
+
|
|
189
|
+
#### 3. Update Info.plist
|
|
190
|
+
|
|
191
|
+
Open `ios/YourProject/Info.plist` and add the following array (before the closing `</dict>`):
|
|
192
|
+
|
|
193
|
+
```xml
|
|
194
|
+
<key>UIAppFonts</key>
|
|
195
|
+
<array>
|
|
196
|
+
<string>MyFont-Regular.ttf</string>
|
|
197
|
+
<string>MyFont-Bold.ttf</string>
|
|
198
|
+
<string>MyFont-Italic.ttf</string>
|
|
199
|
+
</array>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
**Important**: Use only the filename (with .ttf extension), not the full path.
|
|
203
|
+
|
|
204
|
+
## Using Custom Fonts in Your Code
|
|
205
|
+
|
|
206
|
+
Once setup is complete, use your fonts in StyleSheet:
|
|
207
|
+
|
|
208
|
+
```javascript
|
|
209
|
+
import React from 'react';
|
|
210
|
+
import { View, Text, StyleSheet } from 'react-native';
|
|
211
|
+
|
|
212
|
+
const styles = StyleSheet.create({
|
|
213
|
+
regularText: {
|
|
214
|
+
fontFamily: 'MyFont-Regular',
|
|
215
|
+
fontSize: 16,
|
|
216
|
+
},
|
|
217
|
+
boldText: {
|
|
218
|
+
fontFamily: 'MyFont-Bold',
|
|
219
|
+
fontSize: 18,
|
|
220
|
+
fontWeight: 'bold',
|
|
221
|
+
},
|
|
222
|
+
italicText: {
|
|
223
|
+
fontFamily: 'MyFont-Italic',
|
|
224
|
+
fontSize: 16,
|
|
225
|
+
fontStyle: 'italic',
|
|
226
|
+
},
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
export default function App() {
|
|
230
|
+
return (
|
|
231
|
+
<View>
|
|
232
|
+
<Text style={styles.regularText}>Regular Font</Text>
|
|
233
|
+
<Text style={styles.boldText}>Bold Font</Text>
|
|
234
|
+
<Text style={styles.italicText}>Italic Font</Text>
|
|
235
|
+
</View>
|
|
236
|
+
);
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
## Font Naming Conventions
|
|
241
|
+
|
|
242
|
+
### Android
|
|
243
|
+
- Use the **exact filename** (without `.ttf`)
|
|
244
|
+
- Example: `MyFont-Regular.ttf` → `fontFamily: 'MyFont-Regular'`
|
|
245
|
+
|
|
246
|
+
### iOS
|
|
247
|
+
- Use the **PostScript name** or **filename**
|
|
248
|
+
- For most standard fonts, filename works fine
|
|
249
|
+
- To check PostScript name: Double-click the `.ttf` file on Mac, look at the "PostScript name" field
|
|
250
|
+
- Example: `fontFamily: 'MyFont-Regular'`
|
|
251
|
+
|
|
252
|
+
## Troubleshooting
|
|
253
|
+
|
|
254
|
+
### Font not appearing on Android
|
|
255
|
+
- ✅ Check font file is in `android/app/src/main/assets/fonts/`
|
|
256
|
+
- ✅ Verify `fontFamily` name matches filename exactly (case-sensitive)
|
|
257
|
+
- ✅ Rebuild: `npx react-native run-android`
|
|
258
|
+
|
|
259
|
+
### Font not appearing on iOS
|
|
260
|
+
- ✅ Verify font file is in `ios/YourProject/` directory
|
|
261
|
+
- ✅ Check font is added to "Copy Bundle Resources" in Build Phases
|
|
262
|
+
- ✅ Verify `Info.plist` includes the font filename with `.ttf` extension
|
|
263
|
+
- ✅ Try PostScript name if filename doesn't work
|
|
264
|
+
- ✅ Clean build folder: `Cmd + Shift + K` in Xcode, then rebuild
|
|
265
|
+
|
|
266
|
+
### Fallback fonts
|
|
267
|
+
If a font isn't found, React Native falls back to the system default font. Always test on both platforms.
|
|
268
|
+
|
|
269
|
+
## Quick Reference
|
|
270
|
+
|
|
271
|
+
| Task | Command |
|
|
272
|
+
|------|---------|
|
|
273
|
+
| Create fonts directory | `mkdir -p <fontsPath> android/app/src/main/assets/fonts` |
|
|
274
|
+
| Link fonts (recommended) | `npx react-native-asset` |
|
|
275
|
+
| Copy fonts to Android (manual) | `cp <fontsPath>/*.ttf android/app/src/main/assets/fonts/` |
|
|
276
|
+
| Copy fonts to iOS (manual) | `cp <fontsPath>/*.ttf ios/<AppName>/` |
|
|
277
|
+
| Rebuild Android | `npx react-native run-android` |
|
|
278
|
+
| Rebuild iOS | `npx react-native run-ios` |
|
|
279
|
+
|
|
280
|
+
## Testing Your Fonts
|
|
281
|
+
|
|
282
|
+
Create a test component to verify fonts are loaded:
|
|
283
|
+
|
|
284
|
+
```javascript
|
|
285
|
+
import React from 'react';
|
|
286
|
+
import { View, Text, ScrollView, StyleSheet } from 'react-native';
|
|
287
|
+
|
|
288
|
+
const TestFonts = ({ fonts }) => (
|
|
289
|
+
<ScrollView style={styles.container}>
|
|
290
|
+
{fonts.map((font) => (
|
|
291
|
+
<Text key={font} style={[styles.testText, { fontFamily: font }]}>
|
|
292
|
+
Testing: {font}
|
|
293
|
+
</Text>
|
|
294
|
+
))}
|
|
295
|
+
</ScrollView>
|
|
296
|
+
);
|
|
297
|
+
|
|
298
|
+
const styles = StyleSheet.create({
|
|
299
|
+
container: { padding: 20, backgroundColor: '#fff' },
|
|
300
|
+
testText: { fontSize: 18, marginVertical: 10 },
|
|
301
|
+
});
|
|
302
|
+
|
|
303
|
+
export default TestFonts;
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
## Advanced: Font Weight and Style Fallback
|
|
307
|
+
|
|
308
|
+
React Native allows you to use `fontWeight` and `fontStyle` properties to automatically select different font files:
|
|
309
|
+
|
|
310
|
+
```javascript
|
|
311
|
+
const styles = StyleSheet.create({
|
|
312
|
+
text: {
|
|
313
|
+
fontFamily: 'Montserrat',
|
|
314
|
+
fontSize: 16,
|
|
315
|
+
fontWeight: '600', // Will attempt to load Montserrat-SemiBold if configured
|
|
316
|
+
},
|
|
317
|
+
});
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
For this to work, you need to set up font matching in `react-native.config.js` (advanced):
|
|
321
|
+
|
|
322
|
+
```javascript
|
|
323
|
+
module.exports = {
|
|
324
|
+
project: {
|
|
325
|
+
ios: {},
|
|
326
|
+
android: {},
|
|
327
|
+
},
|
|
328
|
+
dependency: {
|
|
329
|
+
platforms: {
|
|
330
|
+
ios: {},
|
|
331
|
+
android: {},
|
|
332
|
+
},
|
|
333
|
+
},
|
|
334
|
+
};
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
**Note**: React Native's automatic weight/style matching is limited. It's best to explicitly use different font family names for different weights.
|
|
338
|
+
|
|
339
|
+
## Monospace Fonts
|
|
340
|
+
|
|
341
|
+
If using monospace fonts (e.g., for code display):
|
|
342
|
+
|
|
343
|
+
```javascript
|
|
344
|
+
const styles = StyleSheet.create({
|
|
345
|
+
codeText: {
|
|
346
|
+
fontFamily: 'Courier-Regular',
|
|
347
|
+
fontSize: 12,
|
|
348
|
+
},
|
|
349
|
+
});
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
Monospace fonts should work the same as regular fonts once properly configured.
|
|
353
|
+
|
|
354
|
+
## Common Font File Naming Patterns
|
|
355
|
+
|
|
356
|
+
| Pattern | Android fontFamily | iOS fontFamily |
|
|
357
|
+
|---------|-------------------|----------------|
|
|
358
|
+
| `Font-Regular.ttf` | `Font-Regular` | `Font-Regular` |
|
|
359
|
+
| `Font-Bold.ttf` | `Font-Bold` | `Font-Bold` |
|
|
360
|
+
| `Font.ttf` | `Font` | `Font` |
|
|
361
|
+
| `FontRegular.ttf` | `FontRegular` | `FontRegular` |
|
|
362
|
+
| `font_regular.ttf` | `font_regular` | `font_regular` |
|
|
363
|
+
|
|
364
|
+
---
|
|
365
|
+
|
|
366
|
+
**Next Steps**:
|
|
367
|
+
1. Resolve `<fontsPath>` from user input, codebase scan, or default (see **Font Path Resolution** above)
|
|
368
|
+
2. Place your `.ttf` files in `<fontsPath>/`
|
|
369
|
+
3. Add `assets: ['./<fontsPath>']` to `react-native.config.js` and run `npx react-native-asset` (recommended), OR follow the manual Android and iOS setup steps above
|
|
370
|
+
4. If using manual iOS setup: update `Info.plist` with font names
|
|
371
|
+
5. Use the fonts in your StyleSheet by `fontFamily` name
|
|
372
|
+
6. Rebuild and test both platforms
|
|
373
|
+
7. Use the test component to verify all fonts load correctly
|