React Native manual, version 0.26.0

parsing html tags.
parsing images, transforming path relative to version number.

README.md

@@ -1,6 +1,6 @@
 # React Native Manual (.mobi, .epub)
 
-Current version of React Native in the docs: **0.25.1**
+Current version of React Native in the docs: **0.26.0**
 
 Based on the repo <https://github.com/zeMirco/nodejs-pdf-docs>
 

epub.js

@@ -24,18 +24,38 @@ const Applause = require('applause');
 var options = {
     patterns: [
         {
-            match: /<img src="(.*)" \/>/g,
+            match: /<img src="(.*)".*(\/|\/img)>/g,
             replacement: function () {
                 let file = arguments[1];
                 return `![${file}](./versions/${version}/${file})`;
             }
+        },
+        {
+            match: /<script.*\/script>/g,
+            replacement: ''
+        },
+        {
+            match: /<block.*\/>/g, // inline block
+            replacement: ''
+        },
+        {
+            match: /(<|<\/)block.*>/g,
+            replacement: ''
+        },
+        {
+            match: /!\[(.*)\]\((.*)\)/g,
+            replacement: function () {
+                let description = arguments[1];
+                let file = arguments[2];
+                return `![${description}](./versions/${version}/${file})`;
+            }
         }
     ]
 };
 var applause = Applause.create(options);
 let tocMarkdown = [];
 
-function handleImages(data) {
+function replaceOptions(data) {
     let result = applause.replace(data);
     if (result.content) {
         return result.content;
@@ -47,7 +67,7 @@ function writeMdString(item, callback) {
     const filename = `.tmp/${item.file}.md`;
     let data = `# ${item.title}\n\n`;
     data += fs.readFileSync(`versions/${version}/docs/${item.file}.md`);
-    data = handleImages(data);
+    data = replaceOptions(data);
     fs.appendFile(filename, data, function(err) {
         if (err) throw err;
 
@@ -70,7 +90,7 @@ async.forEach(toc, writeMdString, function(err) {
     -o epub/react-native-manual.epub \
     --epub-cover-image=epub/cover.jpg \
     --epub-stylesheet=epub/epub.css \
-    epub/title.txt \
+    versions/${version}/title.txt \
     ${tocMdString}`,
         function(err, stdout, stderr) {
             if (err) console.log(err);

versions/v0.26.0/docs/Accessibility.md

@@ -0,0 +1,168 @@
+---
+id: accessibility
+title: Accessibility
+layout: docs
+category: Guides
+permalink: docs/accessibility.html
+next: direct-manipulation
+---
+
+## Native App Accessibility (iOS and Android)
+Both iOS and Android provide APIs for making apps accessible to people with disabilities. In addition, both platforms provide bundled assistive technologies, like the screen readers VoiceOver (iOS) and TalkBack (Android) for the visually impaired. Similarly, in React Native we have included APIs designed to provide developers with support for making apps more accessible. Take note, iOS and Android differ slightly in their approaches, and thus the React Native implementations may vary by platform.
+
+## Making Apps Accessible
+
+### Accessibility properties
+
+#### accessible (iOS, Android)
+
+When `true`, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component. By default, all touchable elements are accessible.
+
+On Android, ‘accessible={true}’ property for a react-native View will be translated into native ‘focusable={true}’.
+
+```javascript
+<View accessible={true}>
+  <Text>text one</Text>
+  <Text>text two</Text>
+</View>
+```
+
+In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.
+
+
+
+#### accessibilityLabel (iOS, Android)
+
+When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.
+
+To use, set the `accessibilityLabel` property to a custom string on your View:
+
+```javascript
+<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}>
+  <View style={styles.button}>
+    <Text style={styles.buttonText}>Press me!</Text>
+  </View>
+</TouchableOpacity>
+```
+
+In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
+
+#### accessibilityTraits (iOS)
+
+Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by `accessibilityTraits`.
+
+To use, set the `accessibilityTraits` property to one of (or an array of) accessibility trait strings:
+
+* **none** Used when the element has no traits.
+* **button** Used when the element should be treated as a button.
+* **link** Used when the element should be treated as a link.
+* **header** Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
+* **search** Used when the text field element should also be treated as a search field.
+* **image** Used when the element should be treated as an image. Can be combined with button or link, for example.
+* **selected**  Used when the element is selected. For example, a selected row in a table or a selected button within a segmented control.
+* **plays** Used when the element plays its own sound when activated.
+* **key** Used when the element acts as a keyboard key.
+* **text** Used when the element should be treated as static text that cannot change.
+* **summary** Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.  For example, when Weather first launches, the element with today's weather conditions is marked with this trait.
+* **disabled** Used when the control is not enabled and does not respond to user input.
+* **frequentUpdates** Used when the element frequently updates its label or value, but too often to send notifications. Allows an accessibility client to poll for changes. A stopwatch would be an example.
+* **startsMedia** Used when activating an element starts a media session (e.g. playing a movie, recording audio) that should not be interrupted by output from an assistive technology, like VoiceOver.
+* **adjustable** Used when an element can be "adjusted" (e.g. a slider).
+* **allowsDirectInteraction** Used when an element allows direct touch interaction for VoiceOver users (for example, a view representing a piano keyboard).
+* **pageTurn** Informs VoiceOver that it should scroll to the next page when it finishes reading the contents of the element.
+
+#### onAccessibilityTap (iOS)
+
+Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
+
+#### onMagicTap (iOS)
+
+Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call, or ends the current one. If the selected element does not have an `onMagicTap` function, the system will traverse up the view hierarchy until it finds a view that does.
+
+#### accessibilityComponentType (Android)
+
+In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobutton_checked’ and ‘radiobutton_unchecked’ and so on.
+
+```javascript
+<TouchableWithoutFeedback accessibilityComponentType=”button”
+  onPress={this._onPress}>
+  <View style={styles.button}>
+    <Text style={styles.buttonText}>Press me!</Text>
+  </View>
+</TouchableWithoutFeedback>
+```
+
+In the above example, the TouchableWithoutFeedback is being announced by TalkBack as a native Button.
+
+#### accessibilityLiveRegion (Android)
+
+When components dynamically change, we want TalkBack to alert the end user. This is made possible by the ‘accessibilityLiveRegion’ property. It can be set to ‘none’, ‘polite’ and ‘assertive’:
+
+* **none** Accessibility services should not announce changes to this view.
+* **polite** Accessibility services should announce changes to this view.
+* **assertive** Accessibility services should interrupt ongoing speech to immediately announce changes to this view.
+
+```javascript
+<TouchableWithoutFeedback onPress={this._addOne}>
+  <View style={styles.embedded}>
+    <Text>Click me</Text>
+  </View>
+</TouchableWithoutFeedback>
+<Text accessibilityLiveRegion="polite">
+  Clicked {this.state.count} times
+</Text>
+```
+
+In the above example method _addOne changes the state.count variable. As soon as an end user clicks the TouchableWithoutFeedback, TalkBack reads text in the Text view because of its 'accessibilityLiveRegion=”polite”' property.
+
+#### importantForAccessibility (Android)
+
+In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).
+
+```javascript
+<View style={styles.container}>
+  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
+    backgroundColor: 'green'}} importantForAccessibility=”yes”>
+    <Text> First layout </Text>
+  </View>
+  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
+    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendant”>
+    <Text> Second layout </Text>
+  </View>
+</View>
+```
+
+In the above example, the yellow layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can easily use overlapping views with the same parent without confusing TalkBack.
+
+
+
+### Sending Accessibility Events (Android)
+
+Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or a custom radio button has been selected). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: view tag and a type of an event.
+
+```javascript
+_onPress: function() {
+  this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
+  “radiobutton_unchecked” : “radiobutton_checked”;
+  if (this.state.radioButton === “radiobutton_checked”) {
+    RCTUIManager.sendAccessibilityEvent(
+      ReactNative.findNodeHandle(this),
+      RCTUIManager.AccessibilityEventTypes.typeViewClicked);
+  }
+}
+
+<CustomRadioButton
+  accessibleComponentType={this.state.radioButton}
+  onPress={this._onPress}/>
+```
+
+In the above example we've created a custom radio button that now behaves like a native one. More specifically, TalkBack now correctly announces changes to the radio button selection.
+
+
+## Testing VoiceOver Support (iOS)
+
+To enable VoiceOver, go to the Settings app on your iOS device. Tap General, then Accessibility. There you will find many tools that people use to use to make their devices more usable, such as bolder text, increased contrast, and VoiceOver.
+
+To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.
+
+At the very bottom of the Accessibility settings, there is an "Accessibility Shortcut". You can use this to toggle VoiceOver by triple clicking the Home button.

versions/v0.26.0/docs/AndroidBuildingFromSource.md

@@ -0,0 +1,134 @@
+---
+id: android-building-from-source
+title: Building React Native from source
+layout: docs
+category: Guides (Android)
+permalink: docs/android-building-from-source.html
+next: activityindicatorios
+---
+
+You will need to build React Native from source if you want to work on a new feature/bug fix, try out the latest features which are not released yet, or maintain your own fork with patches that cannot be merged to the core.
+
+## Prerequisites
+
+Assuming you have the Android SDK installed, run `android` to open the Android SDK Manager.
+
+Make sure you have the following installed:
+
+1. Android SDK version 23 (compileSdkVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
+2. SDK build tools version 23.0.1 (buildToolsVersion in [`build.gradle`](https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle))
+3. Local Maven repository for Support Libraries (formerly `Android Support Repository`) >= 17 (for Android Support Library)
+4. Android NDK (download links and installation instructions below)
+
+Point Gradle to your Android SDK: either have `$ANDROID_SDK` and `$ANDROID_NDK ` defined, or create a local.properties file in the root of your react-native checkout with the following contents:
+
+```
+sdk.dir=absolute_path_to_android_sdk
+ndk.dir=absolute_path_to_android_ndk
+```
+
+Example:
+
+```
+sdk.dir=/Users/your_unix_name/android-sdk-macosx
+ndk.dir=/Users/your_unix_name/android-ndk/android-ndk-r10e
+```
+
+### Download links for Android NDK
+
+1. Mac OS (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-darwin-x86_64.zip
+2. Linux (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-linux-x86_64.zip
+3. Windows (64-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86_64.zip
+4. Windows (32-bit) - http://dl.google.com/android/repository/android-ndk-r10e-windows-x86.zip
+
+You can find further instructions on the [official page](http://developer.android.com/ndk/downloads/index.html).
+
+## Building the source
+
+#### 1. Installing the fork
+
+First, you need to install `react-native` from your fork. For example, to install the master branch from the official repo, run the following:
+
+```sh
+npm install --save github:facebook/react-native#master
+```
+
+Alternatively, you can clone the repo to your `node_modules` directory and run `npm install` inside the cloned repo.
+
+#### 2. Adding gradle dependencies
+
+Add `gradle-download-task` as dependency in `android/build.gradle`:
+
+```gradle
+...
+    dependencies {
+        classpath 'com.android.tools.build:gradle:1.3.1'
+        classpath 'de.undercouch:gradle-download-task:2.0.0'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+...
+```
+
+#### 3. Adding the `:ReactAndroid` project
+
+Add the `:ReactAndroid` project in `android/settings.gradle`:
+
+```gradle
+...
+include ':ReactAndroid'
+
+project(':ReactAndroid').projectDir = new File(
+    rootProject.projectDir, '../node_modules/react-native/ReactAndroid')
+...
+```
+
+Modify your `android/app/build.gradle` to use the `:ReactAndroid` project instead of the pre-compiled library, e.g. - replace `compile 'com.facebook.react:react-native:0.16.+'` with `compile project(':ReactAndroid')`:
+
+```gradle
+...
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:23.0.1'
+
+    compile project(':ReactAndroid')
+
+    ...
+}
+...
+```
+
+#### 4. Making 3rd-party modules use your fork
+
+If you use 3rd-party React Native modules, you need to override their dependencies so that they don't bundle the pre-compiled library. Otherwise you'll get an error while compiling - `Error: more than one library with package name 'com.facebook.react'`.
+
+Modify your `android/app/build.gradle` and replace `compile project(':react-native-custom-module')` with:
+
+```gradle
+compile(project(':react-native-custom-module')) {
+    exclude group: 'com.facebook.react', module: 'react-native'
+}
+```
+
+## Building from Android Studio
+
+From the Welcome screen of Android Studio choose "Import project" and select the `android` folder of your app.
+
+You should be able to use the _Run_ button to run your app on a device. Android Studio won't start the packager automatically, you'll need to start it by running `npm start` on the command line.
+
+## Additional notes
+
+Building from source can take a long time, especially for the first build, as it needs to download ~200 MB of artifacts and compile the native code. Every time you update the `react-native` version from your repo, the build directory may get deleted, and all the files are re-downloaded. To avoid this, you might want to change your build directory path by editing the `~/.gradle/init.gradle ` file:
+
+```gradle
+gradle.projectsLoaded {
+    rootProject.allprojects {
+        buildDir = "/path/to/build/directory/${rootProject.name}/${project.name}"
+    }
+}
+```
+
+## Troubleshooting
+
+Gradle build fails in `ndk-build`. See the section about `local.properties` file above.