status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Initial commit

This commit is contained in:
Ben Alpert 2015-01-29 17:10:49 -08:00
commit a15603d8f1
382 changed files with 39183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintignore Normal file
View File

@ -0,0 +1,3 @@
**/node_modules/**/.*js
**/staticBundle.js
**/main.js

192
.eslintrc Normal file
View File

@ -0,0 +1,192 @@
{
"env": {
"jasmine": true,
},
// Map from global var to bool specifying if it can be redefined
"globals": {
"__DEV__": true,
"__dirname": false,
"__fbBatchedBridgeConfig": false,
"cancelAnimationFrame": false,
"clearImmediate": true,
"clearInterval": false,
"clearTimeout": false,
"console": false,
"document": false,
"escape": false,
"exports": false,
"global": false,
"jest": false,
"Map": true,
"module": false,
"process": false,
"Promise": false,
"requestAnimationFrame": true,
"require": false,
"Set": true,
"setImmediate": true,
"setInterval": false,
"setTimeout": false,
"window": false,
"XMLHttpRequest": false
},
"rules": {
"no-cond-assign": 1, // disallow assignment in conditional expressions
"no-console": 0, // disallow use of console (off by default in the node environment)
"no-constant-condition": 1, // disallow use of constant expressions in conditions
"no-comma-dangle": 0, // disallow trailing commas in object literals
"no-control-regex": 1, // disallow control characters in regular expressions
"no-debugger": 1, // disallow use of debugger
"no-dupe-keys": 1, // disallow duplicate keys when creating object literals
"no-empty": 0, // disallow empty statements
"no-empty-class": 1, // disallow the use of empty character classes in regular expressions
"no-ex-assign": 1, // disallow assigning to the exception in a catch block
"no-extra-boolean-cast": 1, // disallow double-negation boolean casts in a boolean context
"no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
"no-extra-semi": 1, // disallow unnecessary semicolons
"no-func-assign": 1, // disallow overwriting functions written as function declarations
"no-inner-declarations": 0, // disallow function or variable declarations in nested blocks
"no-invalid-regexp": 1, // disallow invalid regular expression strings in the RegExp constructor
"no-negated-in-lhs": 1, // disallow negation of the left operand of an in expression
"no-obj-calls": 1, // disallow the use of object properties of the global object (Math and JSON) as functions
"no-regex-spaces": 1, // disallow multiple spaces in a regular expression literal
"no-reserved-keys": 0, // disallow reserved words being used as object literal keys (off by default)
"no-sparse-arrays": 1, // disallow sparse arrays
"no-unreachable": 1, // disallow unreachable statements after a return, throw, continue, or break statement
"use-isnan": 1, // disallow comparisons with the value NaN
"valid-jsdoc": 0, // Ensure JSDoc comments are valid (off by default)
"valid-typeof": 1, // Ensure that the results of typeof are compared against a valid string
// Best Practices
// These are rules designed to prevent you from making mistakes. They either prescribe a better way of doing something or help you avoid footguns.
"block-scoped-var": 0, // treat var statements as if they were block scoped (off by default)
"complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
"consistent-return": 0, // require return statements to either always or never specify values
"curly": 1, // specify curly brace conventions for all control statements
"default-case": 0, // require default case in switch statements (off by default)
"dot-notation": 1, // encourages use of dot notation whenever possible
"eqeqeq": 1, // require the use of === and !==
"guard-for-in": 0, // make sure for-in loops have an if statement (off by default)
"no-alert": 1, // disallow the use of alert, confirm, and prompt
"no-caller": 1, // disallow use of arguments.caller or arguments.callee
"no-div-regex": 1, // disallow division operators explicitly at beginning of regular expression (off by default)
"no-else-return": 0, // disallow else after a return in an if (off by default)
"no-empty-label": 1, // disallow use of labels for anything other then loops and switches
"no-eq-null": 0, // disallow comparisons to null without a type-checking operator (off by default)
"no-eval": 1, // disallow use of eval()
"no-extend-native": 1, // disallow adding to native types
"no-extra-bind": 1, // disallow unnecessary function binding
"no-fallthrough": 1, // disallow fallthrough of case statements
"no-floating-decimal": 1, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
"no-implied-eval": 1, // disallow use of eval()-like methods
"no-labels": 1, // disallow use of labeled statements
"no-iterator": 1, // disallow usage of __iterator__ property
"no-lone-blocks": 1, // disallow unnecessary nested blocks
"no-loop-func": 0, // disallow creation of functions within loops
"no-multi-str": 0, // disallow use of multiline strings
"no-native-reassign": 0, // disallow reassignments of native objects
"no-new": 1, // disallow use of new operator when not part of the assignment or comparison
"no-new-func": 1, // disallow use of new operator for Function object
"no-new-wrappers": 1, // disallows creating new instances of String,Number, and Boolean
"no-octal": 1, // disallow use of octal literals
"no-octal-escape": 1, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
"no-proto": 1, // disallow usage of __proto__ property
"no-redeclare": 0, // disallow declaring the same variable more then once
"no-return-assign": 1, // disallow use of assignment in return statement
"no-script-url": 1, // disallow use of javascript: urls.
"no-self-compare": 1, // disallow comparisons where both sides are exactly the same (off by default)
"no-sequences": 1, // disallow use of comma operator
"no-unused-expressions": 0, // disallow usage of expressions in statement position
"no-void": 1, // disallow use of void operator (off by default)
"no-warning-comments": 0, // disallow usage of configurable warning terms in comments": 1, // e.g. TODO or FIXME (off by default)
"no-with": 1, // disallow use of the with statement
"radix": 1, // require use of the second argument for parseInt() (off by default)
"vars-on-top": 0, // requires to declare all vars on top of their containing scope (off by default)
"wrap-iife": 0, // require immediate function invocation to be wrapped in parentheses (off by default)
"yoda": 1, // require or disallow Yoda conditions
// Strict Mode
// These rules relate to using strict mode.
"global-strict": [2, "always"], // require or disallow the "use strict" pragma in the global scope (off by default in the node environment)
"no-extra-strict": 1, // disallow unnecessary use of "use strict"; when already in strict mode
"strict": 0, // require that all functions are run in strict mode
// Variables
// These rules have to do with variable declarations.
"no-catch-shadow": 1, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
"no-delete-var": 1, // disallow deletion of variables
"no-label-var": 1, // disallow labels that share a name with a variable
"no-shadow": 1, // disallow declaration of variables already declared in the outer scope
"no-shadow-restricted-names": 1, // disallow shadowing of names such as arguments
"no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
"no-undefined": 0, // disallow use of undefined variable (off by default)
"no-undef-init": 1, // disallow use of undefined when initializing variables
"no-unused-vars": [1, {"vars": "all", "args": "none"}], // disallow declaration of variables that are not used in the code
"no-use-before-define": 0, // disallow use of variables before they are defined
// Node.js
// These rules are specific to JavaScript running on Node.js.
"handle-callback-err": 1, // enforces error handling in callbacks (off by default) (on by default in the node environment)
"no-mixed-requires": 1, // disallow mixing regular variable and require declarations (off by default) (on by default in the node environment)
"no-new-require": 1, // disallow use of new operator with the require function (off by default) (on by default in the node environment)
"no-path-concat": 1, // disallow string concatenation with __dirname and __filename (off by default) (on by default in the node environment)
"no-process-exit": 0, // disallow process.exit() (on by default in the node environment)
"no-restricted-modules": 1, // restrict usage of specified node modules (off by default)
"no-sync": 0, // disallow use of synchronous methods (off by default)
// Stylistic Issues
// These rules are purely matters of style and are quite subjective.
"key-spacing": 0,
"comma-spacing": 0,
"no-multi-spaces": 0,
"brace-style": 0, // enforce one true brace style (off by default)
"camelcase": 0, // require camel case names
"consistent-this": 1, // enforces consistent naming when capturing the current execution context (off by default)
"eol-last": 1, // enforce newline at the end of file, with no multiple empty lines
"func-names": 0, // require function expressions to have a name (off by default)
"func-style": 0, // enforces use of function declarations or expressions (off by default)
"new-cap": 0, // require a capital letter for constructors
"new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
"no-nested-ternary": 0, // disallow nested ternary expressions (off by default)
"no-array-constructor": 1, // disallow use of the Array constructor
"no-lonely-if": 0, // disallow if as the only statement in an else block (off by default)
"no-new-object": 1, // disallow use of the Object constructor
"no-spaced-func": 1, // disallow space between function identifier and application
"no-space-before-semi": 1, // disallow space before semicolon
"no-ternary": 0, // disallow the use of ternary operators (off by default)
"no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
"no-underscore-dangle": 0, // disallow dangling underscores in identifiers
"no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens
"no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
"quotes": [1, "single"], // specify whether double or single quotes should be used
"quote-props": 0, // require quotes around object literal property names (off by default)
"semi": 1, // require or disallow use of semicolons instead of ASI
"sort-vars": 0, // sort variables within the same declaration block (off by default)
"space-after-keywords": 1, // require a space after certain keywords (off by default)
"space-in-brackets": 0, // require or disallow spaces inside brackets (off by default)
"space-in-parens": 0, // require or disallow spaces inside parentheses (off by default)
"space-infix-ops": 1, // require spaces around operators
"space-return-throw-case": 1, // require a space after return, throw, and case
"space-unary-word-ops": 1, // require a space around word operators such as typeof (off by default)
"max-nested-callbacks": 0, // specify the maximum depth callbacks can be nested (off by default)
"one-var": 0, // allow just one var statement per function (off by default)
"wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
// Legacy
// The following rules are included for compatibility with JSHint and JSLint. While the names of the rules may not match up with the JSHint/JSLint counterpart, the functionality is the same.
"max-depth": 0, // specify the maximum depth that blocks can be nested (off by default)
"max-len": 0, // specify the maximum length of a line in your program (off by default)
"max-params": 0, // limits the number of parameters that can be used in the function declaration. (off by default)
"max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
"no-bitwise": 1, // disallow use of bitwise operators (off by default)
"no-plusplus": 0 // disallow use of unary operators, ++ and -- (off by default)
}
}

29
.flowconfig Normal file
View File

@ -0,0 +1,29 @@
[ignore]
# We fork some components by platform.
.*/*.web.js
.*/*.android.js
# Some modules have their own node_modules with overlap
.*/node_modules/node-haste/.*
# Ignore react-tools where there are overlaps, but don't ignore anything that
# react-native relies on
.*/node_modules/react-tools/src/vendor/.*
.*/node_modules/react-tools/src/browser/.*
.*/node_modules/react-tools/src/core/ReactInstanceHandles.js
.*/node_modules/react-tools/src/event/.*
# Ignore jest
.*/react-native/node_modules/jest-cli/.*
# Ignore Libraries
.*/Libraries/.*
[include]
[libs]
Libraries/react-native/react-native-interface.js
[options]
module.system=haste

20
.gitignore vendored Normal file
View File

@ -0,0 +1,20 @@
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
node_modules

3
.travis.yml Normal file
View File

@ -0,0 +1,3 @@
language: node_js
node_js:
- "0.10"

10
Examples/Movies/AppDelegate.h Normal file
View File

@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
@end

44
Examples/Movies/AppDelegate.m Normal file
View File

@ -0,0 +1,44 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import "AppDelegate.h"
#import "RCTRootView.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
RCTRootView *rootView = [[RCTRootView alloc] init];
// Loading JavaScript code - uncomment the one you want.
// OPTION 1
// Load from development server. Start the server from the repository root:
//
// $ npm start
//
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
// iOS device are on the same Wi-Fi network.
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle"];
// OPTION 2
// Load from pre-bundled file on disk. To re-generate the static bundle, run
//
// $ curl http://localhost:8081/Examples/Movies/MoviesApp.includeRequire.runModule.bundle -o main.jsbundle
//
// and uncomment the next following line
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
rootView.scriptURL = jsCodeLocation;
rootView.moduleName = @"MoviesApp";
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
@end

41
Examples/Movies/Base.lproj/LaunchScreen.xib Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="14B25" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text=" Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<rect key="frame" x="20" y="439" width="441" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Movies" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<rect key="frame" x="20" y="140" width="441" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
<constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
<constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
<constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
<constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
<constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
</constraints>
<nil key="simulatedStatusBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="548" y="455"/>
</view>
</objects>
</document>

38
Examples/Movies/Images.xcassets/AppIcon.appiconset/Contents.json Normal file
View File

@ -0,0 +1,38 @@
{
"images" : [
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

38
Examples/Movies/Info.plist Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>

86
Examples/Movies/MovieCell.js Normal file
View File

@ -0,0 +1,86 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* @flow
*/
'use strict';
var React = require('react-native');
var {
Image,
PixelRatio,
StyleSheet,
Text,
TouchableHighlight,
View
} = React;
var getStyleFromScore = require('./getStyleFromScore');
var getImageSource = require('./getImageSource');
var getTextFromScore = require('./getTextFromScore');
var MovieCell = React.createClass({
render: function() {
var criticsScore = this.props.movie.ratings.critics_score;
return (
<View>
<TouchableHighlight onPress={this.props.onSelect}>
<View style={styles.row}>
<Image
source={getImageSource(this.props.movie, 'det')}
style={styles.cellImage}
/>
<View style={styles.textContainer}>
<Text style={styles.movieTitle} numberOfLines={2}>
{this.props.movie.title}
</Text>
<Text style={styles.movieYear} numberOfLines={1}>
{this.props.movie.year}
{' '}&bull;{' '}
<Text style={getStyleFromScore(criticsScore)}>
Critics {getTextFromScore(criticsScore)}
</Text>
</Text>
</View>
</View>
</TouchableHighlight>
<View style={styles.cellBorder} />
</View>
);
}
});
var styles = StyleSheet.create({
textContainer: {
flex: 1,
},
movieTitle: {
flex: 1,
fontSize: 16,
fontWeight: 'bold',
marginBottom: 2,
},
movieYear: {
color: '#999999',
fontSize: 12,
},
row: {
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'row',
padding: 5,
},
cellImage: {
backgroundColor: '#dddddd',
height: 93,
marginRight: 10,
width: 60,
},
cellBorder: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
// Trick to get the thinest line the device can display
height: 1 / PixelRatio.get(),
marginLeft: 4,
},
});
module.exports = MovieCell;

155
Examples/Movies/MovieScreen.js Normal file
View File

@ -0,0 +1,155 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* @flow
*/
'use strict';
var React = require('react-native');
var {
ExpandingText,
Image,
PixelRatio,
ScrollView,
StyleSheet,
Text,
View,
} = React;
var getImageSource = require('./getImageSource');
var getStyleFromScore = require('./getStyleFromScore');
var getTextFromScore = require('./getTextFromScore');
var MovieScreen = React.createClass({
render: function() {
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
<View style={styles.mainSection}>
<Image
source={getImageSource(this.props.movie, 'det')}
style={styles.detailsImage}
/>
<View style={styles.rightPane}>
<Text style={styles.movieTitle}>{this.props.movie.title}</Text>
<Text>{this.props.movie.year}</Text>
<View style={styles.mpaaWrapper}>
<Text style={styles.mpaaText}>
{this.props.movie.mpaa_rating}
</Text>
</View>
<Ratings ratings={this.props.movie.ratings} />
</View>
</View>
<View style={styles.separator} />
<ExpandingText
truncLength={200}
text={this.props.movie.synopsis}
/>
<View style={styles.separator} />
<Cast actors={this.props.movie.abridged_cast} />
</ScrollView>
);
},
});
var Ratings = React.createClass({
render: function() {
var criticsScore = this.props.ratings.critics_score;
var audienceScore = this.props.ratings.audience_score;
return (
<View>
<View style={styles.rating}>
<Text style={styles.ratingTitle}>Critics:</Text>
<Text style={[styles.ratingValue, getStyleFromScore(criticsScore)]}>
{getTextFromScore(criticsScore)}
</Text>
</View>
<View style={styles.rating}>
<Text style={styles.ratingTitle}>Audience:</Text>
<Text style={[styles.ratingValue, getStyleFromScore(audienceScore)]}>
{getTextFromScore(audienceScore)}
</Text>
</View>
</View>
);
},
});
var Cast = React.createClass({
render: function() {
if (!this.props.actors) {
return null;
}
return (
<View>
<Text style={styles.castTitle}>Actors</Text>
{this.props.actors.map(actor =>
<Text key={actor.name} style={styles.castActor}>
&bull; {actor.name}
</Text>
)}
</View>
);
},
});
var styles = StyleSheet.create({
contentContainer: {
padding: 10,
},
rightPane: {
justifyContent: 'space-between',
flex: 1,
},
movieTitle: {
flex: 1,
fontSize: 16,
fontWeight: 'bold',
},
rating: {
marginTop: 10,
},
ratingTitle: {
fontSize: 14,
},
ratingValue: {
fontSize: 28,
fontWeight: 'bold',
},
mpaaWrapper: {
alignSelf: 'flex-start',
borderColor: 'black',
borderWidth: 1,
paddingHorizontal: 3,
marginVertical: 5,
},
mpaaText: {
fontFamily: 'Palatino',
fontSize: 13,
fontWeight: 'bold',
},
mainSection: {
flexDirection: 'row',
},
detailsImage: {
width: 134,
height: 200,
backgroundColor: '#eaeaea',
marginRight: 10,
},
separator: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
height: 1 / PixelRatio.get(),
marginVertical: 10,
},
castTitle: {
fontWeight: 'bold',
marginBottom: 3,
},
castActor: {
marginLeft: 2,
},
});
module.exports = MovieScreen;

319
Examples/Movies/Movies.xcodeproj/project.pbxproj Normal file
View File

@ -0,0 +1,319 @@
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832348291A77B50100B55238 /* libReactKit.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
832348281A77B50100B55238 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
remoteInfo = ReactKit;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
13B07F961A680F5B00A75B9A /* Movies.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Movies.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
834D32361A76971A00F38302 /* ReactKit.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactKit.xcodeproj; path = ../../ReactKit/ReactKit.xcodeproj; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
13B07FAE1A68108700A75B9A /* Movies */ = {
isa = PBXGroup;
children = (
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */,
);
name = Movies;
sourceTree = "<group>";
};
832348241A77B50100B55238 /* Products */ = {
isa = PBXGroup;
children = (
832348291A77B50100B55238 /* libReactKit.a */,
);
name = Products;
sourceTree = "<group>";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
834D32361A76971A00F38302 /* ReactKit.xcodeproj */,
13B07FAE1A68108700A75B9A /* Movies */,
83CBBA001A601CBA00E9B192 /* Products */,
);
sourceTree = "<group>";
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* Movies.app */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
13B07F861A680F5B00A75B9A /* Movies */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Movies" */;
buildPhases = (
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
);
buildRules = (
);
dependencies = (
);
name = Movies;
productName = "Hello World";
productReference = 13B07F961A680F5B00A75B9A /* Movies.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
ORGANIZATIONNAME = Facebook;
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Movies" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectReferences = (
{
ProductGroup = 832348241A77B50100B55238 /* Products */;
ProjectRef = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
},
);
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* Movies */,
);
};
/* End PBXProject section */
/* Begin PBXReferenceProxy section */
832348291A77B50100B55238 /* libReactKit.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libReactKit.a;
remoteRef = 832348281A77B50100B55238 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */
/* Begin PBXResourcesBuildPhase section */
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
13B07FC11A68108700A75B9A /* main.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXVariantGroup section */
13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
isa = PBXVariantGroup;
children = (
13B07FB21A68108700A75B9A /* Base */,
);
name = LaunchScreen.xib;
sourceTree = "<group>";
};
/* End PBXVariantGroup section */
/* Begin XCBuildConfiguration section */
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = Movies;
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = Movies;
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "Movies" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "Movies" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}

7
Examples/Movies/Movies.xcodeproj/project.xcworkspace/contents.xcworkspacedata generated Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "self:Movies.xcodeproj">
</FileRef>
</Workspace>

8
Examples/Movies/Movies.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEWorkspaceSharedSettings_AutocreateContextsIfNeeded</key>
<false/>
</dict>
</plist>

86
Examples/Movies/Movies.xcodeproj/xcshareddata/xcschemes/Movies.xcscheme Normal file
View File

@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "0610"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "Movies.app"
BlueprintName = "Movies"
ReferencedContainer = "container:Movies.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES"
buildConfiguration = "Debug">
<Testables>
</Testables>
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "Movies.app"
BlueprintName = "Movies"
ReferencedContainer = "container:Movies.xcodeproj">
</BuildableReference>
</MacroExpansion>
</TestAction>
<LaunchAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
buildConfiguration = "Debug"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
allowLocationSimulation = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "Movies.app"
BlueprintName = "Movies"
ReferencedContainer = "container:Movies.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
<AdditionalOptions>
</AdditionalOptions>
</LaunchAction>
<ProfileAction
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
buildConfiguration = "Release"
debugDocumentVersioning = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "Movies.app"
BlueprintName = "Movies"
ReferencedContainer = "container:Movies.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>

41
Examples/Movies/MoviesApp.js Normal file
View File

@ -0,0 +1,41 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule MoviesApp
* @flow
*/
'use strict';
var React = require('react-native/addons');
var {
Bundler,
NavigatorIOS,
StyleSheet,
} = React;
var SearchScreen = require('./SearchScreen');
var MoviesApp = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Movies',
component: SearchScreen,
}}
/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
});
Bundler.registerComponent('MoviesApp', () => MoviesApp);
module.exports = MoviesApp;

338
Examples/Movies/SearchScreen.js Normal file
View File

@ -0,0 +1,338 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* @flow
*/
'use strict';
var React = require('react-native');
var {
ListView,
ListViewDataSource,
ScrollView,
SpinnerIOS,
StyleSheet,
Text,
TextInput,
TimerMixin,
View,
} = React;
var MovieCell = require('./MovieCell');
var MovieScreen = require('./MovieScreen');
var fetch = require('fetch');
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/';
var API_KEYS = ['7waqfqbprs7pajbz28mqf6vz', 'y4vwv8m33hed9ety83jmv52f'];
// Results should be cached keyed by the query
// with values of null meaning "being fetched"
// and anything besides null and undefined
// as the result of a valid query
var resultsCache = {
dataForQuery: {},
nextPageNumberForQuery: {},
totalForQuery: {},
};
var LOADING = {};
var SearchScreen = React.createClass({
mixins: [TimerMixin],
getInitialState: function() {
return {
isLoading: false,
isLoadingTail: false,
dataSource: new ListViewDataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
filter: '',
queryNumber: 0,
};
},
componentDidMount: function() {
this.searchMovies('');
},
_urlForQueryAndPage: function(query: string, pageNumber: ?number): string {
var apiKey = API_KEYS[this.state.queryNumber % API_KEYS.length];
if (query) {
return (
API_URL + 'movies.json?apikey=' + apiKey + '&q=' +
encodeURIComponent(query) + '&page_limit=20&page=' + pageNumber
);
} else {
// With no query, load latest movies
return (
API_URL + 'lists/movies/in_theaters.json?apikey=' + apiKey +
'&page_limit=20&page=' + pageNumber
);
}
},
searchMovies: function(query: string) {
this.timeoutID = null;
this.setState({filter: query});
var cachedResultsForQuery = resultsCache.dataForQuery[query];
if (cachedResultsForQuery) {
if (!LOADING[query]) {
this.setState({
dataSource: this.getDataSource(cachedResultsForQuery),
isLoading: false
});
} else {
this.setState({isLoading: true});
}
return;
}
LOADING[query] = true;
resultsCache.dataForQuery[query] = null;
this.setState({
isLoading: true,
queryNumber: this.state.queryNumber + 1,
isLoadingTail: false,
});
fetch(this._urlForQueryAndPage(query, 1))
.then((response) => response.json())
.then((responseData) => {
LOADING[query] = false;
resultsCache.totalForQuery[query] = responseData.total;
resultsCache.dataForQuery[query] = responseData.movies;
resultsCache.nextPageNumberForQuery[query] = 2;
if (this.state.filter !== query) {
// do not update state if the query is stale
return;
}
this.setState({
isLoading: false,
dataSource: this.getDataSource(responseData.movies),
});
})
.catch((error) => {
LOADING[query] = false;
resultsCache.dataForQuery[query] = undefined;
this.setState({
dataSource: this.getDataSource([]),
isLoading: false,
});
});
},
hasMore: function(): boolean {
var query = this.state.filter;
if (!resultsCache.dataForQuery[query]) {
return true;
}
return (
resultsCache.totalForQuery[query] !==
resultsCache.dataForQuery[query].length
);
},
onEndReached: function() {
var query = this.state.filter;
if (!this.hasMore() || this.state.isLoadingTail) {
// We're already fetching or have all the elements so noop
return;
}
if (LOADING[query]) {
return;
}
LOADING[query] = true;
this.setState({
queryNumber: this.state.queryNumber + 1,
isLoadingTail: true,
});
var page = resultsCache.nextPageNumberForQuery[query];
fetch(this._urlForQueryAndPage(query, page))
.then((response) => response.json())
.then((responseData) => {
var moviesForQuery = resultsCache.dataForQuery[query].slice();
LOADING[query] = false;
// We reached the end of the list before the expected number of results
if (!responseData.movies) {
resultsCache.totalForQuery[query] = moviesForQuery.length;
} else {
for (var i in responseData.movies) {
moviesForQuery.push(responseData.movies[i]);
}
resultsCache.dataForQuery[query] = moviesForQuery;
resultsCache.nextPageNumberForQuery[query] += 1;
}
if (this.state.filter !== query) {
// do not update state if the query is stale
return;
}
this.setState({
isLoadingTail: false,
dataSource: this.getDataSource(resultsCache.dataForQuery[query]),
});
})
.catch((error) => {
console.error(error);
LOADING[query] = false;
this.setState({
isLoadingTail: false,
});
});
},
getDataSource: function(movies: Array<any>): ListViewDataSource {
return this.state.dataSource.cloneWithRows(movies);
},
selectMovie: function(movie: Object) {
this.props.navigator.push({
title: movie.title,
component: MovieScreen,
passProps: {movie},
});
},
onSearchChange: function(event: Object) {
var filter = event.nativeEvent.text.toLowerCase();
this.clearTimeout(this.timeoutID);
this.timeoutID = this.setTimeout(() => this.searchMovies(filter), 100);
},
renderFooter: function() {
if (!this.hasMore() || !this.state.isLoadingTail) {
return <View style={styles.scrollSpinner} />;
}
return <SpinnerIOS style={styles.scrollSpinner} />;
},
renderRow: function(movie: Object) {
return (
<MovieCell
onSelect={() => this.selectMovie(movie)}
movie={movie}
/>
);
},
render: function() {
var content = this.state.dataSource.getRowCount() === 0 ?
<NoMovies
filter={this.state.filter}
isLoading={this.state.isLoading}
/> :
<ListView
ref="listview"
dataSource={this.state.dataSource}
renderFooter={this.renderFooter}
renderRow={this.renderRow}
onEndReached={this.onEndReached}
automaticallyAdjustContentInsets={false}
keyboardDismissMode={ScrollView.keyboardDismissMode.OnDrag}
keyboardShouldPersistTaps={true}
showsVerticalScrollIndicator={false}
/>;
return (
<View style={styles.container}>
<SearchBar
onSearchChange={this.onSearchChange}
isLoading={this.state.isLoading}
onFocus={() => this.refs.listview.getScrollResponder().scrollTo(0, 0)}
/>
<View style={styles.separator} />
{content}
</View>
);
},
});
var NoMovies = React.createClass({
render: function() {
var text = '';
if (this.props.filter) {
text = `No results for “${this.props.filter}”`;
} else if (!this.props.isLoading) {
// If we're looking at the latest movies, aren't currently loading, and
// still have no results, show a message
text = 'No movies found';
}
return (
<View style={[styles.container, styles.centerText]}>
<Text style={styles.noMoviesText}>{text}</Text>
</View>
);
}
});
var SearchBar = React.createClass({
render: function() {
return (
<View style={styles.searchBar}>
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.none}
autoCorrect={false}
onChange={this.props.onSearchChange}
placeholder="Search a movie..."
onFocus={this.props.onFocus}
style={styles.searchBarInput}
/>
<SpinnerIOS
animating={this.props.isLoading}
style={styles.spinner}
/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
centerText: {
alignItems: 'center',
},
noMoviesText: {
marginTop: 80,
color: '#888888',
},
searchBar: {
marginTop: 64,
padding: 3,
paddingLeft: 8,
flexDirection: 'row',
alignItems: 'center',
},
searchBarInput: {
fontSize: 15,
flex: 1,
height: 30,
},
separator: {
height: 1,
backgroundColor: '#eeeeee',
},
spinner: {
width: 30,
},
scrollSpinner: {
marginVertical: 20,
},
});
module.exports = SearchScreen;

36
Examples/Movies/__tests__/getImageSource-test.js Normal file
View File

@ -0,0 +1,36 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*/
'use strict';
jest.dontMock('../getImageSource');
var getImageSource = require('../getImageSource');
describe('getImageSource', () => {
it('returns null for invalid input', () => {
expect(getImageSource().uri).toBe(null);
});
it('returns a movie thumbnail', () => {
var uri = 'https://facebook.com';
var source = {
posters: {
thumbnail: uri,
},
};
expect(getImageSource(source).uri).toBe(uri);
});
it('returns a movie thumbnail with kind', () => {
var uri = 'https://facebook.com?tmb';
var source = {
posters: {
thumbnail: uri,
},
};
expect(getImageSource(source, 'kind').uri).toBe(
'https://facebook.com?kind'
);
});
});

15
Examples/Movies/getImageSource.js Normal file
View File

@ -0,0 +1,15 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* @flow
*/
'use strict';
function getImageSource(movie: Object, kind: ?string): {uri: ?string} {
var uri = movie && movie.posters ? movie.posters.thumbnail : null;
if (uri && kind) {
uri = uri.replace('tmb', kind);
}
return { uri };
}
module.exports = getImageSource;

35
Examples/Movies/getStyleFromScore.js Normal file
View File

@ -0,0 +1,35 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* @flow
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
} = React;
var MAX_VALUE = 200;
function getStyleFromScore(score: number): {color: string} {
if (score < 0) {
return styles.noScore;
}
var normalizedScore = Math.round((score / 100) * MAX_VALUE);
return {
color: 'rgb(' +
(MAX_VALUE - normalizedScore) + ', ' +
normalizedScore + ', ' +
0 +
')'
};
}
var styles = StyleSheet.create({
noScore: {
color: '#999999',
},
});
module.exports = getStyleFromScore;

11
Examples/Movies/getTextFromScore.js Normal file
View File

@ -0,0 +1,11 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
* @flow
*/
'use strict';
function getTextFromScore(score: number): string {
return score > 0 ? score + '%' : 'N/A';
}
module.exports = getTextFromScore;

10
Examples/Movies/main.m Normal file
View File

@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}

9
Examples/TicTacToe/AppDelegate.h Normal file
View File

@ -0,0 +1,9 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
@end

44
Examples/TicTacToe/AppDelegate.m Normal file
View File

@ -0,0 +1,44 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import "AppDelegate.h"
#import "RCTRootView.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
RCTRootView *rootView = [[RCTRootView alloc] init];
// Loading JavaScript code - uncomment the one you want.
// OPTION 1
// Load from development server. Start the server from the repository root:
//
// $ npm start
//
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
// iOS device are on the same Wi-Fi network.
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/TicTacToe/TicTacToeApp.includeRequire.runModule.bundle"];
// OPTION 2
// Load from pre-bundled file on disk. To re-generate the static bundle, run
//
// $ curl http://localhost:8081/Examples/TicTacToe/TicTacToeApp.includeRequire.runModule.bundle -o main.jsbundle
//
// and uncomment the next following line
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
rootView.scriptURL = jsCodeLocation;
rootView.moduleName = @"TicTacToeApp";
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
@end

41
Examples/TicTacToe/Base.lproj/LaunchScreen.xib Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="14B25" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text=" Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<rect key="frame" x="20" y="439" width="441" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="TicTacToe" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<rect key="frame" x="20" y="140" width="441" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
<constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
<constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
<constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
<constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
<constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
</constraints>
<nil key="simulatedStatusBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="548" y="455"/>
</view>
</objects>
</document>

38
Examples/TicTacToe/Images.xcassets/AppIcon.appiconset/Contents.json Normal file
View File

@ -0,0 +1,38 @@
{
"images" : [
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "29x29",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "40x40",
"scale" : "3x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "60x60",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

38
Examples/TicTacToe/Info.plist Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>

319
Examples/TicTacToe/TicTacToe.xcodeproj/project.pbxproj Normal file
View File

@ -0,0 +1,319 @@
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832348291A77B50100B55238 /* libReactKit.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
832348281A77B50100B55238 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
remoteInfo = ReactKit;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
13B07F961A680F5B00A75B9A /* TicTacToe.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = TicTacToe.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
834D32361A76971A00F38302 /* ReactKit.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactKit.xcodeproj; path = ../../ReactKit/ReactKit.xcodeproj; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
13B07FAE1A68108700A75B9A /* TicTacToe */ = {
isa = PBXGroup;
children = (
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */,
);
name = TicTacToe;
sourceTree = "<group>";
};
832348241A77B50100B55238 /* Products */ = {
isa = PBXGroup;
children = (
832348291A77B50100B55238 /* libReactKit.a */,
);
name = Products;
sourceTree = "<group>";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
834D32361A76971A00F38302 /* ReactKit.xcodeproj */,
13B07FAE1A68108700A75B9A /* TicTacToe */,
83CBBA001A601CBA00E9B192 /* Products */,
);
sourceTree = "<group>";
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* TicTacToe.app */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
13B07F861A680F5B00A75B9A /* TicTacToe */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "TicTacToe" */;
buildPhases = (
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
);
buildRules = (
);
dependencies = (
);
name = TicTacToe;
productName = "Hello World";
productReference = 13B07F961A680F5B00A75B9A /* TicTacToe.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
ORGANIZATIONNAME = Facebook;
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "TicTacToe" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectReferences = (
{
ProductGroup = 832348241A77B50100B55238 /* Products */;
ProjectRef = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
},
);
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* TicTacToe */,
);
};
/* End PBXProject section */
/* Begin PBXReferenceProxy section */
832348291A77B50100B55238 /* libReactKit.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libReactKit.a;
remoteRef = 832348281A77B50100B55238 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */
/* Begin PBXResourcesBuildPhase section */
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
13B07FC11A68108700A75B9A /* main.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXVariantGroup section */
13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
isa = PBXVariantGroup;
children = (
13B07FB21A68108700A75B9A /* Base */,
);
name = LaunchScreen.xib;
sourceTree = "<group>";
};
/* End PBXVariantGroup section */
/* Begin XCBuildConfiguration section */
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = TicTacToe;
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = TicTacToe;
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "TicTacToe" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "TicTacToe" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}

7
Examples/TicTacToe/TicTacToe.xcodeproj/project.xcworkspace/contents.xcworkspacedata generated Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "self:TicTacToe.xcodeproj">
</FileRef>
</Workspace>

8
Examples/TicTacToe/TicTacToe.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEWorkspaceSharedSettings_AutocreateContextsIfNeeded</key>
<false/>
</dict>
</plist>

86
Examples/TicTacToe/TicTacToe.xcodeproj/xcshareddata/xcschemes/TicTacToe.xcscheme Normal file
View File

@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "0610"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "TicTacToe.app"
BlueprintName = "TicTacToe"
ReferencedContainer = "container:TicTacToe.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES"
buildConfiguration = "Debug">
<Testables>
</Testables>
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "TicTacToe.app"
BlueprintName = "TicTacToe"
ReferencedContainer = "container:TicTacToe.xcodeproj">
</BuildableReference>
</MacroExpansion>
</TestAction>
<LaunchAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
buildConfiguration = "Debug"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
allowLocationSimulation = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "TicTacToe.app"
BlueprintName = "TicTacToe"
ReferencedContainer = "container:TicTacToe.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
<AdditionalOptions>
</AdditionalOptions>
</LaunchAction>
<ProfileAction
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
buildConfiguration = "Release"
debugDocumentVersioning = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "TicTacToe.app"
BlueprintName = "TicTacToe"
ReferencedContainer = "container:TicTacToe.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>

303
Examples/TicTacToe/TicTacToeApp.js Executable file
View File

@ -0,0 +1,303 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TicTacToeApp
* @flow
*/
'use strict';
var React = require('react-native');
var {
Bundler,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
class Board {
grid: Array<Array<number>>;
turn: number;
constructor() {
var size = 3;
var grid = Array(size);
for (var i = 0; i < size; i++) {
var row = Array(size);
for (var j = 0; j < size; j++) {
row[j] = 0;
}
grid[i] = row;
}
this.grid = grid;
this.turn = 1;
}
mark(row: number, col: number, player: number): Board {
this.grid[row][col] = player;
return this;
}
hasMove(row: number, col: number): boolean {
return this.grid[row][col] !== 0;
}
winner(): ?number {
for (var i = 0; i < 3; i++) {
if (this.grid[i][0] !== 0 && this.grid[i][0] === this.grid[i][1] &&
this.grid[i][0] === this.grid[i][2]) {
return this.grid[i][0];
}
}
for (var i = 0; i < 3; i++) {
if (this.grid[0][i] !== 0 && this.grid[0][i] === this.grid[1][i] &&
this.grid[0][i] === this.grid[2][i]) {
return this.grid[0][i];
}
}
if (this.grid[0][0] !== 0 && this.grid[0][0] === this.grid[1][1] &&
this.grid[0][0] === this.grid[2][2]) {
return this.grid[0][0];
}
if (this.grid[0][2] !== 0 && this.grid[0][2] === this.grid[1][1] &&
this.grid[0][2] === this.grid[2][0]) {
return this.grid[0][2];
}
return null;
}
tie(): boolean {
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
if (this.grid[i][j] === 0) {
return false;
}
}
}
return this.winner() === null;
}
}
var Cell = React.createClass({
cellStyle() {
switch (this.props.player) {
case 1:
return styles.cellX;
case 2:
return styles.cellO;
default:
return null;
}
},
textStyle() {
switch (this.props.player) {
case 1:
return styles.cellTextX;
case 2:
return styles.cellTextO;
default:
return {};
}
},
textContents() {
switch (this.props.player) {
case 1:
return 'X';
case 2:
return 'O';
default:
return '';
}
},
render() {
return (
<TouchableHighlight onPress={this.props.onPress} underlayColor={'clear'} activeOpacity={0.5}>
<View style={[styles.cell, this.cellStyle()]}>
<Text style={[styles.cellText, this.textStyle()]}>
{this.textContents()}
</Text>
</View>
</TouchableHighlight>
);
}
});
var GameEndOverlay = React.createClass({
render() {
var board = this.props.board;
var tie = board.tie();
var winner = board.winner();
if (!winner && !tie) {
return <View />;
}
var message;
if (tie) {
message = 'It\'s a tie!';
} else {
message = (winner === 1 ? 'X' : 'O') + ' wins!';
}
return (
<View style={styles.overlay}>
<Text style={styles.overlayMessage}>{message}</Text>
<TouchableHighlight onPress={this.props.onRestart} underlayColor={'clear'} activeOpacity={0.5}>
<View style={styles.newGame}>
<Text style={styles.newGameText}>New Game</Text>
</View>
</TouchableHighlight>
</View>
);
}
});
var TicTacToeApp = React.createClass({
getInitialState() {
return { board: new Board(), player: 1 };
},
restartGame() {
this.setState(this.getInitialState());
},
nextPlayer(): number {
return this.state.player === 1 ? 2 : 1;
},
handleCellPress(row: number, col: number) {
if (this.state.board.hasMove(row, col)) {
return;
}
this.setState({
board: this.state.board.mark(row, col, this.state.player),
player: this.nextPlayer(),
});
},
render() {
var rows = this.state.board.grid.map((cells, row) =>
<View key={'row' + row} style={styles.row}>
{cells.map((player, col) =>
<Cell
key={'cell' + col}
player={player}
onPress={this.handleCellPress.bind(this, row, col)}
/>
)}
</View>
);
return (
<View style={styles.container}>
<Text style={styles.title}>EXTREME T3</Text>
<View style={styles.board}>
{rows}
</View>
<GameEndOverlay board={this.state.board} onRestart={this.restartGame} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},
title: {
fontFamily: 'Chalkduster',
fontSize: 39,
marginBottom: 20,
},
board: {
padding: 5,
backgroundColor: '#47525d',
borderRadius: 10,
},
row: {
flexDirection: 'row',
},
// CELL
cell: {
width: 80,
height: 80,
borderRadius: 5,
backgroundColor: '#7b8994',
margin: 5,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
cellX: {
backgroundColor: '#72d0eb',
},
cellO: {
backgroundColor: '#7ebd26',
},
// CELL TEXT
cellText: {
borderRadius: 5,
fontSize: 50,
fontFamily: 'AvenirNext-Bold',
},
cellTextX: {
color: '#19a9e5',
},
cellTextO: {
color: '#b9dc2f',
},
// GAME OVER
overlay: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(221, 221, 221, 0.5)',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
overlayMessage: {
fontSize: 40,
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
fontFamily: 'AvenirNext-DemiBold',
textAlign: 'center',
},
newGame: {
backgroundColor: '#887766',
padding: 20,
borderRadius: 5,
},
newGameText: {
color: 'white',
fontSize: 20,
fontFamily: 'AvenirNext-DemiBold',
},
});
Bundler.registerComponent('TicTacToeApp', () => TicTacToeApp);
module.exports = TicTacToeApp;

10
Examples/TicTacToe/main.m Normal file
View File

@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}

10
Examples/UIExplorer/AppDelegate.h Normal file
View File

@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (nonatomic, strong) UIWindow *window;
@end

44
Examples/UIExplorer/AppDelegate.m Normal file
View File

@ -0,0 +1,44 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import "AppDelegate.h"
#import "RCTRootView.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
RCTRootView *rootView = [[RCTRootView alloc] init];
// Loading JavaScript code - uncomment the one you want.
// OPTION 1
// Load from development server. Start the server from the repository root:
//
// $ npm start
//
// To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
// iOS device are on the same Wi-Fi network.
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle"];
// OPTION 2
// Load from pre-bundled file on disk. To re-generate the static bundle, run
//
// $ curl http://localhost:8081/Examples/UIExplorer/UIExplorerApp.includeRequire.runModule.bundle -o main.jsbundle
//
// and uncomment the next following line
// jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
rootView.scriptURL = jsCodeLocation;
rootView.moduleName = @"UIExplorerApp";
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [[UIViewController alloc] init];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
@end

41
Examples/UIExplorer/Base.lproj/LaunchScreen.xib Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6254" systemVersion="13F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6247"/>
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
</dependencies>
<objects>
<placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="iN0-l3-epB">
<rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text=" Copyright (c) 2015 Facebook. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
<rect key="frame" x="20" y="439" width="441" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="UIExplorer" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
<rect key="frame" x="20" y="140" width="441" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
<constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
<constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
<constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
<constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
<constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
</constraints>
<nil key="simulatedStatusBarMetrics"/>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="548" y="455"/>
</view>
</objects>
</document>

54
Examples/UIExplorer/ExpandingTextExample.js Normal file
View File

@ -0,0 +1,54 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ExpandingTextExample
*/
'use strict';
var React = require('react-native');
var {
ExpandingText
} = React;
var LOREM = 'Lorem ipsum dolor sit amet, mea adipisci inimicus ex, paulo essent bonorum et ius, rebum deserunt mediocritatem ius ei.';
exports.title = '<ExpandingText>';
exports.description = 'Base component for rendering text that is truncated and can be expanded upon tap.';
exports.examples = [
{
title: 'Expanding text (truncLength=20)',
description: 'Setting the truncLength prop will cause the text to truncate to that character length',
render: function() {
return <ExpandingText truncLength={20} text={LOREM} />;
}
}, {
title: 'Expanding text (truncLength=80)',
description: 'The higher the truncLength the more characters that will be shown by default',
render: function() {
return <ExpandingText truncLength={80} text={LOREM + LOREM} />;
}
}, {
title: 'Expanding text with custom style',
description: 'You can style the text within the ExpandingText component',
render: function() {
return (
<ExpandingText
textStyle={{fontFamily: 'Verdana'}}
truncLength={80}
text={LOREM + LOREM}
/>
);
}
}, {
title: 'See More button with custom style' ,
description: 'You can also style just the See More button',
render: function() {
return (
<ExpandingText
seeMoreStyle={{color: 'red'}}
truncLength={80}
text={LOREM}
/>
);
}
}];

66
Examples/UIExplorer/ImageCapInsetsExample.js Normal file
View File

@ -0,0 +1,66 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageCapInsetsExample
*/
'use strict';
var React = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
ix,
} = React;
var ImageCapInsetsExample = React.createClass({
render: function() {
return (
<View>
<View style={styles.background}>
<Text>
capInsets: none
</Text>
<Image
source={ix('story-background')}
style={styles.storyBackground}
capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
/>
</View>
<View style={[styles.background, {paddingTop: 10}]}>
<Text>
capInsets: 15
</Text>
<Image
source={ix('story-background')}
style={styles.storyBackground}
capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
/>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
background: {
backgroundColor: '#F6F6F6',
justifyContent: 'center',
alignItems: 'center',
},
horizontal: {
flexDirection: 'row',
},
storyBackground: {
width: 250,
height: 150,
borderWidth: 1,
resizeMode: Image.resizeMode.stretch,
},
text: {
fontSize: 13.5,
}
});
module.exports = ImageCapInsetsExample;

305
Examples/UIExplorer/ImageExample.js Normal file
View File

@ -0,0 +1,305 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageExample
*/
'use strict';
var React = require('react-native');
var {
Image,
StyleSheet,
Text,
View,
ix,
} = React;
var ImageCapInsetsExample = require('./ImageCapInsetsExample');
exports.framework = 'React';
exports.title = '<Image>';
exports.description = 'Base component for displaying different types of images.';
exports.examples = [
{
title: 'Plain Network Image',
description: 'If the `source` prop `uri` property is prefixed with ' +
'"http", then it will be downloaded from the network.',
render: function() {
return (
<Image
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
style={styles.base}
/>
);
},
},
{
title: 'Plain Static Image',
description: 'Static assets must be referenced with the `ix` wrapper and ' +
'located in the app bundle.',
render: function() {
return (
<View style={styles.horizontal}>
<Image source={ix('uie_thumb_normal')} style={styles.icon} />
<Image source={ix('uie_thumb_selected')} style={styles.icon} />
<Image source={ix('uie_comment_normal')} style={styles.icon} />
<Image source={ix('uie_comment_highlighted')} style={styles.icon} />
</View>
);
},
},
{
title: 'Border Color',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[
styles.base,
styles.background,
{borderWidth: 3, borderColor: '#f099f0'}
]}
/>
</View>
);
},
},
{
title: 'Border Width',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={smallImage}
style={[
styles.base,
styles.background,
{borderWidth: 5, borderColor: '#f099f0'}
]}
/>
</View>
);
},
},
{
title: 'Border Radius',
render: function() {
return (
<View style={styles.horizontal}>
<Image
style={[styles.base, styles.background, {borderRadius: 5}]}
source={smallImage}
/>
<Image
style={[
styles.base,
styles.background,
styles.leftMargin,
{borderRadius: 19}
]}
source={smallImage}
/>
</View>
);
},
},
{
title: 'Background Color',
render: function() {
return (
<View style={styles.horizontal}>
<Image source={smallImage} style={styles.base} />
<Image
style={[
styles.base,
styles.leftMargin,
{backgroundColor: 'rgba(0, 0, 100, 0.25)'}
]}
source={smallImage}
/>
<Image
style={[styles.base, styles.leftMargin, {backgroundColor: 'red'}]}
source={smallImage}
/>
<Image
style={[styles.base, styles.leftMargin, {backgroundColor: 'black'}]}
source={smallImage}
/>
</View>
);
},
},
{
title: 'Opacity',
render: function() {
return (
<View style={styles.horizontal}>
<Image
style={[styles.base, {opacity: 1}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.8}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.6}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.4}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0.2}]}
source={fullImage}
/>
<Image
style={[styles.base, styles.leftMargin, {opacity: 0}]}
source={fullImage}
/>
</View>
);
},
},
{
title: 'Nesting',
render: function() {
return (
<Image
style={{width: 60, height: 60, backgroundColor: 'transparent'}}
source={fullImage}>
<Text style={styles.nestedText}>
React
</Text>
</Image>
);
},
},
{
title: 'Tint Color',
description: 'The `tintColor` style prop changes all the non-alpha ' +
'pixels to the tint color.',
render: function() {
return (
<View style={styles.horizontal}>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, {tintColor: 'blue' }]}
/>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
/>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
/>
<Image
source={ix('uie_thumb_normal')}
style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
/>
</View>
);
},
},
{
title: 'Resize Mode',
description: 'The `resizeMode` style prop controls how the image is ' +
'rendered within the frame.',
render: function() {
return (
<View style={styles.horizontal}>
<View>
<Text style={[styles.resizeModeText]}>
Contain
</Text>
<Image
style={[
styles.resizeMode,
{resizeMode: Image.resizeMode.contain}
]}
source={fullImage}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Cover
</Text>
<Image
style={[
styles.resizeMode,
{resizeMode: Image.resizeMode.cover}
]}
source={fullImage}
/>
</View>
<View style={styles.leftMargin}>
<Text style={[styles.resizeModeText]}>
Stretch
</Text>
<Image
style={[
styles.resizeMode,
{resizeMode: Image.resizeMode.stretch}
]}
source={fullImage}
/>
</View>
</View>
);
},
},
{
title: 'Cap Insets',
description:
'When the image is resized, the corners of the size specified ' +
'by capInsets will stay a fixed size, but the center content and ' +
'borders of the image will be stretched. This is useful for creating ' +
'resizable rounded buttons, shadows, and other resizable assets.',
render: function() {
return <ImageCapInsetsExample />;
},
},
];
var fullImage = {uri: 'http://facebook.github.io/react/img/logo_og.png'};
var smallImage = {uri: 'http://facebook.github.io/react/img/logo_small.png'};
var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
leftMargin: {
marginLeft: 10,
},
background: {
backgroundColor: '#222222'
},
nestedText: {
marginLeft: 12,
marginTop: 20,
backgroundColor: 'transparent',
color: 'white'
},
resizeMode: {
width: 90,
height: 60,
borderWidth: 0.5,
borderColor: 'black'
},
resizeModeText: {
fontSize: 11,
marginBottom: 3,
},
icon: {
width: 15,
height: 15,
},
horizontal: {
flexDirection: 'row',
}
});

44
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/Contents.json Normal file
View File

@ -0,0 +1,44 @@
{
"images" : [
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "uie_icon@2x.png",
"scale" : "2x"
},
{
"size" : "29x29",
"idiom" : "iphone",
"filename" : "uie_icon@2x-1.png",
"scale" : "3x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "uie_icon@2x-2.png",
"scale" : "2x"
},
{
"size" : "40x40",
"idiom" : "iphone",
"filename" : "uie_icon@2x-3.png",
"scale" : "3x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "uie_icon@2x-5.png",
"scale" : "2x"
},
{
"size" : "60x60",
"idiom" : "iphone",
"filename" : "uie_icon@2x-4.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x-5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
Examples/UIExplorer/Images.xcassets/AppIcon.appiconset/uie_icon@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

22
Examples/UIExplorer/Images.xcassets/story-background.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,22 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x",
"filename" : "story-background.png"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "story-background@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/story-background.imageset/story-background.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

BIN
Examples/UIExplorer/Images.xcassets/story-background.imageset/story-background@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 657 B

21
Examples/UIExplorer/Images.xcassets/uie_comment_highlighted.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_comment_highlighted@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_comment_highlighted.imageset/uie_comment_highlighted@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

21
Examples/UIExplorer/Images.xcassets/uie_comment_normal.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_comment_normal@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_comment_normal.imageset/uie_comment_normal@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 420 B

21
Examples/UIExplorer/Images.xcassets/uie_thumb_normal.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_thumb_normal@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_thumb_normal.imageset/uie_thumb_normal@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 850 B

21
Examples/UIExplorer/Images.xcassets/uie_thumb_selected.imageset/Contents.json vendored Normal file
View File

@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x",
"filename" : "uie_thumb_selected@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

BIN
Examples/UIExplorer/Images.xcassets/uie_thumb_selected.imageset/uie_thumb_selected@2x.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

38
Examples/UIExplorer/Info.plist Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIdentifier</key>
<string>com.facebook.$(PRODUCT_NAME:rfc1034identifier)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>

145
Examples/UIExplorer/LayoutExample.js Normal file
View File

@ -0,0 +1,145 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule LayoutExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var Circle = React.createClass({
render: function() {
var size = this.props.size || 20;
return (
<View
style={{
borderRadius: size / 2,
backgroundColor: '#527fe4',
width: size,
height: size,
margin: 1,
}}
/>
);
}
});
var CircleBlock = React.createClass({
render: function() {
var circleStyle = {
flexDirection: 'row',
backgroundColor: '#f6f7f8',
borderWidth: 0.5,
borderColor: '#d6d7da',
marginBottom: 2,
};
return (
<View style={[circleStyle, this.props.style]}>
{this.props.children}
</View>
);
}
});
var LayoutExample = React.createClass({
statics: {
title: 'Layout - Flexbox',
description: 'Examples of using the flexbox API to layout views.'
},
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
<UIExplorerBlock title="Flex Direction">
<Text>row</Text>
<CircleBlock style={{flexDirection: 'row'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>column</Text>
<CircleBlock style={{flexDirection: 'column'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
<Text>{'top: 15, left: 160'}</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Justify Content - Main Direction">
<Text>flex-start</Text>
<CircleBlock style={{justifyContent: 'flex-start'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{justifyContent: 'center'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{justifyContent: 'flex-end'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>space-between</Text>
<CircleBlock style={{justifyContent: 'space-between'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
<Text>space-around</Text>
<CircleBlock style={{justifyContent: 'space-around'}}>
<Circle /><Circle /><Circle /><Circle /><Circle />
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Align Items - Other Direction">
<Text>flex-start</Text>
<CircleBlock style={{alignItems: 'flex-start', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
<Text>center</Text>
<CircleBlock style={{alignItems: 'center', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
<Text>flex-end</Text>
<CircleBlock style={{alignItems: 'flex-end', height: 30}}>
<Circle size={15} /><Circle size={10} /><Circle size={20} />
<Circle size={17} /><Circle size={12} /><Circle size={15} />
<Circle size={10} /><Circle size={20} /><Circle size={17} />
<Circle size={12} /><Circle size={15} /><Circle size={10} />
<Circle size={20} /><Circle size={17} /><Circle size={12} />
<Circle size={15} /><Circle size={8} />
</CircleBlock>
</UIExplorerBlock>
<UIExplorerBlock title="Flex Wrap">
<CircleBlock style={{flexWrap: 'wrap'}}>
{'oooooooooooooooo'.split('').map(() => <Circle />)}
</CircleBlock>
</UIExplorerBlock>
</UIExplorerPage>
);
}
});
var styles = StyleSheet.create({
overlay: {
backgroundColor: '#aaccff',
borderRadius: 10,
borderWidth: 0.5,
opacity: 0.5,
padding: 5,
},
});
module.exports = LayoutExample;

121
Examples/UIExplorer/ListViewSimpleExample.js Normal file
View File

@ -0,0 +1,121 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @provides ListViewSimpleExample
*/
'use strict';
var React = require('react-native');
var {
Image,
ListView,
ListViewDataSource,
TouchableHighlight,
StyleSheet,
Text,
View,
} = React;
var UIExplorerPage = require('./UIExplorerPage');
var ListViewSimpleExample = React.createClass({
statics: {
title: '<ListView> - Simple',
description: 'Performant, scrollable list of data.'
},
getInitialState: function() {
var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(this._genRows({})),
};
},
componentWillMount: function() {
this._pressData = {};
},
render: function() {
return (
<UIExplorerPage
title={this.props.navigator ? null : '<ListView> - Simple'}
noSpacer={true}
noScroll={true}>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
</UIExplorerPage>
);
},
_renderRow: function(rowData, sectionID, rowID) {
var rowHash = Math.abs(hashCode(rowData));
var imgSource = {
uri: THUMB_URLS[rowHash % THUMB_URLS.length],
};
return (
<TouchableHighlight onPress={() => this._pressRow(rowID)}>
<View>
<View style={styles.row}>
<Image style={styles.thumb} source={imgSource} />
<Text style={styles.text}>
{rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
</Text>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
},
_genRows: function(pressData) {
var dataBlob = [];
for (var ii = 0; ii < 100; ii++) {
var pressedText = pressData[ii] ? ' (pressed)' : '';
dataBlob.push('Row ' + ii + pressedText);
}
return dataBlob;
},
_pressRow: function(rowID) {
this._pressData[rowID] = !this._pressData[rowID];
this.setState({dataSource: this.state.dataSource.cloneWithRows(
this._genRows(this._pressData)
)});
},
});
var THUMB_URLS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
/* eslint no-bitwise: 0 */
var hashCode = function(str) {
var hash = 15;
for (var ii = str.length - 1; ii >= 0; ii--) {
hash = ((hash << 5) - hash) + str.charCodeAt(ii);
}
return hash;
};
var styles = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
separator: {
height: 1,
backgroundColor: '#CCCCCC',
},
thumb: {
width: 64,
height: 64,
},
text: {
flex: 1,
},
});
module.exports = ListViewSimpleExample;

211
Examples/UIExplorer/NavigatorIOSExample.js Normal file
View File

@ -0,0 +1,211 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule NavigatorIOSExample
*/
'use strict';
var React = require('react-native/addons');
var ViewExample = require('./ViewExample');
var {
PixelRatio,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
var EmptyPage = React.createClass({
render: function() {
return (
<View style={styles.emptyPage}>
<Text style={styles.emptyPageText}>
{this.props.text}
</Text>
</View>
);
},
});
var NavigatorIOSExample = React.createClass({
statics: {
title: '<NavigatorIOS>',
description: 'iOS navigation capabilities',
},
render: function() {
var recurseTitle = 'Recurse Navigation';
if (!this.props.topExampleRoute) {
recurseTitle += ' - more examples here';
}
return (
<ScrollView style={styles.list}>
<View style={styles.line}/>
<View style={styles.group}>
<View style={styles.row}>
<Text style={styles.rowNote}>
See &lt;UIExplorerApp&gt; for top-level usage.
</Text>
</View>
</View>
<View style={styles.line}/>
<View style={styles.group}>
{this._renderRow(recurseTitle, () => {
this.props.navigator.push({
title: NavigatorIOSExample.title,
component: NavigatorIOSExample,
passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
});
})}
{this._renderRow('Push View Example', () => {
this.props.navigator.push({
title: 'Very Long Custom View Example Title',
component: ViewExample,
});
})}
{this._renderRow('Custom Right Button', () => {
this.props.navigator.push({
title: NavigatorIOSExample.title,
component: EmptyPage,
rightButtonTitle: 'Cancel',
onRightButtonPress: () => this.props.navigator.pop(),
passProps: {
text: 'This page has a right button in the nav bar',
}
});
})}
{this._renderRow('Pop', () => {
this.props.navigator.pop();
})}
{this._renderRow('Pop to top', () => {
this.props.navigator.popToTop();
})}
{this._renderRow('Replace here', () => {
var prevRoute = this.props.route;
this.props.navigator.replace({
title: 'New Navigation',
component: EmptyPage,
rightButtonTitle: 'Undo',
onRightButtonPress: () => this.props.navigator.replace(prevRoute),
passProps: {
text: 'The component is replaced, but there is currently no ' +
'way to change the right button or title of the current route',
}
});
})}
{this._renderReplacePrevious()}
{this._renderReplacePreviousAndPop()}
{this._renderPopToTopNavExample()}
</View>
<View style={styles.line}/>
</ScrollView>
);
},
_renderPopToTopNavExample: function() {
if (!this.props.topExampleRoute) {
return null;
}
return this._renderRow('Pop to top NavigatorIOSExample', () => {
this.props.navigator.popToRoute(this.props.topExampleRoute);
});
},
_renderReplacePrevious: function() {
if (!this.props.topExampleRoute) {
// this is to avoid replacing the UIExplorerList at the top of the stack
return null;
}
return this._renderRow('Replace previous', () => {
this.props.navigator.replacePrevious({
title: 'Replaced',
component: EmptyPage,
passProps: {
text: 'This is a replaced "previous" page',
},
wrapperStyle: styles.customWrapperStyle,
});
});
},
_renderReplacePreviousAndPop: function() {
if (!this.props.topExampleRoute) {
// this is to avoid replacing the UIExplorerList at the top of the stack
return null;
}
return this._renderRow('Replace previous and pop', () => {
this.props.navigator.replacePreviousAndPop({
title: 'Replaced and Popped',
component: EmptyPage,
passProps: {
text: 'This is a replaced "previous" page',
},
wrapperStyle: styles.customWrapperStyle,
});
});
},
_renderRow: function(title, onPress) {
return (
<View>
<TouchableHighlight onPress={onPress}>
<View style={styles.row}>
<Text style={styles.rowText}>
{title}
</Text>
</View>
</TouchableHighlight>
<View style={styles.separator} />
</View>
);
},
});
var styles = StyleSheet.create({
customWrapperStyle: {
backgroundColor: '#bbdddd',
},
emptyPage: {
flex: 1,
paddingTop: 64,
},
emptyPageText: {
margin: 10,
},
list: {
backgroundColor: '#eeeeee',
marginTop: 10,
},
group: {
backgroundColor: 'white',
paddingVertical: 10,
},
line: {
backgroundColor: '#bbbbbb',
height: 1 / PixelRatio.get(),
},
row: {
backgroundColor: 'white',
justifyContent: 'center',
paddingHorizontal: 15,
paddingVertical: 8,
},
separator: {
height: 1 / PixelRatio.get(),
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
rowNote: {
fontSize: 17,
},
rowText: {
fontSize: 17,
fontWeight: 'bold',
},
});
module.exports = NavigatorIOSExample;

239
Examples/UIExplorer/PointerEventsExample.js Normal file
View File

@ -0,0 +1,239 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule PointerEventsExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var ExampleBox = React.createClass({
getInitialState: function() {
return {
log: [],
};
},
handleLog: function(msg) {
this.state.log = this.state.log.concat([msg]);
},
flushReactChanges: function() {
this.forceUpdate();
},
/**
* Capture phase of bubbling to append separator before any of the bubbling
* happens.
*/
handleTouchCapture: function() {
this.state.log = this.state.log.concat(['---']);
},
render: function() {
return (
<View>
<View
onTouchEndCapture={this.handleTouchCapture}
onTouchStart={this.flushReactChanges}>
<this.props.Component onLog={this.handleLog} />
</View>
<View
style={styles.logBox}>
<DemoText style={styles.logText}>
{this.state.log.join('\n')}
</DemoText>
</View>
</View>
);
}
});
var NoneExample = React.createClass({
render: function() {
return (
<View
onTouchStart={() => this.props.onLog('A unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
A: unspecified
</DemoText>
<View
pointerEvents={View.pointerEvents.none}
onTouchStart={() => this.props.onLog('B none touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
B: none
</DemoText>
<View
onTouchStart={() => this.props.onLog('C unspecified touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
C: unspecified
</DemoText>
</View>
</View>
</View>
);
}
});
/**
* Special demo text that makes itself untouchable so that it doesn't destroy
* the experiment and confuse the output.
*/
var DemoText = React.createClass({
render: function() {
return (
<View pointerEvents={View.pointerEvents.none}>
<Text
style={this.props.style}>
{this.props.children}
</Text>
</View>
);
}
});
var BoxNoneExample = React.createClass({
render: function() {
return (
<View
onTouchStart={() => this.props.onLog('A unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
A: unspecified
</DemoText>
<View
pointerEvents={View.pointerEvents.boxNone}
onTouchStart={() => this.props.onLog('B boxNone touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
B: boxNone
</DemoText>
<View
onTouchStart={() => this.props.onLog('C unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
C: unspecified
</DemoText>
</View>
<View
pointerEvents={View.pointerEvents.unspecified}
onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
style={[styles.box]}>
<DemoText style={[styles.text]}>
C: explicitly unspecified
</DemoText>
</View>
</View>
</View>
);
}
});
var BoxOnlyExample = React.createClass({
render: function() {
return (
<View
onTouchStart={() => this.props.onLog('A unspecified touched')}
style={styles.box}>
<DemoText style={styles.text}>
A: unspecified
</DemoText>
<View
pointerEvents={View.pointerEvents.boxOnly}
onTouchStart={() => this.props.onLog('B boxOnly touched')}
style={styles.box}>
<DemoText style={styles.text}>
B: boxOnly
</DemoText>
<View
onTouchStart={() => this.props.onLog('C unspecified touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
C: unspecified
</DemoText>
</View>
<View
pointerEvents={View.pointerEvents.unspecified}
onTouchStart={() => this.props.onLog('C explicitly unspecified touched')}
style={[styles.box, styles.boxPassedThrough]}>
<DemoText style={[styles.text, styles.textPassedThrough]}>
C: explicitly unspecified
</DemoText>
</View>
</View>
</View>
);
}
});
var exampleClasses = [
{
Component: NoneExample,
title: '`none`',
description: '`none` causes touch events on the container and its child components to pass through to the parent container.',
},
{
Component: BoxNoneExample,
title: '`boxNone`',
description: '`boxNone` causes touch events on the container to pass through and will only detect touch events on its child components.',
},
{
Component: BoxOnlyExample,
title: '`boxOnly`',
description: '`boxOnly` causes touch events on the container\'s child components to pass through and will only detect touch events on the container itself.',
}
];
var infoToExample = (info) => {
return {
title: info.title,
description: info.description,
render: function() {
return <ExampleBox key={info.title} Component={info.Component} />;
},
};
};
var styles = StyleSheet.create({
text: {
fontSize: 10,
color: '#5577cc',
},
textPassedThrough: {
color: '#88aadd',
},
box: {
backgroundColor: '#aaccff',
borderWidth: 1,
borderColor: '#7799cc',
padding: 10,
margin: 5,
},
boxPassedThrough: {
borderColor: '#99bbee',
},
logText: {
fontSize: 9,
},
logBox: {
padding: 20,
margin: 10,
borderWidth: 0.5,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
bottomSpacer: {
marginBottom: 100,
},
});
exports.framework = 'React';
exports.title = 'Pointer Events';
exports.description = '`pointerEvents` is a prop of View that gives control ' +
'of how touches should be handled.';
exports.examples = exampleClasses.map(infoToExample);

96
Examples/UIExplorer/ScrollViewExample.js Normal file
View File

@ -0,0 +1,96 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ScrollViewExample
*/
'use strict';
var React = require('react-native');
var {
ScrollView,
StyleSheet,
View,
Image
} = React;
exports.title = '<ScrollView>';
exports.description = 'Component that enables scrolling through child components';
exports.examples = [
{
title: '<ScrollView>',
description: 'To make content scrollable, wrap it within a <ScrollView> component',
render: function() {
return <ScrollView
contentInset={{top: -50}}
style={styles.scrollView}>
{THUMBS.map(createThumbRow)}
</ScrollView>;
}
}, {
title: '<ScrollView> (horizontal = true)',
description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
render: function() {
return <ScrollView
horizontal={true}
contentInset={{top: -50}}
style={[styles.scrollView, styles.horizontalScrollView]}>
{THUMBS.map(createThumbRow)}
</ScrollView>;
}
}];
var Thumb = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return false;
},
render: function() {
return (
<View style={styles.button}>
<Image style={styles.img} source={{uri:this.props.uri}} />
</View>
);
}
});
var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
var createThumbRow = (uri, i) => <Thumb uri={uri}/>;
var styles = StyleSheet.create({
scrollView: {
backgroundColor: '#6A85B1',
height: 300,
},
horizontalScrollView: {
height: 120,
},
containerPage: {
height: 50,
width: 50,
backgroundColor: '#527FE4',
padding: 5,
},
text: {
fontSize: 20,
color: '#888888',
left: 80,
top: 20,
height: 40,
},
button: {
margin: 7,
padding: 5,
alignItems: 'center',
backgroundColor: '#eaeaea',
borderRadius: 3,
},
buttonContents: {
flexDirection: 'row',
width: 64,
height: 64,
},
img: {
width: 64,
height: 64,
}
});

151
Examples/UIExplorer/SpinnerExample.js Normal file
View File

@ -0,0 +1,151 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule SpinnerExample
*/
'use strict';
var React = require('react-native');
var {
SpinnerIOS,
StyleSheet,
TimerMixin,
View,
} = React;
var ToggleAnimatingSpinner = React.createClass({
mixins: [TimerMixin],
getInitialState: function() {
return {
animating: true,
};
},
setToggleTimeout: function() {
this.setTimeout(
() => {
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
},
1200
);
},
componentDidMount: function() {
this.setToggleTimeout();
},
render: function() {
return (
<SpinnerIOS
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size={SpinnerIOS.size.large}
/>
);
}
});
exports.framework = 'React';
exports.title = '<SpinnerIOS>';
exports.description = 'Animated loading indicators.';
exports.examples = [
{
title: 'Default (small, white)',
render: function() {
return (
<SpinnerIOS
style={[styles.centering, styles.gray, {height: 40}]}
color="white"
/>
);
}
},
{
title: 'Gray',
render: function() {
return (
<View>
<SpinnerIOS
style={[styles.centering, {height: 40}]}
/>
<SpinnerIOS
style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
/>
</View>
);
}
},
{
title: 'Custom colors',
render: function() {
return (
<View style={styles.horizontal}>
<SpinnerIOS color="#0000ff" />
<SpinnerIOS color="#aa00aa" />
<SpinnerIOS color="#aa3300" />
<SpinnerIOS color="#00aa00" />
</View>
);
}
},
{
title: 'Large',
render: function() {
return (
<SpinnerIOS
style={[styles.centering, styles.gray, {height: 80}]}
color="white"
size={SpinnerIOS.size.large}
/>
);
}
},
{
title: 'Large, custom colors',
render: function() {
return (
<View style={styles.horizontal}>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#0000ff"
/>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#aa00aa"
/>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#aa3300"
/>
<SpinnerIOS
size={SpinnerIOS.size.large}
color="#00aa00"
/>
</View>
);
}
},
{
title: 'Start/stop',
render: function() {
return <ToggleAnimatingSpinner />;
}
},
];
var styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
},
});

281
Examples/UIExplorer/TextExample.ios.js Normal file
View File

@ -0,0 +1,281 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TextExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var Entity = React.createClass({
render: function() {
return (
<Text style={styles.entity}>
{this.props.children}
</Text>
);
}
});
var AttributeToggler = React.createClass({
getInitialState: function() {
return {fontWeight: 'bold', fontSize: 15};
},
increaseSize: function() {
this.setState({
fontSize: this.state.fontSize + 1
});
},
render: function() {
var curStyle = {fontSize: this.state.fontSize};
return (
<View>
<Text style={curStyle}>
Tap the controls below to change attributes.
</Text>
<Text>
<Text>
See how it will even work on{' '}
<Text style={curStyle}>
this nested text
</Text>
</Text>
</Text>
<Text onPress={this.increaseSize}>
{'>> Increase Size <<'}
</Text>
</View>
);
}
});
exports.title = '<Text>';
exports.description = 'Base component for rendering styled text.';
exports.examples = [
{
title: 'Wrap',
render: function() {
return (
<Text>
The text should wrap if it goes on multiple lines. See, this is going to
the next line.
</Text>
);
},
}, {
title: 'Font Family',
render: function() {
return (
<View>
<Text style={{fontFamily: 'Cochin'}}>
Cochin
</Text>
<Text style={{fontFamily: 'Cochin', fontWeight: 'bold'}}>
Cochin bold
</Text>
<Text style={{fontFamily: 'Helvetica'}}>
Helvetica
</Text>
<Text style={{fontFamily: 'Helvetica', fontWeight: 'bold'}}>
Helvetica bold
</Text>
<Text style={{fontFamily: 'Verdana'}}>
Verdana
</Text>
<Text style={{fontFamily: 'Verdana', fontWeight: 'bold'}}>
Verdana bold
</Text>
</View>
);
},
}, {
title: 'Font Size',
render: function() {
return (
<View>
<Text style={{fontSize: 23}}>
Size 23
</Text>
<Text style={{fontSize: 8}}>
Size 8
</Text>
</View>
);
},
}, {
title: 'Color',
render: function() {
return (
<View>
<Text style={{color: 'red'}}>
Red color
</Text>
<Text style={{color: 'blue'}}>
Blue color
</Text>
</View>
);
},
}, {
title: 'Font Weight',
render: function() {
return (
<Text style={{fontWeight: 'bold'}}>
Move fast and be bold
</Text>
);
},
}, {
title: 'Nested',
description: 'Nested text components will inherit the styles of their ' +
'parents (only backgroundColor is inherited from non-Text parents). ' +
'<Text> only supports other <Text> and raw text (strings) as children.',
render: function() {
return (
<View>
<Text>
(Normal text,
<Text style={{fontWeight: 'bold'}}>
(and bold
<Text style={{fontSize: 11, color: '#527fe4'}}>
(and tiny inherited bold blue)
</Text>
)
</Text>
)
</Text>
<Text style={{fontSize: 12}}>
<Entity>Entity Name</Entity>
</Text>
</View>
);
},
}, {
title: 'Text Align',
render: function() {
return (
<View>
<Text style={{textAlign: 'left'}}>
left left left left left left left left left left left left left left left
</Text>
<Text style={{textAlign: 'center'}}>
center center center center center center center center center center center
</Text>
<Text style={{textAlign: 'right'}}>
right right right right right right right right right right right right right
</Text>
</View>
);
},
}, {
title: 'Spaces',
render: function() {
return (
<Text>
A {'generated'} {' '} {'string'} and some &nbsp;&nbsp;&nbsp; spaces
</Text>
);
},
}, {
title: 'Line Height',
render: function() {
return (
<Text>
<Text style={{lineHeight: 35}}>
A lot of space between the lines of this long passage that should
wrap once.
</Text>
</Text>
);
},
}, {
title: 'Empty Text',
description: 'It\'s ok to have Text with zero or null children.',
render: function() {
return (
<Text />
);
},
}, {
title: 'Toggling Attributes',
render: function() {
return <AttributeToggler />;
},
}, {
title: 'backgroundColor attribute',
description: 'backgroundColor is inherited from all types of views.',
render: function() {
return (
<View style={{backgroundColor: 'yellow'}}>
<Text>
Yellow background inherited from View parent,
<Text style={{backgroundColor: '#ffaaaa'}}>
{' '}red background,
<Text style={{backgroundColor: '#aaaaff'}}>
{' '}blue background,
<Text>
{' '}inherited blue background,
<Text style={{backgroundColor: '#aaffaa'}}>
{' '}nested green background.
</Text>
</Text>
</Text>
</Text>
</Text>
</View>
);
},
}, {
title: 'containerBackgroundColor attribute',
render: function() {
return (
<View>
<View style={{flexDirection: 'row', height: 85}}>
<View style={{backgroundColor: '#ffaaaa', width: 150}} />
<View style={{backgroundColor: '#aaaaff', width: 150}} />
</View>
<Text style={[styles.backgroundColorText, {top: -80}]}>
Default containerBackgroundColor (inherited) + backgroundColor wash
</Text>
<Text style={[
styles.backgroundColorText,
{top: -70, containerBackgroundColor: 'transparent'}]}>
{"containerBackgroundColor: 'transparent' + backgroundColor wash"}
</Text>
</View>
);
},
}, {
title: 'numberOfLines attribute',
render: function() {
return (
<View>
<Text numberOfLines={1}>
Maximum of one line no matter now much I write here. If I keep writing it{"'"}ll just truncate after one line
</Text>
<Text numberOfLines={2} style={{marginTop: 20}}>
Maximum of two lines no matter now much I write here. If I keep writing it{"'"}ll just truncate after two lines
</Text>
<Text style={{marginTop: 20}}>
No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
</Text>
</View>
);
},
}];
var styles = StyleSheet.create({
backgroundColorText: {
left: 5,
backgroundColor: 'rgba(100, 100, 100, 0.3)'
},
entity: {
fontWeight: 'bold',
color: '#527fe4',
},
});

188
Examples/UIExplorer/TextInputExample.js Normal file
View File

@ -0,0 +1,188 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TextInputExample
*/
'use strict';
var React = require('react-native');
var {
Text,
TextInput,
View,
StyleSheet,
} = React;
var WithLabel = React.createClass({
render: function() {
return (
<View style={styles.labelContainer}>
<View style={styles.label}>
<Text>{this.props.label}</Text>
</View>
{this.props.children}
</View>
);
}
});
var TextEventsExample = React.createClass({
getInitialState: function() {
return {
curText: '<No Event>',
prevText: '<No Event>',
};
},
updateText: function(text) {
this.setState({
curText: text,
prevText: this.state.curText,
});
},
render: function() {
return (
<View>
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.none}
placeholder="Enter text to see events"
autoCorrect={false}
onFocus={() => this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText(
'onChange text: ' + event.nativeEvent.text
)}
onEndEditing={(event) => this.updateText(
'onEndEditing text: ' + event.nativeEvent.text
)}
onSubmitEditing={(event) => this.updateText(
'onSubmitEditing text: ' + event.nativeEvent.text
)}
style={styles.default}
/>
<Text style={styles.eventLabel}>
{this.state.curText}{'\n'}
(prev: {this.state.prevText})
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
page: {
paddingBottom: 300,
},
default: {
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
flex: 1,
fontSize: 13,
},
multiline: {
borderWidth: 0.5,
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
height: 50,
},
eventLabel: {
margin: 3,
fontSize: 12,
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
flex: 1,
},
label: {
width: 80,
justifyContent: 'flex-end',
flexDirection: 'row',
marginRight: 10,
paddingTop: 2,
},
});
exports.title = '<TextInput>';
exports.description = 'Single-line text inputs.';
exports.examples = [
{
title: 'Auto-focus',
render: function() {
return <TextInput autoFocus={true} style={styles.default} />;
}
},
{
title: 'Auto-capitalize',
render: function() {
return (
<View>
<WithLabel label="none">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.none}
style={styles.default}
/>
</WithLabel>
<WithLabel label="sentences">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.sentences}
style={styles.default}
/>
</WithLabel>
<WithLabel label="words">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.words}
style={styles.default}
/>
</WithLabel>
<WithLabel label="characters">
<TextInput
autoCapitalize={TextInput.autoCapitalizeMode.characters}
style={styles.default}
/>
</WithLabel>
</View>
);
}
},
{
title: 'Auto-correct',
render: function() {
return (
<View>
<WithLabel label="true">
<TextInput autoCorrect={true} style={styles.default} />
</WithLabel>
<WithLabel label="false">
<TextInput autoCorrect={false} style={styles.default} />
</WithLabel>
</View>
);
}
},
{
title: 'Event handling',
render: () => <TextEventsExample />,
},
{
title: 'Colored input text',
render: function() {
return (
<View>
<TextInput
style={[styles.default, {color: 'blue'}]}
value="Blue"
/>
<TextInput
style={[styles.default, {color: 'green'}]}
value="Green"
/>
</View>
);
}
},
];

134
Examples/UIExplorer/TouchableExample.js Normal file
View File

@ -0,0 +1,134 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule TouchableExample
*/
'use strict';
var React = require('react-native');
var {
PixelRatio,
Image,
StyleSheet,
Text,
TouchableHighlight,
View,
} = React;
exports.title = '<Touchable*> and onPress';
exports.examples = [
{
title: '<TouchableHighlight>',
description: 'TouchableHighlight works by adding an extra view with a ' +
'black background under the single child view. This works best when the ' +
'child view is fully opaque, although it can be made to work as a simple ' +
'background color change as well with the activeOpacity and ' +
'underlayColor props.',
render: function() {
return (
<View>
<View style={styles.row}>
<TouchableHighlight
style={styles.wrapper}
onPress={() => console.log('stock THW image - highlight')}>
<Image
source={heartImage}
style={styles.image}
/>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
activeOpacity={1}
animationVelocity={0}
underlayColor="rgb(210, 230, 255)"
onPress={() => console.log('custom THW text - hightlight')}>
<View style={styles.wrapperCustom}>
<Text style={styles.text}>
Tap Here For Custom Highlight!
</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
},
}, {
title: '<Text onPress={fn}> with highlight',
render: function() {
return <TextOnPressBox />;
},
}];
var TextOnPressBox = React.createClass({
getInitialState: function() {
return {
timesPressed: 0,
};
},
textOnPress: function() {
this.setState({
timesPressed: this.state.timesPressed + 1,
});
},
render: function() {
var textLog = '';
if (this.state.timesPressed > 1) {
textLog = this.state.timesPressed + 'x text onPress';
} else if (this.state.timesPressed > 0) {
textLog = 'text onPress';
}
return (
<View>
<Text
style={styles.textBlock}
onPress={this.textOnPress}>
Text has built-in onPress handling
</Text>
<View style={styles.logBox}>
<Text>
{textLog}
</Text>
</View>
</View>
);
}
});
var heartImage = {uri: 'https://pbs.twimg.com/media/BlXBfT3CQAA6cVZ.png:small'};
var styles = StyleSheet.create({
row: {
alignItems: 'center',
flexDirection: 'row',
},
icon: {
width: 24,
height: 24,
},
image: {
width: 50,
height: 50,
},
text: {
fontSize: 16,
},
wrapper: {
borderRadius: 8,
},
wrapperCustom: {
borderRadius: 8,
padding: 6,
},
logBox: {
padding: 20,
margin: 10,
borderWidth: 1 / PixelRatio.get(),
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9',
},
textBlock: {
fontWeight: 'bold',
color: 'blue',
},
});

319
Examples/UIExplorer/UIExplorer.xcodeproj/project.pbxproj Normal file
View File

@ -0,0 +1,319 @@
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832348291A77B50100B55238 /* libReactKit.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
832348281A77B50100B55238 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
remoteInfo = ReactKit;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
13B07F961A680F5B00A75B9A /* UIExplorer.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = UIExplorer.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = AppDelegate.m; sourceTree = "<group>"; };
13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
834D32361A76971A00F38302 /* ReactKit.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ReactKit.xcodeproj; path = ../../ReactKit/ReactKit.xcodeproj; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
8323482C1A77B59500B55238 /* libReactKit.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
13B07FAE1A68108700A75B9A /* UIExplorer */ = {
isa = PBXGroup;
children = (
13B07FAF1A68108700A75B9A /* AppDelegate.h */,
13B07FB01A68108700A75B9A /* AppDelegate.m */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
13B07FB71A68108700A75B9A /* main.m */,
);
name = UIExplorer;
sourceTree = "<group>";
};
832348241A77B50100B55238 /* Products */ = {
isa = PBXGroup;
children = (
832348291A77B50100B55238 /* libReactKit.a */,
);
name = Products;
sourceTree = "<group>";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
834D32361A76971A00F38302 /* ReactKit.xcodeproj */,
13B07FAE1A68108700A75B9A /* UIExplorer */,
83CBBA001A601CBA00E9B192 /* Products */,
);
sourceTree = "<group>";
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* UIExplorer.app */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
13B07F861A680F5B00A75B9A /* UIExplorer */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "UIExplorer" */;
buildPhases = (
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
);
buildRules = (
);
dependencies = (
);
name = UIExplorer;
productName = "Hello World";
productReference = 13B07F961A680F5B00A75B9A /* UIExplorer.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
ORGANIZATIONNAME = Facebook;
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "UIExplorer" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectReferences = (
{
ProductGroup = 832348241A77B50100B55238 /* Products */;
ProjectRef = 834D32361A76971A00F38302 /* ReactKit.xcodeproj */;
},
);
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* UIExplorer */,
);
};
/* End PBXProject section */
/* Begin PBXReferenceProxy section */
832348291A77B50100B55238 /* libReactKit.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libReactKit.a;
remoteRef = 832348281A77B50100B55238 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */
/* Begin PBXResourcesBuildPhase section */
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
13B07FC11A68108700A75B9A /* main.m in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin PBXVariantGroup section */
13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
isa = PBXVariantGroup;
children = (
13B07FB21A68108700A75B9A /* Base */,
);
name = LaunchScreen.xib;
sourceTree = "<group>";
};
/* End PBXVariantGroup section */
/* Begin XCBuildConfiguration section */
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = UIExplorer;
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
INFOPLIST_FILE = "$(SRCROOT)/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
OTHER_LDFLAGS = "-ObjC";
PRODUCT_NAME = UIExplorer;
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
SDKROOT = iphoneos;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
HEADER_SEARCH_PATHS = (
"$(inherited)",
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
"$(SRCROOT)/../../ReactKit/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 7.0;
MTL_ENABLE_DEBUG_INFO = NO;
SDKROOT = iphoneos;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "UIExplorer" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "UIExplorer" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}

7
Examples/UIExplorer/UIExplorer.xcodeproj/project.xcworkspace/contents.xcworkspacedata generated Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "self:UIExplorer.xcodeproj">
</FileRef>
</Workspace>

8
Examples/UIExplorer/UIExplorer.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEWorkspaceSharedSettings_AutocreateContextsIfNeeded</key>
<false/>
</dict>
</plist>

86
Examples/UIExplorer/UIExplorer.xcodeproj/xcshareddata/xcschemes/UIExplorer.xcscheme Normal file
View File

@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "0610"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
buildImplicitDependencies = "YES">
<BuildActionEntries>
<BuildActionEntry
buildForTesting = "YES"
buildForRunning = "YES"
buildForProfiling = "YES"
buildForArchiving = "YES"
buildForAnalyzing = "YES">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</BuildActionEntry>
</BuildActionEntries>
</BuildAction>
<TestAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
shouldUseLaunchSchemeArgsEnv = "YES"
buildConfiguration = "Debug">
<Testables>
</Testables>
<MacroExpansion>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</MacroExpansion>
</TestAction>
<LaunchAction
selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
launchStyle = "0"
useCustomWorkingDirectory = "NO"
buildConfiguration = "Debug"
ignoresPersistentStateOnLaunch = "NO"
debugDocumentVersioning = "YES"
allowLocationSimulation = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
<AdditionalOptions>
</AdditionalOptions>
</LaunchAction>
<ProfileAction
shouldUseLaunchSchemeArgsEnv = "YES"
savedToolIdentifier = ""
useCustomWorkingDirectory = "NO"
buildConfiguration = "Release"
debugDocumentVersioning = "YES">
<BuildableProductRunnable>
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
BuildableName = "UIExplorer.app"
BlueprintName = "UIExplorer"
ReferencedContainer = "container:UIExplorer.xcodeproj">
</BuildableReference>
</BuildableProductRunnable>
</ProfileAction>
<AnalyzeAction
buildConfiguration = "Debug">
</AnalyzeAction>
<ArchiveAction
buildConfiguration = "Release"
revealArchiveInOrganizer = "YES">
</ArchiveAction>
</Scheme>

44
Examples/UIExplorer/UIExplorerApp.js Normal file
View File

@ -0,0 +1,44 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerApp
*/
'use strict';
var React = require('react-native/addons');
var UIExplorerList = require('./UIExplorerList');
var {
Bundler,
NavigatorIOS,
StyleSheet,
} = React;
var UIExplorerApp = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'UIExplorer',
component: UIExplorerList,
}}
itemWrapperStyle={styles.itemWrapper}
tintColor='#008888'/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
},
itemWrapper: {
backgroundColor: '#eaeaea',
},
});
Bundler.registerComponent('UIExplorerApp', () => UIExplorerApp);
module.exports = UIExplorerApp;

93
Examples/UIExplorer/UIExplorerBlock.js Normal file
View File

@ -0,0 +1,93 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerBlock
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = React.createClass({
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.string,
},
getInitialState: function() {
return {description: null};
},
render: function() {
var description;
if (this.props.description) {
description =
<Text style={styles.descriptionText}>
{this.props.description}
</Text>;
}
return (
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.title}
</Text>
{description}
</View>
<View style={styles.children}>
{this.props.children}
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
borderRadius: 3,
borderWidth: 0.5,
borderColor: '#d6d7da',
backgroundColor: '#ffffff',
margin: 10,
marginVertical: 5,
overflow: 'hidden',
},
titleContainer: {
borderWidth: 0.5,
borderColor: '#d6d7da',
backgroundColor: '#f6f7f8',
paddingHorizontal: 10,
paddingVertical: 5,
},
titleRow: {
flexDirection: 'row',
justifyContent: 'space-between',
},
titleText: {
fontSize: 14,
fontWeight: 'bold',
},
descriptionText: {
fontSize: 14,
},
disclosure: {
position: 'absolute',
top: 0,
right: 0,
padding: 10,
},
disclosureIcon: {
width: 12,
height: 8,
},
children: {
padding: 10,
}
});
module.exports = UIExplorerBlock;

111
Examples/UIExplorer/UIExplorerList.js Normal file
View File

@ -0,0 +1,111 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*/
'use strict';
var React = require('react-native/addons');
var {
PixelRatio,
ScrollView,
StyleSheet,
Text,
TouchableHighlight,
View,
invariant,
} = React;
var createExamplePage = require('./createExamplePage');
var EXAMPLES = [
require('./ViewExample'),
require('./LayoutExample'),
require('./TextExample.ios'),
require('./TextInputExample'),
require('./ExpandingTextExample'),
require('./ImageExample'),
require('./ListViewSimpleExample'),
require('./NavigatorIOSExample'),
require('./PointerEventsExample'),
require('./TouchableExample'),
require('./SpinnerExample'),
require('./ScrollViewExample'),
];
var UIExplorerList = React.createClass({
render: function() {
return (
<ScrollView style={styles.list}>
<View style={styles.group}>
<View style={styles.line} />
{EXAMPLES.map(this._renderRow)}
<View style={styles.line} />
</View>
</ScrollView>
);
},
_renderRow: function(example) {
invariant(example.title, 'Example must provide a title.');
return (
<View>
<TouchableHighlight onPress={() => this._onPressRow(example)}>
<View style={styles.row}>
<Text style={styles.rowTitleText}>
{example.title}
</Text>
<Text style={styles.rowDetailText}>
{example.description}
</Text>
</View>
</TouchableHighlight>
<View style={styles.separator} />
</View>
);
},
_onPressRow: function(example) {
var Component = example.examples ?
createExamplePage(null, example) :
example;
this.props.navigator.push({
title: Component.title,
component: Component,
});
},
});
var styles = StyleSheet.create({
list: {
backgroundColor: '#eeeeee',
},
group: {
backgroundColor: 'white',
marginVertical: 25,
},
line: {
backgroundColor: '#bbbbbb',
height: 1 / PixelRatio.get(),
},
row: {
backgroundColor: 'white',
justifyContent: 'center',
paddingHorizontal: 15,
paddingVertical: 8,
},
separator: {
height: 1 / PixelRatio.get(),
backgroundColor: '#bbbbbb',
marginLeft: 15,
},
rowTitleText: {
fontSize: 17,
fontWeight: 'bold',
},
rowDetailText: {
fontSize: 15,
color: '#888888',
lineHeight: 20,
},
});
module.exports = UIExplorerList;

68
Examples/UIExplorer/UIExplorerPage.js Normal file
View File

@ -0,0 +1,68 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerPage
*/
'use strict';
var React = require('react-native');
var {
ScrollView,
StyleSheet,
View,
} = React;
var UIExplorerTitle = require('./UIExplorerTitle');
var UIExplorerPage = React.createClass({
propTypes: {
keyboardShouldPersistTaps: React.PropTypes.bool,
noScroll: React.PropTypes.bool,
noSpacer: React.PropTypes.bool,
},
render: function() {
var ContentWrapper;
var wrapperProps = {};
if (this.props.noScroll) {
ContentWrapper = View;
} else {
ContentWrapper = ScrollView;
wrapperProps.keyboardShouldPeristTaps = true;
wrapperProps.keyboardDismissMode =
ScrollView.keyboardDismissMode.Interactive;
}
var title = this.props.title ?
<UIExplorerTitle title={this.props.title} /> :
null;
var spacer = this.props.noSpacer ? null : <View style={styles.spacer} />;
return (
<View style={styles.container}>
{title}
<ContentWrapper
style={styles.wrapper}
{...wrapperProps}>
{this.props.children}
{spacer}
</ContentWrapper>
</View>
);
},
});
var styles = StyleSheet.create({
container: {
backgroundColor: '#e9eaed',
paddingTop: 15,
flex: 1,
},
spacer: {
height: 270,
},
wrapper: {
flex: 1,
},
});
module.exports = UIExplorerPage;

43
Examples/UIExplorer/UIExplorerTitle.js Normal file
View File

@ -0,0 +1,43 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule UIExplorerTitle
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerTitle = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.text}>
{this.props.title}
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
margin: 10,
height: 45,
padding: 10,
backgroundColor: 'white',
},
text: {
fontSize: 19,
fontWeight: 'bold',
},
});
module.exports = UIExplorerTitle;

123
Examples/UIExplorer/ViewExample.js Normal file
View File

@ -0,0 +1,123 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ViewExample
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var ViewExample = React.createClass({
statics: {
title: '<View>',
description: 'Basic building block of all UI.'
},
getInitialState: function() {
return {
textBorderExampleHeight: 20,
};
},
render: function() {
return (
<UIExplorerPage title={this.props.navigator ? null : '<View>'}>
<UIExplorerBlock title="Background Color">
<View style={{backgroundColor: '#527FE4', padding: 5}}>
<Text style={{fontSize: 11}}>
Blue background
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border">
<View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
<Text style={{fontSize: 11}}>5px blue border</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Padding/Margin">
<View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
<View style={[styles.box, {padding: 5}]}>
<Text style={{fontSize: 11}}>5px padding</Text>
</View>
<View style={[styles.box, {margin: 5}]}>
<Text style={{fontSize: 11}}>5px margin</Text>
</View>
<View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
<Text style={{fontSize: 11}}>
5px margin and padding,
</Text>
<Text style={{fontSize: 11}}>
widthAutonomous=true
</Text>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Border Radius">
<View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
<Text style={{fontSize: 11}}>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames.
Use sparingly.
</Text>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Circle with Border Radius">
<View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
</UIExplorerBlock>
<UIExplorerBlock title="Overflow">
<View style={{flexDirection: 'row'}}>
<View
style={{
width: 95,
height: 10,
marginRight: 10,
marginBottom: 5,
overflow: 'hidden',
borderWidth: 0.5,
}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow hidden</Text>
</View>
</View>
<View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
<View style={{width: 200, height: 20}}>
<Text>Overflow visible</Text>
</View>
</View>
</View>
</UIExplorerBlock>
<UIExplorerBlock title="Opacity">
<View style={{opacity: 0}}><Text>Opacity 0</Text></View>
<View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
<View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
<View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
<View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
<View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
<View style={{opacity: 1}}><Text>Opacity 1</Text></View>
</UIExplorerBlock>
</UIExplorerPage>
);
},
updateHeight: function() {
var height = this.state.textBorderExampleHeight === 50 ? 20 : 50;
this.setState({textBorderExampleHeight: height});
},
});
var styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
}
});
module.exports = ViewExample;

59
Examples/UIExplorer/createExamplePage.js Normal file
View File

@ -0,0 +1,59 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule createExamplePage
*/
'use strict';
var React = require('react-native');
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var invariant = require('invariant');
var createExamplePage = function(title, exampleModule) {
invariant(!!exampleModule.examples, 'The module must have examples');
var ExamplePage = React.createClass({
statics: {
title: exampleModule.title,
description: exampleModule.description,
},
getBlock: function(example) {
// Hack warning: This is a hack because the www UI explorer requires
// renderComponent to be called.
var originalRenderComponent = React.renderComponent;
var originalRender = React.render;
var renderedComponent;
React.render = React.renderComponent = function(element, container) {
renderedComponent = element;
};
var result = example.render(null);
if (result) {
renderedComponent = result;
}
React.renderComponent = originalRenderComponent;
React.render = originalRender;
return (
<UIExplorerBlock
title={example.title}
description={example.description}>
{renderedComponent}
</UIExplorerBlock>
);
},
render: function() {
return (
<UIExplorerPage title={title}>
{exampleModule.examples.map(this.getBlock)}
</UIExplorerPage>
);
}
});
return ExamplePage;
};
module.exports = createExamplePage;

10
Examples/UIExplorer/main.m Normal file
View File

@ -0,0 +1,10 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import <UIKit/UIKit.h>
#import "AppDelegate.h"
int main(int argc, char * argv[]) {
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
}

15
LICENSE Normal file
View File

@ -0,0 +1,15 @@
/**
* Copyright (c) 2015, Facebook, Inc. All rights reserved.
*
* React Native software is currently provided by Facebook to you for
* non-commercial testing and evaluation purposes only. Facebook reserves all
* rights not expressly granted. An open source version of this software will
* be provided at a later date.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

16
Libraries/BatchedBridge/BatchedBridgedModules/NativeModules.js Normal file
View File

@ -0,0 +1,16 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule NativeModules
*/
'use strict';
var NativeModules = require('BatchedBridge').RemoteModules;
// Dirty hack to support old (RK) and new (RCT) native module name conventions
Object.keys(NativeModules).forEach((moduleName) => {
var rkModuleName = moduleName.replace(/^RCT/, 'RK');
NativeModules[rkModuleName] = NativeModules[moduleName];
});
module.exports = NativeModules;

16
Libraries/BatchedBridge/BatchedBridgedModules/NativeModulesDeprecated.js Normal file
View File

@ -0,0 +1,16 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule NativeModulesDeprecated
*/
'use strict';
var RemoteModulesDeprecated = require('BatchedBridge').RemoteModulesDeprecated;
// Dirty hack to support old (RK) and new (RCT) native module name conventions
Object.keys(RemoteModulesDeprecated).forEach((moduleName) => {
var rkModuleName = moduleName.replace(/^RCT/, 'RK');
RemoteModulesDeprecated[rkModuleName] = RemoteModulesDeprecated[moduleName];
});
module.exports = RemoteModulesDeprecated;

11
Libraries/BatchedBridge/BatchedBridgedModules/RCTEventEmitter.js Normal file
View File

@ -0,0 +1,11 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule RCTEventEmitter
*/
'use strict';
var ReactIOSEventEmitter = require('ReactIOSEventEmitter');
// Completely locally implemented - no native hooks.
module.exports = ReactIOSEventEmitter;

12
Libraries/BatchedBridge/BatchedBridgedModules/RCTJSTimers.js Normal file
View File

@ -0,0 +1,12 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule RCTJSTimers
*/
'use strict';
var JSTimersExecution = require('JSTimersExecution');
var RCTJSTimers = JSTimersExecution;
module.exports = RCTJSTimers;

10
Libraries/BatchedBridge/BatchedBridgedModules/RKAlertManager.ios.js Normal file
View File

@ -0,0 +1,10 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule RKAlertManager
*/
'use strict';
var RKAlertManager = require('NativeModulesDeprecated').RKAlertManager;
module.exports = RKAlertManager;

32
Libraries/BatchedBridge/BatchingImplementation/BatchedBridge.js Normal file
View File

@ -0,0 +1,32 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule BatchedBridge
*/
'use strict';
var BatchedBridgeFactory = require('BatchedBridgeFactory');
var MessageQueue = require('MessageQueue');
/**
* Signature that matches the native IOS modules/methods that are exposed. We
* indicate which ones accept a callback. The order of modules and methods
* within them implicitly define their numerical *ID* that will be used to
* describe method calls across the wire. This is so that memory is used
* efficiently and we do not need to copy strings in native land - or across any
* wire.
*/
var remoteModulesConfig = __fbBatchedBridgeConfig.remoteModuleConfig;
var localModulesConfig = __fbBatchedBridgeConfig.localModulesConfig;
var BatchedBridge = BatchedBridgeFactory.create(
MessageQueue,
remoteModulesConfig,
localModulesConfig
);
BatchedBridge._config = remoteModulesConfig;
module.exports = BatchedBridge;

106
Libraries/BatchedBridge/BatchingImplementation/BatchedBridgeFactory.js Normal file
View File

@ -0,0 +1,106 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule BatchedBridgeFactory
*/
'use strict';
var invariant = require('invariant');
var keyMirror = require('keyMirror');
var mapObject = require('mapObject');
var warning = require('warning');
var slice = Array.prototype.slice;
var MethodTypes = keyMirror({
remote: null,
local: null,
});
/**
* Creates remotely invokable modules.
*/
var BatchedBridgeFactory = {
MethodTypes: MethodTypes,
/**
* @deprecated: Remove callsites and delete this method.
*
* @param {MessageQueue} messageQueue Message queue that has been created with
* the `moduleConfig` (among others perhaps).
* @param {object} moduleConfig Configuration of module names/method
* names to callback types.
* @return {object} Remote representation of configured module.
*/
_createDeprecatedBridgedModule: function(messageQueue, moduleConfig, moduleName) {
var remoteModule = mapObject(moduleConfig.methods, function(methodConfig, memberName) {
return methodConfig.type === MethodTypes.local ? null : function() {
var lastArg = arguments.length ? arguments[arguments.length - 1] : null;
var hasCB =
typeof lastArg == 'function';
var args = slice.call(arguments, 0, arguments.length - (hasCB ? 1 : 0));
var cb = hasCB ? lastArg : null;
return messageQueue.callDeprecated(moduleName, memberName, args, cb);
};
});
for (var constName in moduleConfig.constants) {
warning(!remoteModule[constName], 'saw constant and method named %s', constName);
remoteModule[constName] = moduleConfig.constants[constName];
}
return remoteModule;
},
/**
* @param {MessageQueue} messageQueue Message queue that has been created with
* the `moduleConfig` (among others perhaps).
* @param {object} moduleConfig Configuration of module names/method
* names to callback types.
* @return {object} Remote representation of configured module.
*/
_createBridgedModule: function(messageQueue, moduleConfig, moduleName) {
var remoteModule = mapObject(moduleConfig.methods, function(methodConfig, memberName) {
return methodConfig.type === MethodTypes.local ? null : function() {
var lastArg = arguments.length > 0 ? arguments[arguments.length - 1] : null;
var secondLastArg = arguments.length > 1 ? arguments[arguments.length - 2] : null;
var hasSuccCB = typeof lastArg === 'function';
var hasErrorCB = typeof secondLastArg === 'function';
var hasCBs = hasSuccCB;
invariant(
(hasSuccCB && hasErrorCB) || (!hasSuccCB && !hasErrorCB),
'You must supply error callbacks and success callbacks or neither'
);
var args = slice.call(arguments, 0, arguments.length - (hasCBs ? 2 : 0));
var onSucc = hasCBs ? lastArg : null;
var onFail = hasCBs ? secondLastArg : null;
return messageQueue.call(moduleName, memberName, args, onFail, onSucc);
};
});
for (var constName in moduleConfig.constants) {
warning(!remoteModule[constName], 'saw constant and method named %s', constName);
remoteModule[constName] = moduleConfig.constants[constName];
}
return remoteModule;
},
create: function(MessageQueue, modulesConfig, localModulesConfig) {
var messageQueue = new MessageQueue(modulesConfig, localModulesConfig);
return {
callFunction: messageQueue.callFunction.bind(messageQueue),
callFunctionReturnFlushedQueue:
messageQueue.callFunctionReturnFlushedQueue.bind(messageQueue),
invokeCallback: messageQueue.invokeCallback.bind(messageQueue),
invokeCallbackAndReturnFlushedQueue:
messageQueue.invokeCallbackAndReturnFlushedQueue.bind(messageQueue),
flushedQueue: messageQueue.flushedQueue.bind(messageQueue),
// These deprecated modules do not accept an error callback.
RemoteModulesDeprecated: mapObject(modulesConfig, this._createDeprecatedBridgedModule.bind(this, messageQueue)),
RemoteModules: mapObject(modulesConfig, this._createBridgedModule.bind(this, messageQueue)),
setLoggingEnabled: messageQueue.setLoggingEnabled.bind(messageQueue),
getLoggedOutgoingItems: messageQueue.getLoggedOutgoingItems.bind(messageQueue),
getLoggedIncomingItems: messageQueue.getLoggedIncomingItems.bind(messageQueue),
replayPreviousLog: messageQueue.replayPreviousLog.bind(messageQueue)
};
}
};
module.exports = BatchedBridgeFactory;

57
Libraries/Bundler/Bundler.js Normal file
View File

@ -0,0 +1,57 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule Bundler
*/
'use strict';
var invariant = require('invariant');
var renderApplication = require('renderApplication');
if (__DEV__) {
// In order to use Cmd+P to record/dump perf data, we need to make sure
// this module is available in the bundle
require('RCTRenderingPerf');
}
var runnables = {};
class Bundler {
static registerConfig(config) {
for (var i = 0; i < config.length; ++i) {
if (config[i].run) {
Bundler.registerRunnable(config[i].appKey, config[i].run);
} else {
Bundler.registerComponent(config[i].appKey, config[i].component);
}
}
}
static registerComponent(appKey, getComponentFunc) {
runnables[appKey] = {
run: (appParameters) =>
renderApplication(getComponentFunc(), appParameters.initialProps, appParameters.rootTag)
};
return appKey;
}
static registerRunnable(appKey, func) {
runnables[appKey] = {run: func};
return appKey;
}
static runApplication(appKey, appParameters) {
console.log(
'Running application "' + appKey + '" with appParams: ',
appParameters
);
invariant(
runnables[appKey] && runnables[appKey].run,
'Application ' + appKey + ' has not been registered.'
);
runnables[appKey].run(appParameters);
}
}
module.exports = Bundler;

161
Libraries/Components/Image/Image.ios.js Normal file
View File

@ -0,0 +1,161 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule Image
*/
'use strict';
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var NativeMethodsMixin = require('NativeMethodsMixin');
var NativeModulesDeprecated = require('NativeModulesDeprecated');
var PropTypes = require('ReactPropTypes');
var ImageResizeMode = require('ImageResizeMode');
var ImageSourcePropType = require('ImageSourcePropType');
var ImageStylePropTypes = require('ImageStylePropTypes');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var StyleSheet = require('StyleSheet');
var StyleSheetPropType = require('StyleSheetPropType');
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
var flattenStyle = require('flattenStyle');
var insetsDiffer = require('insetsDiffer');
var invariant = require('invariant');
var merge = require('merge');
var warning = require('warning');
/**
* <Image> - A react component for displaying different types of images,
* including network images, static resources, temporary local images, and
* images from local disk, such as the camera roll. Example usage:
*
* renderImages: function() {
* return (
* <View>
* <Image
* style={styles.icon}
* source={ix('myIcon')}
* />
* <Image
* style={styles.logo}
* source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
* />
* </View>
* );
* },
*
* More example code in ImageExample.js
*/
var Image = React.createClass({
propTypes: {
source: ImageSourcePropType,
/**
* accessible - Whether this element should be revealed as an accessible
* element.
*/
accessible: PropTypes.bool,
/**
* accessibilityLabel - Custom string to display for accessibility.
*/
accessibilityLabel: PropTypes.string,
/**
* capInsets - When the image is resized, the corners of the size specified
* by capInsets will stay a fixed size, but the center content and borders
* of the image will be stretched. This is useful for creating resizable
* rounded buttons, shadows, and other resizable assets. More info:
*
* https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets:
*/
capInsets: EdgeInsetsPropType,
style: StyleSheetPropType(ImageStylePropTypes),
/**
* testID - A unique identifier for this element to be used in UI Automation
* testing scripts.
*/
testID: PropTypes.string,
},
statics: {
resizeMode: ImageResizeMode,
sourcePropType: ImageSourcePropType,
},
mixins: [NativeMethodsMixin],
/**
* `NativeMethodsMixin` will look for this when invoking `setNativeProps`. We
* make `this` look like an actual native component class.
*/
viewConfig: {
uiViewClassName: 'UIView',
validAttributes: ReactIOSViewAttributes.UIView
},
render: function() {
var style = flattenStyle([styles.base, this.props.style]);
var source = this.props.source;
var isNetwork = source.uri && source.uri.match(/^https?:/);
invariant(
!(isNetwork && source.isStatic),
'static image uris cannot start with "http": "' + source.uri + '"'
);
var isStored = !source.isStatic && !isNetwork;
var RawImage = isNetwork ? RKNetworkImage : RKStaticImage;
if (this.props.style && this.props.style.tintColor) {
warning(RawImage === RKStaticImage, 'tintColor style only supported on static images.');
}
var contentModes = NativeModulesDeprecated.RKUIManager.UIView.ContentMode;
var resizeMode;
if (style.resizeMode === ImageResizeMode.stretch) {
resizeMode = contentModes.ScaleToFill;
} else if (style.resizeMode === ImageResizeMode.contain) {
resizeMode = contentModes.ScaleAspectFit;
} else { // ImageResizeMode.cover or undefined
resizeMode = contentModes.ScaleAspectFill;
}
var nativeProps = merge(this.props, {
style,
resizeMode,
tintColor: style.tintColor,
});
if (isStored) {
nativeProps.imageTag = source.uri;
} else {
nativeProps.src = source.uri;
}
return <RawImage {...nativeProps} />;
}
});
var styles = StyleSheet.create({
base: {
overflow: 'hidden',
},
});
var CommonImageViewAttributes = merge(ReactIOSViewAttributes.UIView, {
accessible: true,
accessibilityLabel: true,
capInsets: {diff: insetsDiffer}, // UIEdgeInsets=UIEdgeInsetsZero
imageTag: true,
resizeMode: true,
src: true,
testID: PropTypes.string,
});
var RKStaticImage = createReactIOSNativeComponentClass({
validAttributes: merge(CommonImageViewAttributes, { tintColor: true }),
uiViewClassName: 'RCTStaticImage',
});
var RKNetworkImage = createReactIOSNativeComponentClass({
validAttributes: merge(CommonImageViewAttributes, { defaultImageSrc: true }),
uiViewClassName: 'RCTNetworkImageView',
});
module.exports = Image;

33
Libraries/Components/Image/ImageResizeMode.js Normal file
View File

@ -0,0 +1,33 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageResizeMode
*/
'use strict';
var keyMirror = require('keyMirror');
/**
* ImageResizeMode - Enum for different image resizing modes, set via
* `resizeMode` style property on `<Image>` components.
*/
var ImageResizeMode = keyMirror({
/**
* contain - The image will be resized such that it will be completely
* visible, contained within the frame of the View.
*/
contain: null,
/**
* cover - The image will be resized such that the entire area of the view
* is covered by the image, potentially clipping parts of the image.
*/
cover: null,
/**
* stretch - The image will be stretched to fill the entire frame of the
* view without clipping. This may change the aspect ratio of the image,
* distoring it. Only supported on iOS.
*/
stretch: null,
});
module.exports = ImageResizeMode;

27
Libraries/Components/Image/ImageSourcePropType.js Normal file
View File

@ -0,0 +1,27 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageSourcePropType
* @flow
*/
'use strict';
var { PropTypes } = require('React');
var ImageSourcePropType = PropTypes.shape({
/**
* uri - A string representing the resource identifier for the image, which
* could be an http address, a local file path, or the name of a static image
* resource (which should be wrapped in the `ix` function).
*/
uri: PropTypes.string.isRequired,
/**
* width/height - Used to store the size of the image itself, but unused by
* the <Image> component - use normal style layout properties to define the
* size of the frame.
*/
width: PropTypes.number,
height: PropTypes.number,
});
module.exports = ImageSourcePropType;

45
Libraries/Components/Image/ImageStylePropTypes.js Normal file
View File

@ -0,0 +1,45 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ImageStylePropTypes
*/
'use strict';
var ImageResizeMode = require('ImageResizeMode');
var LayoutPropTypes = require('LayoutPropTypes');
var ReactPropTypes = require('ReactPropTypes');
var merge = require('merge');
var ImageStylePropTypes = merge(
LayoutPropTypes,
{
resizeMode: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)),
backgroundColor: ReactPropTypes.string,
borderColor: ReactPropTypes.string,
borderWidth: ReactPropTypes.number,
borderRadius: ReactPropTypes.number,
// iOS-Specific style to "tint" an image.
// It changes the color of all the non-transparent pixels to the tintColor
tintColor: ReactPropTypes.string,
opacity: ReactPropTypes.number,
}
);
// Image doesn't support padding correctly (#4841912)
var unsupportedProps = Object.keys({
padding: null,
paddingTop: null,
paddingLeft: null,
paddingRight: null,
paddingBottom: null,
paddingVertical: null,
paddingHorizontal: null,
});
for (var key in unsupportedProps) {
delete ImageStylePropTypes[key];
}
module.exports = ImageStylePropTypes;

26
Libraries/Components/Image/ix.js Normal file
View File

@ -0,0 +1,26 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ix
*/
'use strict';
/**
* This function is used to mark string literals that are image paths. The
* return value is a blob of data that core image components understand how to
* render.
*
* The arguments to ix() must be string literals so that they can be parsed
* statically.
*
* @param string Image path to render
* @return object Data blob to be used by core UI components
*/
function ix(path) {
return {
uri: path,
isStatic: true,
};
}
module.exports = ix;

469
Libraries/Components/ListView/ListView.js Normal file
View File

@ -0,0 +1,469 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ListView
*/
'use strict';
var ListViewDataSource = require('ListViewDataSource');
var React = require('React');
var RKUIManager = require('NativeModules').RKUIManager;
var ScrollView = require('ScrollView');
var ScrollResponder = require('ScrollResponder');
var StaticRenderer = require('StaticRenderer');
var TimerMixin = require('TimerMixin');
var logError = require('logError');
var merge = require('merge');
var isEmpty = require('isEmpty');
var PropTypes = React.PropTypes;
/**
* ListView - A core component designed for efficient display of vertically
* scrolling lists of changing data. The minimal API is to create a
* `ListViewDataSource`, populate it with a simple array of data blobs, and
* instantiate a `ListView` component with that data source and a `renderRow`
* callback which takes a blob from the data array and returns a renderable
* component. Minimal example:
*
* getInitialState: function() {
* var ds = new ListViewDataSource({rowHasChanged: (r1, r2) => r1 !== r2});
* return {
* dataSource: ds.cloneWithRows(['row 1', 'row 2']),
* };
* },
*
* render: function() {
* return (
* <ListView
* dataSource={this.state.dataSource}
* renderRow={(rowData) => <Text>{rowData}</Text>}
* />
* );
* },
*
* ListView also supports more advanced features, including sections with sticky
* section headers, header and footer support, callbacks on reaching the end of
* the available data (`onEndReached`) and on the set of rows that are visible
* in the device viewport change (`onChangeVisibleRows`), and several
* performance optimizations.
*
* There are a few performance operations designed to make ListView scroll
* smoothly while dynamically loading potentially very large (or conceptually
* infinite) data sets:
*
* * Only re-render changed rows - the hasRowChanged function provided to the
* data source tells the ListView if it needs to re-render a row because the
* source data has changed - see ListViewDataSource for more details.
*
* * Rate-limited row rendering - By default, only one row is rendered per
* event-loop (customizable with the `pageSize` prop). This breaks up the
* work into smaller chunks to reduce the chance of dropping frames while
* rendering rows.
*
* Check out `ListViewSimpleExample.js`, `ListViewDataSource.js`, and the Movies
* app for more info and example usage.
*/
var DEFAULT_PAGE_SIZE = 1;
var DEFAULT_INITIAL_ROWS = 10;
var DEFAULT_SCROLL_RENDER_AHEAD = 1000;
var DEFAULT_END_REACHED_THRESHOLD = 1000;
var DEFAULT_SCROLL_CALLBACK_THROTTLE = 50;
var RENDER_INTERVAL = 20;
var SCROLLVIEW_REF = 'listviewscroll';
var ListView = React.createClass({
mixins: [ScrollResponder.Mixin, TimerMixin],
/**
* You must provide a renderRow function. If you omit any of the other render
* functions, ListView will simply skip rendering them.
*
* - renderRow(rowData, sectionID, rowID);
* - renderSectionHeader(sectionData, sectionID);
*/
propTypes:
merge(
ScrollView.PropTypes, {
dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired,
/**
* (rowData, sectionID, rowID) => renderable
* Takes a data entry from the data source and its ids and should return
* a renderable component to be rendered as the row. By default the data
* is exactly what was put into the data source, but it's also possible to
* provide custom extractors.
*/
renderRow: PropTypes.func.isRequired,
/**
* How many rows to render on initial component mount. Use this to make
* it so that the first screen worth of data apears at one time instead of
* over the course of multiple frames.
*/
initialListSize: PropTypes.number,
/**
* Called when all rows have been rendered and the list has been scrolled
* to within onEndReachedThreashold of the bottom. The native scroll
* event is provided.
*/
onEndReached: PropTypes.func,
/**
* Threshold in pixels for onEndReached.
*/
onEndReachedThreshold: PropTypes.number,
/**
* Number of rows to render per event loop.
*/
pageSize: PropTypes.number,
/**
* () => renderable
*
* The header and footer are always rendered (if these props are provided)
* on every render pass. If they are expensive to re-render, wrap them
* in StaticContainer or other mechanism as appropriate. Footer is always
* at the bottom of the list, and header at the top, on every render pass.
*/
renderFooter: PropTypes.func,
renderHeader: PropTypes.func,
/**
* (sectionData, sectionID) => renderable
*
* If provided, a sticky header is rendered for this section. The sticky
* behavior means that it will scroll with the content at the top of the
* section until it reaches the top of the screen, at which point it will
* stick to the top until it is pushed off the screen by the next section
* header.
*/
renderSectionHeader: PropTypes.func,
/**
* How early to start rendering rows before they come on screen, in
* pixels.
*/
scrollRenderAheadDistance: React.PropTypes.number,
/**
* (visibleRows, changedRows) => void
*
* Called when the set of visible rows changes. `visibleRows` maps
* { sectionID: { rowID: true }} for all the visible rows, and
* `changedRows` maps { sectionID: { rowID: true | false }} for the rows
* that have changed their visibility, with true indicating visible, and
* false indicating the view has moved out of view.
*/
onChangeVisibleRows: React.PropTypes.func,
/**
* An experimental performance optimization for improving scroll perf of
* large lists, used in conjunction with overflow: 'hidden' on the row
* containers. Use at your own risk.
*/
removeClippedSubviews: React.PropTypes.bool,
}),
/**
* Exports some data, e.g. for perf investigations or analytics.
*/
getMetrics: function() {
return {
contentHeight: this.scrollProperties.contentHeight,
totalRows: this.props.dataSource.getRowCount(),
renderedRows: this.state.curRenderedRowsCount,
visibleRows: Object.keys(this._visibleRows).length,
};
},
/**
* Provides a handle to the underlying scroll responder to support operations
* such as scrollTo.
*/
getScrollResponder: function() {
return this.refs[SCROLLVIEW_REF];
},
setNativeProps: function(props) {
this.refs[SCROLLVIEW_REF].setNativeProps(props);
},
/**
* React life cycle hooks.
*/
getDefaultProps: function() {
return {
initialListSize: DEFAULT_INITIAL_ROWS,
pageSize: DEFAULT_PAGE_SIZE,
scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
};
},
getInitialState: function() {
return {
curRenderedRowsCount: this.props.initialListSize,
prevRenderedRowsCount: 0,
};
},
componentWillMount: function() {
// this data should never trigger a render pass, so don't put in state
this.scrollProperties = {
visibleHeight: null,
contentHeight: null,
offsetY: 0
};
this._childFrames = [];
this._visibleRows = {};
},
componentDidMount: function() {
// do this in animation frame until componentDidMount actually runs after
// the component is laid out
this.requestAnimationFrame(() => {
this._measureAndUpdateScrollProps();
this.setInterval(this._renderMoreRowsIfNeeded, RENDER_INTERVAL);
});
},
componentWillReceiveProps: function(nextProps) {
if (this.props.dataSource !== nextProps.dataSource) {
this.setState({prevRenderedRowsCount: 0});
}
},
render: function() {
var bodyComponents = [];
var dataSource = this.props.dataSource;
var allRowIDs = dataSource.rowIdentities;
var rowCount = 0;
var sectionHeaderIndices = [];
var header = this.props.renderHeader && this.props.renderHeader();
var footer = this.props.renderFooter && this.props.renderFooter();
var totalIndex = header ? 1 : 0;
for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
var sectionID = dataSource.sectionIdentities[sectionIdx];
var rowIDs = allRowIDs[sectionIdx];
if (rowIDs.length === 0) {
continue;
}
if (this.props.renderSectionHeader) {
var shouldUpdateHeader = rowCount >= this.state.prevRenderedRowsCount &&
dataSource.sectionHeaderShouldUpdate(sectionIdx);
bodyComponents.push(
<StaticRenderer
key={'s_' + sectionID}
shouldUpdate={!!shouldUpdateHeader}
render={this.props.renderSectionHeader.bind(
null,
dataSource.getSectionHeaderData(sectionIdx),
sectionID
)}
/>
);
sectionHeaderIndices.push(totalIndex++);
}
for (var rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
var rowID = rowIDs[rowIdx];
var comboID = sectionID + rowID;
var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount &&
dataSource.rowShouldUpdate(sectionIdx, rowIdx);
var row =
<StaticRenderer
key={'r_' + comboID}
shouldUpdate={!!shouldUpdateRow}
render={this.props.renderRow.bind(
null,
dataSource.getRowData(sectionIdx, rowIdx),
sectionID,
rowID
)}
/>;
bodyComponents.push(row);
totalIndex++;
if (++rowCount === this.state.curRenderedRowsCount) {
break;
}
}
if (rowCount >= this.state.curRenderedRowsCount) {
break;
}
}
var props = merge(
this.props, {
onScroll: this._onScroll,
stickyHeaderIndices: sectionHeaderIndices,
}
);
if (!props.throttleScrollCallbackMS) {
props.throttleScrollCallbackMS = DEFAULT_SCROLL_CALLBACK_THROTTLE;
}
return (
<ScrollView {...props}
ref={SCROLLVIEW_REF}>
{header}
{bodyComponents}
{footer}
</ScrollView>
);
},
/**
* Private methods
*/
_measureAndUpdateScrollProps: function() {
RKUIManager.measureLayout(
this.refs[SCROLLVIEW_REF].getInnerViewNode(),
this.refs[SCROLLVIEW_REF].getNodeHandle(),
logError,
this._setScrollContentHeight
);
RKUIManager.measureLayoutRelativeToParent(
this.refs[SCROLLVIEW_REF].getNodeHandle(),
logError,
this._setScrollVisibleHeight
);
},
_setScrollContentHeight: function(left, top, width, height) {
this.scrollProperties.contentHeight = height;
},
_setScrollVisibleHeight: function(left, top, width, height) {
this.scrollProperties.visibleHeight = height;
this._updateVisibleRows();
},
_renderMoreRowsIfNeeded: function() {
if (this.scrollProperties.contentHeight === null ||
this.scrollProperties.visibleHeight === null ||
this.state.curRenderedRowsCount === this.props.dataSource.getRowCount()) {
return;
}
var distanceFromEnd = this._getDistanceFromEnd(this.scrollProperties);
if (distanceFromEnd < this.props.scrollRenderAheadDistance) {
this._pageInNewRows();
}
},
_pageInNewRows: function() {
var rowsToRender = Math.min(
this.state.curRenderedRowsCount + this.props.pageSize,
this.props.dataSource.getRowCount()
);
this.setState(
{
prevRenderedRowsCount: this.state.curRenderedRowsCount,
curRenderedRowsCount: rowsToRender
},
() => {
this._measureAndUpdateScrollProps();
this.setState({
prevRenderedRowsCount: this.state.curRenderedRowsCount,
});
}
);
},
_getDistanceFromEnd: function(scrollProperties) {
return scrollProperties.contentHeight -
scrollProperties.visibleHeight -
scrollProperties.offsetY;
},
_updateVisibleRows: function(e) {
if (!this.props.onChangeVisibleRows) {
return; // No need to compute visible rows if there is no callback
}
var updatedFrames = e && e.nativeEvent.updatedChildFrames;
if (updatedFrames) {
updatedFrames.forEach((frame) => {
this._childFrames[frame.index] = merge(frame);
});
}
var dataSource = this.props.dataSource;
var visibleTop = this.scrollProperties.offsetY;
var visibleBottom = visibleTop + this.scrollProperties.visibleHeight;
var allRowIDs = dataSource.rowIdentities;
var header = this.props.renderHeader && this.props.renderHeader();
var totalIndex = header ? 1 : 0;
var visibilityChanged = false;
var changedRows = {};
for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
var rowIDs = allRowIDs[sectionIdx];
if (rowIDs.length === 0) {
continue;
}
var sectionID = dataSource.sectionIdentities[sectionIdx];
if (this.props.renderSectionHeader) {
totalIndex++;
}
var visibleSection = this._visibleRows[sectionID];
if (!visibleSection) {
visibleSection = {};
}
for (var rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
var rowID = rowIDs[rowIdx];
var frame = this._childFrames[totalIndex];
totalIndex++;
if (!frame) {
break;
}
var rowVisible = visibleSection[rowID];
var top = frame.y;
var bottom = top + frame.height;
if (top > visibleBottom || bottom < visibleTop) {
if (rowVisible) {
visibilityChanged = true;
delete visibleSection[rowID];
if (!changedRows[sectionID]) {
changedRows[sectionID] = {};
}
changedRows[sectionID][rowID] = false;
}
} else if (!rowVisible) {
visibilityChanged = true;
visibleSection[rowID] = true;
if (!changedRows[sectionID]) {
changedRows[sectionID] = {};
}
changedRows[sectionID][rowID] = true;
}
}
if (!isEmpty(visibleSection)) {
this._visibleRows[sectionID] = visibleSection;
} else if (this._visibleRows[sectionID]) {
delete this._visibleRows[sectionID];
}
}
visibilityChanged && this.props.onChangeVisibleRows(this._visibleRows, changedRows);
},
_onScroll: function(e) {
this.scrollProperties.visibleHeight = e.nativeEvent.layoutMeasurement.height;
this.scrollProperties.contentHeight = e.nativeEvent.contentSize.height;
this.scrollProperties.offsetY = e.nativeEvent.contentOffset.y;
this._updateVisibleRows(e);
var nearEnd = this._getDistanceFromEnd(this.scrollProperties) < this.props.onEndReachedThreshold;
if (nearEnd &&
this.props.onEndReached &&
this.scrollProperties.contentHeight !== this._sentEndForContentHeight &&
this.state.curRenderedRowsCount === this.props.dataSource.getRowCount()) {
this._sentEndForContentHeight = this.scrollProperties.contentHeight;
this.props.onEndReached(e);
} else {
this._renderMoreRowsIfNeeded();
}
this.props.onScroll && this.props.onScroll(e);
},
});
module.exports = ListView;

379
Libraries/Components/ListView/ListViewDataSource.js Normal file
View File

@ -0,0 +1,379 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ListViewDataSource
* @typechecks
* @flow
*/
'use strict';
var invariant = require('invariant');
var isEmpty = require('isEmpty');
var warning = require('warning');
/**
* ListViewDataSource - Provides efficient data processing and access to the
* ListView component. A ListViewDataSource is created with functions for
* extracting data from the input blob, and comparing elements (with default
* implementations for convenience). The input blob can be as simple as an
* array of strings, or an object with rows nested inside section objects.
*
* To update the data in the datasource, use `cloneWithRows` (or
* `cloneWithRowsAndSections` if you care about sections). The data in the
* data source is immutable, so you can't modify it directly. The clone methods
* suck in the new data and compute a diff for each row so ListView knows
* whether to re-render it or not.
*
* In this example, a component receives data in chunks, handled by
* `_onDataArrived`, which concats the new data onto the old data and updates the
* data source. We use `concat` to create a new array - mutating `this._data`,
* e.g. with `this._data.push(newRowData)`, would be an error. `_rowHasChanged`
* understands the shape of the row data and knows how to efficiently compare
* it.
*
* getInitialState: function() {
* var ds = new ListViewDataSource({rowHasChanged: this._rowHasChanged});
* return {ds};
* },
* _onDataArrived(newData) {
* this._data = this._data.concat(newData);
* this.setState({
* ds: this.state.ds.cloneWithRows(this._data)
* });
* }
*/
function defaultGetRowData(
dataBlob: any,
sectionID: number | string,
rowID: number | string
): any {
return dataBlob[sectionID][rowID];
}
function defaultGetSectionHeaderData(
dataBlob: any,
sectionID: number | string
): any {
return dataBlob[sectionID];
}
type differType = (data1: any, data2: any) => bool;
type ParamType = {
rowHasChanged: differType;
getRowData: ?typeof defaultGetRowData;
sectionHeaderHasChanged: ?differType;
getSectionHeaderData: ?typeof defaultGetSectionHeaderData;
}
class ListViewDataSource {
/**
* @param {ParamType} params
*
* You can provide custom extraction and 'hasChanged' functions for section
* headers and rows. If absent, data will be extracted with the
* `defaultGetRowData` and `defaultGetSectionHeaderData` functions.
*
* - getRowData(dataBlob, sectionID, rowID);
* - getSectionHeaderData(dataBlob, sectionID);
* - rowHasChanged(prevRowData, nextRowData);
* - sectionHeaderHasChanged(prevSectionData, nextSectionData);
*/
constructor(params: ParamType) {
invariant(
params && typeof params.rowHasChanged === 'function',
'Must provide a rowHasChanged function.'
);
this._rowHasChanged = params.rowHasChanged;
this._getRowData = params.getRowData || defaultGetRowData;
this._sectionHeaderHasChanged = params.sectionHeaderHasChanged;
this._getSectionHeaderData =
params.getSectionHeaderData || defaultGetSectionHeaderData;
this._dataBlob = null;
this._dirtyRows = [];
this._dirtySections = [];
this._cachedRowCount = 0;
// These two private variables are accessed by outsiders because ListView
// uses them to iterate over the data in this class.
this.rowIdentities = [];
this.sectionIdentities = [];
}
/**
* @param {object} dataBlob -- This is an arbitrary blob of data. An extractor
* function was defined at construction time. The default extractor assumes
* the data is a plain array or keyed object.
*/
cloneWithRows(
dataBlob: Array<any> | {[key: string]: any},
rowIdentities: ?Array<string>
): ListViewDataSource {
var rowIds = rowIdentities ? [rowIdentities] : null;
if (!this._sectionHeaderHasChanged) {
this._sectionHeaderHasChanged = () => false;
}
return this.cloneWithRowsAndSections({s1: dataBlob}, ['s1'], rowIds);
}
/**
* @param {object} dataBlob -- This is an arbitrary blob of data. An extractor
* function was defined at construction time. The default extractor assumes
* the data is a nested array or keyed object of the form:
*
* { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
*
* or
*
* [ [ <rowData1>, <rowData2>, ... ], ... ]
*
* @param {array} sectionIdentities -- This is an array of identifiers for
* sections. ie. ['s1', 's2', ...]. If not provided, it's assumed that the
* keys of dataBlob are the section identities.
* @param {array} rowIdentities -- This is a 2D array of identifiers for rows.
* ie. [['a1', 'a2'], ['b1', 'b2', 'b3'], ...]. If not provided, it's
* assumed that the keys of the section data are the row identities.
*
* Note: this returns a new object!
*/
cloneWithRowsAndSections(
dataBlob: any,
sectionIdentities: ?Array<string>,
rowIdentities: ?Array<Array<string>>
): ListViewDataSource {
invariant(
typeof this._sectionHeaderHasChanged === 'function',
'Must provide a sectionHeaderHasChanged function with section data.'
);
var newSource = new ListViewDataSource({
getRowData: this._getRowData,
getSectionHeaderData: this._getSectionHeaderData,
rowHasChanged: this._rowHasChanged,
sectionHeaderHasChanged: this._sectionHeaderHasChanged,
});
newSource._dataBlob = dataBlob;
if (sectionIdentities) {
newSource.sectionIdentities = sectionIdentities;
} else {
newSource.sectionIdentities = Object.keys(dataBlob);
}
if (rowIdentities) {
newSource.rowIdentities = rowIdentities;
} else {
newSource.rowIdentities = [];
newSource.sectionIdentities.forEach((sectionID) => {
newSource.rowIdentities.push(Object.keys(dataBlob[sectionID]));
});
}
newSource._cachedRowCount = countRows(newSource.rowIdentities);
newSource._calculateDirtyArrays(
this._dataBlob,
this.sectionIdentities,
this.rowIdentities
);
return newSource;
}
getRowCount(): number {
return this._cachedRowCount;
}
/**
* @param {number} sectionIndex
* @param {number} rowIndex
*
* Returns if the row is dirtied and needs to be rerendered
*/
rowShouldUpdate(sectionIndex: number, rowIndex: number): bool {
var needsUpdate = this._dirtyRows[sectionIndex][rowIndex];
warning(needsUpdate !== undefined,
'missing dirtyBit for section, row: ' + sectionIndex + ', ' + rowIndex);
return needsUpdate;
}
/**
* @param {number} sectionIndex
* @param {number} rowIndex
*
* Gets the data required to render the row.
*/
getRowData(sectionIndex: number, rowIndex: number): any {
var sectionID = this.sectionIdentities[sectionIndex];
var rowID = this.rowIdentities[sectionIndex][rowIndex];
warning(
sectionID !== undefined && rowID !== undefined,
'rendering invalid section, row: ' + sectionIndex + ', ' + rowIndex
);
return this._getRowData(this._dataBlob, sectionID, rowID);
}
/**
* @param {number} index
*
* Gets the rowID at index provided if the dataSource arrays were flattened
*/
getRowIDForFlatIndex(index: number): string {
var accessIndex = index;
for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
if (accessIndex >= this.rowIdentities[ii].length) {
accessIndex -= this.rowIdentities[ii].length;
} else {
return this.rowIdentities[ii][accessIndex];
}
}
}
/**
* @param {number} index
*
* Gets the sectionID at index provided if the dataSource arrays were flattened
*/
getSectionIDForFlatIndex(index: number): string {
var accessIndex = index;
for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
if (accessIndex >= this.rowIdentities[ii].length) {
accessIndex -= this.rowIdentities[ii].length;
} else {
return this.sectionIdentities[ii];
}
}
}
/**
* Returns an array containing the number of rows in each section
*/
getSectionLengths(): Array<number> {
var results = [];
for (var ii = 0; ii < this.sectionIdentities.length; ii++) {
results.push(this.rowIdentities[ii].length);
}
return results;
}
/**
* @param {number} sectionIndex
*
* Returns if the section header is dirtied and needs to be rerendered
*/
sectionHeaderShouldUpdate(sectionIndex: number): bool {
var needsUpdate = this._dirtySections[sectionIndex];
warning(needsUpdate !== undefined,
'missing dirtyBit for section: ' + sectionIndex);
return needsUpdate;
}
/**
* @param {number} sectionIndex
*
* Gets the data required to render the section header
*/
getSectionHeaderData(sectionIndex: number): any {
if (!this._getSectionHeaderData) {
return null;
}
var sectionID = this.sectionIdentities[sectionIndex];
warning(sectionID !== undefined,
'renderSection called on invalid section: ' + sectionIndex);
return this._getSectionHeaderData(this._dataBlob, sectionID);
}
/**
* Private members and methods.
*/
_getRowData: typeof defaultGetRowData;
_getSectionHeaderData: typeof defaultGetSectionHeaderData;
_rowHasChanged: differType;
_sectionHeaderHasChanged: ?differType;
_dataBlob: any;
_dirtyRows: Array<Array<bool>>;
_dirtySections: Array<bool>;
_cachedRowCount: number;
// These two 'protected' variables are accessed by ListView to iterate over
// the data in this class.
rowIdentities: Array<Array<string>>;
sectionIdentities: Array<string>;
_calculateDirtyArrays(
prevDataBlob: any,
prevSectionIDs: Array<string>,
prevRowIDs: Array<Array<string>>
): void {
// construct a hashmap of the existing (old) id arrays
var prevSectionsHash = keyedDictionaryFromArray(prevSectionIDs);
var prevRowsHash = {};
for (var ii = 0; ii < prevRowIDs.length; ii++) {
var sectionID = prevSectionIDs[ii];
warning(
!prevRowsHash[sectionID],
'SectionID appears more than once: ' + sectionID
);
prevRowsHash[sectionID] = keyedDictionaryFromArray(prevRowIDs[ii]);
}
// compare the 2 identity array and get the dirtied rows
this._dirtySections = [];
this._dirtyRows = [];
var dirty;
for (var sIndex = 0; sIndex < this.sectionIdentities.length; sIndex++) {
var sectionID = this.sectionIdentities[sIndex];
// dirty if the sectionHeader is new or _sectionHasChanged is true
dirty = !prevSectionsHash[sectionID];
var sectionHeaderHasChanged = this._sectionHeaderHasChanged;
if (!dirty && sectionHeaderHasChanged) {
dirty = sectionHeaderHasChanged(
this._getSectionHeaderData(prevDataBlob, sectionID),
this._getSectionHeaderData(this._dataBlob, sectionID)
);
}
this._dirtySections.push(!!dirty);
this._dirtyRows[sIndex] = [];
for (var rIndex = 0; rIndex < this.rowIdentities[sIndex].length; rIndex++) {
var rowID = this.rowIdentities[sIndex][rIndex];
// dirty if the section is new, row is new or _rowHasChanged is true
dirty =
!prevSectionsHash[sectionID] ||
!prevRowsHash[sectionID][rowID] ||
this._rowHasChanged(
this._getRowData(prevDataBlob, sectionID, rowID),
this._getRowData(this._dataBlob, sectionID, rowID)
);
this._dirtyRows[sIndex].push(!!dirty);
}
}
}
}
function countRows(allRowIDs) {
var totalRows = 0;
for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
var rowIDs = allRowIDs[sectionIdx];
totalRows += rowIDs.length;
}
return totalRows;
}
function keyedDictionaryFromArray(arr) {
if (isEmpty(arr)) {
return {};
}
var result = {};
for (var ii = 0; ii < arr.length; ii++) {
var key = arr[ii];
warning(!result[key], 'Value appears more than once in array: ' + key);
result[key] = true;
}
return result;
}
module.exports = ListViewDataSource;

555
Libraries/Components/Navigation/NavigatorIOS.ios.js Normal file
View File

@ -0,0 +1,555 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule NavigatorIOS
*/
'use strict';
var EventEmitter = require('EventEmitter');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var { RKUIManager } = require('NativeModules');
var StyleSheet = require('StyleSheet');
var StaticContainer = require('StaticContainer.react');
var View = require('View');
var createReactIOSNativeComponentClass =
require('createReactIOSNativeComponentClass');
var invariant = require('invariant');
var logError = require('logError');
var merge = require('merge');
/**
* NavigatorIOS wraps UIKit navigation and allows you to add back-swipe
* functionality across your app.
*
* See UIExplorerApp and NavigatorIOSExample for a full example
*
* ======================= NavigatorIOS Routes ================================
* A route is an object used to describe each page in the navigator. The first
* route is provided to NavigatorIOS as `initialRoute`:
*
* ```
* render: function() {
* return (
* <NavigatorIOS
* initialRoute={{
* component: MyView,
* title: 'My View Title',
* passProps: { myProp: 'foo' },
* }}/>
* );
* },
* ```
*
* Now MyView will be rendered by the navigator. It will recieve the route
* object in the `route` prop, a navigator, and all of the props specified in
* `passProps`.
*
* See the initialRoute propType for a complete definition of a route.
*
* ====================== NavigatorIOS Navigator ==============================
* A `navigator` is an object of navigation functions that a view can call. It
* is passed as a prop to any component rendered by NavigatorIOS.
*
* ```
* var MyView = React.createClass({
* _handleBackButtonPress: function() {
* this.props.navigator.pop();
* },
* _handleNextButtonPress: function() {
* this.props.navigator.push(nextRoute);
* },
* ...
* });
* ```
*
* A navigation object contains the following functions:
* - `push(route)` - Navigate forward to a new route
* - `pop()` - Go back one page
* - `popN(n)` - Go back N pages at once. When N=1, behavior matches `pop()`
* - `replace(route)` - Replace the route for the current page and immediately
* load the view for the new route
* - `replacePrevious(route)` - Replace the route/view for the previous page
* - `replacePreviousAndPop(route)` - Replaces the previous route/view and
* transitions back to it
* - `resetTo(route)` - Replaces the top item and popToTop
* - `popToRoute(route)` - Go back to the item for a particular route object
* - `popToTop()` - Go back to the top item
*
* Navigator functions are also available on the NavigatorIOS component:
*
* ```
* var MyView = React.createClass({
* _handleNavigationRequest: function() {
* this.refs.nav.push(otherRoute);
* },
* render: () => (
* <NavigatorIOS
* ref='nav',
* initialRoute={...}/>
* ),
* });
* ```
*
*/
var TRANSITIONER_REF = 'transitionerRef';
var PropTypes = React.PropTypes;
var __uid = 0;
function getuid() {
return __uid++;
}
var RKNavigator = createReactIOSNativeComponentClass({
validAttributes: merge(ReactIOSViewAttributes.UIView, {
requestedTopOfStack: true
}),
uiViewClassName: 'RCTNavigator',
});
var RKNavigatorItem = createReactIOSNativeComponentClass({
validAttributes: {
// TODO: Remove or fix the attributes that are not fully functional.
// NavigatorIOS does not use them all, because some are problematic
title: true,
barTintColor: true,
rightButtonTitle: true,
onNavRightButtonTap: true,
tintColor: true,
backButtonTitle: true,
titleTextColor: true,
style: true,
},
uiViewClassName: 'RCTNavItem',
});
var NavigatorTransitionerIOS = React.createClass({
requestSchedulingNavigation: function(cb) {
RKUIManager.requestSchedulingJavaScriptNavigation(
this.getNodeHandle(),
logError,
cb
);
},
render: function() {
return (
<RKNavigator {...this.props}/>
);
},
});
/**
* Think of `<NavigatorIOS>` as simply a component that renders an
* `RKNavigator`, and moves the `RKNavigator`'s `requestedTopOfStack` pointer
* forward and backward. The `RKNavigator` interprets changes in
* `requestedTopOfStack` to be pushes and pops of children that are rendered.
* `<NavigatorIOS>` always ensures that whenever the `requestedTopOfStack`
* pointer is moved, that we've also rendered enough children so that the
* `RKNavigator` can carry out the push/pop with those children.
* `<NavigatorIOS>` also removes children that will no longer be needed
* (after the pop of a child has been fully completed/animated out).
*/
var NavigatorIOS = React.createClass({
propTypes: {
/**
* NavigatorIOS uses "route" objects to identify child views, their props,
* and navigation bar configuration. "push" and all the other navigation
* operations expect routes to be like this:
*/
initialRoute: PropTypes.shape({
/**
* The React Class to render for this route
*/
component: PropTypes.func.isRequired,
/**
* The title displayed in the nav bar and back button for this route
*/
title: PropTypes.string.isRequired,
/**
* Specify additional props passed to the component. NavigatorIOS will
* automatically provide "route" and "navigator" components
*/
passProps: PropTypes.object,
/**
* If set, the right header button will appear with this name
*/
rightButtonTitle: PropTypes.string,
/**
* Called when the right header button is pressed
*/
onRightButtonPress: PropTypes.func,
/**
* Styles for the navigation item containing the component
*/
wrapperStyle: View.stylePropType,
}).isRequired,
/**
* The default wrapper style for components in the navigator.
* A common use case is to set the backgroundColor for every page
*/
itemWrapperStyle: View.stylePropType,
/**
* The color used for buttons in the navigation bar
*/
tintColor: PropTypes.string,
},
componentWillMount: function() {
// Precompute a pack of callbacks that's frequently generated and passed to
// instances.
this.navigator = {
push: this.push,
pop: this.pop,
popN: this.popN,
replace: this.replace,
replacePrevious: this.replacePrevious,
replacePreviousAndPop: this.replacePreviousAndPop,
resetTo: this.resetTo,
popToRoute: this.popToRoute,
popToTop: this.popToTop,
};
},
getInitialState: function() {
return {
idStack: [getuid()],
routeStack: [this.props.initialRoute],
// The navigation index that we wish to push/pop to.
requestedTopOfStack: 0,
// The last index that native has sent confirmation of completed push/pop
// for. At this point, we can discard any views that are beyond the
// `requestedTopOfStack`. A value of `null` means we have not received
// any confirmation, ever. We may receive an `observedTopOfStack` without
// ever requesting it - native can instigate pops of its own with the
// backswipe gesture.
observedTopOfStack: 0,
progress: 1,
fromIndex: 0,
toIndex: 0,
// Whether or not we are making a navigator request to push/pop. (Used
// for performance optimization).
makingNavigatorRequest: false,
// Whether or not we are updating children of navigator and if so (not
// `null`) which index marks the beginning of all updates. Used for
// performance optimization.
updatingAllIndicesAtOrBeyond: 0,
};
},
_handleFocusRequest: function(item) {
if (this.state.makingNavigatorRequest) {
this._toFocusOnNavigationComplete = item;
} else {
this._getFocusEmitter().emit('focus', item);
}
},
_getFocusEmitter: function() {
if (!this._focusEmitter) {
this._focusEmitter = new EventEmitter();
}
return this._focusEmitter;
},
getChildContext: function() {
return {
onFocusRequested: this._handleFocusRequest,
focusEmitter: this._getFocusEmitter(),
};
},
childContextTypes: {
onFocusRequested: React.PropTypes.func,
focusEmitter: React.PropTypes.instanceOf(EventEmitter),
},
_tryLockNavigator: function(cb) {
this.refs[TRANSITIONER_REF].requestSchedulingNavigation(
(acquiredLock) => acquiredLock && cb()
);
},
_handleNavigatorStackChanged: function(e) {
var newObservedTopOfStack = e.nativeEvent.stackLength - 1;
invariant(
newObservedTopOfStack <= this.state.requestedTopOfStack,
'No navigator item should be pushed without JS knowing about it %s %s', newObservedTopOfStack, this.state.requestedTopOfStack
);
var wasWaitingForConfirmation =
this.state.requestedTopOfStack !== this.state.observedTopOfStack;
if (wasWaitingForConfirmation) {
invariant(
newObservedTopOfStack === this.state.requestedTopOfStack,
'If waiting for observedTopOfStack to reach requestedTopOfStack, ' +
'the only valid observedTopOfStack should be requestedTopOfStack.'
);
}
// Mark the most recent observation regardless of if we can lock the
// navigator. `observedTopOfStack` merely represents what we've observed
// and this first `setState` is only executed to update debugging
// overlays/navigation bar.
// Also reset progress, toIndex, and fromIndex as they might not end
// in the correct states for a two possible reasons:
// Progress isn't always 0 or 1 at the end, the system rounds
// If the Navigator is offscreen these values won't be updated
// TOOD: Revisit this decision when no longer relying on native navigator.
var nextState = {
observedTopOfStack: newObservedTopOfStack,
makingNavigatorRequest: false,
updatingAllIndicesAtOrBeyond: null,
progress: 1,
toIndex: newObservedTopOfStack,
fromIndex: newObservedTopOfStack,
};
this.setState(nextState, this._eliminateUnneededChildren);
},
_eliminateUnneededChildren: function() {
// Updating the indices that we're deleting and that's all. (Truth: Nothing
// even uses the indices in this case, but let's make this describe the
// truth anyways).
var updatingAllIndicesAtOrBeyond =
this.state.routeStack.length > this.state.observedTopOfStack + 1 ?
this.state.observedTopOfStack + 1 :
null;
this.setState({
idStack: this.state.idStack.slice(0, this.state.observedTopOfStack + 1),
routeStack: this.state.routeStack.slice(0, this.state.observedTopOfStack + 1),
// Now we rerequest the top of stack that we observed.
requestedTopOfStack: this.state.observedTopOfStack,
makingNavigatorRequest: true,
updatingAllIndicesAtOrBeyond: updatingAllIndicesAtOrBeyond,
});
},
push: function(route) {
invariant(!!route, 'Must supply route to push');
// Make sure all previous requests are caught up first. Otherwise reject.
if (this.state.requestedTopOfStack === this.state.observedTopOfStack) {
this._tryLockNavigator(() => {
var nextStack = this.state.routeStack.concat([route]);
var nextIDStack = this.state.idStack.concat([getuid()]);
this.setState({
// We have to make sure that we've also supplied enough views to
// satisfy our request to adjust the `requestedTopOfStack`.
idStack: nextIDStack,
routeStack: nextStack,
requestedTopOfStack: nextStack.length - 1,
makingNavigatorRequest: true,
updatingAllIndicesAtOrBeyond: nextStack.length - 1,
});
});
}
},
popN: function(n) {
if (n === 0) {
return;
}
// Make sure all previous requests are caught up first. Otherwise reject.
if (this.state.requestedTopOfStack === this.state.observedTopOfStack) {
if (this.state.requestedTopOfStack > 0) {
this._tryLockNavigator(() => {
invariant(
this.state.requestedTopOfStack - n >= 0,
'Cannot pop below 0'
);
this.setState({
requestedTopOfStack: this.state.requestedTopOfStack - n,
makingNavigatorRequest: true,
// Not actually updating the indices yet until we get the native
// `onNavigationComplete`.
updatingAllIndicesAtOrBeyond: null,
});
});
}
}
},
pop: function() {
this.popN(1);
},
/**
* Replace a route in the navigation stack.
*
* `index` specifies the route in the stack that should be replaced.
* If it's negative, it counts from the back.
*/
replaceAtIndex: function(route, index) {
invariant(!!route, 'Must supply route to replace');
if (index < 0) {
index += this.state.routeStack.length;
}
if (this.state.routeStack.length <= index) {
return;
}
// I don't believe we need to lock for a replace since there's no
// navigation actually happening
var nextIDStack = this.state.idStack.slice();
var nextRouteStack = this.state.routeStack.slice();
nextIDStack[index] = getuid();
nextRouteStack[index] = route;
this.setState({
idStack: nextIDStack,
routeStack: nextRouteStack,
makingNavigatorRequest: false,
updatingAllIndicesAtOrBeyond: index,
});
},
/**
* Replaces the top of the navigation stack.
*/
replace: function(route) {
this.replaceAtIndex(route, -1);
},
/**
* Replace the current route's parent.
*/
replacePrevious: function(route) {
this.replaceAtIndex(route, -2);
},
popToTop: function() {
this.popToRoute(this.state.routeStack[0]);
},
popToRoute: function(route) {
var indexOfRoute = this.state.routeStack.indexOf(route);
invariant(
indexOfRoute !== -1,
'Calling pop to route for a route that doesn\'t exist!'
);
var numToPop = this.state.routeStack.length - indexOfRoute - 1;
this.popN(numToPop);
},
replacePreviousAndPop: function(route) {
// Make sure all previous requests are caught up first. Otherwise reject.
if (this.state.requestedTopOfStack !== this.state.observedTopOfStack) {
return;
}
if (this.state.routeStack.length < 2) {
return;
}
this._tryLockNavigator(() => {
this.replacePrevious(route);
this.setState({
requestedTopOfStack: this.state.requestedTopOfStack - 1,
makingNavigatorRequest: true,
});
});
},
resetTo: function(route) {
invariant(!!route, 'Must supply route to push');
// Make sure all previous requests are caught up first. Otherwise reject.
if (this.state.requestedTopOfStack !== this.state.observedTopOfStack) {
return;
}
this.replaceAtIndex(route, 0);
this.popToRoute(route);
},
handleNavigationComplete: function(e) {
if (this._toFocusOnNavigationComplete) {
this._getFocusEmitter().emit('focus', this._toFocusOnNavigationComplete);
this._toFocusOnNavigationComplete = null;
}
this._handleNavigatorStackChanged(e);
},
_routeToStackItem: function(route, i) {
var Component = route.component;
var shouldUpdateChild = this.state.updatingAllIndicesAtOrBeyond !== null &&
this.state.updatingAllIndicesAtOrBeyond >= i;
return (
<StaticContainer key={'nav' + i} shouldUpdate={shouldUpdateChild}>
<RKNavigatorItem
title={route.title}
style={[
styles.stackItem,
this.props.itemWrapperStyle,
route.wrapperStyle
]}
rightButtonTitle={route.rightButtonTitle}
onNavRightButtonTap={route.onRightButtonPress}
tintColor={this.props.tintColor}>
<Component
navigator={this.navigator}
route={route}
{...route.passProps}
/>
</RKNavigatorItem>
</StaticContainer>
);
},
renderNavigationStackItems: function() {
var shouldRecurseToNavigator =
this.state.makingNavigatorRequest ||
this.state.updatingAllIndicesAtOrBeyond !== null;
// If not recursing update to navigator at all, may as well avoid
// computation of navigator children.
var items = shouldRecurseToNavigator ?
this.state.routeStack.map(this._routeToStackItem) : null;
return (
<StaticContainer shouldUpdate={shouldRecurseToNavigator}>
<NavigatorTransitionerIOS
ref={TRANSITIONER_REF}
style={styles.transitioner}
vertical={this.props.vertical}
requestedTopOfStack={this.state.requestedTopOfStack}
onNavigationComplete={this.handleNavigationComplete}>
{items}
</NavigatorTransitionerIOS>
</StaticContainer>
);
},
render: function() {
return (
<View style={this.props.style}>
{this.renderNavigationStackItems()}
</View>
);
}
});
var styles = StyleSheet.create({
stackItem: {
backgroundColor: 'white',
overflow: 'hidden',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
transitioner: {
flex: 1,
},
});
module.exports = NavigatorIOS;

458
Libraries/Components/ScrollResponder.js Normal file
View File

@ -0,0 +1,458 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ScrollResponder
*/
'use strict';
var NativeModules = require('NativeModules');
var NativeModulesDeprecated = require('NativeModulesDeprecated');
var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
var Subscribable = require('Subscribable');
var TextInputState = require('TextInputState');
var RKUIManager = NativeModules.RKUIManager;
var RKUIManagerDeprecated = NativeModulesDeprecated.RKUIManager;
var RKScrollViewConsts = RKUIManager.RCTScrollView.Constants;
var warning = require('warning');
/**
* Mixin that can be integrated in order to handle scrolling that plays well
* with `ResponderEventPlugin`. Integrate with your platform specific scroll
* views, or even your custom built (every-frame animating) scroll views so that
* all of these systems play well with the `ResponderEventPlugin`.
*
* iOS scroll event timing nuances:
* ===============================
*
*
* Scrolling without bouncing, if you touch down:
* -------------------------------
*
* 1. `onMomentumScrollBegin` (when animation begins after letting up)
* ... physical touch starts ...
* 2. `onTouchStartCapture` (when you press down to stop the scroll)
* 3. `onTouchStart` (same, but bubble phase)
* 4. `onResponderRelease` (when lifting up - you could pause forever before * lifting)
* 5. `onMomentumScrollEnd`
*
*
* Scrolling with bouncing, if you touch down:
* -------------------------------
*
* 1. `onMomentumScrollBegin` (when animation begins after letting up)
* ... bounce begins ...
* ... some time elapses ...
* ... physical touch during bounce ...
* 2. `onMomentumScrollEnd` (Makes no sense why this occurs first during bounce)
* 3. `onTouchStartCapture` (immediately after `onMomentumScrollEnd`)
* 4. `onTouchStart` (same, but bubble phase)
* 5. `onTouchEnd` (You could hold the touch start for a long time)
* 6. `onMomentumScrollBegin` (When releasing the view starts bouncing back)
*
* So when we receive an `onTouchStart`, how can we tell if we are touching
* *during* an animation (which then causes the animation to stop)? The only way
* to tell is if the `touchStart` occurred immediately after the
* `onMomentumScrollEnd`.
*
* This is abstracted out for you, so you can just call this.scrollResponderIsAnimating() if
* necessary
*
* `ScrollResponder` also includes logic for blurring a currently focused input
* if one is focused while scrolling. The `ScrollResponder` is a natural place
* to put this logic since it can support not dismissing the keyboard while
* scrolling, unless a recognized "tap"-like gesture has occurred.
*
* The public lifecycle API includes events for keyboard interaction, responder
* interaction, and scrolling (among others). The keyboard callbacks
* `onKeyboardWill/Did/*` are *global* events, but are invoked on scroll
* responder's props so that you can guarantee that the scroll responder's
* internal state has been updated accordingly (and deterministically) by
* the time the props callbacks are invoke. Otherwise, you would always wonder
* if the scroll responder is currently in a state where it recognizes new
* keyboard positions etc. If coordinating scrolling with keyboard movement,
* *always* use these hooks instead of listening to your own global keyboard
* events.
*
* Public keyboard lifecycle API: (props callbacks)
*
* Standard Keyboard Appearance Sequence:
*
* this.props.onKeyboardWillShow
* this.props.onKeyboardDidShow
*
* `onScrollResponderKeyboardDismissed` will be invoked if an appropriate
* tap inside the scroll responder's scrollable region was responsible
* for the dismissal of the keyboard. There are other reasons why the
* keyboard could be dismissed.
*
* this.props.onScrollResponderKeyboardDismissed
*
* Standard Keyboard Hide Sequence:
*
* this.props.onKeyboardWillHide
* this.props.onKeyboardDidHide
*/
var IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
var ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
statics: RKScrollViewConsts,
scrollResponderMixinGetInitialState: function() {
return {
isTouching: false,
lastMomentumScrollBeginTime: 0,
lastMomentumScrollEndTime: 0,
// Reset to false every time becomes responder. This is used to:
// - Determine if the scroll view has been scrolled and therefore should
// refuse to give up its responder lock.
// - Determine if releasing should dismiss the keyboard when we are in
// tap-to-dismiss mode (!this.props.keyboardShouldPersistTaps).
observedScrollSinceBecomingResponder: false,
becameResponderWhileAnimating: false,
};
},
/**
* Invoke this from an `onScroll` event.
*/
scrollResponderHandleScrollShouldSetResponder: function() {
return this.state.isTouching;
},
/**
* Merely touch starting is not sufficient for a scroll view to become the
* responder. Being the "responder" means that the very next touch move/end
* event will result in an action/movement.
*
* Invoke this from an `onStartShouldSetResponder` event.
*
* `onStartShouldSetResponder` is used when the next move/end will trigger
* some UI movement/action, but when you want to yield priority to views
* nested inside of the view.
*
* There may be some cases where scroll views actually should return `true`
* from `onStartShouldSetResponder`: Any time we are detecting a standard tap
* that gives priority to nested views.
*
* - If a single tap on the scroll view triggers an action such as
* recentering a map style view yet wants to give priority to interaction
* views inside (such as dropped pins or labels), then we would return true
* from this method when there is a single touch.
*
* - Similar to the previous case, if a two finger "tap" should trigger a
* zoom, we would check the `touches` count, and if `>= 2`, we would return
* true.
*
*/
scrollResponderHandleStartShouldSetResponder: function() {
return false;
},
/**
* There are times when the scroll view wants to become the responder
* (meaning respond to the next immediate `touchStart/touchEnd`), in a way
* that *doesn't* give priority to nested views (hence the capture phase):
*
* - Currently animating.
* - Tapping anywhere that is not the focused input, while the keyboard is
* up (which should dismiss the keyboard).
*
* Invoke this from an `onStartShouldSetResponderCapture` event.
*/
scrollResponderHandleStartShouldSetResponderCapture: function(e) {
// First see if we want to eat taps while the keyboard is up
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
if (!this.props.keyboardShouldPersistTaps &&
currentlyFocusedTextInput != null &&
e.target != currentlyFocusedTextInput) {
return true;
}
return this.scrollResponderIsAnimating();
},
/**
* Invoke this from an `onResponderReject` event.
*
* Some other element is not yielding its role as responder. Normally, we'd
* just disable the `UIScrollView`, but a touch has already began on it, the
* `UIScrollView` will not accept being disabled after that. The easiest
* solution for now is to accept the limitation of disallowing this
* altogether. To improve this, find a way to disable the `UIScrollView` after
* a touch has already started.
*/
scrollResponderHandleResponderReject: function() {
warning(false, "ScrollView doesn't take rejection well - scrolls anyway");
},
/**
* We will allow the scroll view to give up its lock iff it acquired the lock
* during an animation. This is a very useful default that happens to satisfy
* many common user experiences.
*
* - Stop a scroll on the left edge, then turn that into an outer view's
* backswipe.
* - Stop a scroll mid-bounce at the top, continue pulling to have the outer
* view dismiss.
* - However, without catching the scroll view mid-bounce (while it is
* motionless), if you drag far enough for the scroll view to become
* responder (and therefore drag the scroll view a bit), any backswipe
* navigation of a swipe gesture higher in the view hierarchy, should be
* rejected.
*/
scrollResponderHandleTerminationRequest: function() {
return !this.state.observedScrollSinceBecomingResponder;
},
/**
* Invoke this from an `onTouchEnd` event.
*
* @param {SyntheticEvent} e Event.
*/
scrollResponderHandleTouchEnd: function(e) {
var nativeEvent = e.nativeEvent;
this.state.isTouching = nativeEvent.touches.length !== 0;
this.props.onTouchEnd && this.props.onTouchEnd(e);
},
/**
* Invoke this from an `onResponderRelease` event.
*/
scrollResponderHandleResponderRelease: function(e) {
this.props.onResponderRelease && this.props.onResponderRelease(e);
// By default scroll views will unfocus a textField
// if another touch occurs outside of it
var currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
if (!this.props.keyboardShouldPersistTaps &&
currentlyFocusedTextInput != null &&
e.target != currentlyFocusedTextInput &&
!this.state.observedScrollSinceBecomingResponder &&
!this.state.becameResponderWhileAnimating) {
this.props.onScrollResponderKeyboardDismissed &&
this.props.onScrollResponderKeyboardDismissed(e);
TextInputState.blurTextInput(currentlyFocusedTextInput);
}
},
scrollResponderHandleScroll: function(e) {
this.state.observedScrollSinceBecomingResponder = true;
this.props.onScroll && this.props.onScroll(e);
},
/**
* Invoke this from an `onResponderGrant` event.
*/
scrollResponderHandleResponderGrant: function(e) {
this.state.observedScrollSinceBecomingResponder = false;
this.props.onResponderGrant && this.props.onResponderGrant(e);
this.state.becameResponderWhileAnimating = this.scrollResponderIsAnimating();
},
/**
* Unfortunately, `onScrollBeginDrag` also fires when *stopping* the scroll
* animation, and there's not an easy way to distinguish a drag vs. stopping
* momentum.
*
* Invoke this from an `onScrollBeginDrag` event.
*/
scrollResponderHandleScrollBeginDrag: function(e) {
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
},
/**
* Invoke this from an `onScrollEndDrag` event.
*/
scrollResponderHandleScrollEndDrag: function(e) {
this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
},
/**
* Invoke this from an `onMomentumScrollBegin` event.
*/
scrollResponderHandleMomentumScrollBegin: function(e) {
this.state.lastMomentumScrollBeginTime = Date.now();
this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
},
/**
* Invoke this from an `onMomentumScrollEnd` event.
*/
scrollResponderHandleMomentumScrollEnd: function(e) {
this.state.lastMomentumScrollEndTime = Date.now();
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
},
/**
* Invoke this from an `onTouchStart` event.
*
* Since we know that the `SimpleEventPlugin` occurs later in the plugin
* order, after `ResponderEventPlugin`, we can detect that we were *not*
* permitted to be the responder (presumably because a contained view became
* responder). The `onResponderReject` won't fire in that case - it only
* fires when a *current* responder rejects our request.
*
* @param {SyntheticEvent} e Touch Start event.
*/
scrollResponderHandleTouchStart: function(e) {
this.state.isTouching = true;
this.props.onTouchStart && this.props.onTouchStart(e);
},
/**
* Invoke this from an `onTouchMove` event.
*
* Since we know that the `SimpleEventPlugin` occurs later in the plugin
* order, after `ResponderEventPlugin`, we can detect that we were *not*
* permitted to be the responder (presumably because a contained view became
* responder). The `onResponderReject` won't fire in that case - it only
* fires when a *current* responder rejects our request.
*
* @param {SyntheticEvent} e Touch Start event.
*/
scrollResponderHandleTouchMove: function(e) {
this.props.onTouchMove && this.props.onTouchMove(e);
},
/**
* A helper function for this class that lets us quickly determine if the
* view is currently animating. This is particularly useful to know when
* a touch has just started or ended.
*/
scrollResponderIsAnimating: function() {
var now = Date.now();
var timeSinceLastMomentumScrollEnd = now - this.state.lastMomentumScrollEndTime;
var isAnimating = timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
this.state.lastMomentumScrollEndTime < this.state.lastMomentumScrollBeginTime;
return isAnimating;
},
/**
* A helper function to scroll to a specific point in the scrollview.
* This is currently used to help focus on child textview's, but this
* can also be used to quickly scroll to any element we want to focus
*/
scrollResponderScrollTo: function(offsetX, offsetY) {
RKUIManagerDeprecated.scrollTo(this.getNodeHandle(), offsetX, offsetY);
},
/**
* A helper function to zoom to a specific rect in the scrollview.
* @param {object} rect Should have shape {x, y, w, h}
*/
scrollResponderZoomTo: function(rect) {
RKUIManagerDeprecated.zoomToRect(this.getNodeHandle(), rect);
},
/**
* This method should be used as the callback to onFocus in a TextInputs'
* parent view. Note that any module using this mixin needs to return
* the parent view's ref in getScrollViewRef() in order to use this method
*/
scrollResponderScrollNativeHandleToKeyboard: function(nodeHandle, additionalOffset) {
this.additionalScrollOffset = additionalOffset || 0;
RKUIManager.measureLayout(
nodeHandle,
this.getNodeHandle(),
this.scrollResponderTextInputFocusError,
this.scrollResponderInputMeasureAndScrollToKeyboard
);
},
/**
* The calculations performed here assume the scroll view takes up the entire
* screen - even if has some content inset. We then measure the offsets of the
* keyboard, and compensate both for the scroll view's "contentInset".
*
* @param {number} left Position of input w.r.t. table view.
* @param {number} top Position of input w.r.t. table view.
* @param {number} width Width of the text input.
* @param {number} height Height of the text input.
*/
scrollResponderInputMeasureAndScrollToKeyboard: function(left, top, width, height) {
if (this.keyboardWillOpenTo) {
var scrollOffsetY =
top - this.keyboardWillOpenTo.endCoordinates.screenY + height +
this.additionalScrollOffset;
this.scrollResponderScrollTo(0, scrollOffsetY);
}
this.additionalOffset = 0;
},
scrollResponderTextInputFocusError: function(e) {
console.error('Error measuring text field: ', e);
},
/**
* `componentWillMount` is the closest thing to a standard "constructor" for
* React components.
*
* The `keyboardWillShow` is called before input focus.
*/
componentWillMount: function() {
this.keyboardWillOpenTo = null;
this.additionalScrollOffset = 0;
this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', this.scrollResponderKeyboardWillShow);
this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillHide', this.scrollResponderKeyboardWillHide);
this.addListenerOn(RCTDeviceEventEmitter, 'keyboardDidShow', this.scrollResponderKeyboardDidShow);
this.addListenerOn(RCTDeviceEventEmitter, 'keyboardDidHide', this.scrollResponderKeyboardDidHide);
},
/**
* Warning, this may be called several times for a single keyboard opening.
* It's best to store the information in this method and then take any action
* at a later point (either in `keyboardDidShow` or other).
*
* Here's the order that events occur in:
* - focus
* - willShow {startCoordinates, endCoordinates} several times
* - didShow several times
* - blur
* - willHide {startCoordinates, endCoordinates} several times
* - didHide several times
*
* The `ScrollResponder` providesModule callbacks for each of these events.
* Even though any user could have easily listened to keyboard events
* themselves, using these `props` callbacks ensures that ordering of events
* is consistent - and not dependent on the order that the keyboard events are
* subscribed to. This matters when telling the scroll view to scroll to where
* the keyboard is headed - the scroll responder better have been notified of
* the keyboard destination before being instructed to scroll to where the
* keyboard will be. Stick to the `ScrollResponder` callbacks, and everything
* will work.
*
* WARNING: These callbacks will fire even if a keyboard is displayed in a
* different navigation pane. Filter out the events to determine if they are
* relevant to you. (For example, only if you receive these callbacks after
* you had explicitly focused a node etc).
*/
scrollResponderKeyboardWillShow: function(e) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
},
scrollResponderKeyboardWillHide: function(e) {
this.keyboardWillOpenTo = null;
this.props.onKeyboardWillHide && this.props.onKeyboardWillHide(e);
},
scrollResponderKeyboardDidShow: function() {
this.keyboardWillOpenTo = null;
this.props.onKeyboardDidShow && this.props.onKeyboardDidShow();
},
scrollResponderKeyboardDidHide: function() {
this.keyboardWillOpenTo = null;
this.props.onKeyboardDidHide && this.props.onKeyboardDidHide();
}
};
var ScrollResponder = {
Mixin: ScrollResponderMixin,
};
module.exports = ScrollResponder;

262
Libraries/Components/ScrollView/ScrollView.ios.js Normal file
View File

@ -0,0 +1,262 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ScrollView
*/
'use strict';
var ArrayOfPropType = require('ArrayOfPropType');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var ReactIOSTagHandles = require('ReactIOSTagHandles');
var RKScrollView = require('NativeModules').RKUIManager.RCTScrollView;
var RKScrollViewConsts = RKScrollView.Constants;
var RKUIManager = require('NativeModulesDeprecated').RKUIManager;
var ScrollResponder = require('ScrollResponder');
var ScrollViewPropTypes = require('ScrollViewPropTypes');
var StyleSheetPropType = require('StyleSheetPropType');
var StyleSheet = require('StyleSheet');
var View = require('View');
var ViewStylePropTypes = require('ViewStylePropTypes');
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
var flattenStyle = require('flattenStyle');
var invariant = require('invariant');
var merge = require('merge');
var nativePropType = require('nativePropType');
var validAttributesFromPropTypes = require('validAttributesFromPropTypes');
var PropTypes = React.PropTypes;
var SCROLLVIEW = 'ScrollView';
var INNERVIEW = 'InnerScrollView';
/**
* `React` component that wraps platform `RKScrollView` while providing
* integration with touch locking "responder" system.
*
* Doesn't yet support other contained responders from blocking this scroll
* view from becoming the responder.
*/
var RKScrollViewPropTypes = merge(
ScrollViewPropTypes,
{
/**
* When true, the scroll view bounces horizontally when it reaches the end
* even if the content is smaller than the scroll view itself. The default
* value is true when `horizontal={true}` and false otherwise.
*/
alwaysBounceHorizontal: nativePropType(PropTypes.bool),
/**
* When true, the scroll view bounces vertically when it reaches the end
* even if the content is smaller than the scroll view itself. The default
* value is false when `horizontal={true}` and true otherwise.
*/
alwaysBounceVertical: nativePropType(PropTypes.bool),
/**
* When true, the scroll view automatically centers the content when the
* content is smaller than the scroll view bounds; when the content is
* larger than the scroll view, this property has no effect. The default
* value is false.
*/
centerContent: nativePropType(PropTypes.bool),
/**
* These styles will be applied to the scroll view content container which
* wraps all of the child views. Example:
*
* return (
* <ScrollView contentContainerStyle={styles.contentContainer}>
* </ScrollView>
* );
* ...
* var styles = StyleSheet.create({
* contentContainer: {
* paddingVertical: 20
* }
* });
*/
contentContainerStyle: StyleSheetPropType(ViewStylePropTypes),
/**
* A floating-point number that determines how quickly the scroll view
* decelerates after the user lifts their finger. Reasonable choices include
* `RKScrollView.Constants.DecelerationRate.Normal` (the default) and
* `RKScrollView.Constants.DecelerationRate.Fast`.
*/
decelerationRate: nativePropType(PropTypes.number),
/**
* When true, the scroll view's children are arranged horizontally in a row
* instead of vertically in a column. The default value is false.
*/
horizontal: PropTypes.bool,
/**
* Determines whether the keyboard gets dismissed in response to a drag.
* When `ScrollView.keyboardDismissMode.None` (the default), drags do not
* dismiss the keyboard. When `ScrollView.keyboardDismissMode.OnDrag`, the
* keyboard is dismissed when a drag begins. When
* `ScrollView.keyboardDismissMode.Interactive`, the keyboard is dismissed
* interactively with the drag and moves in synchrony with the touch;
* dragging upwards cancels the dismissal.
*/
keyboardDismissMode: nativePropType(PropTypes.oneOf([
RKScrollViewConsts.KeyboardDismissMode.None, // default
RKScrollViewConsts.KeyboardDismissMode.Interactive,
RKScrollViewConsts.KeyboardDismissMode.OnDrag,
])),
/**
* When false, tapping outside of the focused text input when the keyboard
* is up dismisses the keyboard. When true, the scroll view will not catch
* taps, and the keyboard will not dismiss automatically. The default value
* is false.
*/
keyboardShouldPersistTaps: nativePropType(PropTypes.bool),
/**
* The maximum allowed zoom scale. The default value is 1.0.
*/
maximumZoomScale: nativePropType(PropTypes.number),
/**
* The minimum allowed zoom scale. The default value is 1.0.
*/
minimumZoomScale: nativePropType(PropTypes.number),
/**
* When true, the scroll view stops on multiples of the scroll view's size
* when scrolling. This can be used for horizontal pagination. The default
* value is false.
*/
pagingEnabled: nativePropType(PropTypes.bool),
/**
* When true, the scroll view scrolls to top when the status bar is tapped.
* The default value is true.
*/
scrollsToTop: nativePropType(PropTypes.bool),
/**
* An array of child indices determining which children get docked to the
* top of the screen when scrolling. For example, passing
* `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
* top of the scroll view. This property is not supported in conjunction
* with `horizontal={true}`.
*/
stickyHeaderIndices: nativePropType(ArrayOfPropType(PropTypes.number)),
/**
* Experimental: When true, offscreen child views (whose `overflow` value is
* `hidden`) are removed from their native backing superview when offscreen.
* This canimprove scrolling performance on long lists. The default value is
* false.
*/
removeClippedSubviews: PropTypes.bool,
/**
* The current scale of the scroll view content. The default value is 1.0.
*/
zoomScale: nativePropType(PropTypes.number),
}
);
var ScrollView = React.createClass({
statics: {
PropTypes: RKScrollViewPropTypes,
keyboardDismissMode: RKScrollViewConsts.KeyboardDismissMode,
},
propTypes: RKScrollViewPropTypes,
mixins: [ScrollResponder.Mixin],
getInitialState: function() {
return this.scrollResponderMixinGetInitialState();
},
setNativeProps: function(props) {
this.refs[SCROLLVIEW].setNativeProps(props);
},
getInnerViewNode: function() {
return this.refs[INNERVIEW].getNodeHandle();
},
scrollTo: function(destY, destX) {
RKUIManager.scrollTo(ReactIOSTagHandles.rootNodeIDToTag[this._rootNodeID], destX, destY);
},
render: function() {
var contentContainerStyle = [
this.props.horizontal && styles.contentContainerHorizontal,
this.props.contentContainerStyle,
];
if (__DEV__ && this.props.style) {
var style = flattenStyle(this.props.style);
var childLayoutProps = ['alignItems', 'justifyContent']
.filter((prop) => style[prop] !== undefined);
invariant(
childLayoutProps.length === 0,
'ScrollView child layout (' + JSON.stringify(childLayoutProps) +
') must by applied through the contentContainerStyle prop.'
);
}
var contentContainer =
<View
ref={INNERVIEW}
style={contentContainerStyle}
removeClippedSubviews={this.props.removeClippedSubviews}>
{this.props.children}
</View>;
var alwaysBounceHorizontal =
this.props.alwaysBounceHorizontal !== undefined ?
this.props.alwaysBounceHorizontal :
this.props.horizontal;
var alwaysBounceVertical =
this.props.alwaysBounceVertical !== undefined ?
this.props.alwaysBounceVertical :
!this.props.horizontal;
var props = merge(
this.props, {
alwaysBounceHorizontal,
alwaysBounceVertical,
style: [styles.base, this.props.style],
onTouchStart: this.scrollResponderHandleTouchStart,
onTouchMove: this.scrollResponderHandleTouchMove,
onTouchEnd: this.scrollResponderHandleTouchEnd,
onScrollBeginDrag: this.scrollResponderHandleScrollBeginDrag,
onScrollEndDrag: this.scrollResponderHandleScrollEndDrag,
onMomentumScrollBegin: this.scrollResponderHandleMomentumScrollBegin,
onMomentumScrollEnd: this.scrollResponderHandleMomentumScrollEnd,
onStartShouldSetResponder: this.scrollResponderHandleStartShouldSetResponder,
onStartShouldSetResponderCapture: this.scrollResponderHandleStartShouldSetResponderCapture,
onScrollShouldSetResponder: this.scrollResponderHandleScrollShouldSetResponder,
onScroll: this.scrollResponderHandleScroll,
onResponderGrant: this.scrollResponderHandleResponderGrant,
onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest,
onResponderTerminate: this.scrollResponderHandleTerminate,
onResponderRelease: this.scrollResponderHandleResponderRelease,
onResponderReject: this.scrollResponderHandleResponderReject,
}
);
return (
<RKScrollView {...props} ref={SCROLLVIEW}>
{contentContainer}
</RKScrollView>
);
}
});
var styles = StyleSheet.create({
base: {
flex: 1,
},
contentContainerHorizontal: {
alignSelf: 'flex-start',
flexDirection: 'row',
},
});
var RKScrollView = createReactIOSNativeComponentClass({
validAttributes: merge(
ReactIOSViewAttributes.UIView,
validAttributesFromPropTypes(ScrollView.propTypes)
),
uiViewClassName: 'RCTScrollView',
});
module.exports = ScrollView;

30
Libraries/Components/ScrollViewPropTypes.js Normal file
View File

@ -0,0 +1,30 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule ScrollViewPropTypes
*/
'use strict';
var EdgeInsetsPropType = require('EdgeInsetsPropType');
var PointPropType = require('PointPropType');
var PropTypes = require('ReactPropTypes');
var StyleSheetPropType = require('StyleSheetPropType');
var ViewStylePropTypes = require('ViewStylePropTypes');
var nativePropType = require('nativePropType');
var ScrollViewPropTypes = {
automaticallyAdjustContentInsets: nativePropType(PropTypes.bool), // true
contentInset: nativePropType(EdgeInsetsPropType), // zeroes
contentOffset: nativePropType(PointPropType), // zeroes
onScroll: PropTypes.func,
onScrollAnimationEnd: PropTypes.func,
scrollEnabled: nativePropType(PropTypes.bool), // true
scrollIndicatorInsets: nativePropType(EdgeInsetsPropType), // zeros
showsHorizontalScrollIndicator: nativePropType(PropTypes.bool),
showsVerticalScrollIndicator: nativePropType(PropTypes.bool),
style: StyleSheetPropType(ViewStylePropTypes),
throttleScrollCallbackMS: nativePropType(PropTypes.number), // 200ms
};
module.exports = ScrollViewPropTypes;

Some files were not shown because too many files have changed in this diff Show More