From 84f9a6afcbb1e9c316735b7aca201824a59854f1 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Mon, 28 Mar 2016 21:33:43 +0000 Subject: [PATCH] Updated docs for 0.22 --- blog/2016/03/24/introducing-hot-reloading.html | 13 +++---------- blog/index.html | 13 +++---------- docs/accessibility.html | 2 +- docs/actionsheetios.html | 2 +- docs/activityindicatorios.html | 2 +- docs/alert.html | 2 +- docs/alertios.html | 2 +- docs/android-building-from-source.html | 2 +- docs/android-setup.html | 2 +- docs/android-ui-performance.html | 2 +- docs/animated.html | 2 +- docs/animations.html | 2 +- docs/appregistry.html | 2 +- docs/appstate.html | 2 +- docs/appstateios.html | 2 +- docs/asyncstorage.html | 2 +- docs/backandroid.html | 2 +- docs/cameraroll.html | 2 +- docs/clipboard.html | 2 +- docs/colors.html | 2 +- docs/communication-ios.html | 2 +- docs/datepickerandroid.html | 2 +- docs/datepickerios.html | 2 +- docs/debugging.html | 2 +- docs/dimensions.html | 2 +- docs/direct-manipulation.html | 2 +- docs/drawerlayoutandroid.html | 2 +- docs/embedded-app-android.html | 2 +- docs/embedded-app-ios.html | 2 +- docs/flexbox.html | 2 +- docs/geolocation.html | 2 +- docs/gesture-responder-system.html | 2 +- docs/getting-started-linux.html | 2 +- docs/getting-started.html | 2 +- docs/image.html | 2 +- docs/images.html | 2 +- docs/intentandroid.html | 2 +- docs/interactionmanager.html | 2 +- docs/javascript-environment.html | 2 +- docs/known-issues.html | 2 +- docs/layoutanimation.html | 2 +- docs/linking-libraries-ios.html | 2 +- docs/linking.html | 2 +- docs/linkingios.html | 2 +- docs/linux-windows-support.html | 2 +- docs/listview.html | 2 +- docs/mapview.html | 2 +- docs/modal.html | 2 +- docs/native-components-android.html | 2 +- docs/native-components-ios.html | 2 +- docs/native-modules-android.html | 2 +- docs/native-modules-ios.html | 2 +- docs/nativemethodsmixin.html | 2 +- docs/navigator-comparison.html | 2 +- docs/navigator.html | 2 +- docs/navigatorios.html | 2 +- docs/netinfo.html | 2 +- docs/network.html | 2 +- docs/panresponder.html | 2 +- docs/performance.html | 2 +- docs/picker.html | 2 +- docs/pickerios.html | 2 +- docs/pixelratio.html | 2 +- docs/platform-specific-code.html | 2 +- docs/progressbarandroid.html | 2 +- docs/progressviewios.html | 2 +- docs/pushnotificationios.html | 2 +- docs/refreshcontrol.html | 2 +- docs/running-on-device-android.html | 2 +- docs/running-on-device-ios.html | 2 +- docs/scrollview.html | 2 +- docs/segmentedcontrolios.html | 2 +- docs/shadowproptypesios.html | 2 +- docs/signed-apk-android.html | 2 +- docs/sliderios.html | 2 +- docs/statusbar.html | 2 +- docs/statusbarios.html | 2 +- docs/style.html | 2 +- docs/stylesheet.html | 2 +- docs/switch.html | 2 +- docs/tabbarios-item.html | 2 +- docs/tabbarios.html | 2 +- docs/testing.html | 2 +- docs/text.html | 2 +- docs/textinput.html | 2 +- docs/timepickerandroid.html | 2 +- docs/timers.html | 2 +- docs/toastandroid.html | 2 +- docs/toolbarandroid.html | 2 +- docs/touchablehighlight.html | 2 +- docs/touchablenativefeedback.html | 2 +- docs/touchableopacity.html | 2 +- docs/touchablewithoutfeedback.html | 2 +- docs/transforms.html | 2 +- docs/troubleshooting.html | 2 +- docs/tutorial.html | 2 +- docs/upgrading.html | 2 +- docs/vibration.html | 2 +- docs/vibrationios.html | 2 +- docs/videos.html | 4 ++-- docs/view.html | 2 +- docs/viewpagerandroid.html | 2 +- docs/webview.html | 2 +- index.html | 2 +- showcase.html | 2 +- support.html | 2 +- versions.html | 2 +- 107 files changed, 112 insertions(+), 126 deletions(-) diff --git a/blog/2016/03/24/introducing-hot-reloading.html b/blog/2016/03/24/introducing-hot-reloading.html index 6575eef7e72..ebc47999514 100644 --- a/blog/2016/03/24/introducing-hot-reloading.html +++ b/blog/2016/03/24/introducing-hot-reloading.html @@ -1,4 +1,4 @@ -Introducing Hot Reloading – React Native | A framework for building native apps using React
React Nativenext

Recent Posts

Introducing Hot Reloading

March 24, 2016 by Martín Bigio

React Native goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

We got close to this ideal via three main features:

  • Use JavaScript as the language doesn't have a long compilation cycle time.
  • Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.
  • Build a feature called Live Reload that reloads the app on save.

At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.

Hot Reloading #

The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.

A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).

+Introducing Hot Reloading – React Native | A framework for building native apps using React
React Native0.22

Recent Posts

Introducing Hot Reloading

March 24, 2016 by Martín Bigio

React Native goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

We got close to this ideal via three main features:

  • Use JavaScript as the language doesn't have a long compilation cycle time.
  • Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.
  • Build a feature called Live Reload that reloads the app on save.

At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.

Hot Reloading #

The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.

A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).

If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.

Word of warning: because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.

Hot reloading is available as of 0.22, you can enable it:

  • Open the developper menu
  • Tap on "Enable Hot Reloading"

Implementation in a nutshell #

Now that we've seen why we want it and how to use it, the fun part begins: how does it actually works.

Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.

In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:

The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the exports of the module we want to update. For instance, say you have an app composed by these two modules:

// log.js function log(message) { @@ -69,7 +69,7 @@ export default function } return store; -};

When you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the configureStore module, which will accept the HMR update.

Conclusion #

If you are interested in helping making hot reloading better, I encourage you to read Dan Abramov's post around the future of hot reloading and to contribute. For example, Johny Days is going to make it work with multiple connected clients. We're relying on you all to maintain and improve this feature.

With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?

© 2016 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 704a993d4ac..edeb5023bc4 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,4 +1,4 @@ -Blog – React Native | A framework for building native apps using React
React Nativenext

Recent Posts

Introducing Hot Reloading

March 24, 2016 by Martín Bigio

React Native goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

We got close to this ideal via three main features:

  • Use JavaScript as the language doesn't have a long compilation cycle time.
  • Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.
  • Build a feature called Live Reload that reloads the app on save.

At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.

Hot Reloading #

The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.

A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).

+Blog – React Native | A framework for building native apps using React
React Native0.22

Recent Posts

Introducing Hot Reloading

March 24, 2016 by Martín Bigio

React Native goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

We got close to this ideal via three main features:

  • Use JavaScript as the language doesn't have a long compilation cycle time.
  • Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.
  • Build a feature called Live Reload that reloads the app on save.

At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.

Hot Reloading #

The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.

A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).

If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.

Word of warning: because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.

Hot reloading is available as of 0.22, you can enable it:

  • Open the developper menu
  • Tap on "Enable Hot Reloading"

Implementation in a nutshell #

Now that we've seen why we want it and how to use it, the fun part begins: how does it actually works.

Hot Reloading is built on top of a feature Hot Module Replacement, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.

In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:

The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the exports of the module we want to update. For instance, say you have an app composed by these two modules:

// log.js function log(message) { @@ -69,7 +69,7 @@ export default function } return store; -};

When you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the configureStore module, which will accept the HMR update.

Conclusion #

If you are interested in helping making hot reloading better, I encourage you to read Dan Abramov's post around the future of hot reloading and to contribute. For example, Johny Days is going to make it work with multiple connected clients. We're relying on you all to maintain and improve this feature.

With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?

© 2016 Facebook Inc.
\ No newline at end of file + \ No newline at end of file diff --git a/docs/accessibility.html b/docs/accessibility.html index ddb51ce8a80..f402293d33f 100644 --- a/docs/accessibility.html +++ b/docs/accessibility.html @@ -1,4 +1,4 @@ -Accessibility – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

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}’.

<View accessible={true}> +Accessibility – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Accessibility #

Edit on GitHub

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}’.

<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:

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}> diff --git a/docs/actionsheetios.html b/docs/actionsheetios.html index 3663cf9f64e..044268c6dd3 100644 --- a/docs/actionsheetios.html +++ b/docs/actionsheetios.html @@ -1,4 +1,4 @@ -ActionSheetIOS – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS #

Edit on GitHub

Methods #

static showActionSheetWithOptions(options: Object, callback: Function) #

static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function) #

Display the iOS share sheet. The options object should contain +ActionSheetIOS – React Native | A framework for building native apps using React

React Native0.22

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActionSheetIOS #

Edit on GitHub

Methods #

static showActionSheetWithOptions(options: Object, callback: Function) #

static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function) #

Display the iOS share sheet. The options object should contain one or both of:

  • message (string) - a message to share
  • url (string) - a URL to share

NOTE: if url points to a local file, or is a base64-encoded uri, the file it points to will be loaded and shared directly. In this way, you can share images, videos, PDF files, etc.

Examples #

Edit on GitHub
'use strict'; diff --git a/docs/activityindicatorios.html b/docs/activityindicatorios.html index 27e090d2ad6..3e410b52b11 100644 --- a/docs/activityindicatorios.html +++ b/docs/activityindicatorios.html @@ -1,4 +1,4 @@ -ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS #

Edit on GitHub

Props #

View props... #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

hidesWhenStopped bool #

Whether the indicator should hide when not animating (true by default).

onLayout function #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Examples #

Edit on GitHub
'use strict'; +ActivityIndicatorIOS – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

ActivityIndicatorIOS #

Edit on GitHub

Props #

View props... #

animating bool #

Whether to show the indicator (true, the default) or hide it (false).

color string #

The foreground color of the spinner (default is gray).

hidesWhenStopped bool #

Whether the indicator should hide when not animating (true by default).

onLayout function #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Examples #

Edit on GitHub
'use strict'; var React = require('react-native'); var { diff --git a/docs/alert.html b/docs/alert.html index 1b2c5c54927..4de75b57967 100644 --- a/docs/alert.html +++ b/docs/alert.html @@ -1,4 +1,4 @@ -Alert – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the +Alert – React Native | A framework for building native apps using React

React Native0.22

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Alert #

Edit on GitHub

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.

This is an API that works both on iOS and Android and can show static alerts. To show an alert that prompts the user to enter some information, diff --git a/docs/alertios.html b/docs/alertios.html index 7c89e7ee4df..c4a6ecf505d 100644 --- a/docs/alertios.html +++ b/docs/alertios.html @@ -1,4 +1,4 @@ -AlertIOS – React Native | A framework for building native apps using React

React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

The AlertsIOS utility provides two functions: alert and prompt. All +AlertIOS – React Native | A framework for building native apps using React

React Native0.22

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

AlertIOS #

Edit on GitHub

The AlertsIOS utility provides two functions: alert and prompt. All functionality available through AlertIOS.alert is also available in the cross-platform Alert.alert, which we recommend you use if you don't need iOS-specific functionality.

AlertIOS.prompt allows you to prompt the user for input inside of an diff --git a/docs/android-building-from-source.html b/docs/android-building-from-source.html index 49a65ff12f5..1c24e3023c7 100644 --- a/docs/android-building-from-source.html +++ b/docs/android-building-from-source.html @@ -1,4 +1,4 @@ -Building React Native from source – React Native | A framework for building native apps using React

React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

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)
  2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  3. Android Support Repository >= 17 (for Android Support Library)
  4. Android NDK (download & extraction instructions here)

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 +Building React Native from source – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Building React Native from source #

Edit on GitHub

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)
  2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  3. Android Support Repository >= 17 (for Android Support Library)
  4. Android NDK (download & extraction instructions here)

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

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:

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:

... dependencies { diff --git a/docs/android-setup.html b/docs/android-setup.html index 33d4a702f7f..0f240d07f42 100644 --- a/docs/android-setup.html +++ b/docs/android-setup.html @@ -1,4 +1,4 @@ -Android Setup – React Native | A framework for building native apps using React
React Native0.22

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Android Setup #

Edit on GitHub

This guide describes basic steps of the Android development environment setup that are required to run React Native android apps on an android emulator.

Install Git #

  • On Mac, if you have installed XCode, Git is already installed, otherwise run the following:

    brew install git

  • On Linux, install Git via your package manager.

  • On Windows, download and install Git for Windows. During the setup process, choose "Run Git from Windows Command Prompt", which will add Git to your PATH environment variable.

Install the Android SDK (unless you already have it) #

  1. Install the latest JDK
  2. Install the Android SDK:

Define the ANDROID_HOME environment variable #

IMPORTANT: Make sure the ANDROID_HOME environment variable points to your existing Android SDK: