Skip to content

Commit 9ee2fbb

Browse files
theashraftheashraf
authored
feat: add web platform support (#18)
1 parent cd880b7 commit 9ee2fbb

File tree

12 files changed

+2939
-59
lines changed

12 files changed

+2939
-59
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,3 +155,34 @@ jobs:
155155
- name: Build example for iOS
156156
run: |
157157
yarn turbo run build:ios --cache-dir="${{ env.TURBO_CACHE_DIR }}"
158+
159+
build-web:
160+
runs-on: ubuntu-latest
161+
env:
162+
TURBO_CACHE_DIR: .turbo/web
163+
steps:
164+
- name: Checkout
165+
uses: actions/checkout@v3
166+
167+
- name: Setup
168+
uses: ./.github/actions/setup
169+
170+
- name: Cache turborepo for Web
171+
uses: actions/cache@v3
172+
with:
173+
path: ${{ env.TURBO_CACHE_DIR }}
174+
key: ${{ runner.os }}-turborepo-web-${{ hashFiles('yarn.lock') }}
175+
restore-keys: |
176+
${{ runner.os }}-turborepo-web-
177+
178+
- name: Check turborepo cache for Web
179+
run: |
180+
TURBO_CACHE_STATUS=$(node -p "($(yarn turbo run build:web --cache-dir="${{ env.TURBO_CACHE_DIR }}" --dry=json)).tasks.find(t => t.task === 'build:web').cache.status")
181+
182+
if [[ $TURBO_CACHE_STATUS == "HIT" ]]; then
183+
echo "turbo_cache_hit=1" >> $GITHUB_ENV
184+
fi
185+
186+
- name: Build example for Web
187+
run: |
188+
yarn turbo run build:web --cache-dir="${{ env.TURBO_CACHE_DIR }}"

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,6 @@ android/keystores/debug.keystore
7676

7777
# generated by bob
7878
lib/
79+
80+
# Web build output
81+
example/dist/

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# dotLottie React Native
22

3-
Lottie & dotLottie component for React Native ([iOS](https://github.com/LottieFiles/dotlottie-ios/) and [Android](https://github.com/LottieFiles/dotlottie-android/))
3+
Lottie & dotLottie component for React Native ([iOS](https://github.com/LottieFiles/dotlottie-ios/), [Android](https://github.com/LottieFiles/dotlottie-android/), and [Web](https://github.com/LottieFiles/dotlottie-web))
44

55
## Installation
66

@@ -59,6 +59,10 @@ If you're using Expo, you need to prebuild to generate the `ios` and `android` f
5959
expo prebuild
6060
```
6161

62+
### Web Support
63+
64+
This package supports React Native Web out of the box. The web implementation uses [@lottiefiles/dotlottie-react](https://www.npmjs.com/package/@lottiefiles/dotlottie-react) under the hood.
65+
6266
## Usage
6367

6468
```ts

‎example/index.web.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { AppRegistry } from 'react-native';
2+
import App from './src/App';
3+
4+
const appName = 'DotlottieReactNativeExample';
5+
6+
AppRegistry.registerComponent(appName, () => App);
7+
AppRegistry.runApplication(appName, {
8+
rootTag: document.getElementById('root'),
9+
});

‎example/ios/Podfile.lock‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
PODS:
22
- boost (1.83.0)
3-
- dotlottie-react-native (0.1.0):
3+
- dotlottie-react-native (0.4.0):
44
- DoubleConversion
55
- glog
66
- hermes-engine
@@ -1369,7 +1369,7 @@ EXTERNAL SOURCES:
13691369

13701370
SPEC CHECKSUMS:
13711371
boost: d3f49c53809116a5d38da093a8aa78bf551aed09
1372-
dotlottie-react-native: 82c886d469116f3df53a7a716a28331e90de6c0c
1372+
dotlottie-react-native: 2dca6e93d8a88e7aec97ae35a58ac97b1d578af6
13731373
DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
13741374
FBLazyVector: ac12dc084d1c8ec4cc4d7b3cf1b0ebda6dab85af
13751375
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
@@ -1428,4 +1428,4 @@ SPEC CHECKSUMS:
14281428

14291429
PODFILE CHECKSUM: 4a9daf08dfcda3ac66e0b9e1e6316e5fc85ee0e2
14301430

1431-
COCOAPODS: 1.16.2
1431+
COCOAPODS: 1.14.3

‎example/package.json‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,32 @@
55
"scripts": {
66
"android": "react-native run-android",
77
"ios": "react-native run-ios",
8+
"web": "webpack serve --mode development",
89
"start": "react-native start",
910
"build:android": "react-native build-android --extra-params \"--no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a\"",
10-
"build:ios": "react-native build-ios --scheme DotlottieReactNativeExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\""
11+
"build:ios": "react-native build-ios --scheme DotlottieReactNativeExample --mode Debug --extra-params \"-sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO\"",
12+
"build:web": "webpack --mode production"
1113
},
1214
"dependencies": {
1315
"react": "18.2.0",
14-
"react-native": "0.74.5"
16+
"react-dom": "18.2.0",
17+
"react-native": "0.74.5",
18+
"react-native-web": "^0.21.1"
1519
},
1620
"devDependencies": {
1721
"@babel/core": "^7.20.0",
1822
"@babel/preset-env": "^7.20.0",
23+
"@babel/preset-react": "^7.27.1",
1924
"@babel/runtime": "^7.20.0",
2025
"@react-native/babel-preset": "0.74.87",
2126
"@react-native/metro-config": "0.74.87",
2227
"@react-native/typescript-config": "0.74.87",
23-
"react-native-builder-bob": "^0.29.0"
28+
"babel-loader": "^10.0.0",
29+
"html-webpack-plugin": "^5.6.4",
30+
"react-native-builder-bob": "^0.29.0",
31+
"webpack": "^5.102.1",
32+
"webpack-cli": "^6.0.1",
33+
"webpack-dev-server": "^5.2.2"
2434
},
2535
"engines": {
2636
"node": ">=18"

‎example/public/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>DotLottie React Native - Web Example</title>
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
margin: 0;
15+
padding: 0;
16+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
17+
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
18+
'Helvetica Neue', sans-serif;
19+
-webkit-font-smoothing: antialiased;
20+
-moz-osx-font-smoothing: grayscale;
21+
}
22+
23+
#root {
24+
height: 100vh;
25+
width: 100vw;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<div id="root"></div>
32+
</body>
33+
34+
</html>

‎example/webpack.config.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
const path = require('path');
2+
const HtmlWebpackPlugin = require('html-webpack-plugin');
3+
4+
module.exports = {
5+
entry: './index.web.js',
6+
mode: 'development',
7+
output: {
8+
path: path.resolve(__dirname, 'dist'),
9+
filename: 'bundle.js',
10+
},
11+
module: {
12+
rules: [
13+
{
14+
test: /\.(js|jsx|ts|tsx)$/,
15+
exclude: /node_modules(?!\/@lottiefiles)/,
16+
include: [
17+
path.resolve(__dirname, 'src'),
18+
path.resolve(__dirname, '../src'),
19+
path.resolve(__dirname, 'node_modules/@lottiefiles'),
20+
],
21+
use: {
22+
loader: 'babel-loader',
23+
options: {
24+
presets: [
25+
'@babel/preset-env',
26+
['@babel/preset-react', { runtime: 'automatic' }],
27+
'@react-native/babel-preset',
28+
],
29+
},
30+
},
31+
},
32+
{
33+
test: /\.(png|jpe?g|gif|svg|lottie)$/i,
34+
type: 'asset/resource',
35+
},
36+
],
37+
},
38+
resolve: {
39+
extensions: [
40+
'.web.tsx',
41+
'.web.ts',
42+
'.web.js',
43+
'.tsx',
44+
'.ts',
45+
'.js',
46+
'.json',
47+
],
48+
alias: {
49+
'react-native$': 'react-native-web',
50+
'@lottiefiles/dotlottie-react-native': path.resolve(
51+
__dirname,
52+
'../src/index.ts'
53+
),
54+
},
55+
modules: [
56+
path.resolve(__dirname, 'node_modules'),
57+
path.resolve(__dirname, '../node_modules'),
58+
'node_modules',
59+
],
60+
},
61+
plugins: [
62+
new HtmlWebpackPlugin({
63+
template: './public/index.html',
64+
}),
65+
],
66+
devServer: {
67+
static: {
68+
directory: path.join(__dirname, 'public'),
69+
},
70+
compress: true,
71+
port: 8080,
72+
hot: true,
73+
open: true,
74+
},
75+
devtool: 'source-map',
76+
};

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"source": "./src/index.ts",
66
"main": "./lib/commonjs/index.js",
77
"module": "./lib/module/index.js",
8+
"react-native": "./src/index.ts",
89
"exports": {
910
".": {
1011
"import": {
@@ -40,14 +41,15 @@
4041
"test": "jest",
4142
"typecheck": "tsc",
4243
"lint": "eslint \"**/*.{js,ts,tsx}\"",
43-
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
44+
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build example/dist lib",
4445
"prepare": "bob build",
4546
"release": "release-it"
4647
},
4748
"keywords": [
4849
"react-native",
4950
"ios",
5051
"android",
52+
"web",
5153
"lottie",
5254
"dotlottie",
5355
"player",
@@ -190,5 +192,8 @@
190192
"type": "view-legacy",
191193
"languages": "kotlin-swift",
192194
"version": "0.40.0"
195+
},
196+
"dependencies": {
197+
"@lottiefiles/dotlottie-react": "^0.17.5"
193198
}
194199
}

0 commit comments

Comments
 (0)