├── .flowconfig ├── .gitignore ├── .npmignore ├── AnimatedTransformMatrix.js ├── PanController ├── PanController.js └── examples │ ├── CoverFlow.js │ └── PageScroller.js ├── PanView.js ├── animated.examples.js ├── examples ├── AnimatedFormula.js ├── CoverFlow.js ├── PageScroller.js ├── Physics │ └── Hills.js ├── PullToRefresh │ ├── ForestView.js │ ├── Icon.js │ ├── ListItem.js │ ├── LoadingAirplane.js │ ├── RefreshButton.js │ ├── Tree.js │ └── index.js └── WindowShade │ ├── Card.js │ └── index.js ├── iOS ├── AppDelegate.h ├── AppDelegate.m ├── Base.lproj │ └── LaunchScreen.xib ├── Images.xcassets │ ├── 0-cnn1.imageset │ │ ├── 0-cnn1@1x.png │ │ ├── 0-cnn1@2x.png │ │ ├── 0-cnn1@3x.png │ │ └── Contents.json │ ├── 1-facebook1.imageset │ │ ├── 1-facebook1@1x.jpeg │ │ ├── 1-facebook1@2x.jpeg │ │ ├── 1-facebook1@3x.jpeg │ │ └── Contents.json │ ├── 2-facebook2.imageset │ │ ├── 2-facebook2@1x.jpeg │ │ ├── 2-facebook2@2x.jpeg │ │ ├── 2-facebook2@3x.jpeg │ │ └── Contents.json │ ├── 3-flipboard1.imageset │ │ ├── 3-flipboard1@1x.png │ │ ├── 3-flipboard1@2x.png │ │ ├── 3-flipboard1@3x.png │ │ └── Contents.json │ ├── 4-flipboard2.imageset │ │ ├── 4-flipboard2@1x.png │ │ ├── 4-flipboard2@2x.png │ │ ├── 4-flipboard2@3x.png │ │ └── Contents.json │ ├── 5-messenger1.imageset │ │ ├── 5-messenger1@1x.png │ │ ├── 5-messenger1@2x.png │ │ ├── 5-messenger1@3x.png │ │ └── Contents.json │ ├── 6-nyt1.imageset │ │ ├── 6-nyt1@1x.jpeg │ │ ├── 6-nyt1@2x.jpeg │ │ ├── 6-nyt1@3x.jpeg │ │ └── Contents.json │ ├── 7-pages1.imageset │ │ ├── 7-pages1@1x.jpeg │ │ ├── 7-pages1@2x.jpeg │ │ ├── 7-pages1@3x.jpeg │ │ └── Contents.json │ ├── 8-vine1.imageset │ │ ├── 8-vine1@1x.png │ │ ├── 8-vine1@2x.png │ │ ├── 8-vine1@3x.png │ │ └── Contents.json │ └── AppIcon.appiconset │ │ └── Contents.json ├── Info.plist ├── main.jsbundle └── main.m ├── index.ios.js ├── operator-use-case.js ├── package.json ├── react_native_animation_examples.xcodeproj ├── project.pbxproj └── xcshareddata │ └── xcschemes │ └── react_native_animation_examples.xcscheme └── react_native_animation_examplesTests ├── Info.plist └── react_native_animation_examplesTests.m /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | 3 | # We fork some components by platform. 4 | .*/*.web.js 5 | .*/*.android.js 6 | 7 | # Some modules have their own node_modules with overlap 8 | .*/node_modules/node-haste/.* 9 | 10 | # Ignore react-tools where there are overlaps, but don't ignore anything that 11 | # react-native relies on 12 | .*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js 13 | .*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js 14 | .*/node_modules/react-tools/src/browser/ui/React.js 15 | .*/node_modules/react-tools/src/core/ReactInstanceHandles.js 16 | .*/node_modules/react-tools/src/event/EventPropagators.js 17 | 18 | # Ignore commoner tests 19 | .*/node_modules/commoner/test/.* 20 | 21 | # See https://github.com/facebook/flow/issues/442 22 | .*/react-tools/node_modules/commoner/lib/reader.js 23 | 24 | # Ignore jest 25 | .*/react-native/node_modules/jest-cli/.* 26 | 27 | [include] 28 | 29 | [libs] 30 | node_modules/react-native/Libraries/react-native/react-native-interface.js 31 | 32 | [options] 33 | module.system=haste 34 | 35 | [version] 36 | 0.12.0 37 | -------------------------------------------------------------------------------- /.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 | # node.js 26 | # 27 | node_modules/ 28 | npm-debug.log 29 | 30 | 31 | .idea -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # node.js 25 | # 26 | node_modules/ 27 | npm-debug.log 28 | -------------------------------------------------------------------------------- /AnimatedTransformMatrix.js: -------------------------------------------------------------------------------- 1 | class AnimatedTransformMatrix extends AnimatedWithChildren { 2 | _transformMatrix: Array; 3 | 4 | constructor(transformMatrix: Array) { 5 | super(); 6 | this._transformMatrix = transformMatrix; 7 | } 8 | 9 | __getValue(): Array { 10 | return this._transformMatrix.map(x => { 11 | if (x instanceof Animated) { 12 | return x.__getValue(); 13 | } else { 14 | return x; 15 | } 16 | }); 17 | } 18 | 19 | getAnimatedValue(): Array { 20 | return this._transformMatrix.map(x => { 21 | if (x instanceof Animated) { 22 | return x.getAnimatedValue(); 23 | } else { 24 | return x; 25 | } 26 | }); 27 | } 28 | 29 | attach(): void { 30 | this._transformMatrix.forEach(x => { 31 | if (x instanceof Animated) { 32 | x.addChild(this); 33 | } 34 | }); 35 | } 36 | 37 | detach(): void { 38 | this._transformMatrix.forEach(x => { 39 | if (x instanceof Animated) { 40 | x.removeChild(this); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | 47 | class AnimatedStyle extends AnimatedWithChildren { 48 | _style: Object; 49 | 50 | constructor(style: any) { 51 | super(); 52 | style = flattenStyle(style) || {}; 53 | if (style.transform) { 54 | style = { 55 | ...style, 56 | transform: new AnimatedTransform(style.transform), 57 | }; 58 | } 59 | if (style.transformMatrix) { 60 | style = { 61 | ...style, 62 | transformMatrix: new AnimatedTransformMatrix(style.transformMatrix), 63 | }; 64 | } 65 | this._style = style; 66 | } 67 | 68 | __getValue(): Object { 69 | var style = {}; 70 | for (var key in this._style) { 71 | var value = this._style[key]; 72 | if (value instanceof Animated) { 73 | style[key] = value.__getValue(); 74 | } else { 75 | style[key] = value; 76 | } 77 | } 78 | return style; 79 | } 80 | 81 | getAnimatedValue(): Object { 82 | var style = {}; 83 | for (var key in this._style) { 84 | var value = this._style[key]; 85 | if (value instanceof Animated) { 86 | style[key] = value.getAnimatedValue(); 87 | } 88 | } 89 | return style; 90 | } 91 | 92 | attach(): void { 93 | for (var key in this._style) { 94 | var value = this._style[key]; 95 | if (value instanceof Animated) { 96 | value.addChild(this); 97 | } 98 | } 99 | } 100 | 101 | detach(): void { 102 | for (var key in this._style) { 103 | var value = this._style[key]; 104 | if (value instanceof Animated) { 105 | value.removeChild(this); 106 | } 107 | } 108 | } 109 | } -------------------------------------------------------------------------------- /PanController/PanController.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Animated, 6 | PropTypes, 7 | } = React; 8 | /** 9 | * PanSurface API: 10 | * ============ 11 | * 12 | * allowX (boolean) [false] 13 | * allowY (boolean) [true] 14 | * momentum (boolean|enum("x","y")) [true] 15 | * lockDirection (boolean) [true] 16 | * panX (AnimatedValue) 17 | * panY (AnimatedValue) 18 | * xBounds (number[2]) [0, measure(children).width] 19 | * yBounds (number[2]) [0, measure(children).height] 20 | * overshoot (enum("spring", "clamp", "extend")) ["spring"] 21 | * xMode (enum("scroll-with-momentum-based-decay", "spring-back-to-origin-on-release")) 22 | * ...PanResponderHandlers 23 | * 24 | * onDirectionChange 25 | * onOvershoot 26 | * 27 | * 28 | * 29 | * Additional Scenarios: 30 | * ===================== 31 | * 32 | * - snap back to a specific point after touch release 33 | * - snap to pages with some interval (or array of points?) 34 | * - support a "mode" for each direction of the following: 35 | * - "scroll": scroll with momentum based decay 36 | * - "spring": spring back to origin on release 37 | * - "pan": stop moving on release 38 | * 39 | */ 40 | var PanController = React.createClass({ 41 | 42 | propTypes: { 43 | lockDirection: PropTypes.bool, 44 | allowX: PropTypes.bool, 45 | allowY: PropTypes.bool, 46 | momentumX: PropTypes.bool, 47 | momentumY: PropTypes.bool, 48 | overshootX: PropTypes.oneOf("spring", "clamp"), 49 | overshootY: PropTypes.oneOf("spring", "clamp"), 50 | xBounds: PropTypes.arrayOf(PropTypes.number), 51 | yBounds: PropTypes.arrayOf(PropTypes.number), 52 | panX: PropTypes.any, // animated 53 | panY: PropTypes.any, // animated 54 | onOvershoot: PropTypes.func, 55 | onDirectionChange: PropTypes.func, 56 | 57 | //...PanResponderPropTypes, 58 | }, 59 | 60 | getDefaultProps() { 61 | return { 62 | allowX: false, 63 | allowY: true, //TODO: would it make more sense to make this false by default, but a better name? 64 | momentumX: true, 65 | momentumY: true, 66 | lockDirection: true, 67 | overshootX: "spring", 68 | overshootY: "spring", 69 | panX: new Animated.Value(0), 70 | panY: new Animated.Value(0), 71 | xBounds: [-Infinity, Infinity], 72 | yBounds: [-Infinity, Infinity], 73 | //yMode: "scroll", 74 | //xMode: "scroll", 75 | onStartShouldSetPanResponder: () => true, 76 | onMoveShouldSetPanResponder: () => true, 77 | }; 78 | }, 79 | 80 | getInitialState() { 81 | //TODO: 82 | // it's possible we want to move some props over to state. 83 | // For example, xBounds/yBounds might need to be 84 | // calculated/updated automatically 85 | // 86 | // This could also be done with a higher-order component 87 | // that just massages props passed in... 88 | return { 89 | 90 | }; 91 | }, 92 | 93 | _responder: null, 94 | _listener: null, 95 | _direction: null, 96 | 97 | componentWillMount() { 98 | this._responder = PanResponder.create({ 99 | onStartShouldSetPanResponder: this.props.onStartShouldSetPanResponder, 100 | onMoveShouldSetPanResponder: this.props.onMoveShouldSetPanResponder, 101 | onPanResponderGrant: () => { 102 | if (this.props.onPanResponderGrant) { 103 | this.props.onPanResponderGrant(); //TODO: pass args 104 | } 105 | var { panX, panY } = this.props; 106 | 107 | this.handleResponderGrant(panX); 108 | this.handleResponderGrant(panY); 109 | 110 | this._direction = null; 111 | }, 112 | onPanResponderMove: (_, { dx, dy, x0, y0 }) => { 113 | var { 114 | panX, 115 | panY, 116 | xBounds, 117 | yBounds, 118 | overshootX, 119 | overshootY, 120 | allowX, 121 | allowY, 122 | lockDirection, 123 | } = this.props; 124 | 125 | if (!this._direction) { 126 | var dx2 = dx*dx; 127 | var dy2 = dy*dy; 128 | if (dx2 + dy2 > 10) { // TODO: make configurable 129 | this._direction = dx2 > dy2 ? 'x' : 'y'; 130 | if (this.props.onDirectionChange) { 131 | this.props.onDirectionChange({ 132 | direction: this._direction, 133 | dx, 134 | du, 135 | x0, 136 | y0 137 | }); 138 | } 139 | } 140 | } 141 | var dir = this._direction; 142 | 143 | //TODO: call prop handler 144 | 145 | if (allowX && (!lockDirection || dir === 'x')) { 146 | var [xMin, xMax] = xBounds; 147 | 148 | this.handleResponderMove(panX, dx, xMin, xMax, overshootX); 149 | } 150 | 151 | if (allowY && (!lockDirection || dir === 'y')) { 152 | var [yMin, yMax] = yBounds; 153 | 154 | this.handleResponderMove(panY, dy, yMin, yMax, overshootY); 155 | } 156 | }, 157 | onPanResponderRelease: (_, { vx, vy, dx, dy }) => { 158 | //TODO: call prop handler 159 | var { 160 | panX, 161 | panY, 162 | xBounds, 163 | yBounds, 164 | momentumX, 165 | momentumY, 166 | overshootX, 167 | overshootY, 168 | allowX, 169 | allowY, 170 | lockDirection, 171 | xMode, 172 | yMode, 173 | } = this.props; 174 | 175 | var dir = this._direction; 176 | 177 | if (allowX && (!lockDirection || dir === 'x')) { 178 | var [xMin, xMax] = xBounds; 179 | this.handleResponderRelease(panX, xMin, xMax, vx, momentumX, overshootX, xMode); 180 | } 181 | 182 | if (allowY && (!lockDirection || dir === 'y')) { 183 | var [yMin, yMax] = yBounds; 184 | this.handleResponderRelease(panY, yMin, yMax, vy, momentumY, overshootY, yMode); 185 | } 186 | } 187 | }); 188 | }, 189 | 190 | handleResponderMove(anim, delta, min, max, overshoot) { 191 | var val = anim._offset + delta; 192 | 193 | if (val > max) { 194 | switch (overshoot) { 195 | case "spring": 196 | val = max + (val - max) / 3; 197 | break; 198 | case "clamp": 199 | val = max; 200 | break; 201 | } 202 | } 203 | if (val < yMin) { 204 | switch (overshoot) { 205 | case "spring": 206 | val = min - (min - val) / 3; // TODO: make configurable 207 | break; 208 | case "clamp": 209 | val = min; 210 | break; 211 | } 212 | } 213 | val = val - anim._offset; 214 | anim.setValue(val); 215 | }, 216 | 217 | handleResponderRelease(anim, min, max, velocity, momentum, overshoot) { 218 | anim.flattenOffset(); 219 | 220 | if (anim._value < min) { 221 | if (this.props.onOvershoot) { 222 | this.props.onOvershoot(); //TODO: what args should we pass to this 223 | } 224 | switch (overshoot) { 225 | case "spring": 226 | Animated.spring(anim, { 227 | toValue: min, 228 | velocity, // TODO: make configurable 229 | }).start(); 230 | break; 231 | case "clamp": 232 | anim.setValue(min); 233 | break; 234 | } 235 | } else if (anim._value > max) { 236 | if (this.props.onOvershoot) { 237 | this.props.onOvershoot(); //TODO: what args should we pass to this 238 | } 239 | switch (overshoot) { 240 | case "spring": 241 | Animated.spring(anim, { 242 | toValue: max, 243 | velocity, // TODO: make configurable 244 | }).start(); 245 | break; 246 | case "clamp": 247 | anim.setValue(min); 248 | break; 249 | } 250 | } else if (momentum) { 251 | 252 | //TODO: handle scroll snapping 253 | switch (mode) { 254 | case "snap": 255 | this.handleSnappedScroll(anim, min, max, velocity, momentum, overshoot); 256 | break; 257 | 258 | case "decay": 259 | this.handleMomentumScroll(anim, min, max, velocity, momentum, overshoot); 260 | break; 261 | } 262 | } 263 | }, 264 | 265 | handleResponderGrant(anim) { 266 | anim.setOffset(anim._value); 267 | anim.setValue(0); 268 | }, 269 | 270 | handleMomentumScroll(anim, min, max, velocity, momentum, overshoot) { 271 | Animated.decay(anim, { 272 | velocity, 273 | deceleration: 0.993, //TODO: make configurable 274 | }).start(() => { 275 | anim.removeListener(this._listener); 276 | }); 277 | 278 | this._listener = anim.addListener(({ value }) => { 279 | if (value < min) { 280 | anim.removeListener(this._listener); 281 | if (this.props.onOvershoot) { 282 | this.props.onOvershoot(); //TODO: what args should we pass to this 283 | } 284 | switch (overshoot) { 285 | case "spring": 286 | Animated.spring(anim, { 287 | toValue: min, 288 | velocity, // TODO: make configurable 289 | }).start(); 290 | break; 291 | case "clamp": 292 | anim.setValue(min); 293 | break; 294 | } 295 | } else if (value > max) { 296 | anim.removeListener(this._listener); 297 | if (this.props.onOvershoot) { 298 | this.props.onOvershoot(); //TODO: what args should we pass to this 299 | } 300 | switch (overshoot) { 301 | case "spring": 302 | Animated.spring(anim, { 303 | toValue: max, 304 | velocity, // TODO: make configurable 305 | }).start(); 306 | break; 307 | case "clamp": 308 | anim.setValue(min); 309 | break; 310 | } 311 | } 312 | }); 313 | }, 314 | 315 | handleSnappedScroll(anim, velocity, min, max, spacing) { 316 | var endX = this.momentumCenter(anim._value, velocity, spacing); 317 | endX = Math.max(endX, min); 318 | endX = Math.min(endX, max); 319 | var bounds = [endX-spacing/2, endX+spacing/2]; 320 | var endV = this.velocityAtBounds(x._value, velocity, bounds); 321 | 322 | this._listener = x.addListener(( { value } ) => { 323 | if (value > bounds[0] && value < bounds[1]) { 324 | Animated.spring(anim, { 325 | toValue: endX, 326 | velocity: endV, 327 | }).start(); 328 | } 329 | }); 330 | 331 | Animated.decay(anim, { 332 | velocity, //TODO: make configurable 333 | }).start(()=> { 334 | x.removeListener(this._listener); 335 | }); 336 | }, 337 | 338 | closestCenter(x, spacing) { 339 | var plus = (x % spacing) < spacing / 2 ? 0 : spacing; 340 | return Math.floor(x / spacing) * spacing + plus; 341 | }, 342 | 343 | momentumCenter(x0, vx, spacing) { 344 | var t = 0; 345 | var deceleration = 0.997; // TODO: make configurable 346 | var x1 = x0; 347 | var x = x1; 348 | 349 | while (true) { 350 | t += 16; 351 | x = x0 + (vx / (1 - deceleration)) * 352 | (1 - Math.exp(-(1 - deceleration) * t)); 353 | if (Math.abs(x-x1) < 0.1) { 354 | x1 = x; 355 | break; 356 | } 357 | x1 = x; 358 | } 359 | return this.closestCenter(x1, spacing); 360 | }, 361 | 362 | velocityAtBounds(x0, vx, bounds) { 363 | var t = 0; 364 | var deceleration = 0.997; // TODO: make configurable 365 | var x1 = x0; 366 | var x = x1; 367 | var vf; 368 | while (true) { 369 | t += 16; 370 | x = x0 + (vx / (1 - deceleration)) * 371 | (1 - Math.exp(-(1 - deceleration) * t)); 372 | vf = (x-x1) / 16; 373 | if (x > bounds[0] && x < bounds[1]) { 374 | break; 375 | } 376 | if (Math.abs(vf) < 0.1) { 377 | break; 378 | } 379 | x1 = x; 380 | } 381 | return vf; 382 | }, 383 | 384 | componentDidMount() { 385 | //TODO: we may need to measure the children width/height here? 386 | }, 387 | 388 | componentWillUnmount() { 389 | 390 | }, 391 | 392 | componentDidUnmount() { 393 | 394 | }, 395 | 396 | render: function () { 397 | return 398 | } 399 | }); 400 | 401 | module.exports = PanController; -------------------------------------------------------------------------------- /PanController/examples/CoverFlow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | StyleSheet, 10 | Text, 11 | View, 12 | Image, 13 | Animated, 14 | PanResponder 15 | } = React; 16 | var Dimensions = require('Dimensions'); 17 | var Easing = require('Easing'); 18 | var Interpolation = require('Interpolation'); 19 | var { width, height } = Dimensions.get('window'); 20 | 21 | var PanController = require('../PanController'); 22 | 23 | var IMAGES = [ 24 | require('image!0-cnn1'), 25 | require('image!1-facebook1'), 26 | require('image!2-facebook2'), 27 | require('image!3-flipboard1'), 28 | require('image!4-flipboard2'), 29 | require('image!5-messenger1'), 30 | require('image!6-nyt1'), 31 | require('image!7-pages1'), 32 | require('image!8-vine1') 33 | ]; 34 | // http://codepen.io/anon/pen/ZGjvwo?editors=011 35 | // http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/ 36 | 37 | 38 | var MAXROTATE = 0.0035; 39 | var dCenter = 120; 40 | var SPACING = 200; 41 | 42 | var MIN = 0; 43 | var MAX = (IMAGES.length-1) * SPACING; 44 | 45 | var CoverFlow = React.createClass({ 46 | 47 | getInitialState() { 48 | var x = new Animated.Value(0); 49 | return { 50 | x, 51 | translations: IMAGES.map((_, i) => x.interpolate({ 52 | inputRange: [ SPACING*i, SPACING*(i+1)], 53 | outputRange: [ 0, SPACING] 54 | })) 55 | }; 56 | }, 57 | 58 | componentWillMount() { 59 | this.responder = PanResponder.create({ 60 | //onStartShouldSetPanResponder: () => true, 61 | //onMoveShouldSetPanResponder: () => true, 62 | //onPanResponderGrant: () => { 63 | // this.state.x.setOffset(this.state.x._value); 64 | // this.state.x.setValue(0); 65 | //}, 66 | //onPanResponderMove: (_, { dx, x0 }) => { 67 | // var x = this.state.x._offset + dx; 68 | // 69 | // if (x > MAX) { 70 | // x = MAX + (x - MAX) / 3; 71 | // } 72 | // if (x < MIN) { 73 | // x = MIN - (MIN - x) / 3; 74 | // } 75 | // x = x - this.state.x._offset; 76 | // this.state.x.setValue(x); 77 | //}, 78 | onPanResponderRelease: (_, { vx, dx }) => { 79 | var { x } = this.state; 80 | x.flattenOffset(); 81 | 82 | if (x._value < MIN) { 83 | Animated.spring(x, { 84 | toValue: MIN, 85 | velocity: vx 86 | }).start(); 87 | } else if (x._value > MAX) { 88 | Animated.spring(x, { 89 | toValue: MAX, 90 | velocity: vx 91 | }).start(); 92 | } else { 93 | 94 | var endX = this.momentumCenter(x._value, vx); 95 | endX = Math.max(endX, MIN); 96 | endX = Math.min(endX, MAX); 97 | var bounds = [endX-SPACING/2, endX+SPACING/2]; 98 | var endV = this.velocityAtBounds(x._value, vx, bounds); 99 | 100 | this._listener = x.addListener(( { value } ) => { 101 | if (value > bounds[0] && value < bounds[1]) { 102 | Animated.spring(x, { 103 | toValue: endX, 104 | velocity: endV 105 | }).start(); 106 | } 107 | }); 108 | 109 | Animated.decay(x, { 110 | velocity: vx 111 | }).start(()=> { 112 | x.removeListener(this._listener); 113 | }); 114 | } 115 | } 116 | }); 117 | }, 118 | 119 | closestCenter(x) { 120 | var plus = (x % SPACING) < SPACING / 2 ? 0 : SPACING; 121 | return Math.floor(x / SPACING) * SPACING + plus; 122 | }, 123 | 124 | momentumCenter(x0, vx) { 125 | var t = 0; 126 | var deceleration = 0.997; 127 | var x1 = x0; 128 | var x = x1; 129 | 130 | while (true) { 131 | t += 16; 132 | x = x0 + (vx / (1 - deceleration)) * 133 | (1 - Math.exp(-(1 - deceleration) * t)); 134 | if (Math.abs(x-x1) < 0.1) { 135 | x1 = x; 136 | break; 137 | } 138 | x1 = x; 139 | } 140 | return this.closestCenter(x1); 141 | }, 142 | 143 | velocityAtBounds(x0, vx, bounds) { 144 | var t = 0; 145 | var deceleration = 0.997; 146 | var x1 = x0; 147 | var x = x1; 148 | var vf; 149 | while (true) { 150 | t += 16; 151 | x = x0 + (vx / (1 - deceleration)) * 152 | (1 - Math.exp(-(1 - deceleration) * t)); 153 | vf = (x-x1) / 16; 154 | if (x > bounds[0] && x < bounds[1]) { 155 | break; 156 | } 157 | if (Math.abs(vf) < 0.1) { 158 | break; 159 | } 160 | x1 = x; 161 | } 162 | return vf; 163 | }, 164 | 165 | render: function () { 166 | 167 | var { x, translations } = this.state; 168 | 169 | return ( 170 | 178 | {IMAGES.map((img, i) => { 179 | 180 | var dx = translations[i]; 181 | 182 | var translateX = dx; 183 | var perspective = dx.interpolate({ 184 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 185 | outputRange: [400, 400, 100, 400, 400] 186 | }); 187 | var translateY = dx.interpolate({ 188 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 189 | outputRange: [ 0, 0, -10, 0, 0] 190 | }); 191 | var scale = dx.interpolate({ 192 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 193 | outputRange: [ 1, 1, 1.6, 1, 1] 194 | }); 195 | var rotateY = dx.interpolate({ 196 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 197 | outputRange: [ '35deg', '35deg', '0deg', '-35deg', '-35deg'] 198 | }); 199 | 200 | return ( 201 | 213 | ); 214 | })} 215 | 216 | ); 217 | } 218 | }); 219 | 220 | 221 | var styles = StyleSheet.create({ 222 | container: { 223 | flex: 1, 224 | justifyContent: 'flex-start', 225 | alignItems: 'center', 226 | backgroundColor: '#2e2f31', 227 | padding: 30 228 | }, 229 | image: { 230 | position: 'absolute', 231 | top: (width - 200) / 2, 232 | left: (height - 200) / 2, 233 | width: 200, 234 | height: 200, 235 | resizeMode: 'cover' 236 | } 237 | }); 238 | 239 | module.exports = CoverFlow; 240 | -------------------------------------------------------------------------------- /PanController/examples/PageScroller.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | StyleSheet, 10 | Text, 11 | View, 12 | Image, 13 | Animated, 14 | PanResponder 15 | } = React; 16 | var Dimensions = require('Dimensions'); 17 | var Easing = require('Easing'); 18 | var Interpolation = require('Interpolation'); 19 | var { width, height } = Dimensions.get('window'); 20 | 21 | var PanController = require('../PanController'); 22 | 23 | var IMAGES = [ 24 | require('image!0-cnn1'), 25 | require('image!1-facebook1'), 26 | require('image!2-facebook2'), 27 | require('image!3-flipboard1'), 28 | require('image!4-flipboard2'), 29 | require('image!5-messenger1'), 30 | require('image!6-nyt1'), 31 | require('image!7-pages1'), 32 | require('image!8-vine1') 33 | ]; 34 | 35 | var PANES = Array(9).join("x").split(""); 36 | var easing = Easing.bezier(.56,.17,.57,.85, (1000 / 60 / 4000) / 4); 37 | 38 | 39 | var CARDX = 240; 40 | var CARDY = 400; 41 | var START_TOP = 50; 42 | var h = CARDY * 0.6; 43 | 44 | var MIN = 240; 45 | var MAX = 1900; 46 | 47 | var Pane = React.createClass({ 48 | render() { 49 | return ( 50 | 53 | ); 54 | } 55 | }); 56 | 57 | var PageScroller = React.createClass({ 58 | 59 | getInitialState() { 60 | return { 61 | panY: new Animated.Value(MIN), 62 | panX: new Animated.Value(0), 63 | swipeIndex: null, 64 | }; 65 | }, 66 | direction: null, 67 | componentWillMount() { 68 | this.responder = PanResponder.create({ 69 | //onStartShouldSetPanResponder: () => true, 70 | //onMoveShouldSetPanResponder: () => true, 71 | onPanResponderGrant: () => { 72 | //this.state.panY.setOffset(this.state.panY.getAnimatedValue()); 73 | //this.state.panY.setValue(0); 74 | this.state.panX.setValue(0); 75 | this.direction = null; 76 | }, 77 | onPanResponderMove: (_, { dy, dx, y0 }) => { 78 | if (!this.direction) { 79 | var dx2 = dx*dx; 80 | var dy2 = dy*dy; 81 | if (dx2 + dy2 > 10) { 82 | this.direction = dx2 > dy2 ? 'x' : 'y'; 83 | if (this.direction === 'x') { 84 | // set swipeIndex 85 | this.setState({ 86 | swipeIndex: this.cardIndexFor(y0, this.state.panY._offset + dy) 87 | }); 88 | } 89 | } 90 | } 91 | if (this.direction === 'y') { 92 | var y = this.state.panY._offset + dy; 93 | 94 | if (y > MAX) { 95 | y = MAX + (y - MAX) / 3; 96 | } 97 | if (y < MIN) { 98 | y = MIN - (MIN - y) / 3; 99 | } 100 | y = y - this.state.panY._offset; 101 | this.state.panY.setValue(y); 102 | } else { 103 | this.state.panX.setValue(dx); 104 | } 105 | }, 106 | onPanResponderRelease: (e, { vy, vx, dx, dy }) => { 107 | var { panY, panX } = this.state; 108 | panY.flattenOffset(); 109 | 110 | if (this.direction === 'y') { 111 | 112 | if (panY._value < MIN) { 113 | Animated.spring(panY, { 114 | toValue: MIN, 115 | velocity: vy 116 | }).start(); 117 | } else if (panY._value > MAX) { 118 | Animated.spring(panY, { 119 | toValue: MAX, 120 | velocity: vy 121 | }).start(); 122 | } else { 123 | Animated.decay(this.state.panY, { 124 | velocity: vy, 125 | deceleration: 0.993 126 | }).start(() => { 127 | panY.removeListener(this._listener); 128 | }); 129 | 130 | this._listener = panY.addListener(( { value } ) => { 131 | if (value < MIN) { 132 | panY.removeListener(this._listener); 133 | Animated.spring(panY, { 134 | toValue: MIN, 135 | velocity: vy 136 | }).start(); 137 | } else if (value > MAX) { 138 | panY.removeListener(this._listener); 139 | Animated.spring(panY, { 140 | toValue: MAX, 141 | velocity: vy 142 | }).start(); 143 | } 144 | }); 145 | } 146 | } else { 147 | // swipe left/right done 148 | var x = panX._value; 149 | var i = this.state.swipeIndex; 150 | if (x > 30) { 151 | // to the right... 152 | Animated.spring(panX, { 153 | toValue: 400, 154 | velocity: vx 155 | }).start(() => { 156 | //TODO: remove from deck 157 | PANES.splice(i,1); 158 | this.forceUpdate(); 159 | }); 160 | } else if (x < -30) { 161 | Animated.spring(panX, { 162 | toValue: -400, 163 | velocity: vx 164 | }).start(() => { 165 | //TODO: remove from deck 166 | }); 167 | } else { 168 | Animated.spring(panX, { toValue: 0, velocity: vx }).start(); 169 | } 170 | } 171 | this.direction = null; 172 | }, 173 | }); 174 | }, 175 | 176 | cardIndexFor(y0, panY) { 177 | var length = PANES.length; 178 | var result = null; 179 | for (var i = 0; i < length; i++) { 180 | var hx = h * (length - i - 1); 181 | var hxm = Math.max(hx-h, 0); 182 | // y0 is the position they started the touch on the screen 183 | // panY is the current animated value 184 | var translateY = Interpolation.create({ 185 | inputRange: [0, hxm, hx+1, height+hx], 186 | outputRange: [0, 0, 10, 30 + height], 187 | easing: easing 188 | })(panY); 189 | 190 | var scale = Interpolation.create({ 191 | inputRange: [0, hx+1, 0.8*height+hx, height+hx, height + hx + 1], 192 | outputRange: [1, 1, 1.4, 1.3, 1.3] 193 | })(panY); 194 | 195 | var cardTop = START_TOP + translateY - (scale - 1) / 2 * CARDY; 196 | 197 | if (cardTop < y0) { 198 | result = i; 199 | } 200 | } 201 | return result; 202 | }, 203 | 204 | render: function () { 205 | var { panY, panX, swipeIndex } = this.state; 206 | return ( 207 | 214 | {PANES.map((e, i) => { 215 | var x = PANES.length - i - 1; 216 | var hx = h * x; 217 | var hxm = Math.max(hx-h, 0); 218 | 219 | var translateX = i === swipeIndex && this.direction === 'x' ? panX : 0; 220 | 221 | var translateY = panY.interpolate({ 222 | inputRange: [0, hxm, hx+1, height+hx], 223 | outputRange: [0, 0, 10, 30 + height], 224 | easing: easing 225 | }); 226 | 227 | var scale = panY.interpolate({ 228 | inputRange: [0, hx+1, 0.8*height+hx, height+hx, height + hx + 1], 229 | outputRange: [1, 1, 1.4, 1.3, 1.3] 230 | }); 231 | 232 | return 239 | })} 240 | 241 | ); 242 | } 243 | }); 244 | 245 | 246 | var styles = StyleSheet.create({ 247 | container: { 248 | flex: 1, 249 | justifyContent: 'center', 250 | alignItems: 'center', 251 | backgroundColor: '#2e2f31', 252 | }, 253 | pane: { 254 | top: START_TOP, 255 | left: width / 2 - CARDX / 2, 256 | width: CARDX, 257 | height: CARDY, 258 | //borderColor: '#000', 259 | //borderWidth: 1, 260 | //backgroundColor: 'blue', 261 | position: 'absolute', 262 | //shadowColor: '#000', 263 | //shadowOpacity: 0.3, 264 | //shadowRadius: 2, 265 | }, 266 | paneImage: { 267 | //borderColor: '#000', 268 | //borderWidth: 1, 269 | width: CARDX, 270 | height: CARDY, 271 | resizeMode: 'stretch' 272 | } 273 | }); 274 | 275 | module.exports = PageScroller; 276 | -------------------------------------------------------------------------------- /PanView.js: -------------------------------------------------------------------------------- 1 | 2 | var Ferrisel = React.createClass({ 3 | getInitialState() { 4 | return { 5 | panX: new Animated.Value(0), 6 | panY: new Animated.Value(0) 7 | }; 8 | }, 9 | render() { 10 | var { pages } = this.props; 11 | var { panX, panY } = this.state; 12 | return ( 13 | 21 | {pages.map((page, i) => ( 22 | 41 | ))} 42 | 43 | ) 44 | } 45 | }) 46 | 47 | /** 48 | * PanSurface API: 49 | * ============ 50 | * 51 | * allowX (boolean) [false] 52 | * allowY (boolean) [true] 53 | * momentum (boolean|enum("x","y")) [true] 54 | * lockScrollDirection (boolean) [true] 55 | * panX (AnimatedValue) 56 | * panY (AnimatedValue) 57 | * vx (AnimatedValue) 58 | * vy (AnimatedValue) 59 | * xBounds (number[2]) [0, measure(children).width] 60 | * yBounds (number[2]) [0, measure(children).height] 61 | * overshoot (enum("spring", "clamp", "extend")) ["spring"] 62 | * xMode (enum("scroll-with-momentum-based-decay", "spring-back-to-origin-on-release")) 63 | * ...PanResponderHandlers 64 | * 65 | * 66 | * 67 | * 68 | * Additional Scenarios: 69 | * ===================== 70 | * 71 | * - snap back to a specific point after touch release 72 | * - snap to pages with some interval (or array of points?) 73 | * - support a "mode" for each direction of the following: 74 | * - "scroll": scroll with momentum based decay 75 | * - "spring": spring back to origin on release 76 | * - "pan": stop moving on release 77 | * 78 | */ 79 | var Ferrisel = React.createClass({ 80 | render() { 81 | return ( 82 | 85 | {this.props.pages.map(page => ( 86 | 102 | ))} 103 | 104 | ) 105 | } 106 | }) -------------------------------------------------------------------------------- /examples/AnimatedFormula.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | AppRegistry, 10 | StyleSheet, 11 | View, 12 | Animated, 13 | PanResponder 14 | } = React; 15 | var Dimensions = require('Dimensions'); 16 | var Easing = require('Easing'); 17 | var Interpolation = require('Interpolation'); 18 | var { width, height } = Dimensions.get('window'); 19 | 20 | var AnimatedFormula = React.createClass({ 21 | 22 | getInitialState() { 23 | var x = new Animated.Value(0); 24 | var y = new Animated.Value(0); 25 | return { 26 | x, 27 | y, 28 | distance: new Animated.Formula([x,y], (a,b) => Math.sqrt(a*a + b*b)) 29 | }; 30 | }, 31 | 32 | componentWillMount() { 33 | this.responder = PanResponder.create({ 34 | onStartShouldSetPanResponder: () => true, 35 | onMoveShouldSetPanResponder: () => true, 36 | onPanResponderMove: Animated.event([null, { dx: this.state.x, dy: this.state.y }]), 37 | onPanResponderRelease: (_, { vx, vy }) => { 38 | var { x, y } = this.state; 39 | Animated.spring(x, { 40 | toValue: 0, 41 | velocity: vx 42 | }).start(); 43 | Animated.spring(y, { 44 | toValue: 0, 45 | velocity: vy 46 | }).start(); 47 | } 48 | }); 49 | }, 50 | 51 | render: function () { 52 | 53 | var { x, y, distance } = this.state; 54 | 55 | return ( 56 | 59 | 71 | 72 | ); 73 | } 74 | }); 75 | 76 | 77 | var styles = StyleSheet.create({ 78 | container: { 79 | flex: 1, 80 | justifyContent: 'flex-start', 81 | alignItems: 'center', 82 | backgroundColor: '#2e2f31', 83 | padding: 30 84 | }, 85 | handle: { 86 | position: 'absolute', 87 | top: (width - 200) / 2, 88 | left: (height - 200) / 2, 89 | width: 200, 90 | height: 200, 91 | borderRadius: 100, 92 | backgroundColor: 'blue', 93 | } 94 | }); 95 | 96 | module.exports = AnimatedFormula; 97 | -------------------------------------------------------------------------------- /examples/CoverFlow.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | StyleSheet, 10 | Text, 11 | View, 12 | Image, 13 | Animated, 14 | PanResponder 15 | } = React; 16 | var Dimensions = require('Dimensions'); 17 | var Easing = require('Easing'); 18 | var Interpolation = require('Interpolation'); 19 | var { width, height } = Dimensions.get('window'); 20 | var MatrixMath = require('MatrixMath'); 21 | 22 | var THREE = require('three'); 23 | 24 | var IMAGES = [ 25 | require('image!0-cnn1'), 26 | require('image!1-facebook1'), 27 | require('image!2-facebook2'), 28 | require('image!3-flipboard1'), 29 | require('image!4-flipboard2'), 30 | require('image!5-messenger1'), 31 | require('image!6-nyt1'), 32 | require('image!7-pages1'), 33 | require('image!8-vine1') 34 | ]; 35 | // http://codepen.io/anon/pen/ZGjvwo?editors=011 36 | // http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/ 37 | 38 | function matrix3d() { 39 | return Array.prototype.slice.call(arguments,0); 40 | } 41 | 42 | function toRadians(degree) { 43 | return degree * (Math.PI/180); 44 | } 45 | function toDegrees(radians) { 46 | return radians * (180/Math.PI); 47 | } 48 | function compose(args) { 49 | var result = new THREE.Matrix4(); 50 | for (var i = 0; i < args.length; i ++) { 51 | result = result.multiply(args[i]); 52 | } 53 | return result; 54 | } 55 | function M() { 56 | return new THREE.Matrix4(); 57 | } 58 | function V(x,y,z) { 59 | return new THREE.Vector3(x,y,z) 60 | } 61 | function Q() { 62 | return new THREE.Quaternion(); 63 | } 64 | 65 | var T = compose([ 66 | //M().makeTranslation(0,0,100), 67 | //M().makeRotationY(toRadians(45)), 68 | //M().makeTranslation(-100, 0, 0), 69 | //M().makeOrthographic(-10, 10, 4, -4,-1,1), 70 | //M().makeRotationY(toRadians(45)), 71 | //M().makeRotationFromQuaternion(Q().setFromRotationMatrix(M().makeRotationZ(toRadians(45)))), 72 | //M().makePerspective(45, 1, 0.1, 100), 73 | //M().makeScale(1,2,0), 74 | //M().scale(V(1, 1, 0)), 75 | M() 76 | ]); 77 | 78 | 79 | var t = [].slice.call(T.elements,0); 80 | 81 | /* 82 | matrix3d( 83 | scaleX, +0.0, +0.0, rotateY, 84 | +0.0, scaleY, +0.0, rotateX, 85 | +0.0, +0.0, +1.0, +0.0, 86 | translateX, translateY, +0.0, 1/scale 87 | ); 88 | 89 | */ 90 | 91 | 92 | 93 | var MAXROTATE = 0.0035; 94 | var dCenter = 120; 95 | var SPACING = 200; 96 | 97 | var MIN = 0; 98 | var MAX = (IMAGES.length-1) * SPACING; 99 | 100 | var CoverFlow = React.createClass({ 101 | 102 | getInitialState() { 103 | var x = new Animated.Value(0); 104 | var vx = new Animated.Value(0); 105 | return { 106 | x, 107 | vx, 108 | translations: IMAGES.map((_,i) => x.interpolate({ 109 | inputRange: [ SPACING*i, SPACING*(i+1)], 110 | outputRange: [ 0, SPACING] 111 | })) 112 | }; 113 | }, 114 | 115 | componentWillMount() { 116 | this.responder = PanResponder.create({ 117 | onStartShouldSetPanResponder: () => true, 118 | onMoveShouldSetPanResponder: () => true, 119 | onPanResponderGrant: () => { 120 | this.state.x.setOffset(this.state.x._value); 121 | this.state.x.setValue(0); 122 | }, 123 | onPanResponderMove: (_, { dx, x0 }) => { 124 | var x = this.state.x._offset + dx; 125 | 126 | if (x > MAX) { 127 | x = MAX + (x - MAX) / 3; 128 | } 129 | if (x < MIN) { 130 | x = MIN - (MIN - x) / 3; 131 | } 132 | x = x - this.state.x._offset; 133 | this.state.x.setValue(x); 134 | }, 135 | onPanResponderRelease: (_, { vx, dx }) => { 136 | var { x } = this.state; 137 | x.flattenOffset(); 138 | 139 | if (x._value < MIN) { 140 | Animated.spring(x, { 141 | toValue: MIN, 142 | velocity: vx 143 | }).start(); 144 | } else if (x._value > MAX) { 145 | Animated.spring(x, { 146 | toValue: MAX, 147 | velocity: vx 148 | }).start(); 149 | } else { 150 | 151 | var endX = this.momentumCenter(x._value, vx); 152 | endX = Math.max(endX, MIN); 153 | endX = Math.min(endX, MAX); 154 | var bounds = [endX-SPACING/2, endX+SPACING/2]; 155 | var endV = this.velocityAtBounds(x._value, vx, bounds); 156 | 157 | this._listener = x.addListener(( { value } ) => { 158 | if (value > bounds[0] && value < bounds[1]) { 159 | Animated.spring(x, { 160 | toValue: endX, 161 | velocity: endV 162 | }).start(); 163 | } 164 | }); 165 | 166 | Animated.decay(x, { 167 | velocity: vx 168 | }).start(()=> { 169 | x.removeListener(this._listener); 170 | }); 171 | } 172 | } 173 | }); 174 | }, 175 | 176 | closestCenter(x) { 177 | var plus = (x % SPACING) < SPACING / 2 ? 0 : SPACING; 178 | return Math.floor(x / SPACING) * SPACING + plus; 179 | }, 180 | 181 | momentumCenter(x0, vx) { 182 | var t = 0; 183 | var deceleration = 0.997; 184 | var x1 = x0; 185 | var x = x1; 186 | 187 | while (true) { 188 | t += 16; 189 | x = x0 + (vx / (1 - deceleration)) * 190 | (1 - Math.exp(-(1 - deceleration) * t)); 191 | if (Math.abs(x-x1) < 0.1) { 192 | x1 = x; 193 | break; 194 | } 195 | x1 = x; 196 | } 197 | return this.closestCenter(x1); 198 | }, 199 | 200 | velocityAtBounds(x0, vx, bounds) { 201 | var t = 0; 202 | var deceleration = 0.997; 203 | var x1 = x0; 204 | var x = x1; 205 | var vf; 206 | while (true) { 207 | t += 16; 208 | x = x0 + (vx / (1 - deceleration)) * 209 | (1 - Math.exp(-(1 - deceleration) * t)); 210 | vf = (x-x1) / 16; 211 | if (x > bounds[0] && x < bounds[1]) { 212 | break; 213 | } 214 | if (Math.abs(vf) < 0.1) { 215 | break; 216 | } 217 | x1 = x; 218 | } 219 | return vf; 220 | }, 221 | 222 | render: function () { 223 | 224 | var { x, translations } = this.state; 225 | 226 | return ( 227 | 231 | {IMAGES.map((img, i) => { 232 | 233 | var dx = translations[i]; 234 | 235 | var translateX = { 236 | translateX: dx 237 | }; 238 | var perspective = { 239 | perspective: dx.interpolate({ 240 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 241 | outputRange: [400, 400, 100, 400, 400] 242 | }) 243 | }; 244 | var translateY = { 245 | translateY: dx.interpolate({ 246 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 247 | outputRange: [ 0, 0, -10, 0, 0] 248 | }) 249 | }; 250 | var scale = { 251 | scale: dx.interpolate({ 252 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 253 | outputRange: [ 1, 1, 1.6, 1, 1] 254 | }) 255 | }; 256 | var rotateY = { 257 | rotateY: dx.interpolate({ 258 | inputRange: [-dCenter-1, -dCenter, 0, dCenter, dCenter+1], 259 | outputRange: [ '35deg', '35deg', '0deg', '-35deg', '-35deg'] 260 | }) 261 | }; 262 | 263 | return ( 264 | 270 | ); 271 | })} 272 | 273 | 274 | ); 275 | } 276 | }); 277 | 278 | 279 | var styles = StyleSheet.create({ 280 | container: { 281 | flex: 1, 282 | justifyContent: 'flex-start', 283 | alignItems: 'center', 284 | backgroundColor: '#2e2f31', 285 | padding: 30 286 | }, 287 | image: { 288 | position: 'absolute', 289 | top: (width - 200) / 2, 290 | left: (height - 200) / 2, 291 | width: 200, 292 | height: 200, 293 | resizeMode: 'cover' 294 | } 295 | }); 296 | 297 | module.exports = CoverFlow; 298 | -------------------------------------------------------------------------------- /examples/PageScroller.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | StyleSheet, 10 | Text, 11 | View, 12 | Image, 13 | Animated, 14 | PanResponder 15 | } = React; 16 | var Dimensions = require('Dimensions'); 17 | var Easing = require('Easing'); 18 | var Interpolation = require('Interpolation'); 19 | var { width, height } = Dimensions.get('window'); 20 | 21 | var IMAGES = [ 22 | require('image!0-cnn1'), 23 | require('image!1-facebook1'), 24 | require('image!2-facebook2'), 25 | require('image!3-flipboard1'), 26 | require('image!4-flipboard2'), 27 | require('image!5-messenger1'), 28 | require('image!6-nyt1'), 29 | require('image!7-pages1'), 30 | require('image!8-vine1') 31 | ]; 32 | 33 | var PANES = Array(9).join("x").split(""); 34 | var easing = Easing.bezier(.56,.17,.57,.85, (1000 / 60 / 4000) / 4); 35 | 36 | 37 | var CARDX = 240; 38 | var CARDY = 400; 39 | var START_TOP = 50; 40 | var h = CARDY * 0.6; 41 | 42 | var MIN = 240; 43 | var MAX = 1900; 44 | 45 | var Pane = React.createClass({ 46 | render() { 47 | return ( 48 | 51 | ); 52 | } 53 | }); 54 | 55 | var PageScroller = React.createClass({ 56 | 57 | getInitialState() { 58 | return { 59 | panY: new Animated.Value(MIN), 60 | panX: new Animated.Value(0), 61 | swipeIndex: null, 62 | }; 63 | }, 64 | direction: null, 65 | componentWillMount() { 66 | this.responder = PanResponder.create({ 67 | onStartShouldSetPanResponder: () => true, 68 | onMoveShouldSetPanResponder: () => true, 69 | onPanResponderGrant: () => { 70 | this.state.panY.setOffset(this.state.panY.getAnimatedValue()); 71 | this.state.panY.setValue(0); 72 | this.state.panX.setValue(0); 73 | this.direction = null; 74 | }, 75 | onPanResponderMove: (_, { dy, dx, y0 }) => { 76 | if (!this.direction) { 77 | var dx2 = dx*dx; 78 | var dy2 = dy*dy; 79 | if (dx2 + dy2 > 10) { 80 | this.direction = dx2 > dy2 ? 'x' : 'y'; 81 | if (this.direction === 'x') { 82 | // set swipeIndex 83 | this.setState({ 84 | swipeIndex: this.cardIndexFor(y0, this.state.panY._offset + dy) 85 | }); 86 | } 87 | } 88 | } 89 | if (this.direction === 'y') { 90 | var y = this.state.panY._offset + dy; 91 | 92 | if (y > MAX) { 93 | y = MAX + (y - MAX) / 3; 94 | } 95 | if (y < MIN) { 96 | y = MIN - (MIN - y) / 3; 97 | } 98 | y = y - this.state.panY._offset; 99 | this.state.panY.setValue(y); 100 | } else { 101 | this.state.panX.setValue(dx); 102 | } 103 | }, 104 | onPanResponderRelease: (e, { vy, vx, dx, dy }) => { 105 | var { panY, panX } = this.state; 106 | panY.flattenOffset(); 107 | 108 | if (this.direction === 'y') { 109 | 110 | if (panY._value < MIN) { 111 | Animated.spring(panY, { 112 | toValue: MIN, 113 | velocity: vy 114 | }).start(); 115 | } else if (panY._value > MAX) { 116 | Animated.spring(panY, { 117 | toValue: MAX, 118 | velocity: vy 119 | }).start(); 120 | } else { 121 | Animated.decay(this.state.panY, { 122 | velocity: vy, 123 | deceleration: 0.993 124 | }).start(() => { 125 | panY.removeListener(this._listener); 126 | }); 127 | 128 | this._listener = panY.addListener(( { value } ) => { 129 | if (value < MIN) { 130 | panY.removeListener(this._listener); 131 | Animated.spring(panY, { 132 | toValue: MIN, 133 | velocity: vy 134 | }).start(); 135 | } else if (value > MAX) { 136 | panY.removeListener(this._listener); 137 | Animated.spring(panY, { 138 | toValue: MAX, 139 | velocity: vy 140 | }).start(); 141 | } 142 | }); 143 | } 144 | } else { 145 | // swipe left/right done 146 | var x = panX._value; 147 | var i = this.state.swipeIndex; 148 | if (x > 30) { 149 | // to the right... 150 | Animated.spring(panX, { 151 | toValue: 400, 152 | velocity: vx 153 | }).start(() => { 154 | //TODO: remove from deck 155 | PANES.splice(i,1); 156 | this.forceUpdate(); 157 | }); 158 | } else if (x < -30) { 159 | Animated.spring(panX, { 160 | toValue: -400, 161 | velocity: vx 162 | }).start(() => { 163 | //TODO: remove from deck 164 | }); 165 | } else { 166 | Animated.spring(panX, { toValue: 0, velocity: vx }).start(); 167 | } 168 | } 169 | this.direction = null; 170 | }, 171 | }); 172 | }, 173 | 174 | cardIndexFor(y0, panY) { 175 | var length = PANES.length; 176 | var result = null; 177 | for (var i = 0; i < length; i++) { 178 | var hx = h * (length - i - 1); 179 | var hxm = Math.max(hx-h, 0); 180 | // y0 is the position they started the touch on the screen 181 | // panY is the current animated value 182 | var translateY = Interpolation.create({ 183 | inputRange: [0, hxm, hx+1, height+hx], 184 | outputRange: [0, 0, 10, 30 + height], 185 | easing: easing 186 | })(panY); 187 | 188 | var scale = Interpolation.create({ 189 | inputRange: [0, hx+1, 0.8*height+hx, height+hx, height + hx + 1], 190 | outputRange: [1, 1, 1.4, 1.3, 1.3] 191 | })(panY); 192 | 193 | var cardTop = START_TOP + translateY - (scale - 1) / 2 * CARDY; 194 | 195 | if (cardTop < y0) { 196 | result = i; 197 | } 198 | } 199 | return result; 200 | }, 201 | 202 | render: function () { 203 | var { panY, panX, swipeIndex } = this.state; 204 | return ( 205 | 209 | {PANES.map((e, i) => { 210 | var x = PANES.length - i - 1; 211 | var hx = h * x; 212 | var hxm = Math.max(hx-h, 0); 213 | 214 | var translateX = { 215 | translateX: i === swipeIndex && this.direction === 'x' ? panX : 0 216 | }; 217 | 218 | return 232 | })} 233 | 234 | ); 235 | } 236 | }); 237 | 238 | 239 | var styles = StyleSheet.create({ 240 | container: { 241 | flex: 1, 242 | justifyContent: 'center', 243 | alignItems: 'center', 244 | backgroundColor: '#2e2f31', 245 | }, 246 | pane: { 247 | top: START_TOP, 248 | left: width / 2 - CARDX / 2, 249 | width: CARDX, 250 | height: CARDY, 251 | //borderColor: '#000', 252 | //borderWidth: 1, 253 | //backgroundColor: 'blue', 254 | position: 'absolute', 255 | //shadowColor: '#000', 256 | //shadowOpacity: 0.3, 257 | //shadowRadius: 2, 258 | }, 259 | paneImage: { 260 | //borderColor: '#000', 261 | //borderWidth: 1, 262 | width: CARDX, 263 | height: CARDY, 264 | resizeMode: 'stretch' 265 | } 266 | }); 267 | 268 | module.exports = PageScroller; 269 | -------------------------------------------------------------------------------- /examples/Physics/Hills.js: -------------------------------------------------------------------------------- 1 | 2 | class HillAnimation extends Animation { 3 | _hills: Array; 4 | _hillHeight: number; 5 | _fromValue: number; 6 | _velocity: number; 7 | _onUpdate: (value: number) => void; 8 | _animationFrame: any; 9 | 10 | constructor(config) { 11 | super(); 12 | this._hills = config.hills; 13 | this._velocity = config.velocity; 14 | this._hillHeight = config.hillHeight; 15 | } 16 | 17 | start(fromValue, onUpdate, onEnd) { 18 | this.__active = true; 19 | this._lastValue = fromValue; 20 | this._fromValue = fromValue; 21 | this._onUpdate = onUpdate; 22 | this.__onEnd = onEnd; 23 | this._startTime = Date.now(); 24 | this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this)); 25 | } 26 | 27 | onUpdate(): void { 28 | var now = Date.now(); 29 | 30 | var value = this._fromValue + 31 | (this._velocity / (1 - this._deceleration)) * 32 | (1 - Math.exp(-(1 - this._deceleration) * (now - this._startTime))); 33 | 34 | this._onUpdate(value); 35 | 36 | if (Math.abs(this._lastValue - value) < 0.1) { 37 | this.__debouncedOnEnd({finished: true}); 38 | return; 39 | } 40 | 41 | this._lastValue = value; 42 | if (this.__active) { 43 | this._animationFrame = requestAnimationFrame(this.onUpdate.bind(this)); 44 | } 45 | } 46 | 47 | stop(): void { 48 | this.__active = false; 49 | window.cancelAnimationFrame(this._animationFrame); 50 | this.__debouncedOnEnd({finished: false}); 51 | } 52 | } 53 | 54 | module.exports = function AnimateHills(value, config) { 55 | return { 56 | start(cb) { 57 | var singleValue = value; 58 | var singleConfig = config; 59 | singleValue.stopTracking(); 60 | singleValue.animate(new HillAnimation(singleConfig), callback); 61 | }, 62 | stop() { 63 | value.stopAnimation(); 64 | } 65 | } 66 | }; -------------------------------------------------------------------------------- /examples/PullToRefresh/ForestView.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Animated, 6 | PropTypes, 7 | } = React; 8 | 9 | var Tree = require('./Tree'); 10 | 11 | var ForestView = React.createClass({ 12 | propTypes: { 13 | stretch: PropTypes.any, // Animated 14 | wiggle: PropTypes.any, // Animated 15 | }, 16 | render: function () { 17 | var { stretch, wiggle } = this.props; 18 | var nwiggle = wiggle.interpolate({ 19 | inputRange: [0,1], 20 | outputRange: [0,-1], 21 | }); 22 | return ( 23 | 24 | 25 | 35 | 36 | 37 | 38 | 48 | 49 | 50 | 61 | 72 | 73 | 83 | 84 | 93 | 104 | 115 | 116 | 117 | 118 | ); 119 | } 120 | }); 121 | 122 | var WINDOW_HEIGHT = 180; 123 | var OVERALL_HEIGHT = 600; 124 | var OFFSET_HEIGHT = 300; 125 | 126 | var styles = StyleSheet.create({ 127 | window: { 128 | height: 180, 129 | overflow: 'visible', 130 | position: 'absolute', 131 | top: 1, 132 | left: 0, 133 | right: 0, 134 | }, 135 | container: { 136 | position: 'absolute', 137 | bottom: -OFFSET_HEIGHT, 138 | left: 0, 139 | right: 0, 140 | backgroundColor: '#7dcfcb', 141 | height: OVERALL_HEIGHT, 142 | }, 143 | foreGround: { 144 | //opacity: 0, 145 | position: 'absolute', 146 | height: OFFSET_HEIGHT + 30, 147 | bottom: 0, 148 | left: 0, 149 | right: 0, 150 | backgroundColor: '#3e6175', 151 | }, 152 | fgHills: { 153 | position: 'absolute', 154 | top: -8, 155 | left: 320, 156 | backgroundColor: '#3e6175', 157 | height: 30, 158 | width: 30, 159 | transformMatrix: [ 160 | +10.0, -1.0, +0.0, 0.00, 161 | +14.0, +1.0, +0.0, 0.00, 162 | +0.0, +0.0, +1.0, +0.0, 163 | +0.0, +0.0, +0.0, 1/1.00 164 | ] 165 | }, 166 | middleGround: { 167 | position: 'absolute', 168 | height: OFFSET_HEIGHT + 30, 169 | bottom: 0, 170 | left: 0, 171 | right: 0, 172 | backgroundColor: '#378e9a', 173 | }, 174 | mgHills1: { 175 | position: 'absolute', 176 | top: -3, 177 | left: 0, 178 | backgroundColor: '#378e9a', 179 | height: 30, 180 | width: 30, 181 | transformMatrix: [ 182 | +12.0, -1.8, +0.0, 0.00, 183 | +5.0, +1.0, +0.0, 0.00, 184 | +0.0, +0.0, +1.0, +0.0, 185 | +0.0, +0.0, +0.0, 1/1.00 186 | ] 187 | }, 188 | mgHills2: { 189 | position: 'absolute', 190 | top: 25, 191 | left: 330, 192 | backgroundColor: '#378e9a', 193 | height: 30, 194 | width: 30, 195 | transformMatrix: [ 196 | +4.0, -2.0, +0.0, 0.00, 197 | +4.0, +3.0, +0.0, 0.00, 198 | +0.0, +0.0, +1.0, +0.0, 199 | +0.0, +0.0, +0.0, 1/1.00 200 | ] 201 | }, 202 | backGround: { 203 | position: 'absolute', 204 | height: OFFSET_HEIGHT + 40, 205 | bottom: 0, 206 | left: 0, 207 | right: 0, 208 | backgroundColor: '#86d7d7', 209 | }, 210 | bgHills1: { 211 | position: 'absolute', 212 | top: 20, 213 | left: -10, 214 | backgroundColor: '#86d7d7', 215 | height: 30, 216 | width: 30, 217 | transformMatrix: [ 218 | +12.0, -4.0, +0.0, 0.00, 219 | +4.0, +2.0, +0.0, 0.00, 220 | +0.0, +0.0, +1.0, +0.0, 221 | +0.0, +0.0, +0.0, 1/1.00 222 | ] 223 | }, 224 | bgHills2: { 225 | position: 'absolute', 226 | top: 60, 227 | left: 180, 228 | backgroundColor: '#86d7d7', 229 | height: 30, 230 | width: 30, 231 | transformMatrix: [ 232 | +14.0, -5.0, +0.0, 0.00, 233 | +4.0, +3.0, +0.0, 0.00, 234 | +0.0, +0.0, +1.0, +0.0, 235 | +0.0, +0.0, +0.0, 1/1.00 236 | ] 237 | }, 238 | }); 239 | 240 | module.exports = ForestView; -------------------------------------------------------------------------------- /examples/PullToRefresh/Icon.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Animated, 6 | PropTypes, 7 | } = React; 8 | var { Icon } = require('react-native-icons'); 9 | 10 | var ListItemIcon = React.createClass({ 11 | propTypes: { 12 | color: PropTypes.string, 13 | name: PropTypes.string.isRequired, 14 | flutter: PropTypes.any, // Animated | Number 15 | }, 16 | render: function () { 17 | var { name, color, flutter } = this.props; 18 | return ( 19 | 38 | 44 | 45 | ); 46 | } 47 | }); 48 | 49 | var SIZE = 40; 50 | var ICON_SIZE = 20; 51 | 52 | var styles = StyleSheet.create({ 53 | container: { 54 | width: SIZE, 55 | height: SIZE, 56 | borderRadius: SIZE / 2, 57 | marginHorizontal: 25, 58 | justifyContent: 'center', 59 | alignItems: 'center', 60 | //TODO: shadow 61 | }, 62 | icon: { 63 | width: ICON_SIZE, 64 | height: ICON_SIZE, 65 | backgroundColor: 'transparent', 66 | } 67 | }); 68 | 69 | module.exports = ListItemIcon; -------------------------------------------------------------------------------- /examples/PullToRefresh/ListItem.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Animated, 7 | } = React; 8 | 9 | var ListIcon = require('./Icon'); 10 | var { Icon } = require('react-native-icons'); 11 | 12 | var ListItem = React.createClass({ 13 | 14 | render: function () { 15 | var { item } = this.props; 16 | var { loading, inserting, flutter } = item; 17 | 18 | return ( 19 | 29 | 34 | 45 | 46 | {item.title} 47 | {item.time} 48 | 49 | 55 | 56 | 57 | ); 58 | } 59 | }); 60 | 61 | 62 | var styles = StyleSheet.create({ 63 | container: { 64 | flexDirection: 'row', 65 | alignItems: 'center', 66 | //paddingVertical: 17, 67 | }, 68 | title: { 69 | color: '#434343', 70 | fontWeight: 'bold', 71 | fontSize: 16 72 | }, 73 | time: { 74 | color: '#777', 75 | fontSize: 14 76 | }, 77 | innerBody: { 78 | flexDirection: 'row', 79 | flex: 1, 80 | justifyContent: 'center', 81 | alignItems: 'center', 82 | }, 83 | info: { 84 | textAlign: 'center', 85 | width: 16, 86 | height: 16, 87 | borderRadius: 8, 88 | backgroundColor: '#cbcbcf', 89 | marginHorizontal: 20, 90 | 91 | } 92 | }); 93 | 94 | module.exports = ListItem; 95 | -------------------------------------------------------------------------------- /examples/PullToRefresh/LoadingAirplane.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Animated, 6 | } = React; 7 | var { Icon } = require('react-native-icons'); 8 | 9 | var { width, height } = require('Dimensions').get('window'); 10 | var Easing = require('Easing'); 11 | 12 | var frames = (anim, outputRange, easing) => anim.interpolate({ 13 | inputRange: KEYFRAMES, 14 | outputRange, 15 | easing 16 | }); 17 | 18 | var WIDTH = width; 19 | var HEIGHT = 180; 20 | var easing = Easing.bezier(.42,.74,.57,.85, (1000 / 60 / 4000) / 4); 21 | var easingX = Easing.bezier(.78,.68,.57,.85, (1000 / 60 / 4000) / 4); 22 | 23 | var KEYFRAMES = [ 24 | 0.00, // 25 | 0.20, // 26 | 0.40, // 27 | 0.70, // 28 | 0.85, // 29 | 1.00, // 30 | ]; 31 | 32 | var LoadingAirplane = React.createClass({ 33 | render: function () { 34 | var { loading } = this.props; 35 | 36 | var translateY = frames(loading, [ 37 | HEIGHT * -0.00, // 38 | HEIGHT * -0.90, // 39 | HEIGHT * -0.60, // 40 | HEIGHT * -0.20, // 41 | HEIGHT * -0.00, // 42 | HEIGHT * -0.00, // 43 | ], easing); 44 | 45 | var translateX = frames(loading, [ 46 | WIDTH * 0.10, // 47 | WIDTH * 1.10, // 48 | WIDTH * 1.10, // 49 | -100, // 50 | -100, // 51 | WIDTH * 0.10, // 52 | ], easing); 53 | 54 | var scale = frames(loading, [ 55 | 1.00, // 56 | 0.30, // 57 | 0.50, // 58 | 0.80, // 59 | 1.00, // 60 | 1.00, // 61 | ], easing); 62 | 63 | var rotateZ = frames(loading, [ 64 | '-45deg', // 65 | '0deg', // 66 | '170deg', // 67 | '180deg', // 68 | '0deg', // 69 | '0deg', // 70 | ]); 71 | 72 | return ( 73 | 85 | 91 | 92 | ); 93 | } 94 | }); 95 | var ICON_SIZE = 40; 96 | var SIZE = 30; 97 | 98 | var styles = StyleSheet.create({ 99 | container: { 100 | width: ICON_SIZE, 101 | height: ICON_SIZE, 102 | position: 'absolute', 103 | backgroundColor: 'transparent', 104 | top: 180, 105 | left: 6, 106 | marginTop: -ICON_SIZE / 2, 107 | marginLeft: -ICON_SIZE / 2, 108 | alignItems: 'center', 109 | justifyContent: 'center', 110 | }, 111 | icon: { 112 | width: ICON_SIZE, 113 | height: ICON_SIZE, 114 | backgroundColor: 'transparent', 115 | transform: [ 116 | { rotateZ: '40deg'} 117 | ] 118 | } 119 | }); 120 | 121 | module.exports = LoadingAirplane; -------------------------------------------------------------------------------- /examples/PullToRefresh/RefreshButton.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Animated, 7 | PropTypes, 8 | TouchableOpacity, 9 | } = React; 10 | var { Icon } = require('react-native-icons'); 11 | 12 | var RefreshButton = React.createClass({ 13 | propTypes: { 14 | stretch: PropTypes.any, // Animated 15 | onPress: PropTypes.func, 16 | }, 17 | render: function () { 18 | var { stretch, onPress,isLoading } = this.props; 19 | return ( 20 | 21 | 31 | {!isLoading && } 37 | 38 | 39 | ); 40 | } 41 | }); 42 | 43 | var SIZE = 58; 44 | var ICON_SIZE = 40; 45 | 46 | var styles = StyleSheet.create({ 47 | button: { 48 | position: 'absolute', 49 | width: SIZE, 50 | height: SIZE, 51 | borderRadius: SIZE / 2, 52 | marginTop: - SIZE / 2, 53 | top: 0, 54 | marginLeft: 16, 55 | backgroundColor: '#5db2df', 56 | overflow: 'visible', 57 | shadowRadius: 3, 58 | shadowOpacity: 0.8, 59 | shadowColor: '#333', 60 | shadowOffset: { x: 0, y: 0 }, 61 | justifyContent: 'center', 62 | alignItems: 'center' 63 | }, 64 | icon: { 65 | width: ICON_SIZE, 66 | height: ICON_SIZE, 67 | backgroundColor: 'transparent', 68 | transform: [ 69 | { rotateZ: '40deg'} 70 | ] 71 | } 72 | }); 73 | 74 | module.exports = RefreshButton; -------------------------------------------------------------------------------- /examples/PullToRefresh/Tree.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | Text, 5 | View, 6 | PropTypes, 7 | Animated, 8 | } = React; 9 | 10 | var Svg = require('react-native-svg'); 11 | var { Path } = Svg; 12 | 13 | var Tree = React.createClass({ 14 | 15 | propTypes: { 16 | bodyColor: PropTypes.string, 17 | trunkColor: PropTypes.string, 18 | height: PropTypes.number, 19 | wiggle: PropTypes.any, // Animated prop 20 | }, 21 | 22 | getDefaultProps() { 23 | return { 24 | bodyColor: '#207277', 25 | trunkColor: '#205e66', 26 | height: 225, 27 | wiggle: new Animated.Value(0), 28 | }; 29 | }, 30 | 31 | render() { 32 | var { trunkColor, bodyColor, height, wiggle } = this.props; 33 | 34 | //wiggle = wiggle.getAnimatedValue(); 35 | 36 | var width = height * 120 / 225; 37 | 38 | var abs = Math.abs(wiggle); 39 | 40 | var rIn = 100 + 400 * (1 / (abs + 0.1)) - abs * 340; 41 | var rOut = 360 + 400 * (1 / (abs + 0.1)); 42 | var rTrunk = -200 + 500 * (1 / (abs + 0.1)); 43 | 44 | var dx = wiggle * 6; 45 | 46 | var girth = 25; // half-width of tree body 47 | var x0 = 60; // left-offset of trunk center 48 | var y0 = 225; // y offset of trunk bottom 49 | var y1 = y0-75; // bottom of tree 50 | var y3 = y1-150; // top of tree 51 | var y2 = y0-145; // top of trunk 52 | 53 | if (wiggle < 0) { 54 | var tmp = rIn; 55 | rIn = rOut; 56 | rOut = tmp; 57 | } 58 | 59 | var treeBody = ` 60 | M ${x0 - girth + dx} ${y1} 61 | A ${girth} ${girth + 4} 0 1 0 ${x0 + girth + dx} ${y1} 62 | A ${rIn*0.25} ${rIn} 0 0 ${wiggle>0 ? 1 : 0} ${x0 + dx + wiggle * 50} ${y3 + abs * 10} 63 | A ${rOut*0.25} ${rOut} 0 0 ${wiggle>0 ? 0 : 1} ${x0 - girth + dx} ${y1} 64 | Z 65 | `; 66 | var trunk = ` 67 | M ${x0 - 3} ${y0} 68 | A ${rTrunk*0.25} ${rTrunk} 0 0 ${wiggle>0 ? 1 : 0} ${x0 + dx + wiggle * 20} ${y2} 69 | A ${rTrunk*0.25} ${rTrunk} 0 0 ${wiggle>0 ? 0 : 1} ${x0 + 3} ${y0} 70 | Z 71 | `; 72 | return ( 73 | 81 | 86 | 91 | 92 | ); 93 | } 94 | }); 95 | 96 | module.exports = Animated.createAnimatedComponent(Tree); -------------------------------------------------------------------------------- /examples/PullToRefresh/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { 9 | StyleSheet, 10 | View, 11 | Animated, 12 | ScrollView, 13 | PanResponder, 14 | } = React; 15 | var Dimensions = require('Dimensions'); 16 | var Easing = require('Easing'); 17 | var Interpolation = require('Interpolation'); 18 | var { width, height } = Dimensions.get('window'); 19 | var ListItem = require('./ListItem'); 20 | var ForestView = require('./ForestView'); 21 | var RefreshButton = require('./RefreshButton'); 22 | var LoadingAirplane = require('./LoadingAirplane'); 23 | 24 | 25 | var ITEMS = [ 26 | { 27 | id: 1, 28 | icon: "list", 29 | color: "#6da2ff", 30 | title: "Meeting Minutes", 31 | time: "Mar 9, 2015" 32 | }, 33 | { 34 | id: 2, 35 | icon: "folder", 36 | color: "#cbcbcf", 37 | title: "Favorite Photos", 38 | time: "Feb 3, 2015" 39 | }, 40 | { 41 | id: 3, 42 | icon: "folder", 43 | color: "#cbcbcf", 44 | title: "Photos", 45 | time: "Jan 9, 2014" 46 | }, 47 | { 48 | id: 4, 49 | icon: "list", 50 | color: "#6da2ff", 51 | title: "Meeting Minutes", 52 | time: "Mar 9, 2015" 53 | }, 54 | { 55 | id: 5, 56 | icon: "folder", 57 | color: "#cbcbcf", 58 | title: "Favorite Photos", 59 | time: "Feb 3, 2015" 60 | }, 61 | { 62 | id: 6, 63 | icon: "folder", 64 | color: "#cbcbcf", 65 | title: "Photos", 66 | time: "Jan 9, 2014" 67 | }, 68 | { 69 | id: 7, 70 | icon: "list", 71 | color: "#6da2ff", 72 | title: "Meeting Minutes", 73 | time: "Mar 9, 2015" 74 | }, 75 | { 76 | id: 8, 77 | icon: "folder", 78 | color: "#cbcbcf", 79 | title: "Favorite Photos", 80 | time: "Feb 3, 2015" 81 | }, 82 | { 83 | id: 9, 84 | icon: "folder", 85 | color: "#cbcbcf", 86 | title: "Photos", 87 | time: "Jan 9, 2014" 88 | }, 89 | ]; 90 | 91 | ITEMS = ITEMS.map(item => ({ 92 | ...item, 93 | flutter: new Animated.Value(1), 94 | loading: new Animated.Value(1), 95 | inserting: new Animated.Value(1), 96 | })); 97 | 98 | var ITEM_TO_ADD = { 99 | icon: "calendar-o", 100 | color: "#fdc56d", 101 | title: "Magic Cube Show", 102 | time: "Mar 15, 2015" 103 | }; 104 | 105 | var MIN = -220; 106 | var MAX = 0; 107 | 108 | var PullToRefresh = React.createClass({ 109 | 110 | getInitialState() { 111 | return { 112 | scroll: new Animated.Value(0), 113 | loading: new Animated.Value(0), 114 | isLoading: false, 115 | }; 116 | }, 117 | responder: null, 118 | 119 | componentWillMount() { 120 | this.responder = PanResponder.create({ 121 | onStartShouldSetPanResponder: () => true, 122 | onMoveShouldSetPanResponder: () => true, 123 | onPanResponderGrant: () => { 124 | this.state.scroll.setOffset(this.state.scroll._value); 125 | this.state.scroll.setValue(0); 126 | }, 127 | onPanResponderMove: (_, { dy, y0 }) => { 128 | var scroll = this.state.scroll._offset + dy; 129 | 130 | if (scroll > MAX) { 131 | scroll = MAX + (scroll - MAX) / 4; 132 | } 133 | if (scroll < MIN) { 134 | scroll = MIN - (MIN - scroll) / 4; 135 | } 136 | scroll = scroll - this.state.scroll._offset; 137 | this.state.scroll.setValue(scroll); 138 | }, 139 | onPanResponderRelease: (_, { vy, dy }) => { 140 | var { scroll } = this.state; 141 | scroll.flattenOffset(); 142 | 143 | if (scroll._value < MIN) { 144 | Animated.spring(scroll, { 145 | toValue: MIN, 146 | velocity: vy 147 | }).start(); 148 | } else if (scroll._value > MAX) { 149 | Animated.spring(scroll, { 150 | toValue: MAX, 151 | velocity: vy, 152 | friction: 3, 153 | tension: 60, 154 | }).start(); 155 | this._listener = scroll.addListener(({ value }) => { 156 | if (value > 0) { 157 | scroll.removeListener(this._listener); 158 | this.loadMore(); 159 | } 160 | }); 161 | } else { 162 | Animated.decay(scroll, { 163 | velocity: vy, 164 | }).start(() => { 165 | scroll.removeListener(this._listener); 166 | }); 167 | 168 | this._listener = scroll.addListener(( { value } ) => { 169 | if (value < MIN) { 170 | scroll.removeListener(this._listener); 171 | Animated.spring(scroll, { 172 | toValue: MIN, 173 | velocity: vy 174 | }).start(); 175 | } else if (value > MAX) { 176 | scroll.removeListener(this._listener); 177 | Animated.spring(scroll, { 178 | toValue: MAX, 179 | velocity: vy 180 | }).start(); 181 | } 182 | }); 183 | } 184 | } 185 | }); 186 | }, 187 | 188 | insertItem() { 189 | var newItem = { 190 | ...ITEM_TO_ADD, 191 | id: ITEMS.length + 1, 192 | flutter: new Animated.Value(0), 193 | loading: new Animated.Value(0), 194 | inserting: new Animated.Value(0), 195 | }; 196 | ITEMS.unshift(newItem); 197 | Animated.sequence([ 198 | Animated.timing(newItem.inserting, { 199 | toValue: 1, 200 | duration: 150 201 | }), 202 | Animated.parallel([ 203 | Animated.spring(newItem.flutter, { 204 | toValue: 1, 205 | friction: 1.2, 206 | tension: 70, 207 | }), 208 | Animated.timing(newItem.loading, { 209 | toValue: 1, 210 | duration: 200, 211 | //delay: 30, 212 | }) 213 | ]) 214 | ]).start(); 215 | this.forceUpdate(); 216 | }, 217 | 218 | loadMore() { 219 | this.setState({ isLoading: true }); 220 | this.state.loading.setValue(0); 221 | Animated.timing(this.state.loading, { 222 | toValue: 1, 223 | duration: 2800, 224 | easing: Easing.linear 225 | }).start(() => { 226 | this.setState({ isLoading: false }); 227 | this.insertItem() 228 | }); 229 | }, 230 | 231 | render: function () { 232 | 233 | var { scroll, loading, isLoading } = this.state; 234 | 235 | var stretch = scroll.interpolate({ 236 | inputRange: [-1, 0, 100], 237 | outputRange: [0, 0, 1] 238 | }); 239 | var wiggle = scroll.interpolate({ 240 | inputRange: [-101, -40, 0, 40, 101], 241 | outputRange: [-1, -1, 0, 1, 1] 242 | }); 243 | 244 | return ( 245 | 246 | 247 | 258 | 259 | 260 | 261 | {ITEMS.map(item => ( 262 | 263 | ))} 264 | 265 | 269 | 270 | 271 | {isLoading && } 272 | 273 | ); 274 | } 275 | }); 276 | 277 | 278 | var styles = StyleSheet.create({ 279 | container: { 280 | backgroundColor: '#7dcfcb', 281 | flex: 1, 282 | }, 283 | content: { 284 | flex: 1, 285 | //backgroundColor: '#fff', 286 | }, 287 | window: { 288 | height: 180, 289 | }, 290 | listContainer: { 291 | backgroundColor: '#fff', 292 | paddingTop: 44, 293 | } 294 | }); 295 | 296 | module.exports = PullToRefresh; 297 | -------------------------------------------------------------------------------- /examples/WindowShade/Card.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Animated, 7 | } = React; 8 | 9 | var Card = React.createClass({ 10 | render: function () { 11 | var { card } = this.props; 12 | return ( 13 | 14 | 15 | {card.title} 16 | 17 | 18 | ); 19 | } 20 | }); 21 | 22 | var styles = StyleSheet.create({ 23 | container: { 24 | borderRadius: 4, 25 | backgroundColor: '#fff', 26 | paddingHorizontal: 20, 27 | paddingVertical: 14, 28 | } 29 | }); 30 | 31 | module.exports = Card; -------------------------------------------------------------------------------- /examples/WindowShade/index.js: -------------------------------------------------------------------------------- 1 | var React = require('react-native'); 2 | var { 3 | StyleSheet, 4 | Text, 5 | View, 6 | Image, 7 | Animated, 8 | PanResponder 9 | } = React; 10 | var Card = require('./Card'); 11 | var Dimensions = require('Dimensions'); 12 | var Easing = require('Easing'); 13 | var Interpolation = require('Interpolation'); 14 | var { width, height } = Dimensions.get('window'); 15 | 16 | 17 | 18 | var CARDS = [ 19 | { 20 | id: 1, 21 | color: 'green', 22 | icon: 'folder', 23 | title: '1 applications updated', 24 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 25 | }, 26 | { 27 | id: 2, 28 | color: 'green', 29 | icon: 'folder', 30 | title: '2 applications updated', 31 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 32 | }, 33 | { 34 | id: 3, 35 | color: 'green', 36 | icon: 'folder', 37 | title: '3 applications updated', 38 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 39 | }, 40 | { 41 | id: 4, 42 | color: 'green', 43 | icon: 'folder', 44 | title: '4 applications updated', 45 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 46 | }, 47 | { 48 | id: 5, 49 | color: 'green', 50 | icon: 'folder', 51 | title: '1 applications updated', 52 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 53 | }, 54 | { 55 | id: 6, 56 | color: 'green', 57 | icon: 'folder', 58 | title: '2 applications updated', 59 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 60 | }, 61 | { 62 | id: 7, 63 | color: 'green', 64 | icon: 'folder', 65 | title: '3 applications updated', 66 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 67 | }, 68 | { 69 | id: 8, 70 | color: 'green', 71 | icon: 'folder', 72 | title: '4 applications updated', 73 | subtitle: 'Uver, Google Wallet, YouTube, Airbnb, and...' 74 | }, 75 | ]; 76 | 77 | var easing = Easing.bezier(.56,.17,.57,.85, (1000 / 60 / 4000) / 4); 78 | 79 | 80 | var CARDX = 240; 81 | var CARDY = 400; 82 | var START_TOP = 50; 83 | var h = CARDY * 0.6; 84 | 85 | var CARD_HEIGHT = 45; 86 | 87 | var HEIGHT = 220; 88 | var MIN = HEIGHT - CARD_HEIGHT; // or 0 in the "open" mode 89 | var MAX = CARD_HEIGHT * (CARDS.length - 1); 90 | var MARGIN = 30; 91 | 92 | CARDS = CARDS.reverse(); 93 | 94 | var WindowShade = React.createClass({ 95 | 96 | getInitialState() { 97 | return { 98 | panY: new Animated.Value(MIN) 99 | }; 100 | }, 101 | direction: null, 102 | componentWillMount() { 103 | this.responder = PanResponder.create({ 104 | onStartShouldSetPanResponder: () => true, 105 | onMoveShouldSetPanResponder: () => true, 106 | onPanResponderGrant: () => { 107 | this.state.panY.setOffset(this.state.panY.getAnimatedValue()); 108 | this.state.panY.setValue(0); 109 | }, 110 | onPanResponderMove: (_, { dy, dx, y0 }) => { 111 | var y = this.state.panY._offset + dy; 112 | 113 | if (y > MAX) { 114 | y = MAX + (y - MAX) / 3; 115 | } 116 | if (y < MIN) { 117 | y = MIN - (MIN - y) / 3; 118 | } 119 | y = y - this.state.panY._offset; 120 | this.state.panY.setValue(y); 121 | }, 122 | onPanResponderRelease: (e, { vy, vx, dx, dy }) => { 123 | var { panY } = this.state; 124 | panY.flattenOffset(); 125 | if (panY._value < MIN) { 126 | Animated.spring(panY, { 127 | toValue: MIN, 128 | velocity: vy 129 | }).start(); 130 | } else if (panY._value > MAX) { 131 | Animated.spring(panY, { 132 | toValue: MAX, 133 | velocity: vy 134 | }).start(); 135 | } else { 136 | Animated.decay(this.state.panY, { 137 | velocity: vy, 138 | deceleration: 0.993 139 | }).start(() => { 140 | panY.removeListener(this._listener); 141 | }); 142 | 143 | this._listener = panY.addListener(( { value } ) => { 144 | if (value < MIN) { 145 | panY.removeListener(this._listener); 146 | Animated.spring(panY, { 147 | toValue: MIN, 148 | velocity: vy 149 | }).start(); 150 | } else if (value > MAX) { 151 | panY.removeListener(this._listener); 152 | Animated.spring(panY, { 153 | toValue: MAX, 154 | velocity: vy 155 | }).start(); 156 | } 157 | }); 158 | } 159 | 160 | }, 161 | }); 162 | }, 163 | 164 | cardIndexFor(y0, panY) { 165 | var length = CARDS.length; 166 | var result = null; 167 | for (var i = 0; i < length; i++) { 168 | var hx = h * (length - i - 1); 169 | var hxm = Math.max(hx-h, 0); 170 | // y0 is the position they started the touch on the screen 171 | // panY is the current animated value 172 | var translateY = Interpolation.create({ 173 | inputRange: [0, hxm, hx+1, height+hx], 174 | outputRange: [0, 0, 10, 30 + height], 175 | easing: easing 176 | })(panY); 177 | 178 | var scale = Interpolation.create({ 179 | inputRange: [0, hx+1, 0.8*height+hx, height+hx, height + hx + 1], 180 | outputRange: [1, 1, 1.4, 1.3, 1.3] 181 | })(panY); 182 | 183 | var cardTop = START_TOP + translateY - (scale - 1) / 2 * CARDY; 184 | 185 | if (cardTop < y0) { 186 | result = i; 187 | } 188 | } 189 | return result; 190 | }, 191 | 192 | render: function () { 193 | var { panY } = this.state; 194 | // var HEIGHT = height - 2 * MARGIN - CARD_HEIGHT; 195 | return ( 196 | 199 | {CARDS.map((card, i) => { 200 | var h = CARD_HEIGHT; 201 | var hx = h * i; 202 | var ni = CARDS.length - i - 1; // reverse index 203 | var hnx = h * ni; 204 | 205 | /** 206 | * This is the scroll effect when the shade is "open" already 207 | */ 208 | var scroll = panY.interpolate({ 209 | inputRange: [hx, HEIGHT + hx], 210 | outputRange: [ 0, HEIGHT] 211 | }); 212 | 213 | var translateY = scroll.interpolate({ 214 | inputRange: [-h-1, -h, 0, HEIGHT-h, HEIGHT, HEIGHT + 1], 215 | outputRange: [ 0, 0, 15, HEIGHT-15, HEIGHT, HEIGHT], 216 | }); 217 | 218 | // we only want some of the cards to have a shadow, or else they all add up 219 | // to be really dark whenever they stack on top of each other. 220 | var shadowOpacity = panY.interpolate({ 221 | inputRange: [hx-h-h-1, hx-h-h, HEIGHT+hx, HEIGHT+hx+1], 222 | outputRange: [ 0, 0.5, 0.5, 0], 223 | }); 224 | 225 | /** 226 | * This is the scroll effect when the shade is getting pulled 227 | * down for the first time 228 | */ 229 | //var restPosMinusH = Math.max(hnx-h, 0); 230 | //var restPos = Math.min(hnx, HEIGHT); 231 | //var restPosPlusH = Math.min(hnx+h, HEIGHT); 232 | // 233 | //var translateY = panY.interpolate({ 234 | // inputRange: [0, restPosMinusH, restPos, restPosPlusH, HEIGHT+1, HEIGHT+2], 235 | // outputRange: [0, restPosMinusH, Math.max(restPos-12, 0), restPos, restPos, restPos+1] 236 | //}); 237 | // 238 | //if (restPos !== restPosPlusH && restPosPlusH === HEIGHT) { 239 | // translateY = panY.interpolate({ 240 | // inputRange: [0, restPos, HEIGHT, HEIGHT+1], 241 | // outputRange: [0, restPos-12, restPos-12, restPos-12+1] 242 | // }); 243 | //} else if (restPos === restPosPlusH) { 244 | // translateY = panY.interpolate({ 245 | // inputRange: [0, restPos, HEIGHT, HEIGHT+1], 246 | // outputRange: [0, restPos, restPos, restPos+1] 247 | // }); 248 | //} 249 | // 250 | //// we only want some of the cards to have a shadow, or else they all add up 251 | //// to be quite dark whenever they stack on top of each other. 252 | //var shadowStart = hnx-2*h; 253 | // 254 | //// some items will still be overlapping during an "overscroll", and in this 255 | //// case, we still want to show a shadow... 256 | //var shadowStop = hnx+2*h > HEIGHT ? Infinity : hnx+2*h; 257 | //var shadowOpacity = panY.interpolate({ 258 | // inputRange: [shadowStart-1, shadowStart, shadowStop, shadowStop+1], 259 | // outputRange: [ 0, 0.5, 0.5, 0], 260 | //}); 261 | 262 | return ( 263 | 276 | 277 | 278 | ); 279 | })} 280 | 281 | ); 282 | } 283 | }); 284 | 285 | var styles = StyleSheet.create({ 286 | container: { 287 | flex: 1, 288 | justifyContent: 'center', 289 | alignItems: 'center', 290 | backgroundColor: '#2e2f31', 291 | } 292 | }); 293 | 294 | module.exports = WindowShade; 295 | -------------------------------------------------------------------------------- /iOS/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 | -------------------------------------------------------------------------------- /iOS/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 "RCTRootView.h" 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | NSURL *jsCodeLocation; 19 | 20 | /** 21 | * Loading JavaScript code - uncomment the one you want. 22 | * 23 | * OPTION 1 24 | * Load from development server. Start the server from the repository root: 25 | * 26 | * $ npm start 27 | * 28 | * To run on device, change `localhost` to the IP address of your computer 29 | * (you can get this by typing `ifconfig` into the terminal and selecting the 30 | * `inet` value under `en0:`) and make sure your computer and iOS device are 31 | * on the same Wi-Fi network. 32 | */ 33 | 34 | jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; 35 | 36 | /** 37 | * OPTION 2 38 | * Load from pre-bundled file on disk. To re-generate the static bundle 39 | * from the root of your project directory, run 40 | * 41 | * $ react-native bundle --minify 42 | * 43 | * see http://facebook.github.io/react-native/docs/runningondevice.html 44 | */ 45 | 46 | // jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 47 | 48 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 49 | moduleName:@"react_native_animation_examples" 50 | launchOptions:launchOptions]; 51 | 52 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 53 | UIViewController *rootViewController = [[UIViewController alloc] init]; 54 | rootViewController.view = rootView; 55 | self.window.rootViewController = rootViewController; 56 | [self.window makeKeyAndVisible]; 57 | return YES; 58 | } 59 | 60 | @end 61 | -------------------------------------------------------------------------------- /iOS/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 | -------------------------------------------------------------------------------- /iOS/Images.xcassets/0-cnn1.imageset/0-cnn1@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/0-cnn1.imageset/0-cnn1@1x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/0-cnn1.imageset/0-cnn1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/0-cnn1.imageset/0-cnn1@2x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/0-cnn1.imageset/0-cnn1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/0-cnn1.imageset/0-cnn1@3x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/0-cnn1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "0-cnn1@1x.png" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "0-cnn1@2x.png" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "0-cnn1@3x.png" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/1-facebook1.imageset/1-facebook1@1x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/1-facebook1.imageset/1-facebook1@1x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/1-facebook1.imageset/1-facebook1@2x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/1-facebook1.imageset/1-facebook1@2x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/1-facebook1.imageset/1-facebook1@3x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/1-facebook1.imageset/1-facebook1@3x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/1-facebook1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "1-facebook1@1x.jpeg" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "1-facebook1@2x.jpeg" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "1-facebook1@3x.jpeg" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/2-facebook2.imageset/2-facebook2@1x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/2-facebook2.imageset/2-facebook2@1x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/2-facebook2.imageset/2-facebook2@2x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/2-facebook2.imageset/2-facebook2@2x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/2-facebook2.imageset/2-facebook2@3x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/2-facebook2.imageset/2-facebook2@3x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/2-facebook2.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "2-facebook2@1x.jpeg" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "2-facebook2@2x.jpeg" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "2-facebook2@3x.jpeg" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/3-flipboard1.imageset/3-flipboard1@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/3-flipboard1.imageset/3-flipboard1@1x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/3-flipboard1.imageset/3-flipboard1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/3-flipboard1.imageset/3-flipboard1@2x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/3-flipboard1.imageset/3-flipboard1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/3-flipboard1.imageset/3-flipboard1@3x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/3-flipboard1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "3-flipboard1@1x.png" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "3-flipboard1@2x.png" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "3-flipboard1@3x.png" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/4-flipboard2.imageset/4-flipboard2@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/4-flipboard2.imageset/4-flipboard2@1x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/4-flipboard2.imageset/4-flipboard2@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/4-flipboard2.imageset/4-flipboard2@2x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/4-flipboard2.imageset/4-flipboard2@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/4-flipboard2.imageset/4-flipboard2@3x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/4-flipboard2.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "4-flipboard2@1x.png" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "4-flipboard2@2x.png" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "4-flipboard2@3x.png" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/5-messenger1.imageset/5-messenger1@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/5-messenger1.imageset/5-messenger1@1x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/5-messenger1.imageset/5-messenger1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/5-messenger1.imageset/5-messenger1@2x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/5-messenger1.imageset/5-messenger1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/5-messenger1.imageset/5-messenger1@3x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/5-messenger1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "5-messenger1@1x.png" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "5-messenger1#2x.png" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "5-messenger1@3x.png" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/6-nyt1.imageset/6-nyt1@1x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/6-nyt1.imageset/6-nyt1@1x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/6-nyt1.imageset/6-nyt1@2x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/6-nyt1.imageset/6-nyt1@2x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/6-nyt1.imageset/6-nyt1@3x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/6-nyt1.imageset/6-nyt1@3x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/6-nyt1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "6-nyt1@1x.jpeg" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "6-nyt1@2x.jpeg" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "6-nyt1@3x.jpeg" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/7-pages1.imageset/7-pages1@1x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/7-pages1.imageset/7-pages1@1x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/7-pages1.imageset/7-pages1@2x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/7-pages1.imageset/7-pages1@2x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/7-pages1.imageset/7-pages1@3x.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/7-pages1.imageset/7-pages1@3x.jpeg -------------------------------------------------------------------------------- /iOS/Images.xcassets/7-pages1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "7-pages1@1x.jpeg" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "7-pages1@2x.jpeg" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "7-pages1@3x.jpeg" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/8-vine1.imageset/8-vine1@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/8-vine1.imageset/8-vine1@1x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/8-vine1.imageset/8-vine1@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/8-vine1.imageset/8-vine1@2x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/8-vine1.imageset/8-vine1@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lelandrichardson/react_native_animation_examples/eb4c2ac697b671d284206929c6005bd6089a7aca/iOS/Images.xcassets/8-vine1.imageset/8-vine1@3x.png -------------------------------------------------------------------------------- /iOS/Images.xcassets/8-vine1.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "scale" : "1x", 6 | "filename" : "8-vine1@1x.png" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x", 11 | "filename" : "8-vine1@2x.png" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "scale" : "3x", 16 | "filename" : "8-vine1@3x.png" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } -------------------------------------------------------------------------------- /iOS/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /iOS/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 | NSAllowsArbitraryLoads 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /iOS/main.jsbundle: -------------------------------------------------------------------------------- 1 | // Offline JS 2 | // To re-generate the offline bundle, run this from the root of your project: 3 | // 4 | // $ react-native bundle --minify 5 | // 6 | // See http://facebook.github.io/react-native/docs/runningondevice.html for more details. 7 | 8 | throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions'); 9 | -------------------------------------------------------------------------------- /iOS/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 | -------------------------------------------------------------------------------- /index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | 'use strict'; 6 | 7 | var React = require('react-native'); 8 | var { AppRegistry, StatusBarIOS } = React; 9 | 10 | var PageScroller = require('./examples/PageScroller'); 11 | var CoverFlow = require('./examples/CoverFlow'); 12 | var AnimatedFormula = require('./examples/AnimatedFormula'); 13 | var PullToRefresh = require('./examples/PullToRefresh'); 14 | var Tree = require('./examples/PullToRefresh/Tree'); 15 | var WindowShade = require('./examples/WindowShade'); 16 | 17 | var react_native_animation_examples = React.createClass({ 18 | componentWillMount() { 19 | StatusBarIOS.setStyle('light-content'); 20 | }, 21 | render: function () { 22 | //return 23 | return 24 | //return 25 | //return 26 | //return 27 | //return 28 | } 29 | }); 30 | 31 | AppRegistry.registerComponent('react_native_animation_examples', () => react_native_animation_examples); 32 | -------------------------------------------------------------------------------- /operator-use-case.js: -------------------------------------------------------------------------------- 1 | class Foo extends React.Component { 2 | constructor(...args) { 3 | super(...args); 4 | this.state = { 5 | panY: new Animated.Value(0), 6 | panX: new Animated.Value(12), 7 | removeProgress: new Animated.Value(0), 8 | removeIndex: null 9 | } 10 | } 11 | 12 | removeItem(index) { 13 | // we need to remove a pane from the list of panes. 14 | // when we do that, we want to animate it out 15 | 16 | this.setState({ 17 | removeIndex: index 18 | }); 19 | 20 | Animated.timing(this.state.removeProgress, { 21 | toValue: 1 22 | }).start(() => { 23 | // reset the progress, actually remove the pane from the list 24 | this.setState({ 25 | removeIndex: null, 26 | panes: this.state.panes.remove(index) 27 | }); 28 | this.state.removeProgress.setValue(0); 29 | }) 30 | } 31 | 32 | render() { 33 | var { panes, panY, removeProgress, removeIndex } = this.state; 34 | return ( 35 | 38 | {panes.map((e, i) => { 39 | var x = panes.length - i - 1; 40 | var hx = h * x; 41 | var hxm = Math.max(hx-h, 0); 42 | 43 | return removeIndex ? removeProgress.interpolate({ 50 | inputRange: [0, 1], 51 | outputRange: [0, -h] 52 | }) : 0 53 | ).interpolate({ 54 | inputRange: [0, hxm, hx+1, height+hx], 55 | outputRange: [0, 0, 10, 30 + height], 56 | easing: easing 57 | }) 58 | }] 59 | }} /> 60 | })} 61 | 62 | ); 63 | } 64 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_native_animation_examples", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node_modules/react-native/packager/packager.sh" 7 | }, 8 | "dependencies": { 9 | "react-native": "file:../react-native", 10 | "react-native-icons": "^0.2.0", 11 | "react-native-svg": "git+https://github.com/brentvatne/react-native-svg.git", 12 | "react-timer-mixin": "^0.13.2", 13 | "three": "^0.71.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react_native_animation_examples.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */ = {isa = PBXBuildFile; fileRef = 008F07F21AC5B25A0029DE68 /* main.jsbundle */; }; 11 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; }; 12 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; }; 13 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; }; 14 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; }; 15 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; }; 16 | 00E356F31AD99517003FC87E /* react_native_animation_examplesTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* react_native_animation_examplesTests.m */; }; 17 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; }; 18 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; }; 19 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; }; 20 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; }; 21 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; }; 22 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 23 | 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 24 | 146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; }; 25 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; }; 26 | CEDE411E1B5D6D8900511B5C /* libReactNativeIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CEDE411D1B5D6D5300511B5C /* libReactNativeIcons.a */; }; 27 | CEDE41231B5D6DF800511B5C /* FontAwesome.otf in Resources */ = {isa = PBXBuildFile; fileRef = CEDE411F1B5D6DF800511B5C /* FontAwesome.otf */; }; 28 | CEDE41241B5D6DF800511B5C /* foundation-icons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CEDE41201B5D6DF800511B5C /* foundation-icons.ttf */; }; 29 | CEDE41251B5D6DF800511B5C /* ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CEDE41211B5D6DF800511B5C /* ionicons.ttf */; }; 30 | CEDE41261B5D6DF800511B5C /* zocial-regular-webfont.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CEDE41221B5D6DF800511B5C /* zocial-regular-webfont.ttf */; }; 31 | CEDE421C1B633BD500511B5C /* libRNSvg.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CEDE421B1B633BC800511B5C /* libRNSvg.a */; }; 32 | CEDE421E1B633BE700511B5C /* libxml2.2.dylib in Frameworks */ = {isa = PBXBuildFile; fileRef = CEDE421D1B633BE700511B5C /* libxml2.2.dylib */; }; 33 | CEDE42201B633C7F00511B5C /* libSVGKit-iOS.1.2.0.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CEDE421F1B633C7F00511B5C /* libSVGKit-iOS.1.2.0.a */; }; 34 | /* End PBXBuildFile section */ 35 | 36 | /* Begin PBXContainerItemProxy section */ 37 | 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = { 38 | isa = PBXContainerItemProxy; 39 | containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 40 | proxyType = 2; 41 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 42 | remoteInfo = RCTActionSheet; 43 | }; 44 | 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = { 45 | isa = PBXContainerItemProxy; 46 | containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 47 | proxyType = 2; 48 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 49 | remoteInfo = RCTGeolocation; 50 | }; 51 | 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = { 52 | isa = PBXContainerItemProxy; 53 | containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 54 | proxyType = 2; 55 | remoteGlobalIDString = 58B5115D1A9E6B3D00147676; 56 | remoteInfo = RCTImage; 57 | }; 58 | 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = { 59 | isa = PBXContainerItemProxy; 60 | containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 61 | proxyType = 2; 62 | remoteGlobalIDString = 58B511DB1A9E6C8500147676; 63 | remoteInfo = RCTNetwork; 64 | }; 65 | 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = { 66 | isa = PBXContainerItemProxy; 67 | containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 68 | proxyType = 2; 69 | remoteGlobalIDString = 832C81801AAF6DEF007FA2F7; 70 | remoteInfo = RCTVibration; 71 | }; 72 | 00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = { 73 | isa = PBXContainerItemProxy; 74 | containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */; 75 | proxyType = 1; 76 | remoteGlobalIDString = 13B07F861A680F5B00A75B9A; 77 | remoteInfo = react_native_animation_examples; 78 | }; 79 | 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = { 80 | isa = PBXContainerItemProxy; 81 | containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 82 | proxyType = 2; 83 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 84 | remoteInfo = RCTSettings; 85 | }; 86 | 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = { 87 | isa = PBXContainerItemProxy; 88 | containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 89 | proxyType = 2; 90 | remoteGlobalIDString = 3C86DF461ADF2C930047B81A; 91 | remoteInfo = RCTWebSocket; 92 | }; 93 | 146834031AC3E56700842450 /* PBXContainerItemProxy */ = { 94 | isa = PBXContainerItemProxy; 95 | containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */; 96 | proxyType = 2; 97 | remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192; 98 | remoteInfo = React; 99 | }; 100 | 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = { 101 | isa = PBXContainerItemProxy; 102 | containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 103 | proxyType = 2; 104 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 105 | remoteInfo = RCTLinking; 106 | }; 107 | 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = { 108 | isa = PBXContainerItemProxy; 109 | containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 110 | proxyType = 2; 111 | remoteGlobalIDString = 58B5119B1A9E6C1200147676; 112 | remoteInfo = RCTText; 113 | }; 114 | CEDE411C1B5D6D5300511B5C /* PBXContainerItemProxy */ = { 115 | isa = PBXContainerItemProxy; 116 | containerPortal = CEDE410E1B5D6D5200511B5C /* ReactNativeIcons.xcodeproj */; 117 | proxyType = 2; 118 | remoteGlobalIDString = 2F5A3EB81ACDBF8000439386; 119 | remoteInfo = ReactNativeIcons; 120 | }; 121 | CEDE421A1B633BC800511B5C /* PBXContainerItemProxy */ = { 122 | isa = PBXContainerItemProxy; 123 | containerPortal = CEDE42141B633BC800511B5C /* RNSvg.xcodeproj */; 124 | proxyType = 2; 125 | remoteGlobalIDString = 134814201AA4EA6300B7C361; 126 | remoteInfo = RNSvg; 127 | }; 128 | /* End PBXContainerItemProxy section */ 129 | 130 | /* Begin PBXFileReference section */ 131 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = main.jsbundle; path = iOS/main.jsbundle; sourceTree = ""; }; 132 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = ""; }; 133 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = ""; }; 134 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = ""; }; 135 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = ""; }; 136 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = ""; }; 137 | 00E356EE1AD99517003FC87E /* react_native_animation_examplesTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = react_native_animation_examplesTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; }; 138 | 00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 139 | 00E356F21AD99517003FC87E /* react_native_animation_examplesTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = react_native_animation_examplesTests.m; sourceTree = ""; }; 140 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = ""; }; 141 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = ""; }; 142 | 13B07F961A680F5B00A75B9A /* react_native_animation_examples.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = react_native_animation_examples.app; sourceTree = BUILT_PRODUCTS_DIR; }; 143 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = iOS/AppDelegate.h; sourceTree = ""; }; 144 | 13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = iOS/AppDelegate.m; sourceTree = ""; }; 145 | 13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = ""; }; 146 | 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = iOS/Images.xcassets; sourceTree = ""; }; 147 | 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = iOS/Info.plist; sourceTree = ""; }; 148 | 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = iOS/main.m; sourceTree = ""; }; 149 | 146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "node_modules/react-native/React/React.xcodeproj"; sourceTree = ""; }; 150 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; }; 151 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; }; 152 | CEDE410E1B5D6D5200511B5C /* ReactNativeIcons.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactNativeIcons.xcodeproj; path = "node_modules/react-native-icons/ios/ReactNativeIcons.xcodeproj"; sourceTree = ""; }; 153 | CEDE411F1B5D6DF800511B5C /* FontAwesome.otf */ = {isa = PBXFileReference; lastKnownFileType = file; name = FontAwesome.otf; path = "node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/FontAwesome.otf"; sourceTree = ""; }; 154 | CEDE41201B5D6DF800511B5C /* foundation-icons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "foundation-icons.ttf"; path = "node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/foundation-icons.ttf"; sourceTree = ""; }; 155 | CEDE41211B5D6DF800511B5C /* ionicons.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = ionicons.ttf; path = "node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf"; sourceTree = ""; }; 156 | CEDE41221B5D6DF800511B5C /* zocial-regular-webfont.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "zocial-regular-webfont.ttf"; path = "node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/zocial-regular-webfont.ttf"; sourceTree = ""; }; 157 | CEDE42141B633BC800511B5C /* RNSvg.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNSvg.xcodeproj; path = "../react-native-svg/Libraries/RNSvg.xcodeproj"; sourceTree = ""; }; 158 | CEDE421D1B633BE700511B5C /* libxml2.2.dylib */ = {isa = PBXFileReference; lastKnownFileType = "compiled.mach-o.dylib"; name = libxml2.2.dylib; path = usr/lib/libxml2.2.dylib; sourceTree = SDKROOT; }; 159 | CEDE421F1B633C7F00511B5C /* libSVGKit-iOS.1.2.0.a */ = {isa = PBXFileReference; lastKnownFileType = archive.ar; name = "libSVGKit-iOS.1.2.0.a"; path = "../../Library/Developer/Xcode/DerivedData/react_native_animation_examples-bnbrxxasbuldvvgkbzseupqtjpnn/Build/Products/Debug-iphoneos/libSVGKit-iOS.1.2.0.a"; sourceTree = ""; }; 160 | /* End PBXFileReference section */ 161 | 162 | /* Begin PBXFrameworksBuildPhase section */ 163 | 00E356EB1AD99517003FC87E /* Frameworks */ = { 164 | isa = PBXFrameworksBuildPhase; 165 | buildActionMask = 2147483647; 166 | files = ( 167 | ); 168 | runOnlyForDeploymentPostprocessing = 0; 169 | }; 170 | 13B07F8C1A680F5B00A75B9A /* Frameworks */ = { 171 | isa = PBXFrameworksBuildPhase; 172 | buildActionMask = 2147483647; 173 | files = ( 174 | CEDE42201B633C7F00511B5C /* libSVGKit-iOS.1.2.0.a in Frameworks */, 175 | CEDE421E1B633BE700511B5C /* libxml2.2.dylib in Frameworks */, 176 | CEDE421C1B633BD500511B5C /* libRNSvg.a in Frameworks */, 177 | CEDE411E1B5D6D8900511B5C /* libReactNativeIcons.a in Frameworks */, 178 | 146834051AC3E58100842450 /* libReact.a in Frameworks */, 179 | 00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */, 180 | 00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */, 181 | 00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */, 182 | 133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */, 183 | 00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */, 184 | 139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */, 185 | 832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */, 186 | 00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */, 187 | 139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */, 188 | ); 189 | runOnlyForDeploymentPostprocessing = 0; 190 | }; 191 | /* End PBXFrameworksBuildPhase section */ 192 | 193 | /* Begin PBXGroup section */ 194 | 00C302A81ABCB8CE00DB3ED1 /* Products */ = { 195 | isa = PBXGroup; 196 | children = ( 197 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */, 198 | ); 199 | name = Products; 200 | sourceTree = ""; 201 | }; 202 | 00C302B61ABCB90400DB3ED1 /* Products */ = { 203 | isa = PBXGroup; 204 | children = ( 205 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */, 206 | ); 207 | name = Products; 208 | sourceTree = ""; 209 | }; 210 | 00C302BC1ABCB91800DB3ED1 /* Products */ = { 211 | isa = PBXGroup; 212 | children = ( 213 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */, 214 | ); 215 | name = Products; 216 | sourceTree = ""; 217 | }; 218 | 00C302D41ABCB9D200DB3ED1 /* Products */ = { 219 | isa = PBXGroup; 220 | children = ( 221 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */, 222 | ); 223 | name = Products; 224 | sourceTree = ""; 225 | }; 226 | 00C302E01ABCB9EE00DB3ED1 /* Products */ = { 227 | isa = PBXGroup; 228 | children = ( 229 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */, 230 | ); 231 | name = Products; 232 | sourceTree = ""; 233 | }; 234 | 00E356EF1AD99517003FC87E /* react_native_animation_examplesTests */ = { 235 | isa = PBXGroup; 236 | children = ( 237 | 00E356F21AD99517003FC87E /* react_native_animation_examplesTests.m */, 238 | 00E356F01AD99517003FC87E /* Supporting Files */, 239 | ); 240 | path = react_native_animation_examplesTests; 241 | sourceTree = ""; 242 | }; 243 | 00E356F01AD99517003FC87E /* Supporting Files */ = { 244 | isa = PBXGroup; 245 | children = ( 246 | 00E356F11AD99517003FC87E /* Info.plist */, 247 | ); 248 | name = "Supporting Files"; 249 | sourceTree = ""; 250 | }; 251 | 139105B71AF99BAD00B5F7CC /* Products */ = { 252 | isa = PBXGroup; 253 | children = ( 254 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */, 255 | ); 256 | name = Products; 257 | sourceTree = ""; 258 | }; 259 | 139FDEE71B06529A00C62182 /* Products */ = { 260 | isa = PBXGroup; 261 | children = ( 262 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */, 263 | ); 264 | name = Products; 265 | sourceTree = ""; 266 | }; 267 | 13B07FAE1A68108700A75B9A /* react_native_animation_examples */ = { 268 | isa = PBXGroup; 269 | children = ( 270 | 008F07F21AC5B25A0029DE68 /* main.jsbundle */, 271 | 13B07FAF1A68108700A75B9A /* AppDelegate.h */, 272 | 13B07FB01A68108700A75B9A /* AppDelegate.m */, 273 | 13B07FB51A68108700A75B9A /* Images.xcassets */, 274 | 13B07FB61A68108700A75B9A /* Info.plist */, 275 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */, 276 | 13B07FB71A68108700A75B9A /* main.m */, 277 | ); 278 | name = react_native_animation_examples; 279 | sourceTree = ""; 280 | }; 281 | 146834001AC3E56700842450 /* Products */ = { 282 | isa = PBXGroup; 283 | children = ( 284 | 146834041AC3E56700842450 /* libReact.a */, 285 | ); 286 | name = Products; 287 | sourceTree = ""; 288 | }; 289 | 78C398B11ACF4ADC00677621 /* Products */ = { 290 | isa = PBXGroup; 291 | children = ( 292 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */, 293 | ); 294 | name = Products; 295 | sourceTree = ""; 296 | }; 297 | 832341AE1AAA6A7D00B99B32 /* Libraries */ = { 298 | isa = PBXGroup; 299 | children = ( 300 | CEDE42141B633BC800511B5C /* RNSvg.xcodeproj */, 301 | CEDE410E1B5D6D5200511B5C /* ReactNativeIcons.xcodeproj */, 302 | 146833FF1AC3E56700842450 /* React.xcodeproj */, 303 | 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */, 304 | 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */, 305 | 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */, 306 | 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */, 307 | 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */, 308 | 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */, 309 | 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */, 310 | 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */, 311 | 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */, 312 | ); 313 | name = Libraries; 314 | sourceTree = ""; 315 | }; 316 | 832341B11AAA6A8300B99B32 /* Products */ = { 317 | isa = PBXGroup; 318 | children = ( 319 | 832341B51AAA6A8300B99B32 /* libRCTText.a */, 320 | ); 321 | name = Products; 322 | sourceTree = ""; 323 | }; 324 | 83CBB9F61A601CBA00E9B192 = { 325 | isa = PBXGroup; 326 | children = ( 327 | CEDE421F1B633C7F00511B5C /* libSVGKit-iOS.1.2.0.a */, 328 | CEDE421D1B633BE700511B5C /* libxml2.2.dylib */, 329 | CEDE411F1B5D6DF800511B5C /* FontAwesome.otf */, 330 | CEDE41201B5D6DF800511B5C /* foundation-icons.ttf */, 331 | CEDE41211B5D6DF800511B5C /* ionicons.ttf */, 332 | CEDE41221B5D6DF800511B5C /* zocial-regular-webfont.ttf */, 333 | 13B07FAE1A68108700A75B9A /* react_native_animation_examples */, 334 | 832341AE1AAA6A7D00B99B32 /* Libraries */, 335 | 00E356EF1AD99517003FC87E /* react_native_animation_examplesTests */, 336 | 83CBBA001A601CBA00E9B192 /* Products */, 337 | ); 338 | indentWidth = 2; 339 | sourceTree = ""; 340 | tabWidth = 2; 341 | }; 342 | 83CBBA001A601CBA00E9B192 /* Products */ = { 343 | isa = PBXGroup; 344 | children = ( 345 | 13B07F961A680F5B00A75B9A /* react_native_animation_examples.app */, 346 | 00E356EE1AD99517003FC87E /* react_native_animation_examplesTests.xctest */, 347 | ); 348 | name = Products; 349 | sourceTree = ""; 350 | }; 351 | CEDE410F1B5D6D5200511B5C /* Products */ = { 352 | isa = PBXGroup; 353 | children = ( 354 | CEDE411D1B5D6D5300511B5C /* libReactNativeIcons.a */, 355 | ); 356 | name = Products; 357 | sourceTree = ""; 358 | }; 359 | CEDE42151B633BC800511B5C /* Products */ = { 360 | isa = PBXGroup; 361 | children = ( 362 | CEDE421B1B633BC800511B5C /* libRNSvg.a */, 363 | ); 364 | name = Products; 365 | sourceTree = ""; 366 | }; 367 | /* End PBXGroup section */ 368 | 369 | /* Begin PBXNativeTarget section */ 370 | 00E356ED1AD99517003FC87E /* react_native_animation_examplesTests */ = { 371 | isa = PBXNativeTarget; 372 | buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "react_native_animation_examplesTests" */; 373 | buildPhases = ( 374 | 00E356EA1AD99517003FC87E /* Sources */, 375 | 00E356EB1AD99517003FC87E /* Frameworks */, 376 | 00E356EC1AD99517003FC87E /* Resources */, 377 | ); 378 | buildRules = ( 379 | ); 380 | dependencies = ( 381 | 00E356F51AD99517003FC87E /* PBXTargetDependency */, 382 | ); 383 | name = react_native_animation_examplesTests; 384 | productName = react_native_animation_examplesTests; 385 | productReference = 00E356EE1AD99517003FC87E /* react_native_animation_examplesTests.xctest */; 386 | productType = "com.apple.product-type.bundle.unit-test"; 387 | }; 388 | 13B07F861A680F5B00A75B9A /* react_native_animation_examples */ = { 389 | isa = PBXNativeTarget; 390 | buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "react_native_animation_examples" */; 391 | buildPhases = ( 392 | 13B07F871A680F5B00A75B9A /* Sources */, 393 | 13B07F8C1A680F5B00A75B9A /* Frameworks */, 394 | 13B07F8E1A680F5B00A75B9A /* Resources */, 395 | ); 396 | buildRules = ( 397 | ); 398 | dependencies = ( 399 | ); 400 | name = react_native_animation_examples; 401 | productName = "Hello World"; 402 | productReference = 13B07F961A680F5B00A75B9A /* react_native_animation_examples.app */; 403 | productType = "com.apple.product-type.application"; 404 | }; 405 | /* End PBXNativeTarget section */ 406 | 407 | /* Begin PBXProject section */ 408 | 83CBB9F71A601CBA00E9B192 /* Project object */ = { 409 | isa = PBXProject; 410 | attributes = { 411 | LastUpgradeCheck = 0610; 412 | ORGANIZATIONNAME = Facebook; 413 | TargetAttributes = { 414 | 00E356ED1AD99517003FC87E = { 415 | CreatedOnToolsVersion = 6.2; 416 | TestTargetID = 13B07F861A680F5B00A75B9A; 417 | }; 418 | }; 419 | }; 420 | buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "react_native_animation_examples" */; 421 | compatibilityVersion = "Xcode 3.2"; 422 | developmentRegion = English; 423 | hasScannedForEncodings = 0; 424 | knownRegions = ( 425 | en, 426 | Base, 427 | ); 428 | mainGroup = 83CBB9F61A601CBA00E9B192; 429 | productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */; 430 | projectDirPath = ""; 431 | projectReferences = ( 432 | { 433 | ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */; 434 | ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */; 435 | }, 436 | { 437 | ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */; 438 | ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */; 439 | }, 440 | { 441 | ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */; 442 | ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */; 443 | }, 444 | { 445 | ProductGroup = 78C398B11ACF4ADC00677621 /* Products */; 446 | ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */; 447 | }, 448 | { 449 | ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */; 450 | ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */; 451 | }, 452 | { 453 | ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */; 454 | ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */; 455 | }, 456 | { 457 | ProductGroup = 832341B11AAA6A8300B99B32 /* Products */; 458 | ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */; 459 | }, 460 | { 461 | ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */; 462 | ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */; 463 | }, 464 | { 465 | ProductGroup = 139FDEE71B06529A00C62182 /* Products */; 466 | ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */; 467 | }, 468 | { 469 | ProductGroup = 146834001AC3E56700842450 /* Products */; 470 | ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */; 471 | }, 472 | { 473 | ProductGroup = CEDE410F1B5D6D5200511B5C /* Products */; 474 | ProjectRef = CEDE410E1B5D6D5200511B5C /* ReactNativeIcons.xcodeproj */; 475 | }, 476 | { 477 | ProductGroup = CEDE42151B633BC800511B5C /* Products */; 478 | ProjectRef = CEDE42141B633BC800511B5C /* RNSvg.xcodeproj */; 479 | }, 480 | ); 481 | projectRoot = ""; 482 | targets = ( 483 | 13B07F861A680F5B00A75B9A /* react_native_animation_examples */, 484 | 00E356ED1AD99517003FC87E /* react_native_animation_examplesTests */, 485 | ); 486 | }; 487 | /* End PBXProject section */ 488 | 489 | /* Begin PBXReferenceProxy section */ 490 | 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = { 491 | isa = PBXReferenceProxy; 492 | fileType = archive.ar; 493 | path = libRCTActionSheet.a; 494 | remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */; 495 | sourceTree = BUILT_PRODUCTS_DIR; 496 | }; 497 | 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = { 498 | isa = PBXReferenceProxy; 499 | fileType = archive.ar; 500 | path = libRCTGeolocation.a; 501 | remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */; 502 | sourceTree = BUILT_PRODUCTS_DIR; 503 | }; 504 | 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = { 505 | isa = PBXReferenceProxy; 506 | fileType = archive.ar; 507 | path = libRCTImage.a; 508 | remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */; 509 | sourceTree = BUILT_PRODUCTS_DIR; 510 | }; 511 | 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = { 512 | isa = PBXReferenceProxy; 513 | fileType = archive.ar; 514 | path = libRCTNetwork.a; 515 | remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */; 516 | sourceTree = BUILT_PRODUCTS_DIR; 517 | }; 518 | 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = { 519 | isa = PBXReferenceProxy; 520 | fileType = archive.ar; 521 | path = libRCTVibration.a; 522 | remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */; 523 | sourceTree = BUILT_PRODUCTS_DIR; 524 | }; 525 | 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = { 526 | isa = PBXReferenceProxy; 527 | fileType = archive.ar; 528 | path = libRCTSettings.a; 529 | remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */; 530 | sourceTree = BUILT_PRODUCTS_DIR; 531 | }; 532 | 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = { 533 | isa = PBXReferenceProxy; 534 | fileType = archive.ar; 535 | path = libRCTWebSocket.a; 536 | remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */; 537 | sourceTree = BUILT_PRODUCTS_DIR; 538 | }; 539 | 146834041AC3E56700842450 /* libReact.a */ = { 540 | isa = PBXReferenceProxy; 541 | fileType = archive.ar; 542 | path = libReact.a; 543 | remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */; 544 | sourceTree = BUILT_PRODUCTS_DIR; 545 | }; 546 | 78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = { 547 | isa = PBXReferenceProxy; 548 | fileType = archive.ar; 549 | path = libRCTLinking.a; 550 | remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */; 551 | sourceTree = BUILT_PRODUCTS_DIR; 552 | }; 553 | 832341B51AAA6A8300B99B32 /* libRCTText.a */ = { 554 | isa = PBXReferenceProxy; 555 | fileType = archive.ar; 556 | path = libRCTText.a; 557 | remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */; 558 | sourceTree = BUILT_PRODUCTS_DIR; 559 | }; 560 | CEDE411D1B5D6D5300511B5C /* libReactNativeIcons.a */ = { 561 | isa = PBXReferenceProxy; 562 | fileType = archive.ar; 563 | path = libReactNativeIcons.a; 564 | remoteRef = CEDE411C1B5D6D5300511B5C /* PBXContainerItemProxy */; 565 | sourceTree = BUILT_PRODUCTS_DIR; 566 | }; 567 | CEDE421B1B633BC800511B5C /* libRNSvg.a */ = { 568 | isa = PBXReferenceProxy; 569 | fileType = archive.ar; 570 | path = libRNSvg.a; 571 | remoteRef = CEDE421A1B633BC800511B5C /* PBXContainerItemProxy */; 572 | sourceTree = BUILT_PRODUCTS_DIR; 573 | }; 574 | /* End PBXReferenceProxy section */ 575 | 576 | /* Begin PBXResourcesBuildPhase section */ 577 | 00E356EC1AD99517003FC87E /* Resources */ = { 578 | isa = PBXResourcesBuildPhase; 579 | buildActionMask = 2147483647; 580 | files = ( 581 | ); 582 | runOnlyForDeploymentPostprocessing = 0; 583 | }; 584 | 13B07F8E1A680F5B00A75B9A /* Resources */ = { 585 | isa = PBXResourcesBuildPhase; 586 | buildActionMask = 2147483647; 587 | files = ( 588 | CEDE41231B5D6DF800511B5C /* FontAwesome.otf in Resources */, 589 | CEDE41241B5D6DF800511B5C /* foundation-icons.ttf in Resources */, 590 | CEDE41251B5D6DF800511B5C /* ionicons.ttf in Resources */, 591 | CEDE41261B5D6DF800511B5C /* zocial-regular-webfont.ttf in Resources */, 592 | 008F07F31AC5B25A0029DE68 /* main.jsbundle in Resources */, 593 | 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 594 | 13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */, 595 | ); 596 | runOnlyForDeploymentPostprocessing = 0; 597 | }; 598 | /* End PBXResourcesBuildPhase section */ 599 | 600 | /* Begin PBXSourcesBuildPhase section */ 601 | 00E356EA1AD99517003FC87E /* Sources */ = { 602 | isa = PBXSourcesBuildPhase; 603 | buildActionMask = 2147483647; 604 | files = ( 605 | 00E356F31AD99517003FC87E /* react_native_animation_examplesTests.m in Sources */, 606 | ); 607 | runOnlyForDeploymentPostprocessing = 0; 608 | }; 609 | 13B07F871A680F5B00A75B9A /* Sources */ = { 610 | isa = PBXSourcesBuildPhase; 611 | buildActionMask = 2147483647; 612 | files = ( 613 | 13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */, 614 | 13B07FC11A68108700A75B9A /* main.m in Sources */, 615 | ); 616 | runOnlyForDeploymentPostprocessing = 0; 617 | }; 618 | /* End PBXSourcesBuildPhase section */ 619 | 620 | /* Begin PBXTargetDependency section */ 621 | 00E356F51AD99517003FC87E /* PBXTargetDependency */ = { 622 | isa = PBXTargetDependency; 623 | target = 13B07F861A680F5B00A75B9A /* react_native_animation_examples */; 624 | targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */; 625 | }; 626 | /* End PBXTargetDependency section */ 627 | 628 | /* Begin PBXVariantGroup section */ 629 | 13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = { 630 | isa = PBXVariantGroup; 631 | children = ( 632 | 13B07FB21A68108700A75B9A /* Base */, 633 | ); 634 | name = LaunchScreen.xib; 635 | path = iOS; 636 | sourceTree = ""; 637 | }; 638 | /* End PBXVariantGroup section */ 639 | 640 | /* Begin XCBuildConfiguration section */ 641 | 00E356F61AD99517003FC87E /* Debug */ = { 642 | isa = XCBuildConfiguration; 643 | buildSettings = { 644 | BUNDLE_LOADER = "$(TEST_HOST)"; 645 | FRAMEWORK_SEARCH_PATHS = ( 646 | "$(SDKROOT)/Developer/Library/Frameworks", 647 | "$(inherited)", 648 | ); 649 | GCC_PREPROCESSOR_DEFINITIONS = ( 650 | "DEBUG=1", 651 | "$(inherited)", 652 | ); 653 | INFOPLIST_FILE = react_native_animation_examplesTests/Info.plist; 654 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 655 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 656 | PRODUCT_NAME = "$(TARGET_NAME)"; 657 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/react_native_animation_examples.app/react_native_animation_examples"; 658 | }; 659 | name = Debug; 660 | }; 661 | 00E356F71AD99517003FC87E /* Release */ = { 662 | isa = XCBuildConfiguration; 663 | buildSettings = { 664 | BUNDLE_LOADER = "$(TEST_HOST)"; 665 | COPY_PHASE_STRIP = NO; 666 | FRAMEWORK_SEARCH_PATHS = ( 667 | "$(SDKROOT)/Developer/Library/Frameworks", 668 | "$(inherited)", 669 | ); 670 | INFOPLIST_FILE = react_native_animation_examplesTests/Info.plist; 671 | IPHONEOS_DEPLOYMENT_TARGET = 8.2; 672 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks"; 673 | PRODUCT_NAME = "$(TARGET_NAME)"; 674 | TEST_HOST = "$(BUILT_PRODUCTS_DIR)/react_native_animation_examples.app/react_native_animation_examples"; 675 | }; 676 | name = Release; 677 | }; 678 | 13B07F941A680F5B00A75B9A /* Debug */ = { 679 | isa = XCBuildConfiguration; 680 | buildSettings = { 681 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 682 | HEADER_SEARCH_PATHS = ( 683 | "$(inherited)", 684 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 685 | "$(SRCROOT)/node_modules/react-native/React/**", 686 | ); 687 | INFOPLIST_FILE = iOS/Info.plist; 688 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 689 | LIBRARY_SEARCH_PATHS = ( 690 | "$(inherited)", 691 | "$(USER_LIBRARY_DIR)/Developer/Xcode/DerivedData/react_native_animation_examples-bnbrxxasbuldvvgkbzseupqtjpnn/Build/Products/Debug-iphoneos", 692 | ); 693 | OTHER_LDFLAGS = "-ObjC"; 694 | PRODUCT_NAME = react_native_animation_examples; 695 | }; 696 | name = Debug; 697 | }; 698 | 13B07F951A680F5B00A75B9A /* Release */ = { 699 | isa = XCBuildConfiguration; 700 | buildSettings = { 701 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 702 | HEADER_SEARCH_PATHS = ( 703 | "$(inherited)", 704 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 705 | "$(SRCROOT)/node_modules/react-native/React/**", 706 | ); 707 | INFOPLIST_FILE = iOS/Info.plist; 708 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 709 | LIBRARY_SEARCH_PATHS = ( 710 | "$(inherited)", 711 | "$(USER_LIBRARY_DIR)/Developer/Xcode/DerivedData/react_native_animation_examples-bnbrxxasbuldvvgkbzseupqtjpnn/Build/Products/Debug-iphoneos", 712 | ); 713 | OTHER_LDFLAGS = "-ObjC"; 714 | PRODUCT_NAME = react_native_animation_examples; 715 | }; 716 | name = Release; 717 | }; 718 | 83CBBA201A601CBA00E9B192 /* Debug */ = { 719 | isa = XCBuildConfiguration; 720 | buildSettings = { 721 | ALWAYS_SEARCH_USER_PATHS = NO; 722 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 723 | CLANG_CXX_LIBRARY = "libc++"; 724 | CLANG_ENABLE_MODULES = YES; 725 | CLANG_ENABLE_OBJC_ARC = YES; 726 | CLANG_WARN_BOOL_CONVERSION = YES; 727 | CLANG_WARN_CONSTANT_CONVERSION = YES; 728 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 729 | CLANG_WARN_EMPTY_BODY = YES; 730 | CLANG_WARN_ENUM_CONVERSION = YES; 731 | CLANG_WARN_INT_CONVERSION = YES; 732 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 733 | CLANG_WARN_UNREACHABLE_CODE = YES; 734 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 735 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 736 | COPY_PHASE_STRIP = NO; 737 | ENABLE_STRICT_OBJC_MSGSEND = YES; 738 | GCC_C_LANGUAGE_STANDARD = gnu99; 739 | GCC_DYNAMIC_NO_PIC = NO; 740 | GCC_OPTIMIZATION_LEVEL = 0; 741 | GCC_PREPROCESSOR_DEFINITIONS = ( 742 | "DEBUG=1", 743 | "$(inherited)", 744 | ); 745 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 746 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 747 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 748 | GCC_WARN_UNDECLARED_SELECTOR = YES; 749 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 750 | GCC_WARN_UNUSED_FUNCTION = YES; 751 | GCC_WARN_UNUSED_VARIABLE = YES; 752 | HEADER_SEARCH_PATHS = ( 753 | "$(inherited)", 754 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 755 | "$(SRCROOT)/node_modules/react-native/React/**", 756 | ); 757 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 758 | MTL_ENABLE_DEBUG_INFO = YES; 759 | ONLY_ACTIVE_ARCH = YES; 760 | SDKROOT = iphoneos; 761 | }; 762 | name = Debug; 763 | }; 764 | 83CBBA211A601CBA00E9B192 /* Release */ = { 765 | isa = XCBuildConfiguration; 766 | buildSettings = { 767 | ALWAYS_SEARCH_USER_PATHS = NO; 768 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 769 | CLANG_CXX_LIBRARY = "libc++"; 770 | CLANG_ENABLE_MODULES = YES; 771 | CLANG_ENABLE_OBJC_ARC = YES; 772 | CLANG_WARN_BOOL_CONVERSION = YES; 773 | CLANG_WARN_CONSTANT_CONVERSION = YES; 774 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 775 | CLANG_WARN_EMPTY_BODY = YES; 776 | CLANG_WARN_ENUM_CONVERSION = YES; 777 | CLANG_WARN_INT_CONVERSION = YES; 778 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 779 | CLANG_WARN_UNREACHABLE_CODE = YES; 780 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 781 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 782 | COPY_PHASE_STRIP = YES; 783 | ENABLE_NS_ASSERTIONS = NO; 784 | ENABLE_STRICT_OBJC_MSGSEND = YES; 785 | GCC_C_LANGUAGE_STANDARD = gnu99; 786 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 787 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 788 | GCC_WARN_UNDECLARED_SELECTOR = YES; 789 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 790 | GCC_WARN_UNUSED_FUNCTION = YES; 791 | GCC_WARN_UNUSED_VARIABLE = YES; 792 | HEADER_SEARCH_PATHS = ( 793 | "$(inherited)", 794 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 795 | "$(SRCROOT)/node_modules/react-native/React/**", 796 | ); 797 | IPHONEOS_DEPLOYMENT_TARGET = 7.0; 798 | MTL_ENABLE_DEBUG_INFO = NO; 799 | SDKROOT = iphoneos; 800 | VALIDATE_PRODUCT = YES; 801 | }; 802 | name = Release; 803 | }; 804 | /* End XCBuildConfiguration section */ 805 | 806 | /* Begin XCConfigurationList section */ 807 | 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "react_native_animation_examplesTests" */ = { 808 | isa = XCConfigurationList; 809 | buildConfigurations = ( 810 | 00E356F61AD99517003FC87E /* Debug */, 811 | 00E356F71AD99517003FC87E /* Release */, 812 | ); 813 | defaultConfigurationIsVisible = 0; 814 | defaultConfigurationName = Release; 815 | }; 816 | 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "react_native_animation_examples" */ = { 817 | isa = XCConfigurationList; 818 | buildConfigurations = ( 819 | 13B07F941A680F5B00A75B9A /* Debug */, 820 | 13B07F951A680F5B00A75B9A /* Release */, 821 | ); 822 | defaultConfigurationIsVisible = 0; 823 | defaultConfigurationName = Release; 824 | }; 825 | 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "react_native_animation_examples" */ = { 826 | isa = XCConfigurationList; 827 | buildConfigurations = ( 828 | 83CBBA201A601CBA00E9B192 /* Debug */, 829 | 83CBBA211A601CBA00E9B192 /* Release */, 830 | ); 831 | defaultConfigurationIsVisible = 0; 832 | defaultConfigurationName = Release; 833 | }; 834 | /* End XCConfigurationList section */ 835 | }; 836 | rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */; 837 | } 838 | -------------------------------------------------------------------------------- /react_native_animation_examples.xcodeproj/xcshareddata/xcschemes/react_native_animation_examples.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 | -------------------------------------------------------------------------------- /react_native_animation_examplesTests/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 | -------------------------------------------------------------------------------- /react_native_animation_examplesTests/react_native_animation_examplesTests.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 "RCTAssert.h" 14 | #import "RCTRedBox.h" 15 | #import "RCTRootView.h" 16 | 17 | #define TIMEOUT_SECONDS 240 18 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 19 | 20 | @interface react_native_animation_examplesTests : XCTestCase 21 | 22 | @end 23 | 24 | @implementation react_native_animation_examplesTests 25 | 26 | 27 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 28 | { 29 | if (test(view)) { 30 | return YES; 31 | } 32 | for (UIView *subview in [view subviews]) { 33 | if ([self findSubviewInView:subview matching:test]) { 34 | return YES; 35 | } 36 | } 37 | return NO; 38 | } 39 | 40 | - (void)testRendersWelcomeScreen { 41 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 42 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 43 | BOOL foundElement = NO; 44 | NSString *redboxError = nil; 45 | 46 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 47 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 49 | 50 | redboxError = [[RCTRedBox sharedInstance] currentErrorMessage]; 51 | 52 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 53 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 54 | return YES; 55 | } 56 | return NO; 57 | }]; 58 | } 59 | 60 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 61 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 62 | } 63 | 64 | 65 | @end 66 | --------------------------------------------------------------------------------