├── .watchmanconfig ├── src ├── data │ ├── us-10m.v1.js │ ├── stackData.js │ ├── clusterData.js │ └── contourData.js ├── screens │ ├── AnchorHome.js │ ├── PopcornList.js │ ├── ARExample │ │ ├── actions.js │ │ ├── actions │ │ │ ├── progress.js │ │ │ └── hudSelection.js │ │ ├── reducers │ │ │ ├── region.js │ │ │ ├── map.js │ │ │ ├── geometry.js │ │ │ ├── index.js │ │ │ ├── heading.js │ │ │ ├── location.js │ │ │ ├── hudSelection.js │ │ │ ├── progress.js │ │ │ ├── hud.js │ │ │ ├── objects.js │ │ │ ├── polyObject3Ds.js │ │ │ ├── poly.js │ │ │ └── three.js │ │ ├── App.js │ │ ├── GeometryView.js │ │ ├── PolyAssetView.js │ │ ├── Progress.js │ │ ├── store.js │ │ ├── constants.js │ │ ├── LongpressControl.js │ │ ├── PolyAssetListView.js │ │ ├── TouchVisualizer.js │ │ └── GeometryListView.js │ ├── Main.js │ ├── TypingAnimation.js │ ├── SvgInterpolatePointAlongPathAnimation.js │ ├── SvgD3SankeyBasic.js │ ├── SvgD3InterpolatePathAnimation.js │ ├── SvgD3ContourDensityBasic.js │ ├── SvgD3PackCircles.js │ ├── SvgD3TreeBasic.js │ ├── SvgD3TreemapBasic.js │ ├── SvgRectAnimation.js │ ├── SvgPathDrawing.js │ ├── SvgD3Axis.js │ ├── SvgD3ContourBasic.js │ ├── SvgFlubberAnimation.js │ ├── SvgCircleAnimation.js │ ├── SvgD3PieAnimation.js │ ├── SvgLineAnimation.js │ ├── SvgEllipseAnimation.js │ ├── SvgTextAnimation.js │ ├── PixelBlurAnimation.js │ ├── SvgD3Hexbin.js │ ├── SvgD3PartitionBasic.js │ ├── SvgD3ChordAnimation.js │ ├── SvgPolylineAnimation.js │ ├── SvgPolygonAnimation.js │ ├── SvgD3StackBars.js │ ├── SvgD3LineAnimation.js │ ├── FacebookMessengerSearch.js │ ├── SvgD3AreaAnimation.js │ ├── LolaTravelChat.js │ ├── SvgD3LinkAnimation.js │ ├── SvgD3VoronoiAnimation.js │ ├── StaggeredMapAnimation.js │ ├── SvgTSpanAnimation.js │ ├── SvgTransformAnimation.js │ ├── SvgD3ClusterBasic.js │ └── RealTimeChartExample.js ├── components │ ├── package.json │ ├── D3ShapeData.js │ ├── D3PathCommand.js │ ├── AnimatedSvgDelta.js │ ├── AnimatedSvgStrokeDasharray.js │ ├── AnimatedBlurView.js │ ├── OperatorTextMessage.js │ ├── AnimatedSvgStop.js │ ├── VivusHi.js │ ├── TwitterIconSvgPath.js │ ├── AnimatedSvgG.js │ ├── AnimatedSvgUse.js │ ├── AnimatedSvg.js │ ├── AnimatedSvgTSpan.js │ ├── AnimatedSvgText.js │ ├── AnimatedSvgPath.js │ ├── GithubIconSvgPath.js │ ├── OperatorMessageMeta.js │ ├── AnimatedSvgLine.js │ ├── AnimatedSvgCircle.js │ ├── AnimatedSvgRect.js │ ├── AnimatedSvgEllipse.js │ ├── AnimatedSvgFix.js │ ├── PopcornMovie.js │ ├── AnimatedSvgTextPath.js │ ├── OperatorMessageText.js │ ├── LolaTravelBorder.js │ ├── OperatorQuoteMessage.js │ ├── AnimatedSvgLinearGradient.js │ ├── LolaTravelTextMessage.js │ ├── AnimatedSvgRadialGradient.js │ ├── LolaTravelProfileMessage.js │ ├── OperatorFormMessage.js │ ├── OperatorMessageButton.js │ ├── AnimatedSvgPropStringFix.js │ ├── OperatorMessageFormInput.js │ ├── AnimatedSvgAnimatedPropFix.js │ ├── AnimatedSvgStateFix.js │ ├── AnchorRadialChild.js │ ├── SnapchatQuickChatItem.js │ ├── OperatorSelectMessage.js │ ├── AnimatedSvgD3InterpolatePath.js │ ├── OperatorInputMessage.js │ ├── LolaTravelSliderItem.js │ ├── SnapchatSearchItem.js │ ├── OperatorMessage.js │ ├── AnimatedSvgInterpolatePointAtLength.js │ ├── OperatorProductMessage.js │ ├── AnimatedSvgD3ShapeArc.js │ ├── OperatorMessageFormSelect.js │ ├── AnimatedSvgPolyline.js │ ├── AnimatedSvgPolygon.js │ ├── SnapchatIconSvgPath.js │ ├── PanResponderTouchable.js │ ├── SvgTextWrap.js │ ├── AnimatedLinearGradient.js │ ├── AnimatedSvgD3ShapeLine.js │ ├── AnimatedSvgD3ShapeLineRadial.js │ ├── AnimatedSvgD3ShapeArea.js │ ├── AnimatedSvgD3ShapeAreaRadial.js │ └── AnimatedSvgD3GeoPath.js ├── randomBoolean.js ├── assets │ └── icons │ │ ├── poly.png │ │ └── predicthq.png ├── randomNumber.js ├── randomArrayElement.js ├── randomImage.js ├── isAnimated.js ├── randomColor.js ├── PredictHQ.js ├── Poly.js ├── randomUser.js ├── randomPolygons.js ├── Instagram.js ├── GoogleMaps.js ├── noteAlignment.js └── AnnotationCollection.js ├── assets ├── icon.png └── splash.png ├── .vscode └── settings.json ├── .gitignore ├── babel.config.js ├── jsconfig.json ├── lint-staged.config.js ├── App.js ├── .huskyrc.js ├── ReactotronConfig.js ├── .eslintrc ├── app.json ├── package.json └── README.md /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /src/data/us-10m.v1.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/screens/AnchorHome.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/screens/PopcornList.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/screens/ARExample/actions.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/package.json: -------------------------------------------------------------------------------- 1 | { "name": "app" } -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethantran/react-native-examples/HEAD/assets/icon.png -------------------------------------------------------------------------------- /src/randomBoolean.js: -------------------------------------------------------------------------------- 1 | export default function () { 2 | return Math.random() >= 0.5; 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.enable": true, 3 | "javascript.validate.enable": false 4 | } -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethantran/react-native-examples/HEAD/assets/splash.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p12 6 | *.key 7 | *.mobileprovision 8 | -------------------------------------------------------------------------------- /src/assets/icons/poly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethantran/react-native-examples/HEAD/src/assets/icons/poly.png -------------------------------------------------------------------------------- /src/randomNumber.js: -------------------------------------------------------------------------------- 1 | export default function (min, max) { 2 | return Math.random() * (max - min) + min; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/icons/predicthq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ethantran/react-native-examples/HEAD/src/assets/icons/predicthq.png -------------------------------------------------------------------------------- /src/randomArrayElement.js: -------------------------------------------------------------------------------- 1 | export default function (array) { 2 | return array[Math.floor(Math.random() * array.length)]; 3 | } 4 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"] 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /src/randomImage.js: -------------------------------------------------------------------------------- 1 | export default function (width = 800, height = 600) { 2 | return `https://source.unsplash.com/random/${width}x${height}`; 3 | } 4 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "*.js": [ 3 | // "eslint . --fix --quiet", 4 | "prettier --write", 5 | "git add" 6 | // "jest --bail --findRelatedTests" 7 | ] 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/D3ShapeData.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | class D3ShapeData extends Component { 3 | render() { 4 | return null; 5 | } 6 | } 7 | export default D3ShapeData; 8 | -------------------------------------------------------------------------------- /src/components/D3PathCommand.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | class D3PathCommand extends Component { 3 | render() { 4 | return null; 5 | } 6 | } 7 | export default D3PathCommand; 8 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgDelta.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | class AnimatedSvgDelta extends Component { 3 | render() { 4 | return null; 5 | } 6 | } 7 | export default AnimatedSvgDelta; -------------------------------------------------------------------------------- /src/isAnimated.js: -------------------------------------------------------------------------------- 1 | import { Animated } from 'react-native'; 2 | export default function (val) { 3 | return val instanceof Animated.Value || val instanceof Animated.ValueXY || val instanceof Animated.AnimatedInterpolation; 4 | } 5 | -------------------------------------------------------------------------------- /src/randomColor.js: -------------------------------------------------------------------------------- 1 | export default function () { 2 | var letters = '0123456789ABCDEF'; 3 | var color = '#'; 4 | for (var i = 0; i < 6; i++) { 5 | color += letters[Math.floor(Math.random() * 16)]; 6 | } 7 | return color; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgStrokeDasharray.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | class AnimatedSvgStrokeDasharray extends Component { 3 | render() { 4 | return null; 5 | } 6 | } 7 | export default AnimatedSvgStrokeDasharray; 8 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { createAppContainer, createStackNavigator } from "react-navigation"; 2 | // import Reactotron from './ReactotronConfig'; 3 | import routeConfig from "./src/routeConfig"; 4 | 5 | export default createAppContainer(createStackNavigator(routeConfig)); 6 | -------------------------------------------------------------------------------- /src/components/AnimatedBlurView.js: -------------------------------------------------------------------------------- 1 | import { Animated } from 'react-native'; 2 | import { Components } from 'expo'; 3 | const { BlurView } = Components; 4 | const AnimatedBlurView = Animated.createAnimatedComponent(BlurView); 5 | export default AnimatedBlurView; 6 | -------------------------------------------------------------------------------- /src/screens/ARExample/actions/progress.js: -------------------------------------------------------------------------------- 1 | export const SET_PROGRESS = 'progress/SET'; 2 | export const CLOSE_PROGRESS = 'progress/CLOSE'; 3 | 4 | export const setProgress = progress => ({ type: SET_PROGRESS, progress }); 5 | export const closeProgress = () => ({ type: CLOSE_PROGRESS }); -------------------------------------------------------------------------------- /.huskyrc.js: -------------------------------------------------------------------------------- 1 | const runYarnLock = "yarn install --frozen-lockfile"; 2 | 3 | module.exports = { 4 | hooks: { 5 | "pre-commit": "lint-staged", 6 | "post-checkout": `if [[ $HUSKY_GIT_PARAMS =~ 1$ ]]; then ${runYarnLock}; fi`, 7 | "post-merge": runYarnLock, 8 | "post-rebase": "yarn install" 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /src/components/OperatorTextMessage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Message from './OperatorMessage'; 4 | import MessageText from './OperatorMessageText'; 5 | 6 | const TextMessage = (props) => ( 7 | 8 | 9 | 10 | ); 11 | export default TextMessage; 12 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgStop.js: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | /** 3 | * Problem: Stop throws a warning when using animated as a prop 4 | * Solution: Use this since we are going to replace it in parent 5 | */ 6 | class SvgRect extends Component { 7 | render() { 8 | return null; 9 | } 10 | } 11 | export default SvgRect; 12 | -------------------------------------------------------------------------------- /src/PredictHQ.js: -------------------------------------------------------------------------------- 1 | import qs from 'qs'; 2 | 3 | const PredictHQ = { 4 | events: { 5 | search: async (params, options) => 6 | (await fetch( 7 | `https://api.predicthq.com/v1/events/?${qs.stringify(params)}`, 8 | options 9 | )).json() 10 | } 11 | }; 12 | 13 | export default PredictHQ; 14 | -------------------------------------------------------------------------------- /src/Poly.js: -------------------------------------------------------------------------------- 1 | import qs from 'qs'; 2 | 3 | const Poly = { 4 | getAsset: async (name, params) => 5 | (await fetch( 6 | `https://poly.googleapis.com/v1/${name}/?${qs.stringify(params)}` 7 | )).json(), 8 | listAssets: async params => 9 | (await fetch( 10 | `https://poly.googleapis.com/v1/assets/?${qs.stringify(params)}` 11 | )).json() 12 | }; 13 | 14 | export default Poly; 15 | -------------------------------------------------------------------------------- /src/components/VivusHi.js: -------------------------------------------------------------------------------- 1 | export default 'M366.2,204.2c-9.8,0-15-5.6-15-15.1V77.2h-85v28h19.5c9.8,0,8.5,2.1,8.5,11.6v72.4c0,9.5,0.5,15.1-9.3,15.1H277h-20.7c-8.5,0-14.2-4.1-14.2-12.9V52.4c0-8.5,5.7-12.3,14.2-12.3h18.8v-28h-127v28h18.1c8.5,0,9.9,2.1,9.9,8.9v56.1h-75V53.4c0-11.5,8.6-13.3,17-13.3h11v-28H2.2v28h26c8.5,0,12,2.1,12,7.9v142.2c0,8.5-3.6,13.9-12,13.9h-21v33h122v-33h-11c-8.5,0-17-4.1-17-12.2v-57.8h75v58.4c0,9.1-1.4,11.6-9.9,11.6h-18.1v33h122.9h5.9h102.2v-33H366.2z'; 2 | -------------------------------------------------------------------------------- /src/randomUser.js: -------------------------------------------------------------------------------- 1 | import randomBoolean from './randomBoolean' 2 | import randomNumber from './randomNumber' 3 | 4 | export default function (size) { 5 | const gender = randomBoolean() ? 'men': 'women'; 6 | const number = Math.floor(randomNumber(0, 100)); 7 | if (!size) { 8 | return `https://randomuser.me/api/portraits/${gender}/${number}.jpg`; 9 | } 10 | return `https://randomuser.me/api/portraits/${size}/${gender}/${number}.jpg`; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/TwitterIconSvgPath.js: -------------------------------------------------------------------------------- 1 | export const d = 'M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z'; -------------------------------------------------------------------------------- /src/data/stackData.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | index: 0, 4 | apples: 3840, 5 | bananas: 1920, 6 | cherries: 960, 7 | dates: 400 8 | }, 9 | { 10 | index: 1, 11 | apples: 1600, 12 | bananas: 1440, 13 | cherries: 960, 14 | dates: 400 15 | }, 16 | { index: 2, apples: 640, bananas: 960, cherries: 640, dates: 400 }, 17 | { index: 3, apples: 320, bananas: 480, cherries: 640, dates: 400 } 18 | ]; 19 | -------------------------------------------------------------------------------- /src/screens/ARExample/reducers/region.js: -------------------------------------------------------------------------------- 1 | import { SET_REGION, RESET } from '../actions/ar'; 2 | 3 | const initialState = {}; 4 | 5 | export default function(state = initialState, action) { 6 | switch (action.type) { 7 | case SET_REGION: 8 | return { 9 | ...state, 10 | ...action.region 11 | }; 12 | case RESET: 13 | return initialState; 14 | default: 15 | return state; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/screens/ARExample/reducers/map.js: -------------------------------------------------------------------------------- 1 | import { TOGGLE_MAP } from '../actions/hud'; 2 | import { RESET } from '../actions/ar'; 3 | 4 | const initialState = { 5 | visible: false 6 | }; 7 | 8 | export default function(state = initialState, action) { 9 | switch (action.type) { 10 | case TOGGLE_MAP: 11 | return { 12 | ...state, 13 | visible: !state.visible 14 | }; 15 | case RESET: 16 | return initialState; 17 | default: 18 | return state; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/screens/ARExample/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import { PersistGate } from 'redux-persist/es/integration/react'; 4 | 5 | import ARExample from './ARExample'; 6 | import { store, persistor } from './store'; 7 | 8 | export default class ARApp extends React.Component { 9 | render() { 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /ReactotronConfig.js: -------------------------------------------------------------------------------- 1 | import { NativeModules } from 'react-native'; 2 | import url from 'url'; 3 | 4 | const { hostname } = url.parse(NativeModules.SourceCode.scriptURL); 5 | 6 | let Reactotron; 7 | if (__DEV__) { 8 | require('reactotron-react-native'); 9 | Reactotron = require('reactotron-react-native').default; 10 | const reactotronRedux = require('reactotron-redux').reactotronRedux; 11 | Reactotron.configure({ host: hostname }) 12 | .useReactNative() 13 | .use(reactotronRedux()) 14 | .connect(); 15 | console.tron = Reactotron; 16 | } 17 | export default Reactotron; 18 | -------------------------------------------------------------------------------- /src/data/clusterData.js: -------------------------------------------------------------------------------- 1 | import * as d3Array from 'd3-array'; 2 | export default function(numNodes = 200, numClusters = 10, maxRadius = 12) { 3 | var clusters = new Array(numClusters); 4 | var nodes = d3Array.range(numNodes).map(function() { 5 | var i = Math.floor(Math.random() * numClusters), 6 | r = Math.sqrt((i + 1) / numClusters * -Math.log(Math.random())) * maxRadius, 7 | d = { cluster: i, radius: r }; 8 | if (!clusters[i] || r > clusters[i].radius) {clusters[i] = d;} 9 | return d; 10 | }); 11 | return { 12 | clusters, 13 | nodes 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgG.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg } from 'expo'; 3 | import AnimatedSvgFix from './AnimatedSvgFix'; 4 | 5 | const NativeSvgG = Svg.G; 6 | 7 | class SvgG extends Component { 8 | setNativeProps = (props) => { 9 | this._component && this._component.setNativeProps(props); 10 | } 11 | render() { 12 | return ( 13 | (this._component = component)} 15 | {...this.props} 16 | /> 17 | ); 18 | } 19 | } 20 | SvgG = AnimatedSvgFix(SvgG); 21 | export default SvgG; 22 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgUse.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg } from 'expo'; 3 | import AnimatedSvgFix from './AnimatedSvgFix'; 4 | 5 | const NativeSvgUse = Svg.Use; 6 | 7 | class SvgUse extends Component { 8 | setNativeProps = (props) => { 9 | this._component && this._component.setNativeProps(props); 10 | } 11 | render() { 12 | return ( 13 | (this._component = component)} 15 | {...this.props} 16 | /> 17 | ); 18 | } 19 | } 20 | SvgUse = AnimatedSvgFix(SvgUse); 21 | export default SvgUse; 22 | -------------------------------------------------------------------------------- /src/components/AnimatedSvg.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg as NativeSvg } from 'expo'; 3 | import AnimatedSvgFix from './AnimatedSvgFix'; 4 | 5 | class Svg extends Component { 6 | setNativeProps = (props) => { 7 | this._component && this._component.setNativeProps(props); 8 | } 9 | render() { 10 | return ( 11 | (this._component = component)} 13 | {...this.props} 14 | /> 15 | ); 16 | } 17 | } 18 | Svg = AnimatedSvgFix(Svg, { 19 | propString: ['width', 'height'] 20 | }); 21 | export default Svg; 22 | -------------------------------------------------------------------------------- /src/randomPolygons.js: -------------------------------------------------------------------------------- 1 | import * as d3 from 'd3-array'; 2 | export default function randomPolygons(numShapes, width, height) { 3 | return d3.range(numShapes).map(randomPolygon, width, height); 4 | } 5 | export function randomPolygon(width, height) { 6 | var sides = 3 + Math.floor(Math.random() * 10), 7 | r = 50 + Math.random() * 100, 8 | x = r + Math.random() * (width - r * 2), 9 | y = r + Math.random() * (height - r * 2); 10 | return d3.range(sides).map(function(i) { 11 | return [ 12 | Math.cos(Math.PI / 2 + 2 * Math.PI * i / sides) * r + x, 13 | Math.sin(Math.PI / 2 + 2 * Math.PI * i / sides) * r + y 14 | ]; 15 | }); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgTSpan.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg } from 'expo'; 3 | import AnimatedSvgTextFix from './AnimatedSvgTextFix'; 4 | 5 | const NativeSvgTSpan = Svg.TSpan; 6 | 7 | class SvgTSpan extends Component { 8 | setNativeProps = (props) => { 9 | this._component && this._component.setNativeProps(props); 10 | } 11 | render() { 12 | return ( 13 | (this._component = component)} 15 | {...this.props} 16 | /> 17 | ); 18 | } 19 | } 20 | SvgTSpan = AnimatedSvgTextFix(SvgTSpan); 21 | export default SvgTSpan; 22 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgText.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg } from 'expo'; 3 | import AnimatedSvgTextFix from './AnimatedSvgTextFix'; 4 | 5 | const NativeSvgText = Svg.Text; 6 | 7 | class SvgText extends Component { 8 | setNativeProps = (props) => { 9 | this._component && this._component.setNativeProps(props); 10 | } 11 | render() { 12 | return ( 13 | (this._component = component)} 15 | {...this.props} 16 | /> 17 | ); 18 | } 19 | } 20 | SvgText = AnimatedSvgTextFix(SvgText, { container: true }); 21 | export default SvgText; 22 | -------------------------------------------------------------------------------- /src/data/contourData.js: -------------------------------------------------------------------------------- 1 | function goldsteinPrice(x, y) { 2 | return ( 3 | (1 + 4 | Math.pow(x + y + 1, 2) * 5 | (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y)) * 6 | (30 + 7 | Math.pow(2 * x - 3 * y, 2) * 8 | (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y)) 9 | ); 10 | } 11 | export default function(n = 240, m = 125) { 12 | let values = new Array(n * m); 13 | for (var j = 0.5, k = 0; j < m; ++j) { 14 | for (var i = 0.5; i < n; ++i, ++k) { 15 | values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3); 16 | } 17 | } 18 | return values; 19 | } 20 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "react-native-globals/all": true 7 | }, 8 | "plugins": [ 9 | "react", 10 | "react-native-globals", 11 | "react-hooks" 12 | ], 13 | "extends": [ 14 | "eslint:recommended", 15 | "plugin:react/recommended", 16 | "plugin:import/errors", 17 | "plugin:import/warnings", 18 | "prettier", 19 | "prettier/react", 20 | "plugin:prettier/recommended" 21 | ], 22 | "rules": { 23 | "react/prop-types": "off", 24 | "react-hooks/rules-of-hooks": "error", 25 | "react-hooks/exhaustive-deps": "warn" 26 | } 27 | } -------------------------------------------------------------------------------- /src/screens/ARExample/reducers/geometry.js: -------------------------------------------------------------------------------- 1 | import { OPEN, CLOSE } from '../actions/geometry'; 2 | import { RESET } from '../actions/ar'; 3 | 4 | const initialState = { 5 | visible: false 6 | }; 7 | 8 | export default function(state = initialState, action) { 9 | switch (action.type) { 10 | case OPEN: 11 | return { 12 | ...state, 13 | visible: true 14 | }; 15 | case CLOSE: 16 | return { 17 | ...state, 18 | visible: false 19 | }; 20 | case RESET: 21 | return initialState; 22 | default: 23 | return state; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/screens/ARExample/GeometryView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TouchableOpacity, Text } from 'react-native'; 3 | 4 | export default ({ geometry, onPress, index }) => ( 5 | onPress(geometry)} 14 | > 15 | 21 | {geometry.name} 22 | 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgPath.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg } from 'expo'; 3 | import { Animated } from 'react-native'; 4 | 5 | import AnimatedSvgFix from './AnimatedSvgFix'; 6 | 7 | const NativeSvgPath = Svg.Path; 8 | 9 | class SvgPath extends Component { 10 | setNativeProps = (props = {}) => { 11 | this._component && this._component.setNativeProps(props); 12 | } 13 | render() { 14 | return ( 15 | (this._component = component)} 17 | {...this.props} 18 | /> 19 | ); 20 | } 21 | } 22 | SvgPath = AnimatedSvgFix(SvgPath); 23 | export default SvgPath; 24 | -------------------------------------------------------------------------------- /src/components/GithubIconSvgPath.js: -------------------------------------------------------------------------------- 1 | export const d = 'M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z'; 2 | -------------------------------------------------------------------------------- /src/components/OperatorMessageMeta.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, View, Text } from 'react-native'; 3 | 4 | const styles = StyleSheet.create({ 5 | container: { 6 | 7 | }, 8 | containerMe: { 9 | justifyContent: 'flex-end', 10 | alignItems: 'flex-end' 11 | }, 12 | text: { 13 | fontSize: 10, 14 | color: '#9B9B9B' 15 | } 16 | }); 17 | 18 | const MessageMeta = ({ me, children }) => ( 19 | 23 | {children} 24 | {me && Lorem Ipsum} 25 | 26 | ); 27 | export default MessageMeta; 28 | -------------------------------------------------------------------------------- /src/screens/ARExample/reducers/index.js: -------------------------------------------------------------------------------- 1 | import geometry from './geometry'; 2 | import heading from './heading'; 3 | import hud from './hud'; 4 | import hudSelection from './hudSelection'; 5 | import location from './location'; 6 | import map from './map'; 7 | import objects from './objects'; 8 | import poly from './poly'; 9 | import polyObject3Ds from './polyObject3Ds'; 10 | import progress from './progress'; 11 | import region from './region'; 12 | import three from './three'; 13 | 14 | export default { 15 | geometry, 16 | heading, 17 | hud, 18 | hudSelection, 19 | location, 20 | map, 21 | objects, 22 | poly, 23 | polyObject3Ds, 24 | progress, 25 | region, 26 | three 27 | }; 28 | -------------------------------------------------------------------------------- /src/components/AnimatedSvgLine.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Svg } from 'expo'; 3 | import AnimatedSvgFix from './AnimatedSvgFix'; 4 | 5 | const NativeSvgLine = Svg.Line; 6 | 7 | export const args = ['x1', 'y1', 'x2', 'y2']; 8 | 9 | class SvgLine extends Component { 10 | setNativeProps = (props) => { 11 | this._component && this._component.setNativeProps(props); 12 | } 13 | render() { 14 | return ( 15 | (this._component = component)} 17 | {...this.props} 18 | /> 19 | ); 20 | } 21 | } 22 | SvgLine = AnimatedSvgFix(SvgLine, { propString: args }); 23 | export default SvgLine; 24 | -------------------------------------------------------------------------------- /src/screens/Main.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { ScrollView, Button } from 'react-native'; 3 | import routeConfig from '../routeConfig'; 4 | 5 | export default class MainScreen extends Component { 6 | render() { 7 | const { Main, ...routes } = routeConfig; 8 | return ( 9 | 10 | {Object.keys(routes).map(route => ( 11 |