├── .dockerignore ├── .gitignore ├── App.js ├── Dockerfile ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── favicon.png ├── icon.png ├── snack-icon.png └── splash.png ├── babel.config.js ├── components └── AssetExample.js └── package.json /.dockerignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { Text, SafeAreaView, StyleSheet } from 'react-native'; 2 | 3 | // You can import supported modules from npm 4 | import { Card } from 'react-native-paper'; 5 | 6 | // or any files within the Snack 7 | import AssetExample from './components/AssetExample'; 8 | 9 | export default function App() { 10 | return ( 11 | 12 | 13 | Change code in the editor and watch it change on your phone! Save to get a shareable url. 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | const styles = StyleSheet.create({ 23 | container: { 24 | flex: 1, 25 | justifyContent: 'center', 26 | backgroundColor: '#ecf0f1', 27 | padding: 8, 28 | }, 29 | paragraph: { 30 | margin: 24, 31 | fontSize: 18, 32 | fontWeight: 'bold', 33 | textAlign: 'center', 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:20-alpine 2 | 3 | RUN addgroup app && adduser -S -G app app 4 | 5 | USER app 6 | 7 | WORKDIR /app 8 | 9 | COPY package*.json ./ 10 | 11 | USER root 12 | 13 | RUN chown -R app:app . 14 | 15 | USER app 16 | 17 | RUN npm install 18 | 19 | COPY . . 20 | 21 | EXPOSE 5173 22 | 23 | CMD npm run dev -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sample Snack app 2 | 3 | Open the `App.js` file to start writing some code. You can preview the changes directly on your phone or tablet by scanning the **QR code** or use the iOS or Android emulators. When you're done, click **Save** and share the link! 4 | 5 | When you're ready to see everything that Expo provides (or if you want to use your own editor) you can **Download** your project and use it with [expo cli](https://docs.expo.dev/get-started/installation/#expo-cli)). 6 | 7 | All projects created in Snack are publicly available, so you can easily share the link to this project via link, or embed it on a web page with the `<>` button. 8 | 9 | If you're having problems, you can tweet to us [@expo](https://twitter.com/expo) or ask in our [forums](https://forums.expo.dev/c/expo-dev-tools/61) or [Discord](https://chat.expo.dev/). 10 | 11 | Snack is Open Source. You can find the code on the [GitHub repo](https://github.com/expo/snack). 12 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-docker", 4 | "slug": "snack-e02e93c5-ac09-4233-9bba-c3af39e2d03c", 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 | } -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mustafa-Hassan2001/react-docker/355bdcf5c4f78601af8b1b91100558123112bfba/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mustafa-Hassan2001/react-docker/355bdcf5c4f78601af8b1b91100558123112bfba/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mustafa-Hassan2001/react-docker/355bdcf5c4f78601af8b1b91100558123112bfba/assets/icon.png -------------------------------------------------------------------------------- /assets/snack-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mustafa-Hassan2001/react-docker/355bdcf5c4f78601af8b1b91100558123112bfba/assets/snack-icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mustafa-Hassan2001/react-docker/355bdcf5c4f78601af8b1b91100558123112bfba/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /components/AssetExample.js: -------------------------------------------------------------------------------- 1 | import { Text, View, StyleSheet, Image } from 'react-native'; 2 | 3 | export default function AssetExample() { 4 | return ( 5 | 6 | 7 | Local files and assets can be imported by dragging and dropping them into the editor 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | const styles = StyleSheet.create({ 15 | container: { 16 | alignItems: 'center', 17 | justifyContent: 'center', 18 | padding: 24, 19 | }, 20 | paragraph: { 21 | margin: 24, 22 | marginTop: 0, 23 | fontSize: 14, 24 | fontWeight: 'bold', 25 | textAlign: 'center', 26 | }, 27 | logo: { 28 | height: 128, 29 | width: 128, 30 | } 31 | }); 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web" 8 | }, 9 | "dependencies": { 10 | "expo": "~50.0.13", 11 | "expo-status-bar": "~1.11.1", 12 | "react": "18.2.0", 13 | "react-native": "0.73.5", 14 | "react-native-paper": "4.9.2", 15 | "@expo/vector-icons": "^14.0.0" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.20.0" 19 | }, 20 | "private": true 21 | } --------------------------------------------------------------------------------