├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .happo.js ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── example ├── AllStories.js ├── StoryManager.js ├── assets │ ├── image_1_200_200.jpeg │ ├── image_1_200_300.jpeg │ ├── image_1_300_200.jpeg │ └── image_1_50_50.jpeg ├── benchmarks │ ├── DeepTree.js │ └── benchmark.js ├── native │ ├── .babelrc │ ├── .buckconfig │ ├── .flowconfig │ ├── .gitattributes │ ├── .gitignore │ ├── .watchmanconfig │ ├── android │ │ ├── app │ │ │ ├── BUCK │ │ │ ├── build.gradle │ │ │ ├── proguard-rules.pro │ │ │ └── src │ │ │ │ └── main │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── native │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ └── values │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ ├── build.gradle │ │ ├── gradle.properties │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── gradlew │ │ ├── gradlew.bat │ │ ├── keystores │ │ │ ├── BUCK │ │ │ └── debug.keystore.properties │ │ └── settings.gradle │ ├── index.js │ ├── ios │ │ ├── native.xcodeproj │ │ │ ├── project.pbxproj │ │ │ └── xcshareddata │ │ │ │ └── xcschemes │ │ │ │ └── native.xcscheme │ │ ├── native │ │ │ ├── AppDelegate.h │ │ │ ├── AppDelegate.m │ │ │ ├── Base.lproj │ │ │ │ └── LaunchScreen.xib │ │ │ ├── Images.xcassets │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── Info.plist │ │ │ └── main.m │ │ └── nativeTests │ │ │ ├── Info.plist │ │ │ └── nativeTests.m │ ├── missingBabelHelpers.js │ └── package.json ├── stories │ ├── Animated │ │ ├── Animated1.js │ │ └── index.js │ ├── Image │ │ ├── Image1.js │ │ └── index.js │ ├── Text │ │ ├── Text1.js │ │ └── index.js │ ├── Touchable │ │ ├── Touchable1.js │ │ └── index.js │ └── View │ │ ├── Box.js │ │ └── index.js └── web │ ├── example.html │ ├── example.js │ ├── happo-inner.js │ ├── happo.js │ ├── perf.html │ ├── perf.js │ ├── pythagoras.html │ └── pythagoras.js ├── index.js ├── package.json ├── scripts ├── getSHARangeFromPR.js ├── happo-ci.sh ├── install-sketchtool.sh └── updatePR.js ├── src ├── ReactPrimitives.js ├── index.android.js ├── index.figma.js ├── index.ios.js ├── index.js ├── index.sketch.js ├── index.vr.js ├── index.web.js ├── index.windows.js ├── injection │ ├── react-figma.js │ ├── react-native-web.js │ ├── react-native.js │ ├── react-sketchapp.js │ └── react-vr.js ├── modules │ ├── PixelRatio.js │ ├── Platform.js │ └── Touchable.js └── vr │ └── Touchable.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | presets: ["react-native"], 3 | plugins: [ 4 | "transform-object-rest-spread", 5 | [ 6 | "module-resolver", 7 | { 8 | "alias": { 9 | "react-primitives": "./" 10 | }, 11 | "cwd": "babelrc" 12 | } 13 | ] 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | example 2 | lib 3 | dist 4 | webpack.config.js 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": "airbnb", 4 | "rules": { 5 | "prefer-template": 0, 6 | "new-cap": 0, 7 | "no-use-before-define": 0, 8 | "arrow-body-style": 0, 9 | // triple equals is required except for when comparing with null 10 | "eqeqeq": [2, "allow-null"], 11 | // Allow console methods, which get removed during build process 12 | "no-console": 0, 13 | // Disable `arrow-parens` because it conflicts with Flow. 14 | "arrow-parens": 0, 15 | "global-require": 0, 16 | "react/jsx-filename-extension": 0, 17 | "no-underscore-dangle": 0, 18 | "import/no-extraneous-dependencies": 0, 19 | "react/no-unused-prop-types": 0, 20 | "react/require-default-props": 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | node_modules 28 | 29 | # Optional npm cache directory 30 | .npm 31 | package-lock.json 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | 36 | # OSX 37 | # 38 | .DS_Store 39 | 40 | # Xcode 41 | # 42 | build/ 43 | *.pbxuser 44 | !default.pbxuser 45 | *.mode1v3 46 | !default.mode1v3 47 | *.mode2v3 48 | !default.mode2v3 49 | *.perspectivev3 50 | !default.perspectivev3 51 | xcuserdata 52 | *.xccheckout 53 | *.moved-aside 54 | DerivedData 55 | *.hmap 56 | *.ipa 57 | *.xcuserstate 58 | project.xcworkspace 59 | 60 | # Android/IJ 61 | # 62 | .idea 63 | *.iml 64 | .gradle 65 | local.properties 66 | 67 | lib/ 68 | snapshots 69 | example/web/dist 70 | -------------------------------------------------------------------------------- /.happo.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // Control the interface on which the local server listens (defaults to 'localhost') 3 | // (default: 'localhost') 4 | // bind: '0.0.0.0', 5 | 6 | // Control the port used for the local server 7 | // (default: 4567) 8 | // port: 7777, 9 | 10 | // List javascript source files. These can be files or raw URLs. 11 | // (default: []) 12 | sourceFiles: [ 13 | 'example/web/dist/happo.bundle.js', 14 | ], 15 | 16 | // List css source files. These can also be files or raw URLs. 17 | // (default: []) 18 | stylesheets: [ 19 | // 'application.css', 20 | ], 21 | 22 | // List directories where public files are accessible (useful for e.g. font files) 23 | // (default: []) 24 | publicDirectories: [ 25 | 'example', 26 | ], 27 | 28 | // Specify the folder where snapshots are saved 29 | // (default: 'snapshots') 30 | // snapshotsFolder: 'happo-snapshots', 31 | 32 | // Configure the window size when taking snapshots 33 | // (defaults shown below) 34 | viewports: { 35 | small: { 36 | width: 375, 37 | height: 667, 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .babelrc 3 | example 4 | snapshots 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | os: osx 3 | osx_image: xcode8.2 4 | language: node_js 5 | node_js: 6 | - "6" 7 | script: 8 | - 'npm run travis' 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Leland Richardson 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-primitives 2 | 3 | Primitive React Interfaces Across Targets 4 | 5 | [![npm](https://img.shields.io/npm/v/react-primitives)]((https://www.npmjs.com/package/react-primitives)) 6 | 7 | ## Installation 8 | 9 | ```sh 10 | npm install --save react-primitives 11 | ``` 12 | 13 | You will also need to install the targets you want to support: 14 | 15 | - web: 16 | ```sh 17 | npm install --save react-dom react-native-web react-art 18 | ``` 19 | - native iOS and Android: 20 | ```sh 21 | npm install --save react-native 22 | ``` 23 | - sketch: 24 | ```sh 25 | npm install --save react-sketchapp react-test-renderer 26 | ``` 27 | - figma: 28 | ```sh 29 | npm install --save react-figma 30 | ``` 31 | - vr: 32 | ```sh 33 | npm install --save react-360 34 | ``` 35 | - Windows: 36 | ```sh 37 | npm install --save react-native-windows 38 | ``` 39 | 40 | ### Usage 41 | 42 | ```jsx 43 | import React from "react"; 44 | import { View, Text, Image, StyleSheet } from "react-primitives"; 45 | 46 | class Foo extends React.Component { 47 | render() { 48 | return {this.props.children}; 49 | } 50 | } 51 | 52 | const styles = StyleSheet.create({ 53 | foo: { 54 | width: 100, 55 | height: 100, 56 | backgroundColor: "#ff00ff" 57 | } 58 | }); 59 | ``` 60 | 61 | ## What is this? 62 | 63 | This library attempts to propose an ideal set of primitives around building 64 | React applications, regardless of Platform. In the future, this could be 65 | used as a shared interface among React and React Native components that 66 | don't use platform-specific APIs. 67 | 68 | Importantly, this includes `StyleSheet` for declaring styles, as well as 69 | `Animated` for doing declarative Animations. 70 | 71 | The exported APIs thus far are: 72 | 73 | 1. `Animated`: Pulled from the [animated](https://github.com/animatedjs/animated) project. 74 | 2. `StyleSheet`: Follows React Native's StyleSheet API. 75 | 3. `View`: A base component for Layout. 76 | 4. `Text`: A base component for Text rendering. 77 | 5. `Image`: A base component for Image rendering. 78 | 6. `Touchable`: A base component for interaction. 79 | 7. `Easing`: A base set of easing functions. 80 | 8. `Dimensions`: Get the devices dimensions. 81 | 9. `PixelRatio`: Get the devices pixel density. 82 | 10. `Platform`: Get information about the platform. (iOS, Android, Web, Sketch, VR,...) 83 | 84 | In the future, a `TextInput` component may also be added. 85 | 86 | ## Props where props are due 87 | 88 | This library was largely inspired from the work done by [Nicolas Gallager](https://github.com/necolas) 89 | and his great work on the [react-native-web](https://github.com/necolas/react-native-web) library. A few of the files 90 | in this repo are even copied directly from his project. 91 | -------------------------------------------------------------------------------- /example/AllStories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet } from '../src/index'; 3 | import { getStories } from './StoryManager'; 4 | 5 | // stories 6 | import './stories/View'; 7 | import './stories/Image'; 8 | import './stories/Text'; 9 | import './stories/Touchable'; 10 | import './stories/Animated'; 11 | 12 | const styles = StyleSheet.create({ 13 | app: { 14 | width: 375, 15 | }, 16 | story: { 17 | // flexDirection: 'row', 18 | margin: 10, 19 | }, 20 | storyInner: { 21 | borderWidth: 1, 22 | borderColor: '#aaa', 23 | padding: 10, 24 | }, 25 | storyText: { 26 | fontFamily: 'Arial', 27 | fontWeight: 'bold', 28 | fontSize: 20, 29 | }, 30 | }); 31 | 32 | const App = () => ( 33 | 34 | {getStories().map(({ name, Component }) => ( 35 | 36 | 37 | {name} 38 | 39 | 40 | 41 | 42 | 43 | ))} 44 | 45 | ); 46 | 47 | module.exports = App; 48 | -------------------------------------------------------------------------------- /example/StoryManager.js: -------------------------------------------------------------------------------- 1 | let stories = []; 2 | 3 | const make = (name, Component) => { 4 | Component.displayName = `Story(${name})`; 5 | stories.push({ name, Component }); 6 | }; 7 | const getStories = () => stories; 8 | const clear = () => { stories = []; }; 9 | 10 | module.exports = { 11 | make, 12 | getStories, 13 | clear, 14 | }; 15 | -------------------------------------------------------------------------------- /example/assets/image_1_200_200.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/assets/image_1_200_200.jpeg -------------------------------------------------------------------------------- /example/assets/image_1_200_300.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/assets/image_1_200_300.jpeg -------------------------------------------------------------------------------- /example/assets/image_1_300_200.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/assets/image_1_300_200.jpeg -------------------------------------------------------------------------------- /example/assets/image_1_50_50.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/assets/image_1_50_50.jpeg -------------------------------------------------------------------------------- /example/benchmarks/DeepTree.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const makeDeepTree = ({ View, StyleSheet }) => { 5 | const propTypes = { 6 | depth: PropTypes.number.isRequired, 7 | breadth: PropTypes.number.isRequired, 8 | wrap: PropTypes.number.isRequired, 9 | id: PropTypes.number.isRequired, 10 | }; 11 | 12 | class DeepTree extends React.Component { 13 | render() { 14 | const { depth, breadth, wrap, id } = this.props; 15 | let result = ( 16 | 23 | {depth === 0 && ( 24 | 30 | )} 31 | {depth !== 0 && Array.from({ length: breadth }).map((el, i) => ( 32 | 39 | ))} 40 | 41 | ); 42 | for (var i = 0; i < wrap; i++) { 43 | result = {result}; 44 | } 45 | return result; 46 | } 47 | } 48 | 49 | DeepTree.propTypes = propTypes; 50 | 51 | const styles = StyleSheet.create({ 52 | outer: { 53 | padding: 4, 54 | }, 55 | odd: { 56 | flexDirection: 'row', 57 | }, 58 | even: { 59 | flexDirection: 'column', 60 | }, 61 | custom0: { 62 | backgroundColor: '#222', 63 | }, 64 | custom1: { 65 | backgroundColor: '#666', 66 | }, 67 | custom2: { 68 | backgroundColor: '#999', 69 | }, 70 | terminal: { 71 | width: 20, 72 | height: 20, 73 | }, 74 | terminal0: { 75 | backgroundColor: 'blue', 76 | }, 77 | terminal1: { 78 | backgroundColor: 'orange', 79 | }, 80 | terminal2: { 81 | backgroundColor: 'red', 82 | }, 83 | }); 84 | 85 | return DeepTree; 86 | }; 87 | 88 | module.exports = makeDeepTree; 89 | -------------------------------------------------------------------------------- /example/benchmarks/benchmark.js: -------------------------------------------------------------------------------- 1 | const fmt = time => `${Math.round(time * 100) / 100}ms`; 2 | 3 | const measure = fn => { 4 | const start = performance.now(); 5 | fn(); 6 | const end = performance.now(); 7 | return end - start; 8 | }; 9 | 10 | const benchmark = ({ name, setup, teardown, task, runs }) => { 11 | return new Promise((resolve) => { 12 | const times = []; 13 | let i = 0; 14 | 15 | setup(); 16 | const first = measure(task); 17 | teardown(); 18 | 19 | const done = () => { 20 | const avg = times.reduce((sum, time) => sum + time) / runs; 21 | 22 | console.log(`FINISHED BENCHMARK: ${name}`); 23 | console.log(` First run: ${fmt(first)}`); 24 | console.log(` Average: ${fmt(avg)}`); 25 | resolve(avg); 26 | }; 27 | 28 | const a = () => { 29 | setup(); 30 | requestAnimationFrame(b); 31 | }; 32 | 33 | const b = () => { 34 | times.push(measure(task)); 35 | requestAnimationFrame(c); 36 | }; 37 | 38 | const c = () => { 39 | teardown(); 40 | requestAnimationFrame(d); 41 | }; 42 | 43 | const d = () => { 44 | i += 1; 45 | if (i < runs) { 46 | requestAnimationFrame(a); 47 | } else { 48 | requestAnimationFrame(done); 49 | } 50 | }; 51 | 52 | console.log(`STARTING BENCHMARK: ${name}`); 53 | requestAnimationFrame(a); 54 | }); 55 | }; 56 | 57 | module.exports = benchmark; 58 | -------------------------------------------------------------------------------- /example/native/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /example/native/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/native/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | module.system=haste 26 | 27 | experimental.strict_type_args=true 28 | 29 | munge_underscores=true 30 | 31 | module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub' 32 | 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\)$' -> 'RelativeImageStub' 33 | 34 | suppress_type=$FlowIssue 35 | suppress_type=$FlowFixMe 36 | suppress_type=$FixMe 37 | 38 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-5]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-5]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 41 | 42 | unsafe.enable_getters_and_setters=true 43 | 44 | [version] 45 | ^0.35.0 46 | -------------------------------------------------------------------------------- /example/native/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /example/native/.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 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | 38 | # BUCK 39 | buck-out/ 40 | \.buckd/ 41 | android/app/libs 42 | *.keystore 43 | -------------------------------------------------------------------------------- /example/native/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/native/android/app/BUCK: -------------------------------------------------------------------------------- 1 | import re 2 | 3 | # To learn about Buck see [Docs](https://buckbuild.com/). 4 | # To run your application with Buck: 5 | # - install Buck 6 | # - `npm start` - to start the packager 7 | # - `cd android` 8 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 9 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 10 | # - `buck install -r android/app` - compile, install and run application 11 | # 12 | 13 | lib_deps = [] 14 | for jarfile in glob(['libs/*.jar']): 15 | name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile) 16 | lib_deps.append(':' + name) 17 | prebuilt_jar( 18 | name = name, 19 | binary_jar = jarfile, 20 | ) 21 | 22 | for aarfile in glob(['libs/*.aar']): 23 | name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile) 24 | lib_deps.append(':' + name) 25 | android_prebuilt_aar( 26 | name = name, 27 | aar = aarfile, 28 | ) 29 | 30 | android_library( 31 | name = 'all-libs', 32 | exported_deps = lib_deps 33 | ) 34 | 35 | android_library( 36 | name = 'app-code', 37 | srcs = glob([ 38 | 'src/main/java/**/*.java', 39 | ]), 40 | deps = [ 41 | ':all-libs', 42 | ':build_config', 43 | ':res', 44 | ], 45 | ) 46 | 47 | android_build_config( 48 | name = 'build_config', 49 | package = 'com.native', 50 | ) 51 | 52 | android_resource( 53 | name = 'res', 54 | res = 'src/main/res', 55 | package = 'com.native', 56 | ) 57 | 58 | android_binary( 59 | name = 'app', 60 | package_type = 'debug', 61 | manifest = 'src/main/AndroidManifest.xml', 62 | keystore = '//android/keystores:debug', 63 | deps = [ 64 | ':app-code', 65 | ], 66 | ) 67 | -------------------------------------------------------------------------------- /example/native/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 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | apply from: "../../../../node_modules/react-native/react.gradle" 69 | 70 | /** 71 | * Set this to true to create two separate APKs instead of one: 72 | * - An APK that only works on ARM devices 73 | * - An APK that only works on x86 devices 74 | * The advantage is the size of the APK is reduced by about 4MB. 75 | * Upload all the APKs to the Play Store and people will download 76 | * the correct one based on the CPU architecture of their device. 77 | */ 78 | def enableSeparateBuildPerCPUArchitecture = false 79 | 80 | /** 81 | * Run Proguard to shrink the Java bytecode in release builds. 82 | */ 83 | def enableProguardInReleaseBuilds = false 84 | 85 | android { 86 | compileSdkVersion 23 87 | buildToolsVersion "23.0.1" 88 | 89 | defaultConfig { 90 | applicationId "com.native" 91 | minSdkVersion 16 92 | targetSdkVersion 22 93 | versionCode 1 94 | versionName "1.0" 95 | ndk { 96 | abiFilters "armeabi-v7a", "x86" 97 | } 98 | } 99 | splits { 100 | abi { 101 | reset() 102 | enable enableSeparateBuildPerCPUArchitecture 103 | universalApk false // If true, also generate a universal APK 104 | include "armeabi-v7a", "x86" 105 | } 106 | } 107 | buildTypes { 108 | release { 109 | minifyEnabled enableProguardInReleaseBuilds 110 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 111 | } 112 | } 113 | // applicationVariants are e.g. debug, release 114 | applicationVariants.all { variant -> 115 | variant.outputs.each { output -> 116 | // For each separate APK per architecture, set a unique version code as described here: 117 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 118 | def versionCodes = ["armeabi-v7a":1, "x86":2] 119 | def abi = output.getFilter(OutputFile.ABI) 120 | if (abi != null) { // null for the universal-debug, universal-release variants 121 | output.versionCodeOverride = 122 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 123 | } 124 | } 125 | } 126 | } 127 | 128 | dependencies { 129 | compile fileTree(dir: "libs", include: ["*.jar"]) 130 | compile "com.android.support:appcompat-v7:23.0.1" 131 | compile "com.facebook.react:react-native:+" // From node_modules 132 | } 133 | 134 | // Run this once to be able to run the application with BUCK 135 | // puts all compile dependencies into folder libs for BUCK to use 136 | task copyDownloadableDepsToLibs(type: Copy) { 137 | from configurations.compile 138 | into 'libs' 139 | } 140 | -------------------------------------------------------------------------------- /example/native/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 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /example/native/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /example/native/android/app/src/main/java/com/native/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.native; 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. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "native"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/native/android/app/src/main/java/com/native/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.native; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 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.react.shell.MainReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | 13 | import java.util.Arrays; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 19 | 20 | protected String getJSMainModuleName() { 21 | return "example/native/index"; 22 | } 23 | 24 | @Override 25 | protected boolean getUseDeveloperSupport() { 26 | return BuildConfig.DEBUG; 27 | } 28 | 29 | @Override 30 | protected List getPackages() { 31 | return Arrays.asList( 32 | new MainReactPackage() 33 | ); 34 | } 35 | }; 36 | 37 | @Override 38 | public ReactNativeHost getReactNativeHost() { 39 | return mReactNativeHost; 40 | } 41 | 42 | @Override 43 | public void onCreate() { 44 | super.onCreate(); 45 | SoLoader.init(this, /* native exopackage */ false); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /example/native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/native/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/native/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/native/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/native/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/native/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | native 3 | 4 | -------------------------------------------------------------------------------- /example/native/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/native/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:1.3.1' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../../../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /example/native/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 | android.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /example/native/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react-primitives/c414a86a78f69683b333109e5cc38e54e7e68cdf/example/native/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/native/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip 6 | -------------------------------------------------------------------------------- /example/native/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /example/native/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /example/native/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = 'debug', 3 | store = 'debug.keystore', 4 | properties = 'debug.keystore.properties', 5 | visibility = [ 6 | 'PUBLIC', 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /example/native/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /example/native/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'native' 2 | 3 | include ':app' 4 | -------------------------------------------------------------------------------- /example/native/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | import './missingBabelHelpers'; 7 | 8 | import React from 'react'; 9 | import AllStories from '../AllStories'; 10 | import { 11 | AppRegistry, 12 | ScrollView, 13 | } from 'react-native'; 14 | 15 | export default class native extends React.Component { 16 | render() { 17 | return ( 18 | 19 | 20 | 21 | ); 22 | } 23 | } 24 | 25 | AppRegistry.registerComponent('native', () => native); 26 | -------------------------------------------------------------------------------- /example/native/ios/native.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 11 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; 12 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; 13 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; 14 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; 15 | 00E356F31AD99517003FC87E /* nativeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* nativeTests.m */; }; 16 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; 17 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; 18 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; 19 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 20 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 21 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 22 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 23 | 140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 24 | 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 25 | 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; }; 26 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 27 | /* End PBXBuildFile section */ 28 | 29 | /* Begin PBXContainerItemProxy section */ 30 | 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { 31 | isa = PBXContainerItemProxy; 32 | containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 33 | proxyType = 2; 34 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 35 | remoteInfo = RCTActionSheet; 36 | }; 37 | 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { 38 | isa = PBXContainerItemProxy; 39 | containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 40 | proxyType = 2; 41 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 42 | remoteInfo = RCTGeolocation; 43 | }; 44 | 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { 45 | isa = PBXContainerItemProxy; 46 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 47 | proxyType = 2; 48 | remoteGlobalIDString = 58B5115D1A9E6B3D00147676; 49 | remoteInfo = RCTImage; 50 | }; 51 | 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { 52 | isa = PBXContainerItemProxy; 53 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 54 | proxyType = 2; 55 | remoteGlobalIDString = 58B511DB1A9E6C8500147676; 56 | remoteInfo = RCTNetwork; 57 | }; 58 | 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { 59 | isa = PBXContainerItemProxy; 60 | containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 61 | proxyType = 2; 62 | remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; 63 | remoteInfo = RCTVibration; 64 | }; 65 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 66 | isa = PBXContainerItemProxy; 67 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 68 | proxyType = 1; 69 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 70 | remoteInfo = native; 71 | }; 72 | 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { 73 | isa = PBXContainerItemProxy; 74 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 75 | proxyType = 2; 76 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 77 | remoteInfo = RCTSettings; 78 | }; 79 | 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { 80 | isa = PBXContainerItemProxy; 81 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 82 | proxyType = 2; 83 | remoteGlobalIDString = 3C86DF461ADF2C930047B81A; 84 | remoteInfo = RCTWebSocket; 85 | }; 86 | 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { 87 | isa = PBXContainerItemProxy; 88 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 89 | proxyType = 2; 90 | remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; 91 | remoteInfo = React; 92 | }; 93 | 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = { 94 | isa = PBXContainerItemProxy; 95 | containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; 96 | proxyType = 2; 97 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 98 | remoteInfo = RCTAnimation; 99 | }; 100 | 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */ = { 101 | isa = PBXContainerItemProxy; 102 | containerPortal = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; 103 | proxyType = 2; 104 | remoteGlobalIDString = 2D2A28201D9B03D100D4039D; 105 | remoteInfo = "RCTAnimation-tvOS"; 106 | }; 107 | 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { 108 | isa = PBXContainerItemProxy; 109 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 110 | proxyType = 2; 111 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 112 | remoteInfo = RCTLinking; 113 | }; 114 | 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { 115 | isa = PBXContainerItemProxy; 116 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 117 | proxyType = 2; 118 | remoteGlobalIDString = 58B5119B1A9E6C1200147676; 119 | remoteInfo = RCTText; 120 | }; 121 | /* End PBXContainerItemProxy section */ 122 | 123 | /* Begin PBXFileReference section */ 124 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = ""; }; 125 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../../../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; 126 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../../../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; 127 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../../../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; 128 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../../../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; 129 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../../../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 130 | 00E356EE1AD99517003FC87E /* nativeTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = nativeTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 131 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 132 | 00E356F21AD99517003FC87E /* nativeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = nativeTests.m; sourceTree = ""; }; 133 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../../../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; 134 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../../../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 135 | 13B07F961A680F5B00A75B9A /* native.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = native.app; sourceTree = BUILT_PRODUCTS_DIR; }; 136 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = native/AppDelegate.h; sourceTree = ""; }; 137 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = native/AppDelegate.m; sourceTree = ""; }; 138 | 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; 139 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = native/Images.xcassets; sourceTree = ""; }; 140 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = native/Info.plist; sourceTree = ""; }; 141 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = native/main.m; sourceTree = ""; }; 142 | 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../../../node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 143 | 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../../../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = ""; }; 144 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../../../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 145 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../../../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; 146 | /* End PBXFileReference section */ 147 | 148 | /* Begin PBXFrameworksBuildPhase section */ 149 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 150 | isa = PBXFrameworksBuildPhase; 151 | buildActionMask = 2147483647; 152 | files = ( 153 | 140ED2AC1D01E1AD002B40FF /* libReact.a in Frameworks */, 154 | ); 155 | runOnlyForDeploymentPostprocessing = 0; 156 | }; 157 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 158 | isa = PBXFrameworksBuildPhase; 159 | buildActionMask = 2147483647; 160 | files = ( 161 | 5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */, 162 | 146834051AC3E58100842450 /* libReact.a in Frameworks */, 163 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 164 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 165 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, 166 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, 167 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, 168 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, 169 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, 170 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, 171 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, 172 | ); 173 | runOnlyForDeploymentPostprocessing = 0; 174 | }; 175 | /* End PBXFrameworksBuildPhase section */ 176 | 177 | /* Begin PBXGroup section */ 178 | 00C302A81ABCB8CE00DB3ED1 /* Products */ = { 179 | isa = PBXGroup; 180 | children = ( 181 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, 182 | ); 183 | name = Products; 184 | sourceTree = ""; 185 | }; 186 | 00C302B61ABCB90400DB3ED1 /* Products */ = { 187 | isa = PBXGroup; 188 | children = ( 189 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, 190 | ); 191 | name = Products; 192 | sourceTree = ""; 193 | }; 194 | 00C302BC1ABCB91800DB3ED1 /* Products */ = { 195 | isa = PBXGroup; 196 | children = ( 197 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, 198 | ); 199 | name = Products; 200 | sourceTree = ""; 201 | }; 202 | 00C302D41ABCB9D200DB3ED1 /* Products */ = { 203 | isa = PBXGroup; 204 | children = ( 205 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, 206 | ); 207 | name = Products; 208 | sourceTree = ""; 209 | }; 210 | 00C302E01ABCB9EE00DB3ED1 /* Products */ = { 211 | isa = PBXGroup; 212 | children = ( 213 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, 214 | ); 215 | name = Products; 216 | sourceTree = ""; 217 | }; 218 | 00E356EF1AD99517003FC87E /* nativeTests */ = { 219 | isa = PBXGroup; 220 | children = ( 221 | 00E356F21AD99517003FC87E /* nativeTests.m */, 222 | 00E356F01AD99517003FC87E /* Supporting Files */, 223 | ); 224 | path = nativeTests; 225 | sourceTree = ""; 226 | }; 227 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 228 | isa = PBXGroup; 229 | children = ( 230 | 00E356F11AD99517003FC87E /* Info.plist */, 231 | ); 232 | name = "Supporting Files"; 233 | sourceTree = ""; 234 | }; 235 | 139105B71AF99BAD00B5F7CC /* Products */ = { 236 | isa = PBXGroup; 237 | children = ( 238 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, 239 | ); 240 | name = Products; 241 | sourceTree = ""; 242 | }; 243 | 139FDEE71B06529A00C62182 /* Products */ = { 244 | isa = PBXGroup; 245 | children = ( 246 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, 247 | ); 248 | name = Products; 249 | sourceTree = ""; 250 | }; 251 | 13B07FAE1A68108700A75B9A /* native */ = { 252 | isa = PBXGroup; 253 | children = ( 254 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */, 255 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 256 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 257 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 258 | 13B07FB61A68108700A75B9A /* Info.plist */, 259 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 260 | 13B07FB71A68108700A75B9A /* main.m */, 261 | ); 262 | name = native; 263 | sourceTree = ""; 264 | }; 265 | 146834001AC3E56700842450 /* Products */ = { 266 | isa = PBXGroup; 267 | children = ( 268 | 146834041AC3E56700842450 /* libReact.a */, 269 | ); 270 | name = Products; 271 | sourceTree = ""; 272 | }; 273 | 5E91572E1DD0AC6500FF2AA8 /* Products */ = { 274 | isa = PBXGroup; 275 | children = ( 276 | 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */, 277 | 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */, 278 | ); 279 | name = Products; 280 | sourceTree = ""; 281 | }; 282 | 78C398B11ACF4ADC00677621 /* Products */ = { 283 | isa = PBXGroup; 284 | children = ( 285 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, 286 | ); 287 | name = Products; 288 | sourceTree = ""; 289 | }; 290 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 291 | isa = PBXGroup; 292 | children = ( 293 | 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */, 294 | 146833FF1AC3E56700842450 /* React.xcodeproj */, 295 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, 296 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, 297 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, 298 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, 299 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, 300 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, 301 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, 302 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, 303 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, 304 | ); 305 | name = Libraries; 306 | sourceTree = ""; 307 | }; 308 | 832341B11AAA6A8300B99B32 /* Products */ = { 309 | isa = PBXGroup; 310 | children = ( 311 | 832341B51AAA6A8300B99B32 /* libRCTText.a */, 312 | ); 313 | name = Products; 314 | sourceTree = ""; 315 | }; 316 | 83CBB9F61A601CBA00E9B192 = { 317 | isa = PBXGroup; 318 | children = ( 319 | 13B07FAE1A68108700A75B9A /* native */, 320 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 321 | 00E356EF1AD99517003FC87E /* nativeTests */, 322 | 83CBBA001A601CBA00E9B192 /* Products */, 323 | ); 324 | indentWidth = 2; 325 | sourceTree = ""; 326 | tabWidth = 2; 327 | }; 328 | 83CBBA001A601CBA00E9B192 /* Products */ = { 329 | isa = PBXGroup; 330 | children = ( 331 | 13B07F961A680F5B00A75B9A /* native.app */, 332 | 00E356EE1AD99517003FC87E /* nativeTests.xctest */, 333 | ); 334 | name = Products; 335 | sourceTree = ""; 336 | }; 337 | /* End PBXGroup section */ 338 | 339 | /* Begin PBXNativeTarget section */ 340 | 00E356ED1AD99517003FC87E /* nativeTests */ = { 341 | isa = PBXNativeTarget; 342 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "nativeTests" */; 343 | buildPhases = ( 344 | 00E356EA1AD99517003FC87E /* Sources */, 345 | 00E356EB1AD99517003FC87E /* Frameworks */, 346 | 00E356EC1AD99517003FC87E /* Resources */, 347 | ); 348 | buildRules = ( 349 | ); 350 | dependencies = ( 351 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 352 | ); 353 | name = nativeTests; 354 | productName = nativeTests; 355 | productReference = 00E356EE1AD99517003FC87E /* nativeTests.xctest */; 356 | productType = "com.apple.product-type.bundle.unit-test"; 357 | }; 358 | 13B07F861A680F5B00A75B9A /* native */ = { 359 | isa = PBXNativeTarget; 360 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "native" */; 361 | buildPhases = ( 362 | 13B07F871A680F5B00A75B9A /* Sources */, 363 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 364 | 13B07F8E1A680F5B00A75B9A /* Resources */, 365 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 366 | ); 367 | buildRules = ( 368 | ); 369 | dependencies = ( 370 | ); 371 | name = native; 372 | productName = "Hello World"; 373 | productReference = 13B07F961A680F5B00A75B9A /* native.app */; 374 | productType = "com.apple.product-type.application"; 375 | }; 376 | /* End PBXNativeTarget section */ 377 | 378 | /* Begin PBXProject section */ 379 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 380 | isa = PBXProject; 381 | attributes = { 382 | LastUpgradeCheck = 0610; 383 | ORGANIZATIONNAME = Facebook; 384 | TargetAttributes = { 385 | 00E356ED1AD99517003FC87E = { 386 | CreatedOnToolsVersion = 6.2; 387 | TestTargetID = 13B07F861A680F5B00A75B9A; 388 | }; 389 | }; 390 | }; 391 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "native" */; 392 | compatibilityVersion = "Xcode 3.2"; 393 | developmentRegion = English; 394 | hasScannedForEncodings = 0; 395 | knownRegions = ( 396 | en, 397 | Base, 398 | ); 399 | mainGroup = 83CBB9F61A601CBA00E9B192; 400 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 401 | projectDirPath = ""; 402 | projectReferences = ( 403 | { 404 | ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; 405 | ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 406 | }, 407 | { 408 | ProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */; 409 | ProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */; 410 | }, 411 | { 412 | ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; 413 | ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 414 | }, 415 | { 416 | ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; 417 | ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 418 | }, 419 | { 420 | ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; 421 | ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 422 | }, 423 | { 424 | ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; 425 | ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 426 | }, 427 | { 428 | ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; 429 | ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 430 | }, 431 | { 432 | ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; 433 | ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 434 | }, 435 | { 436 | ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; 437 | ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 438 | }, 439 | { 440 | ProductGroup = 139FDEE71B06529A00C62182 /* Products */; 441 | ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 442 | }, 443 | { 444 | ProductGroup = 146834001AC3E56700842450 /* Products */; 445 | ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; 446 | }, 447 | ); 448 | projectRoot = ""; 449 | targets = ( 450 | 13B07F861A680F5B00A75B9A /* native */, 451 | 00E356ED1AD99517003FC87E /* nativeTests */, 452 | ); 453 | }; 454 | /* End PBXProject section */ 455 | 456 | /* Begin PBXReferenceProxy section */ 457 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { 458 | isa = PBXReferenceProxy; 459 | fileType = archive.ar; 460 | path = libRCTActionSheet.a; 461 | remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; 462 | sourceTree = BUILT_PRODUCTS_DIR; 463 | }; 464 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { 465 | isa = PBXReferenceProxy; 466 | fileType = archive.ar; 467 | path = libRCTGeolocation.a; 468 | remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; 469 | sourceTree = BUILT_PRODUCTS_DIR; 470 | }; 471 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { 472 | isa = PBXReferenceProxy; 473 | fileType = archive.ar; 474 | path = libRCTImage.a; 475 | remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; 476 | sourceTree = BUILT_PRODUCTS_DIR; 477 | }; 478 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { 479 | isa = PBXReferenceProxy; 480 | fileType = archive.ar; 481 | path = libRCTNetwork.a; 482 | remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; 483 | sourceTree = BUILT_PRODUCTS_DIR; 484 | }; 485 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { 486 | isa = PBXReferenceProxy; 487 | fileType = archive.ar; 488 | path = libRCTVibration.a; 489 | remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; 490 | sourceTree = BUILT_PRODUCTS_DIR; 491 | }; 492 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { 493 | isa = PBXReferenceProxy; 494 | fileType = archive.ar; 495 | path = libRCTSettings.a; 496 | remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; 497 | sourceTree = BUILT_PRODUCTS_DIR; 498 | }; 499 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { 500 | isa = PBXReferenceProxy; 501 | fileType = archive.ar; 502 | path = libRCTWebSocket.a; 503 | remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; 504 | sourceTree = BUILT_PRODUCTS_DIR; 505 | }; 506 | 146834041AC3E56700842450 /* libReact.a */ = { 507 | isa = PBXReferenceProxy; 508 | fileType = archive.ar; 509 | path = libReact.a; 510 | remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; 511 | sourceTree = BUILT_PRODUCTS_DIR; 512 | }; 513 | 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */ = { 514 | isa = PBXReferenceProxy; 515 | fileType = archive.ar; 516 | path = libRCTAnimation.a; 517 | remoteRef = 5E9157321DD0AC6500FF2AA8 /* PBXContainerItemProxy */; 518 | sourceTree = BUILT_PRODUCTS_DIR; 519 | }; 520 | 5E9157351DD0AC6500FF2AA8 /* libRCTAnimation-tvOS.a */ = { 521 | isa = PBXReferenceProxy; 522 | fileType = archive.ar; 523 | path = "libRCTAnimation-tvOS.a"; 524 | remoteRef = 5E9157341DD0AC6500FF2AA8 /* PBXContainerItemProxy */; 525 | sourceTree = BUILT_PRODUCTS_DIR; 526 | }; 527 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { 528 | isa = PBXReferenceProxy; 529 | fileType = archive.ar; 530 | path = libRCTLinking.a; 531 | remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; 532 | sourceTree = BUILT_PRODUCTS_DIR; 533 | }; 534 | 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { 535 | isa = PBXReferenceProxy; 536 | fileType = archive.ar; 537 | path = libRCTText.a; 538 | remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; 539 | sourceTree = BUILT_PRODUCTS_DIR; 540 | }; 541 | /* End PBXReferenceProxy section */ 542 | 543 | /* Begin PBXResourcesBuildPhase section */ 544 | 00E356EC1AD99517003FC87E /* Resources */ = { 545 | isa = PBXResourcesBuildPhase; 546 | buildActionMask = 2147483647; 547 | files = ( 548 | ); 549 | runOnlyForDeploymentPostprocessing = 0; 550 | }; 551 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 552 | isa = PBXResourcesBuildPhase; 553 | buildActionMask = 2147483647; 554 | files = ( 555 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 556 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 557 | ); 558 | runOnlyForDeploymentPostprocessing = 0; 559 | }; 560 | /* End PBXResourcesBuildPhase section */ 561 | 562 | /* Begin PBXShellScriptBuildPhase section */ 563 | 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = { 564 | isa = PBXShellScriptBuildPhase; 565 | buildActionMask = 2147483647; 566 | files = ( 567 | ); 568 | inputPaths = ( 569 | ); 570 | name = "Bundle React Native code and images"; 571 | outputPaths = ( 572 | ); 573 | runOnlyForDeploymentPostprocessing = 0; 574 | shellPath = /bin/sh; 575 | shellScript = "export NODE_BINARY=node\n../../../node_modules/react-native/packager/react-native-xcode.sh"; 576 | }; 577 | /* End PBXShellScriptBuildPhase section */ 578 | 579 | /* Begin PBXSourcesBuildPhase section */ 580 | 00E356EA1AD99517003FC87E /* Sources */ = { 581 | isa = PBXSourcesBuildPhase; 582 | buildActionMask = 2147483647; 583 | files = ( 584 | 00E356F31AD99517003FC87E /* nativeTests.m in Sources */, 585 | ); 586 | runOnlyForDeploymentPostprocessing = 0; 587 | }; 588 | 13B07F871A680F5B00A75B9A /* Sources */ = { 589 | isa = PBXSourcesBuildPhase; 590 | buildActionMask = 2147483647; 591 | files = ( 592 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 593 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 594 | ); 595 | runOnlyForDeploymentPostprocessing = 0; 596 | }; 597 | /* End PBXSourcesBuildPhase section */ 598 | 599 | /* Begin PBXTargetDependency section */ 600 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 601 | isa = PBXTargetDependency; 602 | target = 13B07F861A680F5B00A75B9A /* native */; 603 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 604 | }; 605 | /* End PBXTargetDependency section */ 606 | 607 | /* Begin PBXVariantGroup section */ 608 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { 609 | isa = PBXVariantGroup; 610 | children = ( 611 | 13B07FB21A68108700A75B9A /* Base */, 612 | ); 613 | name = LaunchScreen.xib; 614 | path = native; 615 | sourceTree = ""; 616 | }; 617 | /* End PBXVariantGroup section */ 618 | 619 | /* Begin XCBuildConfiguration section */ 620 | 00E356F61AD99517003FC87E /* Debug */ = { 621 | isa = XCBuildConfiguration; 622 | buildSettings = { 623 | BUNDLE_LOADER = "$(TEST_HOST)"; 624 | GCC_PREPROCESSOR_DEFINITIONS = ( 625 | "DEBUG=1", 626 | "$(inherited)", 627 | ); 628 | INFOPLIST_FILE = nativeTests/Info.plist; 629 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 630 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 631 | PRODUCT_NAME = "$(TARGET_NAME)"; 632 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/native.app/native"; 633 | }; 634 | name = Debug; 635 | }; 636 | 00E356F71AD99517003FC87E /* Release */ = { 637 | isa = XCBuildConfiguration; 638 | buildSettings = { 639 | BUNDLE_LOADER = "$(TEST_HOST)"; 640 | COPY_PHASE_STRIP = NO; 641 | INFOPLIST_FILE = nativeTests/Info.plist; 642 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 643 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 644 | PRODUCT_NAME = "$(TARGET_NAME)"; 645 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/native.app/native"; 646 | }; 647 | name = Release; 648 | }; 649 | 13B07F941A680F5B00A75B9A /* Debug */ = { 650 | isa = XCBuildConfiguration; 651 | buildSettings = { 652 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 653 | CURRENT_PROJECT_VERSION = 1; 654 | DEAD_CODE_STRIPPING = NO; 655 | INFOPLIST_FILE = native/Info.plist; 656 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 657 | OTHER_LDFLAGS = ( 658 | "$(inherited)", 659 | "-ObjC", 660 | "-lc++", 661 | ); 662 | PRODUCT_NAME = native; 663 | VERSIONING_SYSTEM = "apple-generic"; 664 | }; 665 | name = Debug; 666 | }; 667 | 13B07F951A680F5B00A75B9A /* Release */ = { 668 | isa = XCBuildConfiguration; 669 | buildSettings = { 670 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 671 | CURRENT_PROJECT_VERSION = 1; 672 | INFOPLIST_FILE = native/Info.plist; 673 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 674 | OTHER_LDFLAGS = ( 675 | "$(inherited)", 676 | "-ObjC", 677 | "-lc++", 678 | ); 679 | PRODUCT_NAME = native; 680 | VERSIONING_SYSTEM = "apple-generic"; 681 | }; 682 | name = Release; 683 | }; 684 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 685 | isa = XCBuildConfiguration; 686 | buildSettings = { 687 | ALWAYS_SEARCH_USER_PATHS = NO; 688 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 689 | CLANG_CXX_LIBRARY = "libc++"; 690 | CLANG_ENABLE_MODULES = YES; 691 | CLANG_ENABLE_OBJC_ARC = YES; 692 | CLANG_WARN_BOOL_CONVERSION = YES; 693 | CLANG_WARN_CONSTANT_CONVERSION = YES; 694 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 695 | CLANG_WARN_EMPTY_BODY = YES; 696 | CLANG_WARN_ENUM_CONVERSION = YES; 697 | CLANG_WARN_INT_CONVERSION = YES; 698 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 699 | CLANG_WARN_UNREACHABLE_CODE = YES; 700 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 701 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 702 | COPY_PHASE_STRIP = NO; 703 | ENABLE_STRICT_OBJC_MSGSEND = YES; 704 | GCC_C_LANGUAGE_STANDARD = gnu99; 705 | GCC_DYNAMIC_NO_PIC = NO; 706 | GCC_OPTIMIZATION_LEVEL = 0; 707 | GCC_PREPROCESSOR_DEFINITIONS = ( 708 | "DEBUG=1", 709 | "$(inherited)", 710 | ); 711 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 712 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 713 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 714 | GCC_WARN_UNDECLARED_SELECTOR = YES; 715 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 716 | GCC_WARN_UNUSED_FUNCTION = YES; 717 | GCC_WARN_UNUSED_VARIABLE = YES; 718 | HEADER_SEARCH_PATHS = ( 719 | "$(inherited)", 720 | "$(SRCROOT)/../../../node_modules/react-native/React/**", 721 | "$(SRCROOT)/../../../node_modules/react-native/ReactCommon/**", 722 | ); 723 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 724 | MTL_ENABLE_DEBUG_INFO = YES; 725 | ONLY_ACTIVE_ARCH = YES; 726 | SDKROOT = iphoneos; 727 | }; 728 | name = Debug; 729 | }; 730 | 83CBBA211A601CBA00E9B192 /* Release */ = { 731 | isa = XCBuildConfiguration; 732 | buildSettings = { 733 | ALWAYS_SEARCH_USER_PATHS = NO; 734 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 735 | CLANG_CXX_LIBRARY = "libc++"; 736 | CLANG_ENABLE_MODULES = YES; 737 | CLANG_ENABLE_OBJC_ARC = YES; 738 | CLANG_WARN_BOOL_CONVERSION = YES; 739 | CLANG_WARN_CONSTANT_CONVERSION = YES; 740 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 741 | CLANG_WARN_EMPTY_BODY = YES; 742 | CLANG_WARN_ENUM_CONVERSION = YES; 743 | CLANG_WARN_INT_CONVERSION = YES; 744 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 745 | CLANG_WARN_UNREACHABLE_CODE = YES; 746 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 747 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 748 | COPY_PHASE_STRIP = YES; 749 | ENABLE_NS_ASSERTIONS = NO; 750 | ENABLE_STRICT_OBJC_MSGSEND = YES; 751 | GCC_C_LANGUAGE_STANDARD = gnu99; 752 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 753 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 754 | GCC_WARN_UNDECLARED_SELECTOR = YES; 755 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 756 | GCC_WARN_UNUSED_FUNCTION = YES; 757 | GCC_WARN_UNUSED_VARIABLE = YES; 758 | HEADER_SEARCH_PATHS = ( 759 | "$(inherited)", 760 | "$(SRCROOT)/../../../node_modules/react-native/React/**", 761 | "$(SRCROOT)/../../../node_modules/react-native/ReactCommon/**", 762 | ); 763 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 764 | MTL_ENABLE_DEBUG_INFO = NO; 765 | SDKROOT = iphoneos; 766 | VALIDATE_PRODUCT = YES; 767 | }; 768 | name = Release; 769 | }; 770 | /* End XCBuildConfiguration section */ 771 | 772 | /* Begin XCConfigurationList section */ 773 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "nativeTests" */ = { 774 | isa = XCConfigurationList; 775 | buildConfigurations = ( 776 | 00E356F61AD99517003FC87E /* Debug */, 777 | 00E356F71AD99517003FC87E /* Release */, 778 | ); 779 | defaultConfigurationIsVisible = 0; 780 | defaultConfigurationName = Release; 781 | }; 782 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "native" */ = { 783 | isa = XCConfigurationList; 784 | buildConfigurations = ( 785 | 13B07F941A680F5B00A75B9A /* Debug */, 786 | 13B07F951A680F5B00A75B9A /* Release */, 787 | ); 788 | defaultConfigurationIsVisible = 0; 789 | defaultConfigurationName = Release; 790 | }; 791 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "native" */ = { 792 | isa = XCConfigurationList; 793 | buildConfigurations = ( 794 | 83CBBA201A601CBA00E9B192 /* Debug */, 795 | 83CBBA211A601CBA00E9B192 /* Release */, 796 | ); 797 | defaultConfigurationIsVisible = 0; 798 | defaultConfigurationName = Release; 799 | }; 800 | /* End XCConfigurationList section */ 801 | }; 802 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 803 | } 804 | -------------------------------------------------------------------------------- /example/native/ios/native.xcodeproj/xcshareddata/xcschemes/native.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 38 | 39 | 44 | 45 | 47 | 53 | 54 | 55 | 56 | 57 | 63 | 64 | 65 | 66 | 75 | 77 | 83 | 84 | 85 | 86 | 87 | 88 | 94 | 96 | 102 | 103 | 104 | 105 | 107 | 108 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /example/native/ios/native/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/native/ios/native/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import "RCTBundleURLProvider.h" 13 | #import "RCTRootView.h" 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"example/native/index" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"native" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /example/native/ios/native/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /example/native/ios/native/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 | } -------------------------------------------------------------------------------- /example/native/ios/native/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /example/native/ios/native/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/native/ios/nativeTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 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 | -------------------------------------------------------------------------------- /example/native/ios/nativeTests/nativeTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import "RCTLog.h" 14 | #import "RCTRootView.h" 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface nativeTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation nativeTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /example/native/missingBabelHelpers.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | // For some reason, babelHelpers.typeof is not included despite being required by some dependency 4 | // somewhere. Manually including it here to prevent errors 5 | global.babelHelpers = global.babelHelpers || {}; 6 | global.babelHelpers.typeof = (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') 7 | ? function (obj) { return typeof obj; } 8 | : function (obj) { return obj && typeof Symbol === 'function' && obj.constructor === Symbol ? 'symbol' : typeof obj; }; 9 | -------------------------------------------------------------------------------- /example/native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "native", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest" 8 | }, 9 | "dependencies": { 10 | "react": "15.4.1", 11 | "react-native": "0.39.2" 12 | }, 13 | "devDependencies": { 14 | "babel-jest": "17.0.2", 15 | "babel-preset-react-native": "1.9.0", 16 | "jest": "17.0.3", 17 | "react-test-renderer": "15.4.1" 18 | }, 19 | "jest": { 20 | "preset": "react-native" 21 | } 22 | } -------------------------------------------------------------------------------- /example/stories/Animated/Animated1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { make } from '../../StoryManager'; 3 | import { View, Text, Animated, Touchable } from '../../../src/index'; 4 | 5 | make('Animated 1', () => { 6 | class Example extends React.Component{ 7 | constructor(props) { 8 | super(props) 9 | 10 | this.state = { 11 | anim: new Animated.Value(0), 12 | on: false 13 | } 14 | 15 | this.handleClick = this.handleClick.bind(this) 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 | 22 | 23 | 30 | Touch Me! 31 | 32 | 33 | 34 | 35 | ) 36 | } 37 | 38 | handleClick() { 39 | if (this.state.on) { 40 | Animated.timing(this.state.anim, {toValue: 0}).start(); 41 | this.setState({ 42 | on: false 43 | }) 44 | } else { 45 | Animated.timing(this.state.anim, {toValue: 400}).start(); 46 | this.setState({ 47 | on: true 48 | }) 49 | } 50 | } 51 | } 52 | 53 | return 54 | }); 55 | -------------------------------------------------------------------------------- /example/stories/Animated/index.js: -------------------------------------------------------------------------------- 1 | import './Animated1'; 2 | -------------------------------------------------------------------------------- /example/stories/Image/Image1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { make } from '../../StoryManager'; 3 | import { View, Text, Image, StyleSheet } from '../../../src/index'; 4 | 5 | // TODO(lmr): we should figure out asset bundling etc. so that we can use `require('./image.png')` 6 | const image = (w, h = w) => ({ uri: `../assets/image_1_${w}_${h}.jpeg` }); 7 | 8 | const styles = StyleSheet.create({ 9 | a: { 10 | color: 'blue', 11 | width: 20, 12 | }, 13 | b: { 14 | width: 20, 15 | color: 'blue', 16 | }, 17 | red: { 18 | margin: 10, 19 | padding: 10, 20 | backgroundColor: 'orange', 21 | }, 22 | green: { 23 | margin: 10, 24 | padding: 10, 25 | backgroundColor: 'blue', 26 | }, 27 | }); 28 | 29 | make('css example', () => ( 30 | 31 | 34 | 37 | 38 | 39 | )); 40 | 41 | make('Image: border radius', () => ( 42 | 50 | )); 51 | 52 | make('Image: resizeMode=stretch 1', () => ( 53 | 63 | )); 64 | 65 | make('Image: resizeMode=contain 1', () => ( 66 | 76 | )); 77 | 78 | make('Image: resizeMode=contain 2', () => ( 79 | 89 | )); 90 | 91 | make('Image 3', () => ( 92 | 101 | )); 102 | 103 | 104 | make('Image 1', () => ( 105 | 114 | )); 115 | 116 | make('Image 2', () => ( 117 | 126 | )); 127 | -------------------------------------------------------------------------------- /example/stories/Image/index.js: -------------------------------------------------------------------------------- 1 | import './Image1'; 2 | -------------------------------------------------------------------------------- /example/stories/Text/Text1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { make } from '../../StoryManager'; 3 | import { View, Text } from '../../../src/index'; 4 | 5 | make('Text 1', () => ( 6 | 7 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat ipsum arcu, 15 | id molestie tortor dignissim in. Curabitur ut placerat ipsum. Cras sed arcu nunc. 16 | Cras sed mauris vitae urna. 17 | 18 | 19 | )); 20 | 21 | make('Text: numberOfLines=1', () => ( 22 | 23 | 31 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat ipsum arcu, 32 | id molestie tortor dignissim in. Curabitur ut placerat ipsum. Cras sed arcu nunc. 33 | Cras sed mauris vitae urna. 34 | 35 | 36 | )); 37 | 38 | make('Text: numberOfLines=2', () => ( 39 | 40 | 48 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat ipsum arcu, 49 | id molestie tortor dignissim in. Curabitur ut placerat ipsum. Cras sed arcu nunc. 50 | Cras sed mauris vitae urna. 51 | 52 | 53 | )); 54 | -------------------------------------------------------------------------------- /example/stories/Text/index.js: -------------------------------------------------------------------------------- 1 | import './Text1'; 2 | -------------------------------------------------------------------------------- /example/stories/Touchable/Touchable1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { make } from '../../StoryManager'; 3 | import { View, Text, Touchable } from '../../../src/index'; 4 | 5 | make('Touchable 1', () => ( 6 | console.log('pressed')}> 7 | 8 | 15 | Touch Me! 16 | 17 | 18 | 19 | )); 20 | -------------------------------------------------------------------------------- /example/stories/Touchable/index.js: -------------------------------------------------------------------------------- 1 | import './Touchable1'; 2 | -------------------------------------------------------------------------------- /example/stories/View/Box.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { make } from '../../StoryManager'; 3 | import { View, Text } from '../../../src/index'; 4 | 5 | make('overflow', () => ( 6 | 7 | 17 | 25 | 26 | 36 | 44 | 45 | 46 | )); 47 | 48 | 49 | // shadow 50 | 51 | make('shadow', () => ( 52 | 53 | 67 | 81 | 95 | 96 | )); 97 | 98 | 99 | // border types 100 | 101 | make('border types (1px)', () => ( 102 | 103 | 112 | 121 | 130 | 131 | )); 132 | 133 | make('border types (4px)', () => ( 134 | 135 | 144 | 153 | 162 | 163 | )); 164 | 165 | make('Box with 1.2 scale', () => ( 166 | 167 | 177 | 178 | )); 179 | 180 | make('Box with 1/2 scale', () => ( 181 | 182 | 192 | 193 | )); 194 | 195 | make('Box with translate + rotation', () => ( 196 | 197 | 208 | 209 | )); 210 | 211 | make('Box with rotation + translate', () => ( 212 | 213 | 224 | 225 | )); 226 | 227 | 228 | make('Box with rotation', () => ( 229 | 230 | 240 | 241 | )); 242 | 243 | make('Box with top border', () => ( 244 | 253 | )); 254 | 255 | make('Box with border', () => ( 256 | 266 | )); 267 | 268 | make('Box with border2', () => ( 269 | 279 | )); 280 | 281 | make('Three boxes (row)', () => ( 282 | 289 | 296 | 303 | 310 | 311 | )); 312 | 313 | make('Three boxes (column)', () => ( 314 | 321 | 328 | 335 | 342 | 343 | )); 344 | 345 | 346 | make('Three boxes (row) w/ margins', () => ( 347 | 354 | 361 | 369 | 376 | 377 | )); 378 | -------------------------------------------------------------------------------- /example/stories/View/index.js: -------------------------------------------------------------------------------- 1 | import './Box'; 2 | -------------------------------------------------------------------------------- /example/web/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/web/example.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import AllStories from '../AllStories'; 4 | 5 | ReactDOM.render(, document.querySelector('.root')); 6 | -------------------------------------------------------------------------------- /example/web/happo-inner.js: -------------------------------------------------------------------------------- 1 | /* global happo */ 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import { getStories } from '../StoryManager'; 5 | 6 | // stories 7 | import '../stories/Image'; 8 | import '../stories/Text'; 9 | import '../stories/View'; 10 | 11 | getStories().forEach(({ name, Component }) => { 12 | happo.define(name, (done) => { 13 | const div = document.createElement('div'); 14 | document.body.appendChild(div); 15 | ReactDOM.render(, div); 16 | requestAnimationFrame(done); 17 | }); 18 | }); 19 | 20 | happo.cleanOutElement = (element) => { 21 | ReactDOM.unmountComponentAtNode(element); 22 | }; 23 | -------------------------------------------------------------------------------- /example/web/happo.js: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | require('./happo-inner'); 3 | }; 4 | -------------------------------------------------------------------------------- /example/web/perf.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/web/perf.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import makeDeepTree from '../benchmarks/DeepTree'; 4 | import benchmark from '../benchmarks/benchmark'; 5 | 6 | const node = document.querySelector('.root'); 7 | const setup = () => {/* */}; 8 | const teardown = () => ReactDOM.unmountComponentAtNode(node); 9 | 10 | const ReactPrimitives = require('react-primitives'); 11 | const ReactNativeWeb = require('react-native-web'); 12 | 13 | const DeepTreeRP = makeDeepTree(ReactPrimitives); 14 | const DeepTreeRNW = makeDeepTree(ReactNativeWeb); 15 | 16 | const deepTreeRPW = ({ wrap, depth, breadth, runs }) => () => benchmark({ 17 | name: `DeepTree (React Primitives) (depth=${depth}, breadth=${breadth}, wrap=${wrap})`, 18 | runs, 19 | setup, 20 | teardown, 21 | task: () => ReactDOM.render( 22 | , 28 | node 29 | ), 30 | }); 31 | 32 | const deepTreeRNW = ({ wrap, depth, breadth, runs }) => () => benchmark({ 33 | name: `DeepTree (React Native Web) (depth=${depth}, breadth=${breadth}, wrap=${wrap})`, 34 | runs, 35 | setup, 36 | teardown, 37 | task: () => ReactDOM.render( 38 | , 44 | node 45 | ), 46 | }); 47 | 48 | Promise.resolve() 49 | .then(deepTreeRPW({ wrap: 0, depth: 3, breadth: 3, runs: 100 })) 50 | .then(deepTreeRNW({ wrap: 0, depth: 3, breadth: 3, runs: 100 })) 51 | 52 | .then(deepTreeRPW({ wrap: 4, depth: 3, breadth: 10, runs: 10 })) 53 | .then(deepTreeRNW({ wrap: 4, depth: 3, breadth: 10, runs: 10 })) 54 | 55 | .then(deepTreeRPW({ wrap: 1, depth: 5, breadth: 3, runs: 10 })) 56 | .then(deepTreeRNW({ wrap: 1, depth: 5, breadth: 3, runs: 10 })) 57 | 58 | .then(deepTreeRPW({ wrap: 2, depth: 3, breadth: 3, runs: 10 })) 59 | .then(deepTreeRNW({ wrap: 2, depth: 3, breadth: 3, runs: 10 })) 60 | 61 | .then(deepTreeRPW({ wrap: 3, depth: 3, breadth: 3, runs: 10 })) 62 | .then(deepTreeRNW({ wrap: 3, depth: 3, breadth: 3, runs: 10 })) 63 | 64 | .then(deepTreeRPW({ wrap: 4, depth: 3, breadth: 3, runs: 10 })) 65 | .then(deepTreeRNW({ wrap: 4, depth: 3, breadth: 3, runs: 10 })) 66 | 67 | .then(deepTreeRPW({ wrap: 5, depth: 3, breadth: 3, runs: 10 })) 68 | .then(deepTreeRNW({ wrap: 5, depth: 3, breadth: 3, runs: 10 })) 69 | 70 | .then(deepTreeRPW({ wrap: 6, depth: 3, breadth: 3, runs: 10 })) 71 | .then(deepTreeRNW({ wrap: 6, depth: 3, breadth: 3, runs: 10 })) 72 | 73 | .then(() => ReactDOM.render( 74 | , 80 | node 81 | )); 82 | -------------------------------------------------------------------------------- /example/web/pythagoras.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pythagoras 6 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/web/pythagoras.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { StyleSheet, Animated, View, Touchable } from 'react-primitives'; 4 | 5 | class App extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | press: new Animated.Value(0), 10 | }; 11 | } 12 | render() { 13 | const { press } = this.state; 14 | return ( 15 | 16 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | const styles = StyleSheet.create({ 27 | test: { 28 | width: 100, 29 | height: 100, 30 | backgroundColor: 'orange', 31 | borderBottomColor: "#F00", 32 | // borderTopWidth: 0, 33 | // borderLeftWidth: 0, 34 | // borderRightWidth: 0, 35 | borderBottomWidth: 10, 36 | borderWidth: 0, 37 | transform: [ 38 | { translateX: 200 }, 39 | ] 40 | }, 41 | green: { 42 | backgroundColor: 'green', 43 | }, 44 | }); 45 | 46 | ReactDOM.render(, document.querySelector('.root')); 47 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./lib'); 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-primitives", 3 | "version": "0.8.1", 4 | "description": "Primitive React Interfaces Across Targets", 5 | "main": "index.js", 6 | "scripts": { 7 | "prepublish": "npm run build", 8 | "build": "rm -rf lib && babel -d lib src", 9 | "build:webpack": "webpack", 10 | "build:watch": "npm run build -- --watch", 11 | "run:packager": "./node_modules/react-native/scripts/packager.sh", 12 | "run:ios": "react-native run-ios --project-path ./example/native/ios", 13 | "run:android": "react-native run-android --root ./example/android", 14 | "run:webpack": "webpack --watch", 15 | "test": "jest", 16 | "lint": "eslint .", 17 | "happo": "sh ./scripts/happo-ci.sh", 18 | "travis": "npm run --silent test && npm run --silent lint", 19 | "test:watch": "jest --watch" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/lelandrichardson/react-primitives.git" 24 | }, 25 | "keywords": [ 26 | "react" 27 | ], 28 | "author": "Leland Richardson ", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/lelandrichardson/react-primitives/issues" 32 | }, 33 | "homepage": "https://github.com/lelandrichardson/react-primitives#readme", 34 | "devDependencies": { 35 | "babel-cli": "^6.6.5", 36 | "babel-core": "^6.26.3", 37 | "babel-eslint": "^8.2.3", 38 | "babel-loader": "^7.1.4", 39 | "babel-plugin-module-resolver": "^3.1.1", 40 | "babel-plugin-syntax-object-rest-spread": "^6.5.0", 41 | "babel-plugin-transform-object-rest-spread": "^6.6.5", 42 | "babel-preset-airbnb": "^2.4.0", 43 | "browserify": "^13.1.0", 44 | "chai": "^3.5.0", 45 | "eslint": "^4.19.1", 46 | "eslint-config-airbnb": "^16.1.0", 47 | "eslint-import-resolver-babel-module": "^4.0.0", 48 | "eslint-plugin-import": "^2.12.0", 49 | "eslint-plugin-jsx-a11y": "^6.0.3", 50 | "eslint-plugin-react": "^7.9.1", 51 | "happo": "^3.0.1", 52 | "jest": "^18.0.0", 53 | "karma": "^0.13.22", 54 | "karma-babel-preprocessor": "^6.0.1", 55 | "karma-browserify": "^5.0.3", 56 | "karma-chrome-launcher": "^0.2.3", 57 | "karma-mocha": "^0.2.2", 58 | "karma-mocha-reporter": "^2.0.0", 59 | "karma-phantomjs-launcher": "^1.0.0", 60 | "mocha": "^2.4.5", 61 | "octonode": "^0.7.7", 62 | "phantomjs-prebuilt": "^2.1.7", 63 | "react": "^16.5.2", 64 | "react-360": "^1.1.0", 65 | "react-art": "^16.5.2", 66 | "react-dom": "^16.5.2", 67 | "react-figma": "0.0.57", 68 | "react-native": "^0.52.0", 69 | "react-native-web": "^0.11.0", 70 | "react-sketchapp": "^2.0.0", 71 | "react-test-renderer": "^16.4.0", 72 | "watchify": "^3.7.0", 73 | "webpack": "^4.12.0", 74 | "webpack-cli": "^3.0.3" 75 | }, 76 | "dependencies": { 77 | "animated": "^0.2.2", 78 | "create-react-class": "^15.6.3", 79 | "prop-types": "^15.7.2", 80 | "react-timer-mixin": "^0.13.4" 81 | }, 82 | "peerDependencies": { 83 | "react": ">=16.5.1", 84 | "react-art": ">=16.5.1", 85 | "react-dom": ">=16.5.1", 86 | "react-native-web": ">=0.11.0" 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /scripts/getSHARangeFromPR.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const github = require('octonode'); 4 | 5 | const { 6 | TRAVIS_PULL_REQUEST, 7 | TRAVIS_REPO_SLUG, 8 | GH_ACCESS_TOKEN, 9 | } = process.env; 10 | 11 | const client = github.client(GH_ACCESS_TOKEN); 12 | 13 | const ghPR = client.pr(TRAVIS_REPO_SLUG, TRAVIS_PULL_REQUEST); 14 | 15 | function handleError(err) { 16 | if (err) { 17 | process.stderr.write(`Error: ${err}\n`); 18 | process.exit(1); 19 | } 20 | } 21 | 22 | ghPR.info((prErr, prData) => { 23 | handleError(prErr); 24 | 25 | // The base SHA that we get back from the GitHub API references the latest 26 | // HEAD SHA of the branch the PR is opened on. If the PR branch hasn't been 27 | // rebased in a while, there might be extra commits in there than what we 28 | // want. 29 | // 30 | // In order to get the correct SHA, we need to look at the number of 31 | // commits before the HEAD SHA. We do this instead of simply returning SHA~# 32 | // so that GitHub will linkify the commit range for us properly. 33 | // 34 | // There might be a way to do this that does not require chained API calls, 35 | // but given the data we get, I don't currently see one. We could, however, 36 | // decide to take screenshots of the base branch's HEAD, and the merge 37 | // commit's HEAD, which might even give us better protection, but I think that 38 | // would actually end up being unexpected and confusing so I decided to not go 39 | // down that route. 40 | const ghRepo = client.repo(TRAVIS_REPO_SLUG); 41 | 42 | ghRepo.commit(`${prData.head.sha}~${prData.commits}`, (commitErr, commitData) => { 43 | handleError(commitErr); 44 | process.stdout.write(`${commitData.sha}...${prData.head.sha}\n`); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /scripts/happo-ci.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Exit immediately if we encounter any errors. This will make it so any error 4 | # that happens during the execution of this script will break the build. We want 5 | # to use `set -ex` instead of the `-ex` option in the shebang so that this 6 | # behavior applies even when executing this script via methods like `sh 7 | # ./script.sh`. 8 | set -ex 9 | 10 | if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then 11 | # This build is not triggered by a pull request or a push to an existing pull 12 | # request, so we won't have any place to post a comment if there are diffs. 13 | echo "This is not a pull request build, so skipping Happo." 14 | exit 0 15 | fi 16 | 17 | # Tell Happo where to find its config file. 18 | export HAPPO_CONFIG_FILE="${TRAVIS_BUILD_DIR}/.happo.js" 19 | 20 | run_happo_ci() { 21 | echo "Checking out $1" 22 | # Checkout the commit 23 | git checkout --quiet "$1" 24 | 25 | # Install dependencies and build the JavaScript bundle 26 | npm install 27 | npm run build:webpack 28 | 29 | # Run Happo for the current commit. We use `xvfb-run` so that we can run 30 | # Happo (which uses Firefox) in a headless display environment. 31 | xvfb-run -a happo run 32 | } 33 | 34 | # TRAVIS_COMMIT points to a shadow merge commit for PR builds. This is awkward, 35 | # so we want to get the previous and current commits from the GitHub API based 36 | # on the current PR. 37 | COMMIT_RANGE=$(node scripts/getSHARangeFromPR.js) 38 | PREVIOUS_COMMIT=$(echo "$COMMIT_RANGE" | cut -d. -f1) 39 | CURRENT_COMMIT=$(echo "$COMMIT_RANGE" | cut -d. -f4) 40 | 41 | # Check out the previous version and generate baseline snapshots 42 | echo "Running Happo on previous version ($PREVIOUS_COMMIT)..." 43 | run_happo_ci "$PREVIOUS_COMMIT" 44 | 45 | # Check out the latest version and check for diffs 46 | echo "Running Happo on latest version ($CURRENT_COMMIT)..." 47 | run_happo_ci "$CURRENT_COMMIT" 48 | 49 | URL_TO_DIFFS=$(happo upload) 50 | echo "URL to diffs: $URL_TO_DIFFS" 51 | 52 | export HAPPO_COMMIT_RANGE="$PREVIOUS_COMMIT...$CURRENT_COMMIT" 53 | 54 | # update the PR with a link to the diff 55 | node scripts/updatePR.js "$URL_TO_DIFFS" 56 | -------------------------------------------------------------------------------- /scripts/install-sketchtool.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ####################################### 4 | # ONLY IF YOU DON'T HAVE Sketch.app, # 5 | # USE THIS SCRIPT TO INSTALL THE TOOL # 6 | ####################################### 7 | 8 | mkdir temp 9 | cd temp 10 | curl -L -o sketch.zip http://www.sketchapp.com/download/sketch.zip 11 | unzip -q sketch.zip 12 | cd Sketch.app/Contents/Resources/sketchtool/ 13 | sh ./install.sh 14 | cd ../../../../../ 15 | rm -Rf temp 16 | -------------------------------------------------------------------------------- /scripts/updatePR.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const github = require('octonode'); 4 | 5 | const { 6 | HAPPO_COMMIT_RANGE, 7 | TRAVIS_PULL_REQUEST, 8 | TRAVIS_COMMIT, 9 | TRAVIS_COMMIT_RANGE, 10 | TRAVIS_EVENT_TYPE, 11 | TRAVIS_REPO_SLUG, 12 | GH_ACCESS_TOKEN, 13 | } = process.env; 14 | 15 | const LABEL = 'Visual diffs'; 16 | 17 | process.stdout.write(`PR Number: ${TRAVIS_PULL_REQUEST}\n`); 18 | process.stdout.write(`Commit SHA: ${TRAVIS_COMMIT}\n`); 19 | process.stdout.write(`Commit range: ${TRAVIS_COMMIT_RANGE}\n`); 20 | process.stdout.write(`Happo commit range: ${HAPPO_COMMIT_RANGE}\n`); 21 | process.stdout.write(`Reason for Travis build: ${TRAVIS_EVENT_TYPE}\n`); 22 | 23 | const client = github.client(GH_ACCESS_TOKEN); 24 | 25 | const ghIssue = client.issue(TRAVIS_REPO_SLUG, TRAVIS_PULL_REQUEST); 26 | 27 | const diffURL = process.argv[2]; 28 | 29 | function handleError(err) { 30 | if (err) { 31 | process.stderr.write(`Error: ${err}\n`); 32 | process.exit(1); 33 | } 34 | } 35 | 36 | if (diffURL) { 37 | // There were visual diffs, so we want to post a comment to the PR and add a 38 | // label. 39 | 40 | const commitsInBuild = HAPPO_COMMIT_RANGE 41 | || TRAVIS_COMMIT_RANGE 42 | || TRAVIS_COMMIT; 43 | 44 | ghIssue.createComment({ 45 | body: `:lipstick: [Visual diffs or new examples were found](${diffURL}) for ${commitsInBuild}.`, 46 | }, handleError); 47 | 48 | ghIssue.info((err, data) => { 49 | handleError(err); 50 | 51 | // Get all the labels as an array of strings. 52 | const labels = data.labels.map(label => label.name); 53 | 54 | // If the label hasn't been added, add it. 55 | if (labels.indexOf(LABEL) === -1) { 56 | labels.push(LABEL); 57 | ghIssue.update({ labels }, handleError); 58 | } 59 | }); 60 | } else { 61 | // There were no visual diffs, so we want to remove the label if it was 62 | // previously added. 63 | ghIssue.info((err, data) => { 64 | handleError(err); 65 | 66 | // Get all the labels as an array of strings. 67 | const labels = data.labels.map(label => label.name); 68 | 69 | // If the label has been added, remove it. 70 | const labelIndex = labels.indexOf(LABEL); 71 | if (labelIndex !== -1) { 72 | labels.splice(labelIndex, 1); 73 | ghIssue.update({ labels }, handleError); 74 | } 75 | }); 76 | } 77 | -------------------------------------------------------------------------------- /src/ReactPrimitives.js: -------------------------------------------------------------------------------- 1 | // TODO(lmr): 2 | // Use getter functions on primitives to warn if injection didn't happen for an API 3 | 4 | // TODO(lmr): 5 | // Use getter functions + warn / throw if a non-primitive API is retrieved off of ReactPrimitives 6 | // that looks like a react-native API 7 | 8 | const ReactPrimitives = { 9 | StyleSheet: null, 10 | View: null, 11 | Text: null, 12 | Image: null, 13 | Touchable: null, 14 | Easing: null, 15 | Animated: null, 16 | Dimensions: null, 17 | PixelRatio: require('./modules/PixelRatio'), 18 | Platform: require('./modules/Platform'), 19 | inject: (api) => { 20 | if (api.StyleSheet) { 21 | ReactPrimitives.StyleSheet = api.StyleSheet; 22 | } 23 | if (api.View) { 24 | ReactPrimitives.View = api.View; 25 | } 26 | if (api.Text) { 27 | ReactPrimitives.Text = api.Text; 28 | } 29 | if (api.Image) { 30 | ReactPrimitives.Image = api.Image; 31 | } 32 | if (api.Touchable) { 33 | ReactPrimitives.Touchable = api.Touchable; 34 | } 35 | if (api.Easing) { 36 | ReactPrimitives.Easing = api.Easing; 37 | } 38 | if (api.Animated) { 39 | ReactPrimitives.Animated = api.Animated; 40 | } 41 | if (api.Dimensions) { 42 | ReactPrimitives.Dimensions = api.Dimensions; 43 | } 44 | if (api.Platform) { 45 | ReactPrimitives.Platform.inject(api.Platform); 46 | } 47 | }, 48 | }; 49 | 50 | module.exports = ReactPrimitives; 51 | -------------------------------------------------------------------------------- /src/index.android.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-native'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.figma.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-figma'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.ios.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-native'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-native-web'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.sketch.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-sketchapp'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.vr.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-vr'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.web.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-native-web'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/index.windows.js: -------------------------------------------------------------------------------- 1 | require('./injection/react-native'); 2 | 3 | module.exports = require('./ReactPrimitives'); 4 | -------------------------------------------------------------------------------- /src/injection/react-figma.js: -------------------------------------------------------------------------------- 1 | const ReactPrimitives = require('../ReactPrimitives'); 2 | const Animated = require('animated'); 3 | const Easing = require('animated/lib/Easing'); 4 | const { 5 | View, 6 | Text, 7 | Image, 8 | StyleSheet, 9 | // TODO(lmr): Dimensions 10 | } = require('react-figma'); 11 | 12 | const TouchableMixin = { 13 | componentWillUnmount() {}, 14 | touchableGetInitialState() { 15 | return { touchable: { touchState: undefined, responderID: null } }; 16 | }, 17 | touchableHandleResponderTerminationRequest() { return false; }, 18 | touchableHandleStartShouldSetResponder() { return false; }, 19 | touchableLongPressCancelsPress() { return true; }, 20 | touchableHandleResponderGrant() {}, 21 | touchableHandleResponderRelease() {}, 22 | touchableHandleResponderTerminate() {}, 23 | touchableHandleResponderMove() {}, 24 | }; 25 | 26 | Animated.inject.FlattenStyle(StyleSheet.flatten); 27 | 28 | ReactPrimitives.inject({ 29 | StyleSheet, 30 | View, 31 | Text, 32 | Image, 33 | Easing, 34 | Animated: { 35 | ...Animated, 36 | View: Animated.createAnimatedComponent(View), 37 | Text: Animated.createAnimatedComponent(Text), 38 | Image: Animated.createAnimatedComponent(Image), 39 | }, 40 | Platform: { 41 | OS: 'figma', 42 | Version: 1, 43 | }, 44 | }); 45 | 46 | ReactPrimitives.inject({ 47 | Touchable: require('../modules/Touchable')( 48 | Animated, 49 | StyleSheet, 50 | ReactPrimitives.Platform, 51 | TouchableMixin, 52 | ), 53 | }); 54 | -------------------------------------------------------------------------------- /src/injection/react-native-web.js: -------------------------------------------------------------------------------- 1 | const ReactPrimitives = require('../ReactPrimitives'); 2 | const { 3 | Animated, 4 | StyleSheet, 5 | View, 6 | Text, 7 | Image, 8 | Platform, 9 | TouchableWithoutFeedback, 10 | Dimensions, 11 | Easing, 12 | } = require('react-native-web'); 13 | 14 | // TODO: figure out a more appropriate way to get StyleSheet.resolve, or potentially remove the 15 | // API alltogether. 16 | function getDefault(m) { 17 | return m.__esModule === true ? m.default : m; 18 | } 19 | 20 | const StyleRegistry = getDefault(require('react-native-web/dist/cjs/exports/StyleSheet/createStyleResolver'))(); 21 | 22 | const emptyObject = {}; 23 | 24 | const resolve = style => { 25 | return StyleRegistry.resolve(style) || emptyObject; 26 | }; 27 | 28 | ReactPrimitives.inject({ 29 | View, 30 | Text, 31 | Image, 32 | Easing, 33 | Animated, 34 | StyleSheet: { 35 | ...StyleSheet, 36 | resolve, 37 | }, 38 | Platform: { 39 | OS: Platform.OS, 40 | Version: Platform.Version, 41 | }, 42 | Dimensions, 43 | Touchable: TouchableWithoutFeedback, 44 | }); 45 | -------------------------------------------------------------------------------- /src/injection/react-native.js: -------------------------------------------------------------------------------- 1 | const ReactPrimitives = require('../ReactPrimitives'); 2 | const { 3 | Animated, 4 | View, 5 | Text, 6 | Image, 7 | StyleSheet, 8 | Platform, 9 | Easing, 10 | Dimensions, 11 | TouchableWithoutFeedback, 12 | } = require('react-native'); 13 | 14 | ReactPrimitives.inject({ 15 | StyleSheet, 16 | View, 17 | Text, 18 | Image, 19 | Easing, 20 | Animated, 21 | Platform: { 22 | OS: Platform.OS, 23 | Version: Platform.Version, 24 | }, 25 | Dimensions, 26 | Touchable: TouchableWithoutFeedback, 27 | }); 28 | -------------------------------------------------------------------------------- /src/injection/react-sketchapp.js: -------------------------------------------------------------------------------- 1 | const ReactPrimitives = require('../ReactPrimitives'); 2 | const Animated = require('animated'); 3 | const Easing = require('animated/lib/Easing'); 4 | const { 5 | View, 6 | Text, 7 | Image, 8 | StyleSheet, 9 | // TODO(lmr): Dimensions 10 | } = require('react-sketchapp'); 11 | 12 | const TouchableMixin = { 13 | componentWillUnmount() {}, 14 | touchableGetInitialState() { 15 | return { touchable: { touchState: undefined, responderID: null } }; 16 | }, 17 | touchableHandleResponderTerminationRequest() { return false; }, 18 | touchableHandleStartShouldSetResponder() { return false; }, 19 | touchableLongPressCancelsPress() { return true; }, 20 | touchableHandleResponderGrant() {}, 21 | touchableHandleResponderRelease() {}, 22 | touchableHandleResponderTerminate() {}, 23 | touchableHandleResponderMove() {}, 24 | }; 25 | 26 | Animated.inject.FlattenStyle(StyleSheet.flatten); 27 | 28 | ReactPrimitives.inject({ 29 | StyleSheet, 30 | View, 31 | Text, 32 | Image, 33 | Easing, 34 | Animated: { 35 | ...Animated, 36 | View: Animated.createAnimatedComponent(View), 37 | Text: Animated.createAnimatedComponent(Text), 38 | Image: Animated.createAnimatedComponent(Image), 39 | }, 40 | Platform: { 41 | OS: 'sketch', 42 | Version: 1, 43 | }, 44 | }); 45 | 46 | ReactPrimitives.inject({ 47 | Touchable: require('../modules/Touchable')( 48 | Animated, 49 | StyleSheet, 50 | ReactPrimitives.Platform, 51 | TouchableMixin, 52 | ), 53 | }); 54 | -------------------------------------------------------------------------------- /src/injection/react-vr.js: -------------------------------------------------------------------------------- 1 | const ReactPrimitives = require('../ReactPrimitives'); 2 | const { 3 | Animated, 4 | View, 5 | Text, 6 | Image, 7 | StyleSheet, 8 | Easing, 9 | // TODO: Dimensions. Does that even make sense tho? 10 | } = require('react-360'); 11 | 12 | ReactPrimitives.inject({ 13 | StyleSheet, 14 | View, 15 | Text, 16 | Image, 17 | Easing, 18 | Animated, 19 | Platform: { 20 | OS: 'vr', 21 | Version: 1, 22 | }, 23 | Touchable: require('../vr/Touchable')( 24 | Animated, 25 | StyleSheet, 26 | ReactPrimitives.Platform, 27 | ), 28 | }); 29 | -------------------------------------------------------------------------------- /src/modules/PixelRatio.js: -------------------------------------------------------------------------------- 1 | const ReactPrimitives = require('../ReactPrimitives'); 2 | 3 | const PixelRatio = { 4 | /** 5 | * Returns the device pixel density. 6 | */ 7 | get() { 8 | return ReactPrimitives.Dimensions.get('window').scale; 9 | }, 10 | 11 | /** 12 | * No equivalent for Web 13 | */ 14 | getFontScale() { 15 | return ReactPrimitives.Dimensions.get('window').fontScale || PixelRatio.get(); 16 | }, 17 | 18 | /** 19 | * Converts a layout size (dp) to pixel size (px). 20 | * Guaranteed to return an integer number. 21 | */ 22 | getPixelSizeForLayoutSize(layoutSize) { 23 | return Math.round(layoutSize * PixelRatio.get()); 24 | }, 25 | 26 | /** 27 | * Rounds a layout size (dp) to the nearest layout size that corresponds to 28 | * an integer number of pixels. For example, on a device with a PixelRatio 29 | * of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to 30 | * exactly (8.33 * 3) = 25 pixels. 31 | */ 32 | roundToNearestPixel(layoutSize) { 33 | const ratio = PixelRatio.get(); 34 | return Math.round(layoutSize * ratio) / ratio; 35 | }, 36 | }; 37 | 38 | module.exports = PixelRatio; 39 | -------------------------------------------------------------------------------- /src/modules/Platform.js: -------------------------------------------------------------------------------- 1 | const { hasOwnProperty } = Object.prototype; 2 | 3 | const Platform = { 4 | OS: 'unknown', 5 | Version: 0, 6 | select: obj => { 7 | if (hasOwnProperty.call(obj, Platform.OS)) { 8 | return obj[Platform.OS]; 9 | } 10 | return obj.default; 11 | }, 12 | inject: platform => { 13 | // Use bracket accessor notation as workaround for 14 | // https://github.com/facebook/metro-bundler/issues/27 15 | Platform['OS'] = platform.OS; // eslint-disable-line dot-notation 16 | Platform['Version'] = platform.Version; // eslint-disable-line dot-notation 17 | }, 18 | }; 19 | 20 | module.exports = Platform; 21 | -------------------------------------------------------------------------------- /src/modules/Touchable.js: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const createReactClass = require('create-react-class'); 3 | const PropTypes = require('prop-types'); 4 | const TimerMixin = require('react-timer-mixin'); 5 | 6 | const ensurePositiveDelayProps = (/* props */) => { 7 | // invariant( 8 | // !(props.delayPressIn < 0 || props.delayPressOut < 0 || props.delayLongPress < 0), 9 | // 'Touchable components cannot have negative delay properties' 10 | // ); 11 | }; 12 | 13 | const InsetPropType = PropTypes.shape({ 14 | top: PropTypes.number, 15 | left: PropTypes.number, 16 | bottom: PropTypes.number, 17 | right: PropTypes.number, 18 | }); 19 | 20 | 21 | // NOTE(lmr): this is a huge hack right now, and prevents anything from being clickable more than 22 | // twice per second, but the alternative is so bad right now. Need to figure out how to fix the 23 | // responder plugin later and fix this. 24 | const THROTTLE_MS = 500; 25 | 26 | function throttle(fn, throttleMs) { 27 | let lastCall = null; 28 | 29 | return function throttleIt(...args) { 30 | const now = new Date(); 31 | if (lastCall === null || (now - lastCall > throttleMs)) { 32 | fn.apply(this, args); 33 | lastCall = new Date(); 34 | } 35 | }; 36 | } 37 | 38 | /** 39 | * A wrapper for making views respond properly to touches. 40 | * On press down, the opacity of the wrapped view is decreased, dimming it. 41 | * This is done without actually changing the view hierarchy, and in general is 42 | * easy to add to an app without weird side-effects. 43 | * 44 | * Example: 45 | * 46 | * ``` 47 | * renderButton: function() { 48 | * return ( 49 | * 50 | * 54 | * 55 | * ); 56 | * }, 57 | * ``` 58 | */ 59 | const Touchable = ( 60 | Animated, 61 | StyleSheet, 62 | Platform, 63 | TouchableMixin, 64 | ) => { 65 | const styles = StyleSheet.create({ 66 | touchable: Platform.select({ 67 | web: { 68 | cursor: 'pointer', 69 | }, 70 | ios: {}, 71 | android: {}, 72 | sketch: {}, 73 | vr: {}, 74 | }), 75 | }); 76 | 77 | // eslint-disable-next-line react/prefer-es6-class 78 | return createReactClass({ 79 | displayName: 'Touchable', 80 | propTypes: { 81 | accessible: PropTypes.bool, 82 | 83 | // TODO: 84 | // accessibilityComponentType: PropTypes.oneOf(View.AccessibilityComponentType), 85 | // accessibilityTraits: PropTypes.oneOfType([ 86 | // PropTypes.oneOf(View.AccessibilityTraits), 87 | // PropTypes.arrayOf(PropTypes.oneOf(View.AccessibilityTraits)), 88 | // ]), 89 | /** 90 | * If true, disable all interactions for this component. 91 | */ 92 | disabled: PropTypes.bool, 93 | /** 94 | * Called when the touch is released, but not if cancelled (e.g. by a scroll 95 | * that steals the responder lock). 96 | */ 97 | onPress: PropTypes.func, 98 | onPressIn: PropTypes.func, 99 | onPressOut: PropTypes.func, 100 | /** 101 | * Invoked on mount and layout changes with 102 | * 103 | * `{nativeEvent: {layout: {x, y, width, height}}}` 104 | */ 105 | onLayout: PropTypes.func, 106 | 107 | onLongPress: PropTypes.func, 108 | 109 | /** 110 | * Delay in ms, from the start of the touch, before onPressIn is called. 111 | */ 112 | delayPressIn: PropTypes.number, 113 | /** 114 | * Delay in ms, from the release of the touch, before onPressOut is called. 115 | */ 116 | delayPressOut: PropTypes.number, 117 | /** 118 | * Delay in ms, from onPressIn, before onLongPress is called. 119 | */ 120 | delayLongPress: PropTypes.number, 121 | /** 122 | * When the scroll view is disabled, this defines how far your touch may 123 | * move off of the button, before deactivating the button. Once deactivated, 124 | * try moving it back and you'll see that the button is once again 125 | * reactivated! Move it back and forth several times while the scroll view 126 | * is disabled. Ensure you pass in a constant to reduce memory allocations. 127 | */ 128 | pressRetentionOffset: InsetPropType, 129 | /** 130 | * This defines how far your touch can start away from the button. This is 131 | * added to `pressRetentionOffset` when moving off of the button. 132 | * ** NOTE ** 133 | * The touch area never extends past the parent view bounds and the Z-index 134 | * of sibling views always takes precedence if a touch hits two overlapping 135 | * views. 136 | */ 137 | hitSlop: InsetPropType, 138 | activeValue: PropTypes.number, 139 | press: PropTypes.instanceOf(Animated.Value), 140 | 141 | pressDuration: PropTypes.number, 142 | children: PropTypes.node, 143 | }, 144 | 145 | mixins: [TimerMixin, TouchableMixin], 146 | 147 | statics: { 148 | Mixin: TouchableMixin, 149 | }, 150 | 151 | getDefaultProps() { 152 | return { 153 | activeValue: 1, 154 | delayPressIn: 0, 155 | delayPressOut: 100, 156 | delayLongPress: 500, 157 | pressDuration: 150, 158 | pressRetentionOffset: { 159 | top: 20, 160 | left: 20, 161 | right: 20, 162 | bottom: 30, 163 | }, 164 | press: new Animated.Value(0), 165 | }; 166 | }, 167 | 168 | getInitialState() { 169 | return this.touchableGetInitialState(); 170 | }, 171 | 172 | componentDidMount() { 173 | ensurePositiveDelayProps(this.props); 174 | }, 175 | 176 | componentWillReceiveProps(nextProps) { 177 | ensurePositiveDelayProps(nextProps); 178 | }, 179 | 180 | setPressValue(toValue) { 181 | Animated.timing( 182 | this.props.press, 183 | { 184 | toValue, 185 | duration: this.props.pressDuration, 186 | // easing: Easing.inOut(Easing.quad), 187 | }, 188 | ).start(); 189 | }, 190 | 191 | /** 192 | * `Touchable.Mixin` self callbacks. The mixin will invoke these if they are 193 | * defined on your component. 194 | */ 195 | touchableHandleActivePressIn: throttle(function touchableHandleActivePressInNow(e) { 196 | if (e.dispatchConfig.registrationName === 'onResponderGrant') { 197 | this._setActive(0); 198 | } else { 199 | this._setActive(150); 200 | } 201 | // eslint-disable-next-line no-unused-expressions 202 | this.props.onPressIn && this.props.onPressIn(e); 203 | }, THROTTLE_MS), 204 | 205 | touchableHandleActivePressOut: throttle(function touchableHandleActivePressOutNow(e) { 206 | this._setInactive(250); 207 | // eslint-disable-next-line no-unused-expressions 208 | this.props.onPressOut && this.props.onPressOut(e); 209 | }, THROTTLE_MS), 210 | 211 | touchableHandlePress: throttle(function touchableHandlePressNow(e) { 212 | // eslint-disable-next-line no-unused-expressions 213 | this.props.onPress && this.props.onPress(e); 214 | }, THROTTLE_MS), 215 | 216 | touchableHandleLongPress: throttle(function touchableHandleLongPressNow(e) { 217 | // eslint-disable-next-line no-unused-expressions 218 | this.props.onLongPress && this.props.onLongPress(e); 219 | }, THROTTLE_MS), 220 | 221 | touchableGetPressRectOffset() { 222 | return this.props.pressRetentionOffset; 223 | }, 224 | 225 | touchableGetHitSlop() { 226 | return this.props.hitSlop; 227 | }, 228 | 229 | touchableGetHighlightDelayMS() { 230 | return this.props.delayPressIn; 231 | }, 232 | 233 | touchableGetLongPressDelayMS() { 234 | return this.props.delayLongPress; 235 | }, 236 | 237 | touchableGetPressOutDelayMS() { 238 | return this.props.delayPressOut; 239 | }, 240 | 241 | _setActive(duration) { 242 | this.setPressValue(1, duration); 243 | }, 244 | 245 | _setInactive(duration) { 246 | this.setPressValue(0, duration); 247 | }, 248 | 249 | render() { 250 | const child = this.props.children; 251 | const childStyle = child && child.props && child.props.style; 252 | return React.cloneElement(child, { 253 | onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder, 254 | onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest, 255 | onResponderGrant: this.touchableHandleResponderGrant, 256 | onResponderMove: this.touchableHandleResponderMove, 257 | onResponderRelease: this.touchableHandleResponderRelease, 258 | onResponderTerminate: this.touchableHandleResponderTerminate, 259 | style: [ 260 | styles.touchable, 261 | childStyle, 262 | ], 263 | }); 264 | }, 265 | }); 266 | }; 267 | 268 | module.exports = Touchable; 269 | -------------------------------------------------------------------------------- /src/vr/Touchable.js: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const createReactClass = require('create-react-class'); 3 | const PropTypes = require('prop-types'); 4 | const { VrButton } = require('react-360'); 5 | 6 | const InsetPropType = PropTypes.shape({ 7 | top: PropTypes.number, 8 | left: PropTypes.number, 9 | bottom: PropTypes.number, 10 | right: PropTypes.number, 11 | }); 12 | 13 | // NOTE(lmr): this is a huge hack right now, and prevents anything from being clickable more than 14 | // twice per second, but the alternative is so bad right now. Need to figure out how to fix the 15 | // responder plugin later and fix this. 16 | const THROTTLE_MS = 500; 17 | 18 | function throttle(fn, throttleMs) { 19 | let lastCall = null; 20 | 21 | return function throttleIt(...args) { 22 | const now = new Date(); 23 | if (lastCall === null || (now - lastCall > throttleMs)) { 24 | fn.apply(this, args); 25 | lastCall = new Date(); 26 | } 27 | }; 28 | } 29 | 30 | /** 31 | * A wrapper for making views respond properly to touches. 32 | * On press down, the opacity of the wrapped view is decreased, dimming it. 33 | * This is done without actually changing the view hierarchy, and in general is 34 | * easy to add to an app without weird side-effects. 35 | * 36 | * Example: 37 | * 38 | * ``` 39 | * renderButton: function() { 40 | * return ( 41 | * 42 | * 46 | * 47 | * ); 48 | * }, 49 | * ``` 50 | */ 51 | const Touchable = ( 52 | Animated, 53 | StyleSheet, 54 | Platform, 55 | TouchableMixin, 56 | ) => { 57 | // eslint-disable-next-line react/prefer-es6-class 58 | return createReactClass({ 59 | displayName: 'Touchable', 60 | propTypes: { 61 | accessible: PropTypes.bool, 62 | 63 | // TODO: 64 | // accessibilityComponentType: PropTypes.oneOf(View.AccessibilityComponentType), 65 | // accessibilityTraits: PropTypes.oneOfType([ 66 | // PropTypes.oneOf(View.AccessibilityTraits), 67 | // PropTypes.arrayOf(PropTypes.oneOf(View.AccessibilityTraits)), 68 | // ]), 69 | /** 70 | * If true, disable all interactions for this component. 71 | */ 72 | disabled: PropTypes.bool, 73 | /** 74 | * Called when the touch is released, but not if cancelled (e.g. by a scroll 75 | * that steals the responder lock). 76 | */ 77 | onPress: PropTypes.func, 78 | onPressIn: PropTypes.func, 79 | onPressOut: PropTypes.func, 80 | /** 81 | * Invoked on mount and layout changes with 82 | * 83 | * `{nativeEvent: {layout: {x, y, width, height}}}` 84 | */ 85 | onLayout: PropTypes.func, 86 | 87 | onLongPress: PropTypes.func, 88 | 89 | /** 90 | * Delay in ms, from the start of the touch, before onPressIn is called. 91 | */ 92 | delayPressIn: PropTypes.number, 93 | /** 94 | * Delay in ms, from the release of the touch, before onPressOut is called. 95 | */ 96 | delayPressOut: PropTypes.number, 97 | /** 98 | * Delay in ms, from onPressIn, before onLongPress is called. 99 | */ 100 | delayLongPress: PropTypes.number, 101 | /** 102 | * When the scroll view is disabled, this defines how far your touch may 103 | * move off of the button, before deactivating the button. Once deactivated, 104 | * try moving it back and you'll see that the button is once again 105 | * reactivated! Move it back and forth several times while the scroll view 106 | * is disabled. Ensure you pass in a constant to reduce memory allocations. 107 | */ 108 | pressRetentionOffset: InsetPropType, 109 | /** 110 | * This defines how far your touch can start away from the button. This is 111 | * added to `pressRetentionOffset` when moving off of the button. 112 | * ** NOTE ** 113 | * The touch area never extends past the parent view bounds and the Z-index 114 | * of sibling views always takes precedence if a touch hits two overlapping 115 | * views. 116 | */ 117 | hitSlop: InsetPropType, 118 | activeValue: PropTypes.number, 119 | press: PropTypes.instanceOf(Animated.Value), 120 | 121 | pressDuration: PropTypes.number, 122 | children: PropTypes.node, 123 | }, 124 | 125 | mixins: [], 126 | 127 | statics: { 128 | Mixin: TouchableMixin, 129 | }, 130 | 131 | getDefaultProps() { 132 | return { 133 | activeValue: 1, 134 | delayPressIn: 0, 135 | delayPressOut: 100, 136 | delayLongPress: 500, 137 | pressDuration: 150, 138 | pressRetentionOffset: { 139 | top: 20, 140 | left: 20, 141 | right: 20, 142 | bottom: 30, 143 | }, 144 | press: new Animated.Value(0), 145 | }; 146 | }, 147 | 148 | setPressValue(toValue) { 149 | Animated.timing( 150 | this.props.press, 151 | { 152 | toValue, 153 | duration: this.props.pressDuration, 154 | // easing: Easing.inOut(Easing.quad), 155 | }, 156 | ).start(); 157 | }, 158 | 159 | 160 | touchableHandleActivePressIn: throttle(function touchableHandleActivePressInNow(e) { 161 | this._setActive(150); 162 | // eslint-disable-next-line no-unused-expressions 163 | this.props.onPressIn && this.props.onPressIn(e); 164 | }, THROTTLE_MS), 165 | 166 | touchableHandleActivePressOut: throttle(function touchableHandleActivePressOutNow(e) { 167 | this._setInactive(250); 168 | // eslint-disable-next-line no-unused-expressions 169 | this.props.onPressOut && this.props.onPressOut(e); 170 | }, THROTTLE_MS), 171 | 172 | touchableHandlePress: throttle(function touchableHandlePressNow(e) { 173 | // eslint-disable-next-line no-unused-expressions 174 | this.props.onPress && this.props.onPress(e); 175 | }, THROTTLE_MS), 176 | 177 | touchableHandleLongPress: throttle(function touchableHandleLongPressNow(e) { 178 | // eslint-disable-next-line no-unused-expressions 179 | this.props.onLongPress && this.props.onLongPress(e); 180 | }, THROTTLE_MS), 181 | 182 | _setActive(duration) { 183 | this.setPressValue(1, duration); 184 | }, 185 | 186 | _setInactive(duration) { 187 | this.setPressValue(0, duration); 188 | }, 189 | 190 | render() { 191 | const child = this.props.children; 192 | return ( 193 | 202 | {child} 203 | 204 | ); 205 | }, 206 | }); 207 | }; 208 | 209 | module.exports = Touchable; 210 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | 4 | module.exports = [{ 5 | entry: { 6 | example: './example/web/example.js', 7 | happo: './example/web/happo.js', 8 | pythagoras: './example/web/pythagoras.js', 9 | }, 10 | mode: 'development', 11 | output: { 12 | path: path.resolve(__dirname, 'example', 'web', 'dist'), 13 | filename: '[name].bundle.js', 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(js|jsx)$/, 19 | exclude: /node_modules/, 20 | loader: 'babel-loader', 21 | }, 22 | ], 23 | }, 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': { 27 | NODE_ENV: JSON.stringify('development'), 28 | }, 29 | }), 30 | ], 31 | }, { 32 | entry: { 33 | perf: './example/web/perf.js', 34 | }, 35 | mode: 'production', 36 | output: { 37 | path: path.resolve(__dirname, 'example', 'web', 'dist'), 38 | filename: '[name].bundle.js', 39 | }, 40 | module: { 41 | rules: [ 42 | { 43 | test: /\.(js|jsx)$/, 44 | exclude: /node_modules/, 45 | loader: 'babel-loader', 46 | }, 47 | ], 48 | }, 49 | plugins: [ 50 | new webpack.DefinePlugin({ 51 | 'process.env': { 52 | NODE_ENV: JSON.stringify('production'), 53 | }, 54 | }), 55 | ], 56 | }]; 57 | --------------------------------------------------------------------------------