├── .watchmanconfig ├── .editorconfig ├── app.json ├── babel.config.js ├── android ├── app │ ├── debug.keystore │ ├── src │ │ ├── main │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ └── ic_launcher_round.png │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── tryskia │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ └── AndroidManifest.xml │ │ └── debug │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ └── com │ │ │ └── tryskia │ │ │ └── ReactNativeFlipper.java │ ├── proguard-rules.pro │ ├── build_defs.bzl │ ├── _BUCK │ └── build.gradle ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── settings.gradle ├── build.gradle ├── gradle.properties ├── gradlew.bat └── gradlew ├── ios ├── tryskia │ ├── Images.xcassets │ │ ├── Contents.json │ │ └── AppIcon.appiconset │ │ │ └── Contents.json │ ├── AppDelegate.h │ ├── main.m │ ├── Info.plist │ ├── AppDelegate.m │ └── LaunchScreen.storyboard ├── tryskiaTests │ ├── Info.plist │ └── tryskiaTests.m ├── Podfile └── tryskia.xcodeproj │ ├── xcshareddata │ └── xcschemes │ │ └── tryskia.xcscheme │ └── project.pbxproj ├── .buckconfig ├── .gitattributes ├── App.tsx ├── .eslintrc.js ├── .prettierrc.js ├── src ├── drawing │ ├── constants.tsx │ ├── history.tsx │ ├── utils.tsx │ └── index.tsx ├── components │ ├── stroke.tsx │ ├── color.tsx │ ├── header.tsx │ └── toolbar.tsx └── store │ └── index.tsx ├── index.js ├── __tests__ └── App-test.js ├── metro.config.js ├── README.md ├── tsconfig.json ├── .gitignore ├── package.json ├── LICENSE ├── .flowconfig ├── blog.md └── item.svg /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Windows files 2 | [*.bat] 3 | end_of_line = crlf 4 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tryskia", 3 | "displayName": "tryskia" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | tryskia 3 | 4 | -------------------------------------------------------------------------------- /ios/tryskia/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Windows files should use crlf line endings 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | *.bat text eol=crlf 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Drawing from './src/drawing'; 3 | 4 | const App = () => { 5 | return ; 6 | }; 7 | 8 | export default App; 9 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | plugins: { 5 | 'react-native/no-inline-styles': 'no', 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ammarahm-ed/drawing-board/HEAD/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /src/drawing/constants.tsx: -------------------------------------------------------------------------------- 1 | const colors = ['black', 'red', 'blue', 'green']; 2 | const strokes = [1, 2, 3, 4, 5, 6, 7, 8]; 3 | 4 | export default { 5 | colors, 6 | strokes, 7 | }; 8 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'tryskia' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /ios/tryskia/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /ios/tryskia/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/tryskia/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.tryskia; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "tryskia"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # drawing-app 2 | A fully native drawing app made with react-native-skia with 60 frames per second performance. Created for my [blogpost](https://blog.notesnook.com/drawing-app-with-react-native-skia). 3 | 4 | ## Run the app 5 | Clone this repository 6 | 7 | ``` 8 | git clone https://github.com/ammarahm-ed/drawing-board.git 9 | ``` 10 | Run `npm install` and then run the app. 11 | 12 | ``` 13 | npm run android 14 | ``` 15 | 16 | # 17 | 18 | MIT Licensed 19 | -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "commonjs", 5 | "lib": ["es2017"], 6 | "allowJs": true, 7 | "baseUrl": "./", 8 | "jsx": "react-native", 9 | "noEmit": true, 10 | "isolatedModules": true, 11 | "strict": true, 12 | "moduleResolution": "node", 13 | "allowSyntheticDefaultImports": true, 14 | "esModuleInterop": true, 15 | "skipLibCheck": false 16 | }, 17 | "exclude": [ 18 | "node_modules", 19 | "babel.config.js", 20 | "metro.config.js", 21 | "jest.config.js" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /ios/tryskia/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/tryskiaTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, '11.0' 5 | 6 | target 'tryskia' do 7 | config = use_native_modules! 8 | 9 | use_react_native!( 10 | :path => config[:reactNativePath], 11 | # to enable hermes on iOS, change `false` to `true` and then install pods 12 | :hermes_enabled => false 13 | ) 14 | 15 | target 'tryskiaTests' do 16 | inherit! :complete 17 | # Pods for testing 18 | end 19 | 20 | # Enables Flipper. 21 | # 22 | # Note that if you have use_frameworks! enabled, Flipper will not work and 23 | # you should disable the next line. 24 | use_flipper!() 25 | 26 | post_install do |installer| 27 | react_native_post_install(installer) 28 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 29 | end 30 | end 31 | -------------------------------------------------------------------------------- /src/components/stroke.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {GestureResponderEvent, TouchableOpacity, View} from 'react-native'; 3 | import useDrawingStore from '../store'; 4 | 5 | const Stroke = ({ 6 | onPress, 7 | stroke, 8 | }: { 9 | onPress?: (event: GestureResponderEvent) => void; 10 | stroke: number; 11 | }) => { 12 | const currentColor = useDrawingStore(state => state.color); 13 | return ( 14 | 23 | 35 | 36 | ); 37 | }; 38 | 39 | export default Stroke; 40 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/drawing/history.tsx: -------------------------------------------------------------------------------- 1 | import useDrawingStore, {CurrentPath} from '../store'; 2 | 3 | const history: { 4 | undo: CurrentPath[]; 5 | redo: CurrentPath[]; 6 | } = { 7 | undo: [], 8 | redo: [], 9 | }; 10 | 11 | function undo() { 12 | if (history.undo.length === 0) return; 13 | let lastPath = history.undo[history.undo.length - 1]; 14 | history.redo.push(lastPath); 15 | history.undo.splice(history.undo.length - 1, 1); 16 | useDrawingStore.getState().setCompletedPaths([...history.undo]); 17 | } 18 | 19 | function redo() { 20 | if (history.redo.length === 0) return; 21 | let lastPath = history.redo[history.redo.length - 1]; 22 | history.redo.splice(history.redo.length - 1, 1); 23 | history.undo.push(lastPath); 24 | useDrawingStore.getState().setCompletedPaths([...history.undo]); 25 | } 26 | 27 | function clear() { 28 | history.undo = []; 29 | history.redo = []; 30 | } 31 | 32 | function push(path: CurrentPath) { 33 | history.undo.push(path); 34 | } 35 | 36 | export default { 37 | history, 38 | undo, 39 | redo, 40 | push, 41 | clear, 42 | }; 43 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # Android/IntelliJ 25 | # 26 | build/ 27 | .idea 28 | .gradle 29 | local.properties 30 | *.iml 31 | *.hprof 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | !debug.keystore 44 | 45 | # fastlane 46 | # 47 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 48 | # screenshots whenever they are needed. 49 | # For more information about the recommended setup visit: 50 | # https://docs.fastlane.tools/best-practices/source-control/ 51 | 52 | */fastlane/report.xml 53 | */fastlane/Preview.html 54 | */fastlane/screenshots 55 | 56 | # Bundle artifact 57 | *.jsbundle 58 | 59 | # CocoaPods 60 | /ios/Pods/ 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tryskia", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "start": "react-native start", 9 | "test": "jest", 10 | "lint": "eslint ." 11 | }, 12 | "dependencies": { 13 | "@shopify/react-native-skia": "https://github.com/Shopify/react-native-skia/releases/download/v0.1.103-alpha/shopify-react-native-skia-0.1.103.tgz", 14 | "react": "17.0.2", 15 | "react-native": "0.66.4", 16 | "zustand": "^3.7.0" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.12.9", 20 | "@babel/runtime": "^7.12.5", 21 | "@react-native-community/eslint-config": "^2.0.0", 22 | "@types/react": "^17.0.37", 23 | "@types/react-native": "^0.66.9", 24 | "babel-jest": "^26.6.3", 25 | "eslint": "7.14.0", 26 | "jest": "^26.6.3", 27 | "metro-react-native-babel-preset": "^0.66.2", 28 | "react-test-renderer": "17.0.2", 29 | "typescript": "^4.5.4" 30 | }, 31 | "jest": { 32 | "preset": "react-native" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ammar Ahmed 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "30.0.2" 6 | minSdkVersion = 21 7 | compileSdkVersion = 30 8 | targetSdkVersion = 30 9 | ndkVersion = "21.4.7075529" 10 | } 11 | repositories { 12 | google() 13 | mavenCentral() 14 | } 15 | dependencies { 16 | classpath("com.android.tools.build:gradle:4.2.2") 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenCentral() 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | maven { url 'https://www.jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/color.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | GestureResponderEvent, 4 | StyleSheet, 5 | TouchableOpacity, 6 | View, 7 | } from 'react-native'; 8 | import utils from '../drawing/utils'; 9 | import useDrawingStore from '../store'; 10 | 11 | const Color = ({ 12 | onPress, 13 | color, 14 | }: { 15 | onPress?: (event: GestureResponderEvent) => void; 16 | color: string; 17 | }) => { 18 | const currentColor = useDrawingStore(state => state.color); 19 | 20 | return ( 21 | 30 | {color === currentColor && ( 31 | 39 | )} 40 | 41 | ); 42 | }; 43 | 44 | export default Color; 45 | 46 | const styles = StyleSheet.create({ 47 | color: { 48 | width: 35, 49 | height: 35, 50 | marginRight: 10, 51 | borderRadius: 100, 52 | borderWidth: 2, 53 | borderColor: '#f0f0f0', 54 | ...utils.getElevation(1), 55 | justifyContent: 'center', 56 | alignItems: 'center', 57 | }, 58 | }); 59 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.99.0 29 | -------------------------------------------------------------------------------- /android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.tryskia", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.tryskia", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /src/store/index.tsx: -------------------------------------------------------------------------------- 1 | import {DrawingInfo, IPaint, IPath} from '@shopify/react-native-skia'; 2 | import create, {State} from 'zustand'; 3 | import utils from '../drawing/utils'; 4 | 5 | export type CurrentPath = { 6 | path: IPath; 7 | paint: IPaint; 8 | color?: string; 9 | }; 10 | 11 | interface DrawingStore extends State { 12 | /** 13 | * Array of completed paths for redrawing 14 | */ 15 | completedPaths: CurrentPath[]; 16 | /** 17 | * A function to update completed paths 18 | */ 19 | setCompletedPaths: (completedPaths: CurrentPath[]) => void; 20 | /** 21 | * Current stroke 22 | */ 23 | stroke: IPaint; 24 | /** 25 | * Width of the stroke 26 | */ 27 | strokeWidth: number; 28 | /** 29 | * Color of the stroke 30 | */ 31 | color: string; 32 | setStrokeWidth: (strokeWidth: number) => void; 33 | setColor: (color: string) => void; 34 | setStroke: (stroke: IPaint) => void; 35 | canvasInfo: Partial | null; 36 | setCanvasInfo: (canvasInfo: Partial) => void; 37 | } 38 | 39 | const useDrawingStore = create((set, get) => ({ 40 | completedPaths: [], 41 | setCompletedPaths: completedPaths => { 42 | set({completedPaths}); 43 | }, 44 | strokeWidth: 2, 45 | color: 'black', 46 | stroke: utils.getPaint(2, 'black'), 47 | setStrokeWidth: strokeWidth => { 48 | set({strokeWidth}); 49 | }, 50 | setColor: color => { 51 | set({color}); 52 | }, 53 | setStroke: stroke => { 54 | set({stroke}); 55 | }, 56 | canvasInfo: null, 57 | setCanvasInfo: canvasInfo => { 58 | set({canvasInfo}); 59 | }, 60 | })); 61 | 62 | export default useDrawingStore; 63 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore polyfills 9 | node_modules/react-native/Libraries/polyfills/.* 10 | 11 | ; Flow doesn't support platforms 12 | .*/Libraries/Utilities/LoadingView.js 13 | 14 | [untyped] 15 | .*/node_modules/@react-native-community/cli/.*/.* 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/interface.js 21 | node_modules/react-native/flow/ 22 | 23 | [options] 24 | emoji=true 25 | 26 | exact_by_default=true 27 | 28 | format.bracket_spacing=false 29 | 30 | module.file_ext=.js 31 | module.file_ext=.json 32 | module.file_ext=.ios.js 33 | 34 | munge_underscores=true 35 | 36 | module.name_mapper='^react-native/\(.*\)$' -> '/node_modules/react-native/\1' 37 | module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '/node_modules/react-native/Libraries/Image/RelativeImageStub' 38 | 39 | suppress_type=$FlowIssue 40 | suppress_type=$FlowFixMe 41 | suppress_type=$FlowFixMeProps 42 | suppress_type=$FlowFixMeState 43 | 44 | [lints] 45 | sketchy-null-number=warn 46 | sketchy-null-mixed=warn 47 | sketchy-number=warn 48 | untyped-type-import=warn 49 | nonstrict-import=warn 50 | deprecated-type=warn 51 | unsafe-getters-setters=warn 52 | unnecessary-invariant=warn 53 | signature-verification-failure=warn 54 | 55 | [strict] 56 | deprecated-type 57 | nonstrict-import 58 | sketchy-null 59 | unclear-type 60 | unsafe-getters-setters 61 | untyped-import 62 | untyped-type-import 63 | 64 | [version] 65 | ^0.158.0 66 | -------------------------------------------------------------------------------- /blog.md: -------------------------------------------------------------------------------- 1 | When it comes to comparing Flutter with React Native, the most popular argument has been more native user experience on flutter with buttery smooth animations and graphics drawing support. Flutter uses (Skia)[https://skia.org/], a very popular, open-source, made by Google 2D graphics engine used in Chrome and Android to draw everything natively with great performance. While React Native uses Platform specific rendering engines, which is great but slower. All this slowness is there because of a bridge which sends all information to Java/ObjC in batches. When bridge is busy with a lot of work, FPS drops, you see blank spaces in FlatLists etc with heavier components because the bridge is overloaded. 2 | 3 | React Native made a good jump in performance with Hermes release but soon the React Native team realized that the only factor holding back performance was the bridge. React Native needed a better and faster way of communication with Native Platforms. And the React Native team started to work on the new architecture (JSI + Fabric + Turbo Modules). 4 | 5 | Today the new architecture is in it's final stages to be released to the public in next react-native release and many things for React Native are changing and improving. It's still very vague how the new architecture works however some libraries have been built using the new architecture. 6 | 7 | Currently only a handful of libraries have used to this new architecture. The most prominent ones have been (react-native-reanimated)[] and (@spotify/react-native-skia)[]. Today we will be exploring @spotify/react-native-skia by creating a free-hand drawing app to understand the possibilities and how it enables us to do amazing stuff fully native at 60FPS! 8 | 9 | -------------------------------------------------------------------------------- /ios/tryskia/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | tryskia 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UISupportedInterfaceOrientations 47 | 48 | UIInterfaceOrientationPortrait 49 | UIInterfaceOrientationLandscapeLeft 50 | UIInterfaceOrientationLandscapeRight 51 | 52 | UIViewControllerBasedStatusBarAppearance 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ios/tryskiaTests/tryskiaTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface tryskiaTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation tryskiaTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 38 | if (level >= RCTLogLevelError) { 39 | redboxError = message; 40 | } 41 | }); 42 | #endif 43 | 44 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 45 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 46 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | 48 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 49 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 50 | return YES; 51 | } 52 | return NO; 53 | }]; 54 | } 55 | 56 | #ifdef DEBUG 57 | RCTSetLogFunction(RCTDefaultLogFunction); 58 | #endif 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /src/drawing/utils.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | PaintStyle, 3 | Skia, 4 | StrokeCap, 5 | StrokeJoin, 6 | } from '@shopify/react-native-skia'; 7 | import {CurrentPath} from '../store'; 8 | 9 | //@ts-ignore adding a function to get random value from array 10 | Array.prototype.sample = function () { 11 | return this[Math.floor(Math.random() * this.length)]; 12 | }; 13 | 14 | /** 15 | * Get a stroke with the given parameters 16 | * 17 | * @param strokeWidth 18 | * @param color 19 | * @returns 20 | */ 21 | const getPaint = (strokeWidth: number, color: string) => { 22 | const paint = Skia.Paint(); 23 | paint.setStrokeWidth(strokeWidth); 24 | paint.setStrokeMiter(5); 25 | paint.setStyle(PaintStyle.Stroke); 26 | paint.setStrokeCap(StrokeCap.Round); 27 | paint.setStrokeJoin(StrokeJoin.Round); 28 | paint.setAntiAlias(true); 29 | const _color = paint.copy(); 30 | _color.setColor(Skia.Color(color)); 31 | console.log(color); 32 | return _color; 33 | }; 34 | 35 | /** 36 | * A function get get elevation style for android/ios. 37 | * @param elevation 38 | * @returns 39 | */ 40 | const getElevation = (elevation: number) => { 41 | return { 42 | elevation, 43 | shadowColor: 'black', 44 | shadowOffset: {width: 0.3 * elevation, height: 0.5 * elevation}, 45 | shadowOpacity: 0.2, 46 | shadowRadius: 0.7 * elevation, 47 | }; 48 | }; 49 | 50 | const makeSvgFromPaths = ( 51 | paths: CurrentPath[], 52 | options: { 53 | width: number; 54 | height: number; 55 | backgroundColor?: string; 56 | }, 57 | ) => { 58 | return ` 63 | 66 | 67 | 68 | ${paths.map(path => 69 | path.paint && path.path 70 | ? `` 73 | : '', 74 | )} 75 | 76 | `; 77 | }; 78 | 79 | export default {getPaint, getElevation, makeSvgFromPaths}; 80 | -------------------------------------------------------------------------------- /ios/tryskia/AppDelegate.m: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | #import 5 | #import 6 | 7 | #ifdef FB_SONARKIT_ENABLED 8 | #import 9 | #import 10 | #import 11 | #import 12 | #import 13 | #import 14 | 15 | static void InitializeFlipper(UIApplication *application) { 16 | FlipperClient *client = [FlipperClient sharedClient]; 17 | SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults]; 18 | [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]]; 19 | [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]]; 20 | [client addPlugin:[FlipperKitReactPlugin new]]; 21 | [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; 22 | [client start]; 23 | } 24 | #endif 25 | 26 | @implementation AppDelegate 27 | 28 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 29 | { 30 | #ifdef FB_SONARKIT_ENABLED 31 | InitializeFlipper(application); 32 | #endif 33 | 34 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 35 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 36 | moduleName:@"tryskia" 37 | initialProperties:nil]; 38 | 39 | if (@available(iOS 13.0, *)) { 40 | rootView.backgroundColor = [UIColor systemBackgroundColor]; 41 | } else { 42 | rootView.backgroundColor = [UIColor whiteColor]; 43 | } 44 | 45 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 46 | UIViewController *rootViewController = [UIViewController new]; 47 | rootViewController.view = rootView; 48 | self.window.rootViewController = rootViewController; 49 | [self.window makeKeyAndVisible]; 50 | return YES; 51 | } 52 | 53 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 54 | { 55 | #if DEBUG 56 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 57 | #else 58 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 59 | #endif 60 | } 61 | 62 | @end 63 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/tryskia/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.tryskia; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactInstanceManager; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.soloader.SoLoader; 11 | import java.lang.reflect.InvocationTargetException; 12 | import java.util.List; 13 | 14 | public class MainApplication extends Application implements ReactApplication { 15 | 16 | private final ReactNativeHost mReactNativeHost = 17 | new ReactNativeHost(this) { 18 | @Override 19 | public boolean getUseDeveloperSupport() { 20 | return BuildConfig.DEBUG; 21 | } 22 | 23 | @Override 24 | protected List getPackages() { 25 | @SuppressWarnings("UnnecessaryLocalVariable") 26 | List packages = new PackageList(this).getPackages(); 27 | // Packages that cannot be autolinked yet can be added manually here, for example: 28 | // packages.add(new MyReactNativePackage()); 29 | return packages; 30 | } 31 | 32 | @Override 33 | protected String getJSMainModuleName() { 34 | return "index"; 35 | } 36 | }; 37 | 38 | @Override 39 | public ReactNativeHost getReactNativeHost() { 40 | return mReactNativeHost; 41 | } 42 | 43 | @Override 44 | public void onCreate() { 45 | super.onCreate(); 46 | SoLoader.init(this, /* native exopackage */ false); 47 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 48 | } 49 | 50 | /** 51 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like 52 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 53 | * 54 | * @param context 55 | * @param reactInstanceManager 56 | */ 57 | private static void initializeFlipper( 58 | Context context, ReactInstanceManager reactInstanceManager) { 59 | if (BuildConfig.DEBUG) { 60 | try { 61 | /* 62 | We use reflection here to pick up the class that initializes Flipper, 63 | since Flipper library is not available in release mode 64 | */ 65 | Class aClass = Class.forName("com.tryskia.ReactNativeFlipper"); 66 | aClass 67 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class) 68 | .invoke(null, context, reactInstanceManager); 69 | } catch (ClassNotFoundException e) { 70 | e.printStackTrace(); 71 | } catch (NoSuchMethodException e) { 72 | e.printStackTrace(); 73 | } catch (IllegalAccessException e) { 74 | e.printStackTrace(); 75 | } catch (InvocationTargetException e) { 76 | e.printStackTrace(); 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /src/components/header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; 3 | import useDrawingStore from '../store'; 4 | import history from '../drawing/history'; 5 | import utils from '../drawing/utils'; 6 | 7 | const Header = () => { 8 | /** 9 | * Reset the canvas & draw state 10 | */ 11 | const reset = () => { 12 | useDrawingStore.getState().setCompletedPaths([]); 13 | useDrawingStore.getState().setStroke(utils.getPaint(2, 'black')); 14 | useDrawingStore.getState().setColor('black'); 15 | useDrawingStore.getState().setStrokeWidth(2); 16 | history.clear(); 17 | }; 18 | 19 | const save = () => { 20 | let canvasInfo = useDrawingStore.getState().canvasInfo; 21 | let paths = useDrawingStore.getState().completedPaths; 22 | if (paths.length === 0) return; 23 | console.log('saving'); 24 | if (canvasInfo?.width && canvasInfo?.height) { 25 | console.log( 26 | utils.makeSvgFromPaths(paths, { 27 | width: canvasInfo.width, 28 | height: canvasInfo.height, 29 | }), 30 | ); 31 | } 32 | }; 33 | 34 | const undo = () => { 35 | history.undo(); 36 | }; 37 | 38 | const redo = () => { 39 | history.redo(); 40 | }; 41 | return ( 42 | 51 | 55 | 59 | Undo 60 | 61 | 62 | 66 | Redo 67 | 68 | 69 | 70 | 74 | 78 | Reset 79 | 80 | 81 | 85 | Save 86 | 87 | 88 | 89 | ); 90 | }; 91 | 92 | const styles = StyleSheet.create({ 93 | button: { 94 | paddingHorizontal: 12, 95 | backgroundColor: 'white', 96 | height: 30, 97 | justifyContent: 'center', 98 | alignItems: 'center', 99 | borderRadius: 100, 100 | ...utils.getElevation(1), 101 | }, 102 | buttonText: { 103 | color: 'black', 104 | }, 105 | }); 106 | 107 | export default Header; 108 | -------------------------------------------------------------------------------- /android/app/src/debug/java/com/tryskia/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.tryskia; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin; 21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | public class ReactNativeFlipper { 28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 29 | if (FlipperUtils.shouldEnableFlipper(context)) { 30 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 31 | 32 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 33 | client.addPlugin(new ReactFlipperPlugin()); 34 | client.addPlugin(new DatabasesFlipperPlugin(context)); 35 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 36 | client.addPlugin(CrashReporterPlugin.getInstance()); 37 | 38 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 39 | NetworkingModule.setCustomClientBuilder( 40 | new NetworkingModule.CustomClientBuilder() { 41 | @Override 42 | public void apply(OkHttpClient.Builder builder) { 43 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 44 | } 45 | }); 46 | client.addPlugin(networkFlipperPlugin); 47 | client.start(); 48 | 49 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 50 | // Hence we run if after all native modules have been initialized 51 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 52 | if (reactContext == null) { 53 | reactInstanceManager.addReactInstanceEventListener( 54 | new ReactInstanceManager.ReactInstanceEventListener() { 55 | @Override 56 | public void onReactContextInitialized(ReactContext reactContext) { 57 | reactInstanceManager.removeReactInstanceEventListener(this); 58 | reactContext.runOnNativeModulesQueueThread( 59 | new Runnable() { 60 | @Override 61 | public void run() { 62 | client.addPlugin(new FrescoFlipperPlugin()); 63 | } 64 | }); 65 | } 66 | }); 67 | } else { 68 | client.addPlugin(new FrescoFlipperPlugin()); 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/components/toolbar.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import {StyleSheet, View} from 'react-native'; 3 | import Color from '../components/color'; 4 | import Stroke from '../components/stroke'; 5 | import useDrawingStore from '../store'; 6 | import constants from '../drawing/constants'; 7 | import utils from '../drawing/utils'; 8 | 9 | const Toolbar = () => { 10 | const currentColor = useDrawingStore(state => state.color); 11 | const currentStrokeWidth = useDrawingStore(state => state.strokeWidth); 12 | const setStrokeWidth = useDrawingStore(state => state.setStrokeWidth); 13 | const setColor = useDrawingStore(state => state.setColor); 14 | const setStroke = useDrawingStore(state => state.setStroke); 15 | const [showStrokes, setShowStrokes] = useState(false); 16 | 17 | const onStrokeChange = (stroke: number) => { 18 | setStrokeWidth(stroke); 19 | setShowStrokes(false); 20 | setStroke(utils.getPaint(stroke, currentColor)); 21 | }; 22 | 23 | const onChangeColor = (color: string) => { 24 | setColor(color); 25 | setStroke(utils.getPaint(currentStrokeWidth, color)); 26 | }; 27 | 28 | return ( 29 | <> 30 | {showStrokes && ( 31 | 39 | {constants.strokes.map(stroke => ( 40 | onStrokeChange(stroke)} 44 | /> 45 | ))} 46 | 47 | )} 48 | 49 | 51 | 56 | {showStrokes && ( 57 | 67 | )} 68 | 69 | setShowStrokes(!showStrokes)} 72 | /> 73 | 74 | 75 | 83 | 84 | {constants.colors.map(item => ( 85 | onChangeColor(item)} /> 86 | ))} 87 | 88 | 89 | ); 90 | }; 91 | 92 | export default Toolbar; 93 | 94 | const styles = StyleSheet.create({ 95 | toolbar: { 96 | backgroundColor: '#ffffff', 97 | height: 50, 98 | width: 300, 99 | borderRadius: 100, 100 | flexDirection: 'row', 101 | paddingHorizontal: 12, 102 | justifyContent: 'center', 103 | alignItems: 'center', 104 | ...utils.getElevation(5), 105 | }, 106 | color: { 107 | width: 35, 108 | height: 35, 109 | marginRight: 10, 110 | borderRadius: 100, 111 | borderWidth: 2, 112 | borderColor: '#f0f0f0', 113 | ...utils.getElevation(1), 114 | justifyContent: 'center', 115 | alignItems: 'center', 116 | }, 117 | }); 118 | -------------------------------------------------------------------------------- /ios/tryskia.xcodeproj/xcshareddata/xcschemes/tryskia.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /item.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 19 | 20 | 21 | 22 | 24 | 25 | 27 | 28 | 31 | 33 | 34 | 36 | 37 | 39 | 40 | 41 | 43 | 44 | 46 | 47 | 49 | 50 | 51 | 52 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /ios/tryskia/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/drawing/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Canvas, 3 | ExtendedTouchInfo, 4 | ICanvas, 5 | Path, 6 | Skia, 7 | SkiaView, 8 | TouchInfo, 9 | useDrawCallback, 10 | useTouchHandler, 11 | } from '@shopify/react-native-skia'; 12 | import React, {useCallback, useRef, useState} from 'react'; 13 | import { 14 | LayoutChangeEvent, 15 | SafeAreaView, 16 | useWindowDimensions, 17 | View, 18 | } from 'react-native'; 19 | import useDrawingStore, {CurrentPath} from '../store'; 20 | import Header from '../components/header'; 21 | import history from './history'; 22 | import Toolbar from '../components/toolbar'; 23 | 24 | const Drawing = () => { 25 | const touchState = useRef(false); 26 | const canvas = useRef(); 27 | const currentPath = useRef(); 28 | const {width} = useWindowDimensions(); 29 | const completedPaths = useDrawingStore(state => state.completedPaths); 30 | const setCompletedPaths = useDrawingStore(state => state.setCompletedPaths); 31 | const stroke = useDrawingStore(state => state.stroke); 32 | const [canvasHeight, setCanvasHeight] = useState(400); 33 | 34 | const onDrawingActive = useCallback((touchInfo: ExtendedTouchInfo) => { 35 | const {x, y} = touchInfo; 36 | if (!currentPath.current?.path) return; 37 | if (touchState.current) { 38 | currentPath.current.path.lineTo(x, y); 39 | if (currentPath.current) { 40 | canvas.current?.drawPath( 41 | currentPath.current.path, 42 | currentPath.current.paint, 43 | ); 44 | } 45 | } 46 | }, []); 47 | 48 | const onDrawingStart = useCallback( 49 | (touchInfo: TouchInfo) => { 50 | if (currentPath.current) return; 51 | const {x, y} = touchInfo; 52 | currentPath.current = { 53 | path: Skia.Path.Make(), 54 | paint: stroke.copy(), 55 | }; 56 | 57 | touchState.current = true; 58 | currentPath.current.path?.moveTo(x, y); 59 | 60 | if (currentPath.current) { 61 | canvas.current?.drawPath( 62 | currentPath.current.path, 63 | currentPath.current.paint, 64 | ); 65 | } 66 | }, 67 | [stroke], 68 | ); 69 | 70 | const onDrawingFinished = useCallback(() => { 71 | updatePaths(); 72 | currentPath.current = null; 73 | touchState.current = false; 74 | }, [completedPaths.length]); 75 | 76 | const touchHandler = useTouchHandler({ 77 | onActive: onDrawingActive, 78 | onStart: onDrawingStart, 79 | onEnd: onDrawingFinished, 80 | }); 81 | 82 | const updatePaths = () => { 83 | if (!currentPath.current) return; 84 | let updatedPaths = [...completedPaths]; 85 | updatedPaths.push({ 86 | path: currentPath.current?.path.copy(), 87 | paint: currentPath.current?.paint.copy(), 88 | color: useDrawingStore.getState().color, 89 | }); 90 | history.push(currentPath.current); 91 | setCompletedPaths(updatedPaths); 92 | }; 93 | 94 | const onDraw = useDrawCallback((_canvas, info) => { 95 | touchHandler(info.touches); 96 | 97 | if (currentPath.current) { 98 | canvas.current?.drawPath( 99 | currentPath.current.path, 100 | currentPath.current.paint, 101 | ); 102 | } 103 | 104 | if (!canvas.current) { 105 | useDrawingStore.getState().setCanvasInfo({ 106 | width: info.width, 107 | height: info.height, 108 | }); 109 | canvas.current = _canvas; 110 | } 111 | }, []); 112 | 113 | const onLayout = (event: LayoutChangeEvent) => { 114 | setCanvasHeight(event.nativeEvent.layout.height); 115 | }; 116 | 117 | return ( 118 | 122 | 128 |

129 | 130 | 140 | 144 | 145 | 151 | {completedPaths?.map(path => ( 152 | 158 | ))} 159 | 160 | 161 | 162 | 163 | 164 | 165 | ); 166 | }; 167 | 168 | export default Drawing; 169 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation. If none specified and 19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is 20 | * // default. Can be overridden with ENTRY_FILE environment variable. 21 | * entryFile: "index.android.js", 22 | * 23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format 24 | * bundleCommand: "ram-bundle", 25 | * 26 | * // whether to bundle JS and assets in debug mode 27 | * bundleInDebug: false, 28 | * 29 | * // whether to bundle JS and assets in release mode 30 | * bundleInRelease: true, 31 | * 32 | * // whether to bundle JS and assets in another build variant (if configured). 33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 34 | * // The configuration property can be in the following formats 35 | * // 'bundleIn${productFlavor}${buildType}' 36 | * // 'bundleIn${buildType}' 37 | * // bundleInFreeDebug: true, 38 | * // bundleInPaidRelease: true, 39 | * // bundleInBeta: true, 40 | * 41 | * // whether to disable dev mode in custom build variants (by default only disabled in release) 42 | * // for example: to disable dev mode in the staging build type (if configured) 43 | * devDisabledInStaging: true, 44 | * // The configuration property can be in the following formats 45 | * // 'devDisabledIn${productFlavor}${buildType}' 46 | * // 'devDisabledIn${buildType}' 47 | * 48 | * // the root of your project, i.e. where "package.json" lives 49 | * root: "../../", 50 | * 51 | * // where to put the JS bundle asset in debug mode 52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 53 | * 54 | * // where to put the JS bundle asset in release mode 55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 56 | * 57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 58 | * // require('./image.png')), in debug mode 59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 60 | * 61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 62 | * // require('./image.png')), in release mode 63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 64 | * 65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 69 | * // for example, you might want to remove it from here. 70 | * inputExcludes: ["android/**", "ios/**"], 71 | * 72 | * // override which node gets called and with what additional arguments 73 | * nodeExecutableAndArgs: ["node"], 74 | * 75 | * // supply additional arguments to the packager 76 | * extraPackagerArgs: [] 77 | * ] 78 | */ 79 | 80 | project.ext.react = [ 81 | enableHermes: false, // clean and rebuild if changing 82 | ] 83 | 84 | apply from: "../../node_modules/react-native/react.gradle" 85 | 86 | /** 87 | * Set this to true to create two separate APKs instead of one: 88 | * - An APK that only works on ARM devices 89 | * - An APK that only works on x86 devices 90 | * The advantage is the size of the APK is reduced by about 4MB. 91 | * Upload all the APKs to the Play Store and people will download 92 | * the correct one based on the CPU architecture of their device. 93 | */ 94 | def enableSeparateBuildPerCPUArchitecture = false 95 | 96 | /** 97 | * Run Proguard to shrink the Java bytecode in release builds. 98 | */ 99 | def enableProguardInReleaseBuilds = false 100 | 101 | /** 102 | * The preferred build flavor of JavaScriptCore. 103 | * 104 | * For example, to use the international variant, you can use: 105 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 106 | * 107 | * The international variant includes ICU i18n library and necessary data 108 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 109 | * give correct results when using with locales other than en-US. Note that 110 | * this variant is about 6MiB larger per architecture than default. 111 | */ 112 | def jscFlavor = 'org.webkit:android-jsc:+' 113 | 114 | /** 115 | * Whether to enable the Hermes VM. 116 | * 117 | * This should be set on project.ext.react and mirrored here. If it is not set 118 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode 119 | * and the benefits of using Hermes will therefore be sharply reduced. 120 | */ 121 | def enableHermes = project.ext.react.get("enableHermes", false); 122 | 123 | /** 124 | * Architectures to build native code for in debug. 125 | */ 126 | def nativeArchitectures = project.getProperties().get("reactNativeDebugArchitectures") 127 | 128 | android { 129 | ndkVersion rootProject.ext.ndkVersion 130 | 131 | compileSdkVersion rootProject.ext.compileSdkVersion 132 | 133 | defaultConfig { 134 | applicationId "com.tryskia" 135 | minSdkVersion rootProject.ext.minSdkVersion 136 | targetSdkVersion rootProject.ext.targetSdkVersion 137 | versionCode 1 138 | versionName "1.0" 139 | } 140 | splits { 141 | abi { 142 | reset() 143 | enable enableSeparateBuildPerCPUArchitecture 144 | universalApk false // If true, also generate a universal APK 145 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64" 146 | } 147 | } 148 | signingConfigs { 149 | debug { 150 | storeFile file('debug.keystore') 151 | storePassword 'android' 152 | keyAlias 'androiddebugkey' 153 | keyPassword 'android' 154 | } 155 | } 156 | buildTypes { 157 | debug { 158 | signingConfig signingConfigs.debug 159 | if (nativeArchitectures) { 160 | ndk { 161 | abiFilters nativeArchitectures.split(',') 162 | } 163 | } 164 | } 165 | release { 166 | // Caution! In production, you need to generate your own keystore file. 167 | // see https://reactnative.dev/docs/signed-apk-android. 168 | signingConfig signingConfigs.debug 169 | minifyEnabled enableProguardInReleaseBuilds 170 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 171 | } 172 | } 173 | 174 | packagingOptions { 175 | pickFirst "lib/**/libfbjni.so" 176 | pickFirst "lib/**/libreact_nativemodule_core.so" 177 | pickFirst "lib/**/libturbomodulejsijni.so" 178 | pickFirst "lib/**/libjsi.so" 179 | // pickFirst "lib/**/*.so" 180 | } 181 | 182 | // applicationVariants are e.g. debug, release 183 | applicationVariants.all { variant -> 184 | variant.outputs.each { output -> 185 | // For each separate APK per architecture, set a unique version code as described here: 186 | // https://developer.android.com/studio/build/configure-apk-splits.html 187 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 188 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 189 | def abi = output.getFilter(OutputFile.ABI) 190 | if (abi != null) { // null for the universal-debug, universal-release variants 191 | output.versionCodeOverride = 192 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 193 | } 194 | 195 | } 196 | } 197 | } 198 | 199 | dependencies { 200 | implementation fileTree(dir: "libs", include: ["*.jar"]) 201 | //noinspection GradleDynamicVersion 202 | implementation "com.facebook.react:react-native:+" // From node_modules 203 | 204 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" 205 | 206 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") { 207 | exclude group:'com.facebook.fbjni' 208 | } 209 | 210 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 211 | exclude group:'com.facebook.flipper' 212 | exclude group:'com.squareup.okhttp3', module:'okhttp' 213 | } 214 | 215 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") { 216 | exclude group:'com.facebook.flipper' 217 | } 218 | 219 | if (enableHermes) { 220 | def hermesPath = "../../node_modules/hermes-engine/android/"; 221 | debugImplementation files(hermesPath + "hermes-debug.aar") 222 | releaseImplementation files(hermesPath + "hermes-release.aar") 223 | } else { 224 | implementation jscFlavor 225 | } 226 | } 227 | 228 | // Run this once to be able to run the application with BUCK 229 | // puts all compile dependencies into folder libs for BUCK to use 230 | task copyDownloadableDepsToLibs(type: Copy) { 231 | from configurations.implementation 232 | into 'libs' 233 | } 234 | 235 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 236 | -------------------------------------------------------------------------------- /ios/tryskia.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 54; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00E356F31AD99517003FC87E /* tryskiaTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* tryskiaTests.m */; }; 11 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 12 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 14 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; 15 | /* End PBXBuildFile section */ 16 | 17 | /* Begin PBXContainerItemProxy section */ 18 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 19 | isa = PBXContainerItemProxy; 20 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 21 | proxyType = 1; 22 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 23 | remoteInfo = tryskia; 24 | }; 25 | /* End PBXContainerItemProxy section */ 26 | 27 | /* Begin PBXFileReference section */ 28 | 00E356EE1AD99517003FC87E /* tryskiaTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = tryskiaTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 29 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 30 | 00E356F21AD99517003FC87E /* tryskiaTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = tryskiaTests.m; sourceTree = ""; }; 31 | 13B07F961A680F5B00A75B9A /* tryskia.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = tryskia.app; sourceTree = BUILT_PRODUCTS_DIR; }; 32 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = tryskia/AppDelegate.h; sourceTree = ""; }; 33 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = tryskia/AppDelegate.m; sourceTree = ""; }; 34 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = tryskia/Images.xcassets; sourceTree = ""; }; 35 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = tryskia/Info.plist; sourceTree = ""; }; 36 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = tryskia/main.m; sourceTree = ""; }; 37 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = tryskia/LaunchScreen.storyboard; sourceTree = ""; }; 38 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; 39 | /* End PBXFileReference section */ 40 | 41 | /* Begin PBXFrameworksBuildPhase section */ 42 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 43 | isa = PBXFrameworksBuildPhase; 44 | buildActionMask = 2147483647; 45 | files = ( 46 | ); 47 | runOnlyForDeploymentPostprocessing = 0; 48 | }; 49 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 50 | isa = PBXFrameworksBuildPhase; 51 | buildActionMask = 2147483647; 52 | files = ( 53 | ); 54 | runOnlyForDeploymentPostprocessing = 0; 55 | }; 56 | /* End PBXFrameworksBuildPhase section */ 57 | 58 | /* Begin PBXGroup section */ 59 | 00E356EF1AD99517003FC87E /* tryskiaTests */ = { 60 | isa = PBXGroup; 61 | children = ( 62 | 00E356F21AD99517003FC87E /* tryskiaTests.m */, 63 | 00E356F01AD99517003FC87E /* Supporting Files */, 64 | ); 65 | path = tryskiaTests; 66 | sourceTree = ""; 67 | }; 68 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 69 | isa = PBXGroup; 70 | children = ( 71 | 00E356F11AD99517003FC87E /* Info.plist */, 72 | ); 73 | name = "Supporting Files"; 74 | sourceTree = ""; 75 | }; 76 | 13B07FAE1A68108700A75B9A /* tryskia */ = { 77 | isa = PBXGroup; 78 | children = ( 79 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 80 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 81 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 82 | 13B07FB61A68108700A75B9A /* Info.plist */, 83 | 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */, 84 | 13B07FB71A68108700A75B9A /* main.m */, 85 | ); 86 | name = tryskia; 87 | sourceTree = ""; 88 | }; 89 | 2D16E6871FA4F8E400B85C8A /* Frameworks */ = { 90 | isa = PBXGroup; 91 | children = ( 92 | ED297162215061F000B7C4FE /* JavaScriptCore.framework */, 93 | ); 94 | name = Frameworks; 95 | sourceTree = ""; 96 | }; 97 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 98 | isa = PBXGroup; 99 | children = ( 100 | ); 101 | name = Libraries; 102 | sourceTree = ""; 103 | }; 104 | 83CBB9F61A601CBA00E9B192 = { 105 | isa = PBXGroup; 106 | children = ( 107 | 13B07FAE1A68108700A75B9A /* tryskia */, 108 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 109 | 00E356EF1AD99517003FC87E /* tryskiaTests */, 110 | 83CBBA001A601CBA00E9B192 /* Products */, 111 | 2D16E6871FA4F8E400B85C8A /* Frameworks */, 112 | ); 113 | indentWidth = 2; 114 | sourceTree = ""; 115 | tabWidth = 2; 116 | usesTabs = 0; 117 | }; 118 | 83CBBA001A601CBA00E9B192 /* Products */ = { 119 | isa = PBXGroup; 120 | children = ( 121 | 13B07F961A680F5B00A75B9A /* tryskia.app */, 122 | 00E356EE1AD99517003FC87E /* tryskiaTests.xctest */, 123 | ); 124 | name = Products; 125 | sourceTree = ""; 126 | }; 127 | /* End PBXGroup section */ 128 | 129 | /* Begin PBXNativeTarget section */ 130 | 00E356ED1AD99517003FC87E /* tryskiaTests */ = { 131 | isa = PBXNativeTarget; 132 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "tryskiaTests" */; 133 | buildPhases = ( 134 | 00E356EA1AD99517003FC87E /* Sources */, 135 | 00E356EB1AD99517003FC87E /* Frameworks */, 136 | 00E356EC1AD99517003FC87E /* Resources */, 137 | ); 138 | buildRules = ( 139 | ); 140 | dependencies = ( 141 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 142 | ); 143 | name = tryskiaTests; 144 | productName = tryskiaTests; 145 | productReference = 00E356EE1AD99517003FC87E /* tryskiaTests.xctest */; 146 | productType = "com.apple.product-type.bundle.unit-test"; 147 | }; 148 | 13B07F861A680F5B00A75B9A /* tryskia */ = { 149 | isa = PBXNativeTarget; 150 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "tryskia" */; 151 | buildPhases = ( 152 | FD10A7F022414F080027D42C /* Start Packager */, 153 | 13B07F871A680F5B00A75B9A /* Sources */, 154 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 155 | 13B07F8E1A680F5B00A75B9A /* Resources */, 156 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 157 | ); 158 | buildRules = ( 159 | ); 160 | dependencies = ( 161 | ); 162 | name = tryskia; 163 | productName = tryskia; 164 | productReference = 13B07F961A680F5B00A75B9A /* tryskia.app */; 165 | productType = "com.apple.product-type.application"; 166 | }; 167 | /* End PBXNativeTarget section */ 168 | 169 | /* Begin PBXProject section */ 170 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 171 | isa = PBXProject; 172 | attributes = { 173 | LastUpgradeCheck = 1210; 174 | TargetAttributes = { 175 | 00E356ED1AD99517003FC87E = { 176 | CreatedOnToolsVersion = 6.2; 177 | TestTargetID = 13B07F861A680F5B00A75B9A; 178 | }; 179 | 13B07F861A680F5B00A75B9A = { 180 | LastSwiftMigration = 1120; 181 | }; 182 | }; 183 | }; 184 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "tryskia" */; 185 | compatibilityVersion = "Xcode 12.0"; 186 | developmentRegion = en; 187 | hasScannedForEncodings = 0; 188 | knownRegions = ( 189 | en, 190 | Base, 191 | ); 192 | mainGroup = 83CBB9F61A601CBA00E9B192; 193 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 194 | projectDirPath = ""; 195 | projectRoot = ""; 196 | targets = ( 197 | 13B07F861A680F5B00A75B9A /* tryskia */, 198 | 00E356ED1AD99517003FC87E /* tryskiaTests */, 199 | ); 200 | }; 201 | /* End PBXProject section */ 202 | 203 | /* Begin PBXResourcesBuildPhase section */ 204 | 00E356EC1AD99517003FC87E /* Resources */ = { 205 | isa = PBXResourcesBuildPhase; 206 | buildActionMask = 2147483647; 207 | files = ( 208 | ); 209 | runOnlyForDeploymentPostprocessing = 0; 210 | }; 211 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 212 | isa = PBXResourcesBuildPhase; 213 | buildActionMask = 2147483647; 214 | files = ( 215 | 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 216 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 217 | ); 218 | runOnlyForDeploymentPostprocessing = 0; 219 | }; 220 | /* End PBXResourcesBuildPhase section */ 221 | 222 | /* Begin PBXShellScriptBuildPhase section */ 223 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 224 | isa = PBXShellScriptBuildPhase; 225 | buildActionMask = 2147483647; 226 | files = ( 227 | ); 228 | inputPaths = ( 229 | ); 230 | name = "Bundle React Native code and images"; 231 | outputPaths = ( 232 | ); 233 | runOnlyForDeploymentPostprocessing = 0; 234 | shellPath = /bin/sh; 235 | shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n"; 236 | }; 237 | FD10A7F022414F080027D42C /* Start Packager */ = { 238 | isa = PBXShellScriptBuildPhase; 239 | buildActionMask = 2147483647; 240 | files = ( 241 | ); 242 | inputFileListPaths = ( 243 | ); 244 | inputPaths = ( 245 | ); 246 | name = "Start Packager"; 247 | outputFileListPaths = ( 248 | ); 249 | outputPaths = ( 250 | ); 251 | runOnlyForDeploymentPostprocessing = 0; 252 | shellPath = /bin/sh; 253 | shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n exit 2\n fi\n else\n open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n fi\nfi\n"; 254 | showEnvVarsInLog = 0; 255 | }; 256 | /* End PBXShellScriptBuildPhase section */ 257 | 258 | /* Begin PBXSourcesBuildPhase section */ 259 | 00E356EA1AD99517003FC87E /* Sources */ = { 260 | isa = PBXSourcesBuildPhase; 261 | buildActionMask = 2147483647; 262 | files = ( 263 | 00E356F31AD99517003FC87E /* tryskiaTests.m in Sources */, 264 | ); 265 | runOnlyForDeploymentPostprocessing = 0; 266 | }; 267 | 13B07F871A680F5B00A75B9A /* Sources */ = { 268 | isa = PBXSourcesBuildPhase; 269 | buildActionMask = 2147483647; 270 | files = ( 271 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 272 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 273 | ); 274 | runOnlyForDeploymentPostprocessing = 0; 275 | }; 276 | /* End PBXSourcesBuildPhase section */ 277 | 278 | /* Begin PBXTargetDependency section */ 279 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 280 | isa = PBXTargetDependency; 281 | target = 13B07F861A680F5B00A75B9A /* tryskia */; 282 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 283 | }; 284 | /* End PBXTargetDependency section */ 285 | 286 | /* Begin XCBuildConfiguration section */ 287 | 00E356F61AD99517003FC87E /* Debug */ = { 288 | isa = XCBuildConfiguration; 289 | buildSettings = { 290 | BUNDLE_LOADER = "$(TEST_HOST)"; 291 | GCC_PREPROCESSOR_DEFINITIONS = ( 292 | "DEBUG=1", 293 | "$(inherited)", 294 | ); 295 | INFOPLIST_FILE = tryskiaTests/Info.plist; 296 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 297 | LD_RUNPATH_SEARCH_PATHS = ( 298 | "$(inherited)", 299 | "@executable_path/Frameworks", 300 | "@loader_path/Frameworks", 301 | ); 302 | OTHER_LDFLAGS = ( 303 | "-ObjC", 304 | "-lc++", 305 | "$(inherited)", 306 | ); 307 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 308 | PRODUCT_NAME = "$(TARGET_NAME)"; 309 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/tryskia.app/tryskia"; 310 | }; 311 | name = Debug; 312 | }; 313 | 00E356F71AD99517003FC87E /* Release */ = { 314 | isa = XCBuildConfiguration; 315 | buildSettings = { 316 | BUNDLE_LOADER = "$(TEST_HOST)"; 317 | COPY_PHASE_STRIP = NO; 318 | INFOPLIST_FILE = tryskiaTests/Info.plist; 319 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 320 | LD_RUNPATH_SEARCH_PATHS = ( 321 | "$(inherited)", 322 | "@executable_path/Frameworks", 323 | "@loader_path/Frameworks", 324 | ); 325 | OTHER_LDFLAGS = ( 326 | "-ObjC", 327 | "-lc++", 328 | "$(inherited)", 329 | ); 330 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 331 | PRODUCT_NAME = "$(TARGET_NAME)"; 332 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/tryskia.app/tryskia"; 333 | }; 334 | name = Release; 335 | }; 336 | 13B07F941A680F5B00A75B9A /* Debug */ = { 337 | isa = XCBuildConfiguration; 338 | buildSettings = { 339 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 340 | CLANG_ENABLE_MODULES = YES; 341 | CURRENT_PROJECT_VERSION = 1; 342 | ENABLE_BITCODE = NO; 343 | INFOPLIST_FILE = tryskia/Info.plist; 344 | LD_RUNPATH_SEARCH_PATHS = ( 345 | "$(inherited)", 346 | "@executable_path/Frameworks", 347 | ); 348 | OTHER_LDFLAGS = ( 349 | "$(inherited)", 350 | "-ObjC", 351 | "-lc++", 352 | ); 353 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 354 | PRODUCT_NAME = tryskia; 355 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 356 | SWIFT_VERSION = 5.0; 357 | VERSIONING_SYSTEM = "apple-generic"; 358 | }; 359 | name = Debug; 360 | }; 361 | 13B07F951A680F5B00A75B9A /* Release */ = { 362 | isa = XCBuildConfiguration; 363 | buildSettings = { 364 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 365 | CLANG_ENABLE_MODULES = YES; 366 | CURRENT_PROJECT_VERSION = 1; 367 | INFOPLIST_FILE = tryskia/Info.plist; 368 | LD_RUNPATH_SEARCH_PATHS = ( 369 | "$(inherited)", 370 | "@executable_path/Frameworks", 371 | ); 372 | OTHER_LDFLAGS = ( 373 | "$(inherited)", 374 | "-ObjC", 375 | "-lc++", 376 | ); 377 | PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)"; 378 | PRODUCT_NAME = tryskia; 379 | SWIFT_VERSION = 5.0; 380 | VERSIONING_SYSTEM = "apple-generic"; 381 | }; 382 | name = Release; 383 | }; 384 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 385 | isa = XCBuildConfiguration; 386 | buildSettings = { 387 | ALWAYS_SEARCH_USER_PATHS = NO; 388 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 389 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 390 | CLANG_CXX_LIBRARY = "libc++"; 391 | CLANG_ENABLE_MODULES = YES; 392 | CLANG_ENABLE_OBJC_ARC = YES; 393 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 394 | CLANG_WARN_BOOL_CONVERSION = YES; 395 | CLANG_WARN_COMMA = YES; 396 | CLANG_WARN_CONSTANT_CONVERSION = YES; 397 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 398 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 399 | CLANG_WARN_EMPTY_BODY = YES; 400 | CLANG_WARN_ENUM_CONVERSION = YES; 401 | CLANG_WARN_INFINITE_RECURSION = YES; 402 | CLANG_WARN_INT_CONVERSION = YES; 403 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 404 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 405 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 406 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 407 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 408 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 409 | CLANG_WARN_STRICT_PROTOTYPES = YES; 410 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 411 | CLANG_WARN_UNREACHABLE_CODE = YES; 412 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 413 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 414 | COPY_PHASE_STRIP = NO; 415 | ENABLE_STRICT_OBJC_MSGSEND = YES; 416 | ENABLE_TESTABILITY = YES; 417 | GCC_C_LANGUAGE_STANDARD = gnu99; 418 | GCC_DYNAMIC_NO_PIC = NO; 419 | GCC_NO_COMMON_BLOCKS = YES; 420 | GCC_OPTIMIZATION_LEVEL = 0; 421 | GCC_PREPROCESSOR_DEFINITIONS = ( 422 | "DEBUG=1", 423 | "$(inherited)", 424 | ); 425 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 426 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 427 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 428 | GCC_WARN_UNDECLARED_SELECTOR = YES; 429 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 430 | GCC_WARN_UNUSED_FUNCTION = YES; 431 | GCC_WARN_UNUSED_VARIABLE = YES; 432 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 433 | LD_RUNPATH_SEARCH_PATHS = ( 434 | /usr/lib/swift, 435 | "$(inherited)", 436 | ); 437 | LIBRARY_SEARCH_PATHS = ( 438 | "\"$(SDKROOT)/usr/lib/swift\"", 439 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 440 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"", 441 | "\"$(inherited)\"", 442 | ); 443 | MTL_ENABLE_DEBUG_INFO = YES; 444 | ONLY_ACTIVE_ARCH = YES; 445 | SDKROOT = iphoneos; 446 | }; 447 | name = Debug; 448 | }; 449 | 83CBBA211A601CBA00E9B192 /* Release */ = { 450 | isa = XCBuildConfiguration; 451 | buildSettings = { 452 | ALWAYS_SEARCH_USER_PATHS = NO; 453 | CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES; 454 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 455 | CLANG_CXX_LIBRARY = "libc++"; 456 | CLANG_ENABLE_MODULES = YES; 457 | CLANG_ENABLE_OBJC_ARC = YES; 458 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 459 | CLANG_WARN_BOOL_CONVERSION = YES; 460 | CLANG_WARN_COMMA = YES; 461 | CLANG_WARN_CONSTANT_CONVERSION = YES; 462 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 463 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 464 | CLANG_WARN_EMPTY_BODY = YES; 465 | CLANG_WARN_ENUM_CONVERSION = YES; 466 | CLANG_WARN_INFINITE_RECURSION = YES; 467 | CLANG_WARN_INT_CONVERSION = YES; 468 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 469 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 470 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 471 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 472 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 473 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 474 | CLANG_WARN_STRICT_PROTOTYPES = YES; 475 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 476 | CLANG_WARN_UNREACHABLE_CODE = YES; 477 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 478 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 479 | COPY_PHASE_STRIP = YES; 480 | ENABLE_NS_ASSERTIONS = NO; 481 | ENABLE_STRICT_OBJC_MSGSEND = YES; 482 | GCC_C_LANGUAGE_STANDARD = gnu99; 483 | GCC_NO_COMMON_BLOCKS = YES; 484 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 485 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 486 | GCC_WARN_UNDECLARED_SELECTOR = YES; 487 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 488 | GCC_WARN_UNUSED_FUNCTION = YES; 489 | GCC_WARN_UNUSED_VARIABLE = YES; 490 | IPHONEOS_DEPLOYMENT_TARGET = 11.0; 491 | LD_RUNPATH_SEARCH_PATHS = ( 492 | /usr/lib/swift, 493 | "$(inherited)", 494 | ); 495 | LIBRARY_SEARCH_PATHS = ( 496 | "\"$(SDKROOT)/usr/lib/swift\"", 497 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"", 498 | "\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"", 499 | "\"$(inherited)\"", 500 | ); 501 | MTL_ENABLE_DEBUG_INFO = NO; 502 | SDKROOT = iphoneos; 503 | VALIDATE_PRODUCT = YES; 504 | }; 505 | name = Release; 506 | }; 507 | /* End XCBuildConfiguration section */ 508 | 509 | /* Begin XCConfigurationList section */ 510 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "tryskiaTests" */ = { 511 | isa = XCConfigurationList; 512 | buildConfigurations = ( 513 | 00E356F61AD99517003FC87E /* Debug */, 514 | 00E356F71AD99517003FC87E /* Release */, 515 | ); 516 | defaultConfigurationIsVisible = 0; 517 | defaultConfigurationName = Release; 518 | }; 519 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "tryskia" */ = { 520 | isa = XCConfigurationList; 521 | buildConfigurations = ( 522 | 13B07F941A680F5B00A75B9A /* Debug */, 523 | 13B07F951A680F5B00A75B9A /* Release */, 524 | ); 525 | defaultConfigurationIsVisible = 0; 526 | defaultConfigurationName = Release; 527 | }; 528 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "tryskia" */ = { 529 | isa = XCConfigurationList; 530 | buildConfigurations = ( 531 | 83CBBA201A601CBA00E9B192 /* Debug */, 532 | 83CBBA211A601CBA00E9B192 /* Release */, 533 | ); 534 | defaultConfigurationIsVisible = 0; 535 | defaultConfigurationName = Release; 536 | }; 537 | /* End XCConfigurationList section */ 538 | }; 539 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 540 | } 541 | --------------------------------------------------------------------------------