react-native-marked 8.2.0 → 8.3.1

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.
Files changed (94) hide show
  1. package/LICENSE +20 -20
  2. package/README.md +374 -354
  3. package/dist/commonjs/components/MDImage.js +3 -3
  4. package/dist/commonjs/components/MDImage.js.map +1 -1
  5. package/dist/commonjs/components/MDList.js.map +1 -1
  6. package/dist/commonjs/components/MDSvg.js.map +1 -1
  7. package/dist/commonjs/components/MDTable.js.map +1 -1
  8. package/dist/commonjs/hooks/useMarkdown.js +4 -2
  9. package/dist/commonjs/hooks/useMarkdown.js.map +1 -1
  10. package/dist/commonjs/hooks/useMarkdownWithComponents.js +7 -1
  11. package/dist/commonjs/hooks/useMarkdownWithComponents.js.map +1 -1
  12. package/dist/commonjs/index.js.map +1 -1
  13. package/dist/commonjs/lib/Markdown.js +4 -2
  14. package/dist/commonjs/lib/Markdown.js.map +1 -1
  15. package/dist/commonjs/lib/Parser.js +7 -7
  16. package/dist/commonjs/lib/Parser.js.map +1 -1
  17. package/dist/commonjs/lib/ReactComponentRegistry.js.map +1 -1
  18. package/dist/commonjs/lib/ReactComponentTokenizer.js.map +1 -1
  19. package/dist/commonjs/lib/Renderer.js +7 -5
  20. package/dist/commonjs/lib/Renderer.js.map +1 -1
  21. package/dist/commonjs/lib/types.js.map +1 -1
  22. package/dist/commonjs/theme/colors.js.map +1 -1
  23. package/dist/commonjs/theme/spacing.js.map +1 -1
  24. package/dist/commonjs/theme/styles.js +4 -0
  25. package/dist/commonjs/theme/styles.js.map +1 -1
  26. package/dist/commonjs/theme/types.js.map +1 -1
  27. package/dist/commonjs/utils/handlers.js.map +1 -1
  28. package/dist/commonjs/utils/svg.js.map +1 -1
  29. package/dist/commonjs/utils/table.js.map +1 -1
  30. package/dist/commonjs/utils/url.js.map +1 -1
  31. package/dist/module/components/MDImage.js +3 -3
  32. package/dist/module/components/MDImage.js.map +1 -1
  33. package/dist/module/components/MDList.js.map +1 -1
  34. package/dist/module/components/MDSvg.js.map +1 -1
  35. package/dist/module/components/MDTable.js.map +1 -1
  36. package/dist/module/hooks/useMarkdown.js +4 -2
  37. package/dist/module/hooks/useMarkdown.js.map +1 -1
  38. package/dist/module/hooks/useMarkdownWithComponents.js +7 -1
  39. package/dist/module/hooks/useMarkdownWithComponents.js.map +1 -1
  40. package/dist/module/index.js.map +1 -1
  41. package/dist/module/lib/Markdown.js +4 -2
  42. package/dist/module/lib/Markdown.js.map +1 -1
  43. package/dist/module/lib/Parser.js +7 -7
  44. package/dist/module/lib/Parser.js.map +1 -1
  45. package/dist/module/lib/ReactComponentRegistry.js.map +1 -1
  46. package/dist/module/lib/ReactComponentTokenizer.js.map +1 -1
  47. package/dist/module/lib/Renderer.js +7 -5
  48. package/dist/module/lib/Renderer.js.map +1 -1
  49. package/dist/module/lib/types.js.map +1 -1
  50. package/dist/module/theme/colors.js.map +1 -1
  51. package/dist/module/theme/spacing.js.map +1 -1
  52. package/dist/module/theme/styles.js +4 -0
  53. package/dist/module/theme/styles.js.map +1 -1
  54. package/dist/module/theme/types.js.map +1 -1
  55. package/dist/module/utils/handlers.js.map +1 -1
  56. package/dist/module/utils/svg.js.map +1 -1
  57. package/dist/module/utils/table.js.map +1 -1
  58. package/dist/module/utils/url.js.map +1 -1
  59. package/dist/typescript/hooks/useMarkdown.d.ts +3 -0
  60. package/dist/typescript/hooks/useMarkdown.d.ts.map +1 -1
  61. package/dist/typescript/hooks/useMarkdownWithComponents.d.ts.map +1 -1
  62. package/dist/typescript/index.d.ts +2 -2
  63. package/dist/typescript/index.d.ts.map +1 -1
  64. package/dist/typescript/lib/Markdown.d.ts +1 -1
  65. package/dist/typescript/lib/Markdown.d.ts.map +1 -1
  66. package/dist/typescript/lib/Renderer.d.ts +8 -1
  67. package/dist/typescript/lib/Renderer.d.ts.map +1 -1
  68. package/dist/typescript/lib/types.d.ts +6 -0
  69. package/dist/typescript/lib/types.d.ts.map +1 -1
  70. package/dist/typescript/theme/styles.d.ts.map +1 -1
  71. package/dist/typescript/theme/types.d.ts +1 -0
  72. package/dist/typescript/theme/types.d.ts.map +1 -1
  73. package/package.json +178 -175
  74. package/src/components/MDImage.tsx +90 -90
  75. package/src/components/MDList.tsx +46 -46
  76. package/src/components/MDSvg.tsx +108 -108
  77. package/src/components/MDTable.tsx +60 -60
  78. package/src/hooks/useMarkdown.ts +56 -51
  79. package/src/hooks/useMarkdownWithComponents.tsx +94 -89
  80. package/src/index.ts +44 -43
  81. package/src/lib/Markdown.tsx +55 -53
  82. package/src/lib/Parser.tsx +316 -316
  83. package/src/lib/ReactComponentRegistry.tsx +52 -52
  84. package/src/lib/ReactComponentTokenizer.ts +149 -149
  85. package/src/lib/Renderer.tsx +247 -238
  86. package/src/lib/types.ts +93 -87
  87. package/src/theme/colors.ts +31 -31
  88. package/src/theme/spacing.ts +10 -10
  89. package/src/theme/styles.ts +206 -198
  90. package/src/theme/types.ts +34 -33
  91. package/src/utils/handlers.ts +9 -9
  92. package/src/utils/svg.ts +14 -14
  93. package/src/utils/table.ts +29 -29
  94. package/src/utils/url.ts +22 -22
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC5B,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACzB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;CAC1C"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,WAAW,YAAY;IAC5B,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACzB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;CAC1C"}
package/package.json CHANGED
@@ -1,175 +1,178 @@
1
- {
2
- "name": "react-native-marked",
3
- "version": "8.2.0",
4
- "description": "Markdown renderer for React Native powered by marked.js",
5
- "main": "dist/commonjs/index",
6
- "module": "dist/module/index",
7
- "types": "dist/typescript/index.d.ts",
8
- "react-native": "src/index",
9
- "source": "src/index",
10
- "files": [
11
- "src",
12
- "dist",
13
- "android",
14
- "ios",
15
- "cpp",
16
- "react-native-marked.podspec",
17
- "!dist/typescript/example",
18
- "!android/build",
19
- "!ios/build",
20
- "!**/__tests__",
21
- "!**/__fixtures__",
22
- "!**/__mocks__",
23
- "!**/__perf__"
24
- ],
25
- "scripts": {
26
- "typescript": "tsc --noEmit",
27
- "lint": "biome check ./",
28
- "format": "biome format ./ --write",
29
- "build": "bob build",
30
- "prepare": "yarn build",
31
- "release": "yarn build && release-it",
32
- "release:rc": "yarn build && release-it --preRelease=rc",
33
- "release:exclude-pre": "yarn build && release-it --git.tagExclude='*[-]*'",
34
- "test": "jest --passWithNoTests",
35
- "test:updateSnapshot": "jest --updateSnapshot",
36
- "reassure": "reassure"
37
- },
38
- "keywords": [
39
- "react-native",
40
- "markdown",
41
- "react-native markdown"
42
- ],
43
- "repository": "https://github.com/gmsgowtham/react-native-marked",
44
- "author": "Gowtham G <webappsbygowtham@gmail.com> (https://github.com/gmsgowtham)",
45
- "license": "MIT",
46
- "bugs": {
47
- "url": "https://github.com/gmsgowtham/react-native-marked/issues"
48
- },
49
- "homepage": "https://github.com/gmsgowtham/react-native-marked#readme",
50
- "publishConfig": {
51
- "registry": "https://registry.npmjs.org/"
52
- },
53
- "devDependencies": {
54
- "@babel/core": "7.29.7",
55
- "@babel/helper-explode-assignable-expression": "7.18.6",
56
- "@babel/preset-env": "7.29.7",
57
- "@biomejs/biome": "2.5.11",
58
- "@commitlint/config-conventional": "21.2.2",
59
- "@evilmartians/lefthook": "2.1.12",
60
- "@react-native/babel-preset": "0.78.2",
61
- "@release-it/conventional-changelog": "12.0.0",
62
- "@testing-library/react-native": "v14.0.0-alpha.1",
63
- "@types/jest": "30.0.0",
64
- "@types/node": "24.13.3",
65
- "@types/react": "19.2.18",
66
- "@types/svg-parser": "^2.0.3",
67
- "commitlint": "21.2.2",
68
- "danger": "14.0.7",
69
- "husky": "9.1.7",
70
- "jest": "30.2.0",
71
- "jest-environment-jsdom": "29.7.0",
72
- "pod-install": "1.1.0",
73
- "postinstall-postinstall": "2.1.0",
74
- "react": "19.2.8",
75
- "react-native": "0.78.2",
76
- "react-native-builder-bob": "0.43.0",
77
- "react-native-svg": "15.15.5",
78
- "reassure": "1.6.0",
79
- "release-it": "21.0.2",
80
- "typescript": "6.0.3",
81
- "universal-test-renderer": "0.6.0"
82
- },
83
- "peerDependencies": {
84
- "react": ">=16.8.6",
85
- "react-native": ">=0.76.0",
86
- "react-native-svg": ">=12.3.0"
87
- },
88
- "jest": {
89
- "preset": "react-native",
90
- "testEnvironment": "jsdom",
91
- "modulePathIgnorePatterns": [
92
- "<rootDir>/examples/*/node_modules",
93
- "<rootDir>/dist/"
94
- ],
95
- "transformIgnorePatterns": [
96
- "node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|github-slugger|marked)"
97
- ]
98
- },
99
- "commitlint": {
100
- "extends": [
101
- "@commitlint/config-conventional"
102
- ],
103
- "rules": {
104
- "type-enum": [
105
- 2,
106
- "always",
107
- [
108
- "build",
109
- "chore",
110
- "ci",
111
- "docs",
112
- "feat",
113
- "fix",
114
- "perf",
115
- "refactor",
116
- "revert",
117
- "style",
118
- "test",
119
- "todo",
120
- "bump"
121
- ]
122
- ]
123
- }
124
- },
125
- "release-it": {
126
- "git": {
127
- "commitMessage": "chore: release ${version}",
128
- "tagName": "v${version}"
129
- },
130
- "npm": {
131
- "publish": true
132
- },
133
- "github": {
134
- "release": true,
135
- "web": true
136
- },
137
- "plugins": {
138
- "@release-it/conventional-changelog": {
139
- "preset": "angular",
140
- "ignoreRecommendedBump": true
141
- }
142
- }
143
- },
144
- "react-native-builder-bob": {
145
- "source": "src",
146
- "output": "dist",
147
- "targets": [
148
- "commonjs",
149
- "module",
150
- [
151
- "typescript",
152
- {
153
- "project": "tsconfig.json",
154
- "tsc": "./node_modules/.bin/tsc"
155
- }
156
- ]
157
- ]
158
- },
159
- "dependencies": {
160
- "@jsamr/counter-style": "2.0.2",
161
- "@jsamr/react-native-li": "2.3.1",
162
- "github-slugger": "2.0.0",
163
- "html-entities": "2.6.0",
164
- "marked": "18.0.11",
165
- "react-native-reanimated-table": "0.0.2",
166
- "svg-parser": "2.1.0"
167
- },
168
- "engines": {
169
- "node": ">=18"
170
- },
171
- "resolutions": {
172
- "@types/react": "19.2.18",
173
- "**/pretty-format/react-is": "19.2.8"
174
- }
175
- }
1
+ {
2
+ "name": "react-native-marked",
3
+ "version": "8.3.1",
4
+ "description": "Markdown renderer for React Native powered by marked.js",
5
+ "main": "dist/commonjs/index",
6
+ "module": "dist/module/index",
7
+ "types": "dist/typescript/index.d.ts",
8
+ "react-native": "src/index",
9
+ "source": "src/index",
10
+ "files": [
11
+ "src",
12
+ "dist",
13
+ "android",
14
+ "ios",
15
+ "cpp",
16
+ "react-native-marked.podspec",
17
+ "!dist/typescript/example",
18
+ "!android/build",
19
+ "!ios/build",
20
+ "!**/__tests__",
21
+ "!**/__fixtures__",
22
+ "!**/__mocks__",
23
+ "!**/__perf__"
24
+ ],
25
+ "scripts": {
26
+ "typescript": "tsc --noEmit",
27
+ "lint": "biome check ./",
28
+ "format": "biome format ./ --write",
29
+ "build": "bob build",
30
+ "prepare": "yarn build",
31
+ "release": "yarn build && release-it",
32
+ "release:rc": "yarn build && release-it --preRelease=rc",
33
+ "release:exclude-pre": "yarn build && release-it --git.tagExclude='*[-]*'",
34
+ "test": "jest --passWithNoTests",
35
+ "test:updateSnapshot": "jest --updateSnapshot",
36
+ "reassure": "reassure",
37
+ "docs:dev": "yarn --cwd docs dev",
38
+ "docs:build": "yarn --cwd docs build",
39
+ "docs:preview": "yarn --cwd docs preview"
40
+ },
41
+ "keywords": [
42
+ "react-native",
43
+ "markdown",
44
+ "react-native markdown"
45
+ ],
46
+ "repository": "https://github.com/gmsgowtham/react-native-marked",
47
+ "author": "Gowtham G <webappsbygowtham@gmail.com> (https://github.com/gmsgowtham)",
48
+ "license": "MIT",
49
+ "bugs": {
50
+ "url": "https://github.com/gmsgowtham/react-native-marked/issues"
51
+ },
52
+ "homepage": "https://github.com/gmsgowtham/react-native-marked#readme",
53
+ "publishConfig": {
54
+ "registry": "https://registry.npmjs.org/"
55
+ },
56
+ "devDependencies": {
57
+ "@babel/core": "7.29.7",
58
+ "@babel/helper-explode-assignable-expression": "7.18.6",
59
+ "@babel/preset-env": "7.29.7",
60
+ "@biomejs/biome": "2.5.14",
61
+ "@commitlint/config-conventional": "21.2.2",
62
+ "@evilmartians/lefthook": "2.1.14",
63
+ "@react-native/babel-preset": "0.78.2",
64
+ "@release-it/conventional-changelog": "12.0.2",
65
+ "@testing-library/react-native": "v14.0.0-alpha.1",
66
+ "@types/jest": "30.0.0",
67
+ "@types/node": "24.13.5",
68
+ "@types/react": "19.3.0",
69
+ "@types/svg-parser": "^2.0.3",
70
+ "commitlint": "21.2.2",
71
+ "danger": "14.0.7",
72
+ "husky": "9.1.7",
73
+ "jest": "30.5.1",
74
+ "jest-environment-jsdom": "29.7.0",
75
+ "pod-install": "1.1.0",
76
+ "postinstall-postinstall": "2.1.0",
77
+ "react": "19.3.0",
78
+ "react-native": "0.78.2",
79
+ "react-native-builder-bob": "0.43.1",
80
+ "react-native-svg": "15.15.5",
81
+ "reassure": "1.6.0",
82
+ "release-it": "21.1.0",
83
+ "typescript": "6.0.3",
84
+ "universal-test-renderer": "0.6.0"
85
+ },
86
+ "peerDependencies": {
87
+ "react": ">=16.8.6",
88
+ "react-native": ">=0.76.0",
89
+ "react-native-svg": ">=12.3.0"
90
+ },
91
+ "jest": {
92
+ "preset": "react-native",
93
+ "testEnvironment": "jsdom",
94
+ "modulePathIgnorePatterns": [
95
+ "<rootDir>/examples/*/node_modules",
96
+ "<rootDir>/dist/"
97
+ ],
98
+ "transformIgnorePatterns": [
99
+ "node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|github-slugger|marked)"
100
+ ]
101
+ },
102
+ "commitlint": {
103
+ "extends": [
104
+ "@commitlint/config-conventional"
105
+ ],
106
+ "rules": {
107
+ "type-enum": [
108
+ 2,
109
+ "always",
110
+ [
111
+ "build",
112
+ "chore",
113
+ "ci",
114
+ "docs",
115
+ "feat",
116
+ "fix",
117
+ "perf",
118
+ "refactor",
119
+ "revert",
120
+ "style",
121
+ "test",
122
+ "todo",
123
+ "bump"
124
+ ]
125
+ ]
126
+ }
127
+ },
128
+ "release-it": {
129
+ "git": {
130
+ "commitMessage": "chore: release ${version}",
131
+ "tagName": "v${version}"
132
+ },
133
+ "npm": {
134
+ "publish": true
135
+ },
136
+ "github": {
137
+ "release": true,
138
+ "web": true
139
+ },
140
+ "plugins": {
141
+ "@release-it/conventional-changelog": {
142
+ "preset": "angular",
143
+ "ignoreRecommendedBump": true
144
+ }
145
+ }
146
+ },
147
+ "react-native-builder-bob": {
148
+ "source": "src",
149
+ "output": "dist",
150
+ "targets": [
151
+ "commonjs",
152
+ "module",
153
+ [
154
+ "typescript",
155
+ {
156
+ "project": "tsconfig.json",
157
+ "tsc": "./node_modules/.bin/tsc"
158
+ }
159
+ ]
160
+ ]
161
+ },
162
+ "dependencies": {
163
+ "@jsamr/counter-style": "2.0.2",
164
+ "@jsamr/react-native-li": "2.3.1",
165
+ "github-slugger": "2.0.0",
166
+ "html-entities": "2.6.0",
167
+ "marked": "18.0.13",
168
+ "react-native-reanimated-table": "0.0.2",
169
+ "svg-parser": "2.1.0"
170
+ },
171
+ "engines": {
172
+ "node": ">=18"
173
+ },
174
+ "resolutions": {
175
+ "@types/react": "19.3.0",
176
+ "**/pretty-format/react-is": "19.3.0"
177
+ }
178
+ }
@@ -1,90 +1,90 @@
1
- import React, {
2
- type FunctionComponent,
3
- memo,
4
- useEffect,
5
- useState,
6
- } from "react";
7
- import {
8
- ActivityIndicator,
9
- Image,
10
- ImageBackground,
11
- type ImageStyle,
12
- } from "react-native";
13
-
14
- type MDImageProps = {
15
- uri: string;
16
- label?: string;
17
- alt?: string;
18
- style?: ImageStyle;
19
- };
20
-
21
- type MDImageState = {
22
- isLoading: boolean;
23
- aspectRatio: number | undefined;
24
- };
25
-
26
- const MDImage: FunctionComponent<MDImageProps> = ({
27
- uri,
28
- label,
29
- alt = "Image",
30
- style,
31
- }) => {
32
- const [imageState, setImageState] = useState<MDImageState>({
33
- isLoading: true,
34
- aspectRatio: undefined,
35
- });
36
-
37
- /**
38
- * Fetches image dimension
39
- * Sets aspect ratio if resolved
40
- */
41
- const fetchOriginalSizeFromRemoteImage = () => {
42
- Image.getSize(
43
- uri,
44
- (width: number, height: number) => {
45
- if (width > 0 && height > 0) {
46
- setImageState({ isLoading: false, aspectRatio: width / height });
47
- } else {
48
- setImageState({ isLoading: false, aspectRatio: undefined });
49
- }
50
- },
51
- () => {
52
- setImageState((current) => {
53
- return {
54
- ...current,
55
- isLoading: false,
56
- };
57
- });
58
- },
59
- );
60
- };
61
-
62
- useEffect(() => {
63
- fetchOriginalSizeFromRemoteImage();
64
- });
65
-
66
- return (
67
- <ImageBackground
68
- source={{ uri: uri }}
69
- style={{
70
- width: "100%",
71
- aspectRatio: imageState.aspectRatio,
72
- }}
73
- aria-label={label}
74
- accessibilityRole="image"
75
- accessibilityLabel={alt}
76
- accessibilityHint={undefined}
77
- imageStyle={style}
78
- testID="react-native-marked-md-image"
79
- >
80
- {imageState.isLoading ? (
81
- <ActivityIndicator
82
- testID="react-native-marked-md-image-activity-indicator"
83
- size={"small"}
84
- />
85
- ) : null}
86
- </ImageBackground>
87
- );
88
- };
89
-
90
- export default memo(MDImage);
1
+ import React, {
2
+ type FunctionComponent,
3
+ memo,
4
+ useEffect,
5
+ useState,
6
+ } from "react";
7
+ import {
8
+ ActivityIndicator,
9
+ Image,
10
+ ImageBackground,
11
+ type ImageStyle,
12
+ } from "react-native";
13
+
14
+ type MDImageProps = {
15
+ uri: string;
16
+ label?: string;
17
+ alt?: string;
18
+ style?: ImageStyle;
19
+ };
20
+
21
+ type MDImageState = {
22
+ isLoading: boolean;
23
+ aspectRatio: number | undefined;
24
+ };
25
+
26
+ const MDImage: FunctionComponent<MDImageProps> = ({
27
+ uri,
28
+ label,
29
+ alt = "Image",
30
+ style,
31
+ }) => {
32
+ const [imageState, setImageState] = useState<MDImageState>({
33
+ isLoading: true,
34
+ aspectRatio: undefined,
35
+ });
36
+
37
+ /**
38
+ * Fetches image dimension
39
+ * Sets aspect ratio if resolved
40
+ */
41
+ const fetchOriginalSizeFromRemoteImage = () => {
42
+ Image.getSize(
43
+ uri,
44
+ (width: number, height: number) => {
45
+ if (width > 0 && height > 0) {
46
+ setImageState({ isLoading: false, aspectRatio: width / height });
47
+ } else {
48
+ setImageState({ isLoading: false, aspectRatio: undefined });
49
+ }
50
+ },
51
+ () => {
52
+ setImageState((current) => {
53
+ return {
54
+ ...current,
55
+ isLoading: false,
56
+ };
57
+ });
58
+ },
59
+ );
60
+ };
61
+
62
+ useEffect(() => {
63
+ fetchOriginalSizeFromRemoteImage();
64
+ });
65
+
66
+ return (
67
+ <ImageBackground
68
+ source={{ uri: uri }}
69
+ style={{
70
+ width: "100%",
71
+ aspectRatio: imageState.aspectRatio,
72
+ }}
73
+ aria-label={label}
74
+ accessibilityRole="image"
75
+ accessibilityLabel={alt}
76
+ accessibilityHint={undefined}
77
+ imageStyle={style}
78
+ testID="react-native-marked-md-image"
79
+ >
80
+ {imageState.isLoading ? (
81
+ <ActivityIndicator
82
+ testID="react-native-marked-md-image-activity-indicator"
83
+ size={"small"}
84
+ />
85
+ ) : null}
86
+ </ImageBackground>
87
+ );
88
+ };
89
+
90
+ export default memo(MDImage);
@@ -1,46 +1,46 @@
1
- import Decimal from "@jsamr/counter-style/presets/decimal";
2
- import Disc from "@jsamr/counter-style/presets/disc";
3
- import { MarkedListItem, useMarkedList } from "@jsamr/react-native-li";
4
- import React, {
5
- Fragment,
6
- type FunctionComponent,
7
- memo,
8
- type ReactNode,
9
- } from "react";
10
- import type { TextStyle, ViewStyle } from "react-native";
11
-
12
- type MDListProps = {
13
- ordered: boolean;
14
- li: ReactNode[];
15
- listStyle?: ViewStyle;
16
- textStyle?: TextStyle;
17
- startIndex?: number;
18
- };
19
-
20
- const MDList: FunctionComponent<MDListProps> = ({
21
- ordered,
22
- li,
23
- listStyle,
24
- textStyle,
25
- startIndex,
26
- }) => {
27
- const listProps = useMarkedList({
28
- counterRenderer: ordered ? Decimal : Disc,
29
- startIndex: startIndex,
30
- markerTextStyle: textStyle,
31
- markerBoxStyle: listStyle,
32
- length: li.length,
33
- });
34
-
35
- return (
36
- <Fragment>
37
- {li.map((node, index) => (
38
- <MarkedListItem key={index} index={index} {...listProps}>
39
- {node}
40
- </MarkedListItem>
41
- ))}
42
- </Fragment>
43
- );
44
- };
45
-
46
- export default memo(MDList);
1
+ import Decimal from "@jsamr/counter-style/presets/decimal";
2
+ import Disc from "@jsamr/counter-style/presets/disc";
3
+ import { MarkedListItem, useMarkedList } from "@jsamr/react-native-li";
4
+ import React, {
5
+ Fragment,
6
+ type FunctionComponent,
7
+ memo,
8
+ type ReactNode,
9
+ } from "react";
10
+ import type { TextStyle, ViewStyle } from "react-native";
11
+
12
+ type MDListProps = {
13
+ ordered: boolean;
14
+ li: ReactNode[];
15
+ listStyle?: ViewStyle;
16
+ textStyle?: TextStyle;
17
+ startIndex?: number;
18
+ };
19
+
20
+ const MDList: FunctionComponent<MDListProps> = ({
21
+ ordered,
22
+ li,
23
+ listStyle,
24
+ textStyle,
25
+ startIndex,
26
+ }) => {
27
+ const listProps = useMarkedList({
28
+ counterRenderer: ordered ? Decimal : Disc,
29
+ startIndex: startIndex,
30
+ markerTextStyle: textStyle,
31
+ markerBoxStyle: listStyle,
32
+ length: li.length,
33
+ });
34
+
35
+ return (
36
+ <Fragment>
37
+ {li.map((node, index) => (
38
+ <MarkedListItem key={index} index={index} {...listProps}>
39
+ {node}
40
+ </MarkedListItem>
41
+ ))}
42
+ </Fragment>
43
+ );
44
+ };
45
+
46
+ export default memo(MDList);