Skip to content

Commit e34e1b2

Browse files
obladoroblador
committed
Support expo and web natively
1 parent 6cc566f commit e34e1b2

36 files changed

Lines changed: 11860 additions & 2148 deletions

‎.github/workflows/tests.yml‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
name: Tests
22

33
on:
4-
- push
5-
- pull_request
4+
push:
5+
branches:
6+
- main
7+
pull_request:
68

79
jobs:
810
unit:
@@ -19,8 +21,10 @@ jobs:
1921
node-version-file: '.node-version'
2022
- name: Install dependencies
2123
run: yarn --frozen-lockfile --non-interactive --silent --ignore-scripts
22-
- name: Run tests
24+
- name: Run unit tests
2325
run: yarn test
26+
- name: Run plugin tests
27+
run: yarn test:plugin
2428

2529
ios:
2630
name: iOS integration tests

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,5 @@ node_modules/
88

99
# Logs
1010
*.log
11+
12+
plugin/build/

‎Example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"dependencies": {
1515
"react": "19.1.1",
1616
"react-native": "0.82.0",
17-
"react-native-vector-image": "^0.4.5"
17+
"react-native-vector-image": "^0.5.1"
1818
},
1919
"devDependencies": {
2020
"@babel/core": "^7.25.2",

‎Example/yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5564,10 +5564,10 @@ react-is@^19.1.1:
55645564
resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.0.tgz#ddc3b4a4e0f3336c3847f18b806506388d7b9973"
55655565
integrity sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA==
55665566

5567-
react-native-vector-image@^0.4.5:
5568-
version "0.4.5"
5569-
resolved "https://registry.yarnpkg.com/react-native-vector-image/-/react-native-vector-image-0.4.5.tgz#910a6e537d180c2082c85d91951aea6ba87e6d2f"
5570-
integrity sha512-19B9a+CXvIfTCCOG58lttULtG9/3BfBO5VBdvnElKmXov/V3mBbtAPBNwC+tmqu3cWKkAMzq8jeBwG7FxN9OAA==
5567+
react-native-vector-image@^0.5.1:
5568+
version "0.5.1"
5569+
resolved "https://registry.yarnpkg.com/react-native-vector-image/-/react-native-vector-image-0.5.1.tgz#642462da775d4ae4b64f7eed5862cefd6a4fd20c"
5570+
integrity sha512-ik2ZwzLkSPf0/PpbMBt+kaMsgewc/VqHeKDRzAa4vZeZ+WCVEAj+++yVTm/XB2QV2z3gz4nfW5TEwUM0bWhTag==
55715571
dependencies:
55725572
chalk "^4.1.1"
55735573
chroma-js "^2.1.1"

‎README.md‎

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@
88
- Faster render – ~5x faster than `react-native-svg`.
99
- Smaller JS bundle = faster startup.
1010
- Native support for dark mode.
11+
- Web support for Expo.
1112

1213
## Installation
1314

1415
```sh
1516
yarn add react-native-vector-image
1617
```
1718

18-
For expo, see [`@zamplyy/react-native-vector-image-plugin`](https://github.com/zamplyy/react-native-vector-image-plugin).
19-
2019
### Android
2120

2221
Edit `android/app/build.gradle` to look like this (without the +):
@@ -44,6 +43,44 @@ REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
4443

4544
<img width="1212" alt="" src="https://user-images.githubusercontent.com/378279/115999935-544c0600-a5ee-11eb-9c59-6fb50e434ed0.png">
4645

46+
### Expo
47+
48+
After installing this npm package, add the [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.json` or `app.config.js`:
49+
50+
```json
51+
{
52+
"expo": {
53+
"plugins": ["react-native-vector-image"]
54+
}
55+
}
56+
```
57+
58+
Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
59+
60+
#### Options
61+
62+
```json
63+
{
64+
"expo": {
65+
"plugins": [
66+
[
67+
"react-native-vector-image",
68+
{
69+
// These are default options, change if you want a different value:
70+
"stripSvgs": false, // if true, svgs will be removed from bundle. expo-updates package crashes when svgs it expects in the bundle are not there
71+
"metroConfigFile": "metro.config.js",
72+
"resetCache": false,
73+
"bundleWithExpo": true,
74+
"entryFile": "index.ts"
75+
}
76+
]
77+
]
78+
}
79+
}
80+
```
81+
82+
Shout out to [zamplyy](https://github.com/zamplyy) for making the first version of the Expo plugin.
83+
4784
## Usage
4885

4986
Since native vector assets cannot be served over http via metro dev server, they must be generated and compiled into the app bundle.
@@ -62,21 +99,24 @@ To add dark mode to your image, create a new file with an `.dark.svg` extension,
6299

63100
This takes a while as metro has to go through all the code to find the imported SVGs.
64101

102+
_Note: for Expo just use the plugin and `npx expo prebuild`._
103+
65104
```sh
66105
yarn react-native-vector-image generate
67106
```
68107

69-
| Argument | Description | Default |
70-
| ---------------------- | ---------------------------------------------------------------- | ----------------------------- |
71-
| `--entry-file` | Path to the app entrypoint file. | `index.js` |
72-
| `--config` | Path to the metro config file. | `metro.config.js` |
73-
| `--reset-cache` | Reset metro cache before extracting SVG assets. | `false` |
74-
| `--ios-output` | Path to an iOS `.xcassets` folder. | `ios/AppName/Images.xcassets` |
75-
| `--no-ios-output` | Disable iOS output. | `false` |
76-
| `--android-output` | Path to an Android `res` folder. | `android/app/src/main/res` |
77-
| `--no-android-output` | Disable Android output. | `false` |
78-
| `--current-color` | Replace any `currentColor` color references in SVGs. | `#000000` |
79-
| `--current-color-dark` | Replace any `currentColor` color references in `.dark.svg` SVGs. | `#ffffff` |
108+
| Argument | Description | Default |
109+
| ---------------------- | -------------------------------------------------------------------- | ----------------------------- |
110+
| `--entry-file` | Path to the app entrypoint file. | `index.js` |
111+
| `--config` | Path to the metro config file. | `metro.config.js` |
112+
| `--reset-cache` | Reset metro cache before extracting SVG assets. | `false` |
113+
| `--bundle-with-expo` | Whether to bundle the app with Expo presets or using metro directly. | `false` |
114+
| `--ios-output` | Path to an iOS `.xcassets` folder. | `ios/AppName/Images.xcassets` |
115+
| `--no-ios-output` | Disable iOS output. | `false` |
116+
| `--android-output` | Path to an Android `res` folder. | `android/app/src/main/res` |
117+
| `--no-android-output` | Disable Android output. | `false` |
118+
| `--current-color` | Replace any `currentColor` color references in SVGs. | `#000000` |
119+
| `--current-color-dark` | Replace any `currentColor` color references in `.dark.svg` SVGs. | `#ffffff` |
80120

81121
### Step 3: recompile
82122

‎app.plugin.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./plugin/build/withVectorImage');

‎expo-module.config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"platforms": ["apple", "android", "web"]
3+
}

‎package.json‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@
1010
"url": "git+https://github.com/oblador/react-native-vector-image.git"
1111
},
1212
"scripts": {
13-
"test": "jest src"
13+
"test": "jest src",
14+
"build:plugin": "expo-module build plugin",
15+
"test:plugin": "expo-module test plugin",
16+
"prepare": "expo-module prepare plugin",
17+
"prepublishOnly": "expo-module prepublishOnly plugin"
1418
},
1519
"bin": {
1620
"react-native-vector-image": "bin/react-native-vector-image.js"
1721
},
1822
"files": [
1923
"bin",
2024
"src",
25+
"app.plugin.js",
26+
"expo-module.config.json",
27+
"plugin/build",
2128
"strip_svgs.sh",
2229
"strip_svgs.gradle",
2330
"!*.spec.js",
@@ -51,7 +58,10 @@
5158
}
5259
},
5360
"devDependencies": {
54-
"jest": "^26.6.3",
61+
"expo-module-scripts": "^5.0.7",
62+
"expo": "^54.0.12",
63+
"react-native": "0.81.4",
64+
"jest": "^29.6.3",
5565
"metro": ">=0.83.3",
5666
"metro-config": ">=0.83.3",
5767
"prettier": "^2.2.1"

‎plugin/.eslintrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
root: true,
3+
extends: ['universe/native', 'universe/web'],
4+
ignorePatterns: ['build'],
5+
};

‎plugin/__tests__/android/withVectorImage-test.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import * as fs from 'fs/promises';
2+
import { resolve } from 'path';
3+
4+
import { addStripSvgsImplementation } from '../../src/withVectorImage';
5+
6+
describe('addStripSvgsImplementation', () => {
7+
it(`adds string`, async () => {
8+
const sampleBuildGradle = await fs.readFile(
9+
resolve(__dirname, '../fixtures/build.gradle'),
10+
'utf8'
11+
);
12+
const buildGradle = await addStripSvgsImplementation(sampleBuildGradle);
13+
const addString =
14+
'apply from: "../../node_modules/react-native-vector-image/strip_svgs.gradle"';
15+
expect(buildGradle.includes(addString)).toEqual(true);
16+
});
17+
});

0 commit comments

Comments
 (0)