├── assets ├── icon.png ├── favicon.png ├── splash.png └── adaptive-icon.png ├── babel.config.js ├── .gitignore ├── package.json ├── README.md ├── app.json └── App.js /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabit3/react-strict-dom-example/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabit3/react-strict-dom-example/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabit3/react-strict-dom-example/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dabit3/react-strict-dom-example/HEAD/assets/adaptive-icon.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rndomexample", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "expo": "~50.0.7", 13 | "expo-build-properties": "^0.11.1", 14 | "expo-status-bar": "~1.11.1", 15 | "react": "18.2.0", 16 | "react-native": "0.73.4", 17 | "react-strict-dom": "^0.0.1" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.20.0" 21 | }, 22 | "private": true 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Example of React Strict Dom 2 | 3 | Build native mobile apps with HTML via React Native 4 | 5 | Barebones example of how to integrate [React Strict Dom](https://github.com/facebook/react-strict-dom/tree/main) 6 | 7 | ### Prerequisites 8 | 9 | For compiling to a native binary, must have either Android Studio or Xcode installed on your machine. 10 | 11 | For testing as is, you can use Expo Go without the need to set up any mobile development environments on your machine. 12 | 13 | ### Getting started 14 | 15 | 1. Clone the repo 16 | 17 | 2. Install the dependencies 18 | 19 | 3. Run the app 20 | 21 | ```sh 22 | npm start 23 | ``` -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "rndomexample", 4 | "slug": "rndomexample", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { css, html } from 'react-strict-dom'; 2 | import { LogBox } from 'react-native'; 3 | LogBox.ignoreLogs(['Failed prop type']) 4 | 5 | const styles = css.create({ 6 | container: { 7 | display: 'flex', 8 | flex: 1, 9 | flexDirection: 'column', 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | borderTopWidth: 1 13 | }, 14 | h1: { padding: 10 }, 15 | button: { 16 | borderRadius: 20, 17 | backgroundColor: '#700fad', 18 | padding: 10, 19 | paddingLeft: 50, 20 | paddingRight: 50 21 | }, 22 | buttonText: { 23 | color: 'white', 24 | position: 'relative', 25 | fontWeight: 'bold' 26 | } 27 | }); 28 | 29 | export default function App() { 30 | return ( 31 | 32 | Hello World 33 | alert('Hello World')} 36 | > 37 | 40 | Click me 41 | 42 | 43 | 44 | ); 45 | } 46 | --------------------------------------------------------------------------------