diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 00000000000..61d6080c1f3 --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,82 @@ +aliases: + - &restore-cache + keys: + - v1-dependencies-{{ arch }}-{{ .Branch }}-{{ checksum "website/package.json" }} + # Fallback in case checksum fails + - v1-dependencies-{{ arch }}-{{ .Branch }}- + + - &save-cache + paths: + - website/node_modules + key: v1-dependencies-{{ arch }}-{{ .Branch }}-{{ checksum "website/package.json" }} + + - &filter-only-master + branches: + only: + - master + + - &filter-ignore-gh-pages + branches: + ignore: gh-pages + +defaults: &defaults + working_directory: ~/react-native-website + docker: + - image: circleci/node:8 + +version: 2 +jobs: + # Tests website + test-website: + <<: *defaults + steps: + - checkout + - run: + name: Install Dependencies + command: | + cd website + yarn --no-progress + - run: + name: Test Website + command: | + cd website + yarn test + + # Deploys website + deploy-website: + <<: *defaults + steps: + - checkout + - run: + name: Install Dependencies + command: | + cd website + yarn --no-progress + - run: + name: Build and Deploy Static Website + command: | + if [[ $CIRCLE_PROJECT_USERNAME == "facebook" && -z $CI_PULL_REQUEST && -z $CIRCLE_PR_USERNAME ]]; then + git config --global user.email "reactjs-bot@users.noreply.github.com" + git config --global user.name "Website Deployment Script" + echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" > ~/.netrc + echo "Deploying website..." + cd website && GIT_USER=reactjs-bot CIRCLE_PROJECT_REPONAME=react-native yarn run publish-gh-pages + else + echo "Skipping deploy." + fi + +# Workflows enables us to run multiple jobs in parallel +workflows: + version: 2 + + build: + jobs: + # Test website + - test-website: + filters: *filter-ignore-gh-pages + + # If we are on master, deploy docs + - deploy-website: + filters: *filter-only-master + requires: + - test-website diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000000..0d9c033030d --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,9 @@ +Thank you for the PR! Contributors like you keep React Native awesome! + +Please see the Contribution Guide for guidelines: + +https://github.com/facebook/react-native-website/blob/master/CONTRIBUTING.md + +If your PR references an existing issue, please add the issue number below: + +# diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000000..0f1624ac087 --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +node_modules +.DS_Store +lib/core/metadata.js +lib/core/MetadataBlog.js +website/translated_docs +website/build/ +website/yarn.lock +website/node_modules + +website/i18n/* +!website/i18n/en.json + +.nvmrc diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000000..6c7645b5d66 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,100 @@ +# [Open Source Code of Conduct](https://code.facebook.com/codeofconduct) + +This code of conduct outlines our expectations for participants within the +**Facebook Open Source** community, as well as steps to reporting unacceptable +behavior. We are committed to providing a welcoming and inspiring community for +all and expect our code of conduct to be honored. Anyone who violates this code +of conduct may be banned from the community. + +Our open source community strives to: + +* **Be friendly and patient.** +* **Be welcoming:** We strive to be a community that welcomes and supports + people of all backgrounds and identities. This includes, but is not limited to + members of any race, ethnicity, culture, national origin, colour, immigration + status, social and economic class, educational level, sex, sexual orientation, + gender identity and expression, age, size, family status, political belief, + religion, and mental and physical ability. +* **Be considerate:** Your work will be used by other people, and you in turn + will depend on the work of others. Any decision you take will affect users and + colleagues, and you should take those consequences into account when making + decisions. Remember that we’re a world-wide community, so you might not be + communicating in someone else’s primary language. +* **Be respectful:** Not all of us will agree all the time, but disagreement is + no excuse for poor behavior and poor manners. We might all experience some + frustration now and then, but we cannot allow that frustration to turn into a + personal attack. It’s important to remember that a community where people feel + uncomfortable or threatened is not a productive one. +* **Be careful in the words that you choose:** we are a community of + professionals, and we conduct ourselves professionally. Be kind to others. Do + not insult or put down other participants. Harassment and other exclusionary + behavior aren’t acceptable. This includes, but is not limited to: + * Violent threats or language directed against another person. + * Discriminatory jokes and language. + * Posting sexually explicit or violent material. + * Posting (or threatening to post) other people’s personally identifying + information (“doxing”). + * Personal insults, especially those using racist or sexist terms. + * Unwelcome sexual attention. + * Advocating for, or encouraging, any of the above behavior. + * Repeated harassment of others. In general, if someone asks you to stop, then + stop. +* **When we disagree, try to understand why:** Disagreements, both social and + technical, happen all the time. It is important that we resolve disagreements + and differing views constructively. +* **Remember that we’re different.** The strength of our community comes from + its diversity, people from a wide range of backgrounds. Different people have + different perspectives on issues. Being unable to understand why someone holds + a viewpoint doesn’t mean that they’re wrong. Don’t forget that it is human to + err and blaming each other doesn’t get us anywhere. Instead, focus on helping + to resolve issues and learning from mistakes. + +This code is not exhaustive or complete. It serves to distill our common +understanding of a collaborative, shared environment, and goals. We expect it to +be followed in spirit as much as in the letter. + +## Diversity Statement + +We encourage everyone to participate and are committed to building a community +for all. Although we may not be able to satisfy everyone, we all agree that +everyone is equal. Whenever a participant has made a mistake, we expect them to +take responsibility for it. If someone has been harmed or offended, it is our +responsibility to listen carefully and respectfully, and do our best to right +the wrong. + +Although this list cannot be exhaustive, we explicitly honor diversity in age, +gender, gender identity or expression, culture, ethnicity, language, national +origin, political beliefs, profession, race, religion, sexual orientation, +socioeconomic status, and technical ability. We will not tolerate discrimination +based on any of the protected characteristics above, including participants with +disabilities. + +## Reporting Issues + +If you experience or witness unacceptable behavior—or have any other +concerns—please report it by contacting us via opensource@fb.com. All reports +will be handled with discretion. In your report please include: + +* Your contact information. +* Names (real, nicknames, or pseudonyms) of any individuals involved. If there + are additional witnesses, please include them as well. Your account of what + occurred, and if you believe the incident is ongoing. If there is a publicly + available record (e.g. a mailing list archive or a public IRC logger), please + include a link. +* Any additional information that may be helpful. + +After filing a report, a representative will contact you personally. If the +person who is harassing you is part of the response team, they will recuse +themselves from handling your incident. A representative will then review the +incident, follow up with any additional questions, and make a decision as to how +to respond. We will respect confidentiality requests for the purpose of +protecting victims of abuse. + +Anyone asked to stop unacceptable behavior is expected to comply immediately. If +an individual engages in unacceptable behavior, the representative may take any +action they deem appropriate, up to and including a permanent ban from our +community without warning. + +_This Code Of Conduct follows the +[template](http://todogroup.org/opencodeofconduct/) established by the +[TODO Group](http://todogroup.org/)._ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000000..45056f79fe9 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,69 @@ +# Contributing + +Thank you for your interest in contributing to the React Native Docs! + +## Code of Conduct + +Facebook has adopted a Code of Conduct that we expect project participants to +adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) +so that you can understand what actions will and will not be tolerated. + +## Guidelines for Text + +**Different sections intentionally have different styles.** + +The documentation is divided into sections to cater to different learning styles +and use cases. When editing an article, try to match the surrounding text in +tone and style. When creating a new article, try to match the tone of the other +articles in the same section. Learn about the motivation behind each section +below. + +**[Getting Started](https://facebook.github.io/react-native/docs/tutorial.html)** +is relatively informal. Resist adding too much detail to the Quick Start. The +native code instructions should contain the minimal set of steps to get to a +working development environment, and is expected to contain a longer set of +steps to get a working development environment. Whatever the case, it should be +possible for a beginner to mechanically follow every instruction, and still get +to a working React Native app. + +**[The Basics](https://facebook.github.io/react-native/docs/tutorial.html)** is +designed to introduce fundamental concepts in a step-by-step way. Each +individual article in The Basics builds on the knowledge from the previous ones, +so make sure not to add any "cyclical dependencies" between them. It is +important that the reader can start with the first article and work their way to +the last Basics article without ever having to "look ahead" for a definition. +This explains some ordering choices. Resist adding too much detail to Basics +articles. They intentionally don't cover all corner cases, and focus on +establishing firm foundations. + +**[Guides](https://facebook.github.io/react-native/docs/components-and-apis.html)** +are deep dives into topics that aren't essential for a beginner developer but +that everyone bumps into sooner or later. They don't have a specific order, and +target more experienced developers. If you have a set of recipes fitting a +particular use case, and those recipes aren't opinionated (most React Native +users would agree on them), this is the place to add them. + +**[Reference](https://facebook.github.io/react-native/docs/activityindicator.html)** +is organized by APIs rather than concepts. It is intended to be exhaustive. Any +corner cases or recommendations that were skipped for brevity in The Basics or +Guides should be mentioned in the reference documentation for the corresponding +APIs. + +**[Contributing](https://facebook.github.io/react-native/docs/contributing.html)** +should stay up-to-date and be friendly to relatively experienced developers. + +**[More Resources](https://facebook.github.io/react-native/docs/more-resources.html)** +has a more conversational tone than the other sections. Here, it's fine to +include some content that's not primarily concerned with React Native, as long +as React Native users are overwhelmingly interested in it (e.g. recommendations +on which libraries to use). + +**Try to follow your own instructions.** + +When writing step-by-step instructions (e.g. how to install something), try to +forget everything you know about the topic, and actually follow the instructions +you wrote, a single step at time. Often you will discover that there is implicit +knowledge that you forgot to mention, or that there are missing or out-of-order +steps in the instructions. Bonus points for getting _somebody else_ to follow +the steps and watching what they struggle with. Often it would be something very +simple that you have not anticipated. diff --git a/LICENSE-docs b/LICENSE-docs new file mode 100644 index 00000000000..3426e6ca5f7 --- /dev/null +++ b/LICENSE-docs @@ -0,0 +1,393 @@ +Attribution 4.0 International + +======================================================================= + +Creative Commons Corporation ("Creative Commons") is not a law firm and +does not provide legal services or legal advice. Distribution of +Creative Commons public licenses does not create a lawyer-client or +other relationship. Creative Commons makes its licenses and related +information available on an "as-is" basis. Creative Commons gives no +warranties regarding its licenses, any material licensed under their +terms and conditions, or any related information. Creative Commons +disclaims all liability for damages resulting from their use to the +fullest extent possible. + +Using Creative Commons Public Licenses + +Creative Commons public licenses provide a standard set of terms and +conditions that creators and other rights holders may use to share +original works of authorship and other material subject to copyright +and certain other rights specified in the public license below. The +following considerations are for informational purposes only, are not +exhaustive, and do not form part of our licenses. + + Considerations for licensors: Our public licenses are + intended for use by those authorized to give the public + permission to use material in ways otherwise restricted by + copyright and certain other rights. Our licenses are + irrevocable. Licensors should read and understand the terms + and conditions of the license they choose before applying it. + Licensors should also secure all rights necessary before + applying our licenses so that the public can reuse the + material as expected. Licensors should clearly mark any + material not subject to the license. This includes other CC- + licensed material, or material used under an exception or + limitation to copyright. More considerations for licensors: + wiki.creativecommons.org/Considerations_for_licensors + + Considerations for the public: By using one of our public + licenses, a licensor grants the public permission to use the + licensed material under specified terms and conditions. If + the licensor's permission is not necessary for any reason--for + example, because of any applicable exception or limitation to + copyright--then that use is not regulated by the license. Our + licenses grant only permissions under copyright and certain + other rights that a licensor has authority to grant. Use of + the licensed material may still be restricted for other + reasons, including because others have copyright or other + rights in the material. A licensor may make special requests, + such as asking that all changes be marked or described. + Although not required by our licenses, you are encouraged to + respect those requests where reasonable. More_considerations + for the public: + wiki.creativecommons.org/Considerations_for_licensees + +======================================================================= + +Creative Commons Attribution 4.0 International Public License + +By exercising the Licensed Rights (defined below), You accept and agree +to be bound by the terms and conditions of this Creative Commons +Attribution 4.0 International Public License ("Public License"). To the +extent this Public License may be interpreted as a contract, You are +granted the Licensed Rights in consideration of Your acceptance of +these terms and conditions, and the Licensor grants You such rights in +consideration of benefits the Licensor receives from making the +Licensed Material available under these terms and conditions. + + +Section 1 -- Definitions. + + a. Adapted Material means material subject to Copyright and Similar + Rights that is derived from or based upon the Licensed Material + and in which the Licensed Material is translated, altered, + arranged, transformed, or otherwise modified in a manner requiring + permission under the Copyright and Similar Rights held by the + Licensor. For purposes of this Public License, where the Licensed + Material is a musical work, performance, or sound recording, + Adapted Material is always produced where the Licensed Material is + synched in timed relation with a moving image. + + b. Adapter's License means the license You apply to Your Copyright + and Similar Rights in Your contributions to Adapted Material in + accordance with the terms and conditions of this Public License. + + c. Copyright and Similar Rights means copyright and/or similar rights + closely related to copyright including, without limitation, + performance, broadcast, sound recording, and Sui Generis Database + Rights, without regard to how the rights are labeled or + categorized. For purposes of this Public License, the rights + specified in Section 2(b)(1)-(2) are not Copyright and Similar + Rights. + + d. Effective Technological Measures means those measures that, in the + absence of proper authority, may not be circumvented under laws + fulfilling obligations under Article 11 of the WIPO Copyright + Treaty adopted on December 20, 1996, and/or similar international + agreements. + + e. Exceptions and Limitations means fair use, fair dealing, and/or + any other exception or limitation to Copyright and Similar Rights + that applies to Your use of the Licensed Material. + + f. Licensed Material means the artistic or literary work, database, + or other material to which the Licensor applied this Public + License. + + g. Licensed Rights means the rights granted to You subject to the + terms and conditions of this Public License, which are limited to + all Copyright and Similar Rights that apply to Your use of the + Licensed Material and that the Licensor has authority to license. + + h. Licensor means the individual(s) or entity(ies) granting rights + under this Public License. + + i. Share means to provide material to the public by any means or + process that requires permission under the Licensed Rights, such + as reproduction, public display, public performance, distribution, + dissemination, communication, or importation, and to make material + available to the public including in ways that members of the + public may access the material from a place and at a time + individually chosen by them. + + j. Sui Generis Database Rights means rights other than copyright + resulting from Directive 96/9/EC of the European Parliament and of + the Council of 11 March 1996 on the legal protection of databases, + as amended and/or succeeded, as well as other essentially + equivalent rights anywhere in the world. + + k. You means the individual or entity exercising the Licensed Rights + under this Public License. Your has a corresponding meaning. + + +Section 2 -- Scope. + + a. License grant. + + 1. Subject to the terms and conditions of this Public License, + the Licensor hereby grants You a worldwide, royalty-free, + non-sublicensable, non-exclusive, irrevocable license to + exercise the Licensed Rights in the Licensed Material to: + + a. reproduce and Share the Licensed Material, in whole or + in part; and + + b. produce, reproduce, and Share Adapted Material. + + 2. Exceptions and Limitations. For the avoidance of doubt, where + Exceptions and Limitations apply to Your use, this Public + License does not apply, and You do not need to comply with + its terms and conditions. + + 3. Term. The term of this Public License is specified in Section + 6(a). + + 4. Media and formats; technical modifications allowed. The + Licensor authorizes You to exercise the Licensed Rights in + all media and formats whether now known or hereafter created, + and to make technical modifications necessary to do so. The + Licensor waives and/or agrees not to assert any right or + authority to forbid You from making technical modifications + necessary to exercise the Licensed Rights, including + technical modifications necessary to circumvent Effective + Technological Measures. For purposes of this Public License, + simply making modifications authorized by this Section 2(a) + (4) never produces Adapted Material. + + 5. Downstream recipients. + + a. Offer from the Licensor -- Licensed Material. Every + recipient of the Licensed Material automatically + receives an offer from the Licensor to exercise the + Licensed Rights under the terms and conditions of this + Public License. + + b. No downstream restrictions. You may not offer or impose + any additional or different terms or conditions on, or + apply any Effective Technological Measures to, the + Licensed Material if doing so restricts exercise of the + Licensed Rights by any recipient of the Licensed + Material. + + 6. No endorsement. Nothing in this Public License constitutes or + may be construed as permission to assert or imply that You + are, or that Your use of the Licensed Material is, connected + with, or sponsored, endorsed, or granted official status by, + the Licensor or others designated to receive attribution as + provided in Section 3(a)(1)(A)(i). + + b. Other rights. + + 1. Moral rights, such as the right of integrity, are not + licensed under this Public License, nor are publicity, + privacy, and/or other similar personality rights; however, to + the extent possible, the Licensor waives and/or agrees not to + assert any such rights held by the Licensor to the limited + extent necessary to allow You to exercise the Licensed + Rights, but not otherwise. + + 2. Patent and trademark rights are not licensed under this + Public License. + + 3. To the extent possible, the Licensor waives any right to + collect royalties from You for the exercise of the Licensed + Rights, whether directly or through a collecting society + under any voluntary or waivable statutory or compulsory + licensing scheme. In all other cases the Licensor expressly + reserves any right to collect such royalties. + + +Section 3 -- License Conditions. + +Your exercise of the Licensed Rights is expressly made subject to the +following conditions. + + a. Attribution. + + 1. If You Share the Licensed Material (including in modified + form), You must: + + a. retain the following if it is supplied by the Licensor + with the Licensed Material: + + i. identification of the creator(s) of the Licensed + Material and any others designated to receive + attribution, in any reasonable manner requested by + the Licensor (including by pseudonym if + designated); + + ii. a copyright notice; + + iii. a notice that refers to this Public License; + + iv. a notice that refers to the disclaimer of + warranties; + + v. a URI or hyperlink to the Licensed Material to the + extent reasonably practicable; + + b. indicate if You modified the Licensed Material and + retain an indication of any previous modifications; and + + c. indicate the Licensed Material is licensed under this + Public License, and include the text of, or the URI or + hyperlink to, this Public License. + + 2. You may satisfy the conditions in Section 3(a)(1) in any + reasonable manner based on the medium, means, and context in + which You Share the Licensed Material. For example, it may be + reasonable to satisfy the conditions by providing a URI or + hyperlink to a resource that includes the required + information. + + 3. If requested by the Licensor, You must remove any of the + information required by Section 3(a)(1)(A) to the extent + reasonably practicable. + + 4. If You Share Adapted Material You produce, the Adapter's + License You apply must not prevent recipients of the Adapted + Material from complying with this Public License. + + +Section 4 -- Sui Generis Database Rights. + +Where the Licensed Rights include Sui Generis Database Rights that +apply to Your use of the Licensed Material: + + a. for the avoidance of doubt, Section 2(a)(1) grants You the right + to extract, reuse, reproduce, and Share all or a substantial + portion of the contents of the database; + + b. if You include all or a substantial portion of the database + contents in a database in which You have Sui Generis Database + Rights, then the database in which You have Sui Generis Database + Rights (but not its individual contents) is Adapted Material; and + + c. You must comply with the conditions in Section 3(a) if You Share + all or a substantial portion of the contents of the database. + +For the avoidance of doubt, this Section 4 supplements and does not +replace Your obligations under this Public License where the Licensed +Rights include other Copyright and Similar Rights. + + +Section 5 -- Disclaimer of Warranties and Limitation of Liability. + + a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE + EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS + AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF + ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS, + IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION, + WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR + PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS, + ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT + KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT + ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU. + + b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE + TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION, + NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT, + INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES, + COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR + USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN + ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR + DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR + IN PART, THIS LIMITATION MAY NOT APPLY TO YOU. + + c. The disclaimer of warranties and limitation of liability provided + above shall be interpreted in a manner that, to the extent + possible, most closely approximates an absolute disclaimer and + waiver of all liability. + + +Section 6 -- Term and Termination. + + a. This Public License applies for the term of the Copyright and + Similar Rights licensed here. However, if You fail to comply with + this Public License, then Your rights under this Public License + terminate automatically. + + b. Where Your right to use the Licensed Material has terminated under + Section 6(a), it reinstates: + + 1. automatically as of the date the violation is cured, provided + it is cured within 30 days of Your discovery of the + violation; or + + 2. upon express reinstatement by the Licensor. + + For the avoidance of doubt, this Section 6(b) does not affect any + right the Licensor may have to seek remedies for Your violations + of this Public License. + + c. For the avoidance of doubt, the Licensor may also offer the + Licensed Material under separate terms or conditions or stop + distributing the Licensed Material at any time; however, doing so + will not terminate this Public License. + + d. Sections 1, 5, 6, 7, and 8 survive termination of this Public + License. + + +Section 7 -- Other Terms and Conditions. + + a. The Licensor shall not be bound by any additional or different + terms or conditions communicated by You unless expressly agreed. + + b. Any arrangements, understandings, or agreements regarding the + Licensed Material not stated herein are separate from and + independent of the terms and conditions of this Public License. + + +Section 8 -- Interpretation. + + a. For the avoidance of doubt, this Public License does not, and + shall not be interpreted to, reduce, limit, restrict, or impose + conditions on any use of the Licensed Material that could lawfully + be made without permission under this Public License. + + b. To the extent possible, if any provision of this Public License is + deemed unenforceable, it shall be automatically reformed to the + minimum extent necessary to make it enforceable. If the provision + cannot be reformed, it shall be severed from this Public License + without affecting the enforceability of the remaining terms and + conditions. + + c. No term or condition of this Public License will be waived and no + failure to comply consented to unless expressly agreed to by the + Licensor. + + d. Nothing in this Public License constitutes or may be interpreted + as a limitation upon, or waiver of, any privileges and immunities + that apply to the Licensor or You, including from the legal + processes of any jurisdiction or authority. + + +======================================================================= + +Creative Commons is not a party to its public licenses. +Notwithstanding, Creative Commons may elect to apply one of its public +licenses to material it publishes and in those instances will be +considered the "Licensor." Except for the limited purpose of indicating +that material is shared under a Creative Commons public license or as +otherwise permitted by the Creative Commons policies published at +creativecommons.org/policies, Creative Commons does not authorize the +use of the trademark "Creative Commons" or any other trademark or logo +of Creative Commons without its prior written consent including, +without limitation, in connection with any unauthorized modifications +to any of its public licenses or any other arrangements, +understandings, or agreements concerning use of licensed material. For +the avoidance of doubt, this paragraph does not form part of the public +licenses. + +Creative Commons may be contacted at creativecommons.org. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000000..e547d01ed16 --- /dev/null +++ b/README.md @@ -0,0 +1,155 @@ +# facebook.github.io/react-native/ + +This repo contains the website configuration and documentation powering the +[React Native website](https://facebook.github.io/react-native/). + +## Getting started + +### Prerequisites + +1. Git +1. Node: install version 6.2.2 or greater +1. (Optional) Yarn: See + [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) +1. A clone of the `react-native-website` repo. +1. Docusaurus: Run `yarn global add docusaurus-init` or `npm install --global + docusaurus-init` + +### Installation + +1. `cd react-native-website` to go into the project root +1. `cd website` to go into the website portion of the project +1. `yarn` to install the website's npm dependencies + +### Running locally + +1. `yarn start` to start the development server (powered by Docusaurus) +1. `open http://localhost:3000/` to open the site in your favorite browser + +# Overview + +If you're here because you would like to contribute an edit or addition to the +docs, you'll probably want to take a look at the 'docs/' directory. + +To edit the internals of how the site is built, you may want to get familiarized +with how the site is built. The React Native website is a static site generated +using [Docusaurus](https://docusaurus.io). The website configuration can be +found in the 'website/' directory. Visit the Docusaurus website to learn more +about all the avaible configuration options. + +## Directory Structure + +The following is a high level overview of relevant files and folders. + +``` +react-native-website/ +├── docs/ +│ ├── assets/ +│ ├── accessibility.md +│ └── ... +└── website/ + ├── blog/ + │ ├── assets/ + │ ├── 2015-03-26-react-native-bringing-modern-web-techniques-to-mobile.md + │ └── ... + ├── core/ + ├── pages/ + │ └── en/ + │ ├── ... + │ ├── index.js + │ └── ... + ├── static/ + │ ├── css/ + │ ├── img/ + │ └── js/ + ├── versioned_docs/ + │ ├── version-0.5/ + │ └── ... + ├── versioned_sidebars/ + │ ├── version-0.5-sidebars.json + │ └── ... + ├── showcase.json + ├── sidebars.json + ├── siteConfig.js + └── versions.json +``` + +## Documentation sources + +As mentioned above, the 'docs/' folder contains the source files for all of the +docs in the React Native website. In most cases, you will want to edit the files +within this directory. If you're adding a new doc or you need to alter the order +the docs appear in the sidebar, take a look at the 'sidebars.json' file in the +'website/' directory. The sidebars file contains a list of document ids that +should match those defined in the header metadata (aka frontmatter) of the docs +markdown files. + +### Versioned docs + +The React Native website is versioned as to allow users to go back and see the +API reference docs for any given release. A new version of the website is +generally made whenever there is a new React Native release. When this happens, +any changes made to the 'docs/' and 'website/sidebars.json' files will be copied +over to the corresponding location within 'website/versioned_docs/' and +'website/versioned_sidebars/'. + +> Do not edit the auto-generated files within 'versioned_docs/' or +> 'versioned_sidebars/' unless you are sure it is necessary. Edits made to older +> versions will not be propagated to newer versions of the docs. + +Docusaurus keeps track of the list of versions for the site in the +'website/versions.json' file. The ordering of the versions in this file should +be in reverse chronological order. + +#### Cutting a new version + +1. `cd react-native-website` to go into the project root +1. `cd website` to go into the website portion of the project +1. Run `yarn version ` where '' is the new version being + released. + +## Website configuration + +The main config file for the website can be found at 'website/siteConfig.js'. +This file tells +[Docusaurus how to build the website](http://docusaurus.io/docs/en/site-config.html). +Edits to this file are rarely necessary. + +The 'pages/' subdirectory contains the React components that make up the +non-documentation pages of the site, such as the homepage. + +The 'showcase.json' file contains the list of users that are highlighted in the +React Native showcase. + +## Contributing + +### Create a branch + +1. `git checkout master` from any folder in your local `react-native-website` + repository +1. `git pull origin master` to ensure you have the latest main code +1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` + with a suitable name) to create a branch + +### Make the change + +1. Follow the "Running locally" instructions +1. Save the files and check in the browser. Some changes may require a server + restart. + +### Test the change + +1. If possible, test any visual changes in all latest versions of common + browsers, on both desktop and mobile. + +### Push it + +1. `git add -A && git commit -m "My message"` (replacing `My message` with a + commit message, such as `Fixed header logo on Android`) to stage and commit + your changes +1. `git push my-fork-name the-name-of-my-branch` +1. Go to the + [react-native-website repo](https://github.com/facebook/react-native-website) + and you should see recently pushed branches. +1. Follow GitHub's instructions. +1. If possible, include screenshots of visual changes. diff --git a/docs/accessibility.md b/docs/accessibility.md new file mode 100644 index 00000000000..e7b0d76935f --- /dev/null +++ b/docs/accessibility.md @@ -0,0 +1,175 @@ +--- +id: accessibility +title: Accessibility +--- + +## 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. + +In addition to this documentation, you might find [this blog post](https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/) about React Native accessibility to be useful. + +## 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 + + text one + text two + +``` + +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 + + + Press me! + + +``` + +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. + +#### accessibilityViewIsModal (iOS) + +A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. + +For example, in a window that contains sibling views `A` and `B`, setting `accessibilityViewIsModal` to `true` on view `B` causes VoiceOver to ignore the elements in the view `A`. +On the other hand, if view `B` contains a child view `C` and you set `accessibilityViewIsModal` to `true` on view `C`, VoiceOver does not ignore the elements in view `A`. + +#### 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 + + + Press me! + + +``` + +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 + + + Click me + + + + Clicked {this.state.count} times + +``` + +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 + + + First layout + + + Second layout + + +``` + +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. + +### Checking if a Screen Reader is Enabled + +The `AccessibilityInfo` API allows you to determine whether or not a screen reader is currently active. See the [AccessibilityInfo documentation](accessibilityinfo.md) for details. + +### 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); + } +} + + +``` + +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 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. diff --git a/docs/accessibilityinfo.md b/docs/accessibilityinfo.md new file mode 100644 index 00000000000..86cd0304bbd --- /dev/null +++ b/docs/accessibilityinfo.md @@ -0,0 +1,151 @@ +--- +id: accessibilityinfo +title: AccessibilityInfo +--- + +Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The +`AccessibilityInfo` API is designed for this purpose. You can use it to query the current state of the +screen reader as well as to register to be notified when the state of the screen reader changes. + +Here's a small example illustrating how to use `AccessibilityInfo`: + +```javascript +class ScreenReaderStatusExample extends React.Component { + state = { + screenReaderEnabled: false, + } + + componentDidMount() { + AccessibilityInfo.addEventListener( + 'change', + this._handleScreenReaderToggled + ); + AccessibilityInfo.fetch().done((isEnabled) => { + this.setState({ + screenReaderEnabled: isEnabled + }); + }); + } + + componentWillUnmount() { + AccessibilityInfo.removeEventListener( + 'change', + this._handleScreenReaderToggled + ); + } + + _handleScreenReaderToggled = (isEnabled) => { + this.setState({ + screenReaderEnabled: isEnabled, + }); + } + + render() { + return ( + + + The screen reader is {this.state.screenReaderEnabled ? 'enabled' : 'disabled'}. + + + ); + } +} +``` + + +### Methods + +- [`fetch`](accessibilityinfo.md#fetch) +- [`addEventListener`](accessibilityinfo.md#addeventlistener) +- [`setAccessibilityFocus`](accessibilityinfo.md#setaccessibilityfocus) +- [`announceForAccessibility`](accessibilityinfo.md#announceforaccessibility) +- [`removeEventListener`](accessibilityinfo.md#removeeventlistener) + + + + +--- + +# Reference + +## Methods + +### `fetch()` + +```javascript +static fetch() +``` + + +Query whether a screen reader is currently enabled. Returns a promise which +resolves to a boolean. The result is `true` when a screen reader is enabled +and `false` otherwise. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(eventName, handler) +``` + + +Add an event handler. Supported events: + +- `change`: Fires when the state of the screen reader changes. The argument + to the event handler is a boolean. The boolean is `true` when a screen + reader is enabled and `false` otherwise. +- `announcementFinished`: iOS-only event. Fires when the screen reader has + finished making an announcement. The argument to the event handler is a dictionary + with these keys: + - `announcement`: The string announced by the screen reader. + - `success`: A boolean indicating whether the announcement was successfully made. + + + + +--- + +### `setAccessibilityFocus()` + +```javascript +static setAccessibilityFocus(reactTag) +``` + + +iOS-Only. Set accessibility focus to a react component. + + + + +--- + +### `announceForAccessibility()` + +```javascript +static announceForAccessibility(announcement) +``` + + +iOS-Only. Post a string to be announced by the screen reader. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(eventName, handler) +``` + + +Remove an event handler. + + + + diff --git a/docs/actionsheetios.md b/docs/actionsheetios.md new file mode 100644 index 00000000000..fbec4dbf110 --- /dev/null +++ b/docs/actionsheetios.md @@ -0,0 +1,91 @@ +--- +id: actionsheetios +title: ActionSheetIOS +--- + + + +### Methods + +- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) +- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) + + + + +--- + +# Reference + +## Methods + +### `showActionSheetWithOptions()` + +```javascript +static showActionSheetWithOptions(options, callback) +``` + + +Display an iOS action sheet. The `options` object must contain one or more +of: + +- `options` (array of strings) - a list of button titles (required) +- `cancelButtonIndex` (int) - index of cancel button in `options` +- `destructiveButtonIndex` (int) - index of destructive button in `options` +- `title` (string) - a title to show above the action sheet +- `message` (string) - a message to show below the title + +The 'callback' function takes one parameter, the zero-based index +of the selected item. + +Minimal example: + +``` +ActionSheetIOS.showActionSheetWithOptions({ + options: ['Remove', 'Cancel'], + destructiveButtonIndex: 1, + cancelButtonIndex: 0, +}, +(buttonIndex) => { + if (buttonIndex === 1) { // destructive action } +}); +``` + + + + + +--- + +### `showShareActionSheetWithOptions()` + +```javascript +static showShareActionSheetWithOptions(options, failureCallback, successCallback) +``` + + +Display the iOS share sheet. The `options` object should contain +one or both of `message` and `url` and can additionally have +a `subject` or `excludedActivityTypes`: + +- `url` (string) - a URL to share +- `message` (string) - a message to share +- `subject` (string) - a subject for the message +- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet + +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. + +The 'failureCallback' function takes one parameter, an error object. +The only property defined on this object is an optional `stack` property +of type `string`. + +The 'successCallback' function takes two parameters: + +- a boolean value signifying success or failure +- a string that, in the case of success, indicates the method of sharing + + + + diff --git a/docs/activityindicator.md b/docs/activityindicator.md new file mode 100644 index 00000000000..d456627da81 --- /dev/null +++ b/docs/activityindicator.md @@ -0,0 +1,120 @@ +--- +id: activityindicator +title: ActivityIndicator +--- +Displays a circular loading indicator. + +### Example + +```ReactNativeWebPlayer +import React, { Component } from 'react' +import { + ActivityIndicator, + AppRegistry, + StyleSheet, + Text, + View, +} from 'react-native' + +class App extends Component { + render() { + return ( + + + + + + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center' + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + padding: 10 + } +}) + +AppRegistry.registerComponent('App', () => App) +``` + +### Props + +* [View props...](view.md#props) +- [`animating`](activityindicator.md#animating) +- [`color`](activityindicator.md#color) +- [`size`](activityindicator.md#size) +- [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) + + + + + + +--- + +# Reference + +## Props + +### `animating` + +Whether to show the indicator (true, the default) or hide it (false). + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `color` + +The foreground color of the spinner (default is gray). + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `size` + +Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android. + +| Type | Required | +| - | - | +| enum('small', 'large'), ,number | No | + + + + +--- + +### `hidesWhenStopped` + +Whether the indicator should hide when not animating (true by default). + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/docs/alert.md b/docs/alert.md new file mode 100644 index 00000000000..0da6f768615 --- /dev/null +++ b/docs/alert.md @@ -0,0 +1,74 @@ +--- +id: alert +title: Alert +--- + +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, +see `AlertIOS`; entering text in an alert is common on iOS only. + +## iOS + +On iOS you can specify any number of buttons. Each button can optionally +specify a style, which is one of 'default', 'cancel' or 'destructive'. + +## Android + +On Android at most three buttons can be specified. Android has a concept +of a neutral, negative and a positive button: + + - If you specify one button, it will be the 'positive' one (such as 'OK') + - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK') + - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK') + +By default alerts on Android can be dismissed by tapping outside of the alert +box. This event can be handled by providing an optional `options` parameter, +with an `onDismiss` callback property `{ onDismiss: () => {} }`. + +Alternatively, the dismissing behavior can be disabled altogether by providing +an optional `options` parameter with the `cancelable` property set to `false` +i.e. `{ cancelable: false }` + +Example usage: +``` +// Works on both iOS and Android +Alert.alert( + 'Alert Title', + 'My Alert Msg', + [ + {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: () => console.log('OK Pressed')}, + ], + { cancelable: false } +) +``` + + +### Methods + +- [`alert`](alert.md#alert) + + + + +--- + +# Reference + +## Methods + +### `alert()` + +```javascript +static alert(title, message?, buttons?, options?, type?) +``` + + + diff --git a/docs/alertios.md b/docs/alertios.md new file mode 100644 index 00000000000..095b6a409a9 --- /dev/null +++ b/docs/alertios.md @@ -0,0 +1,215 @@ +--- +id: alertios +title: AlertIOS +--- +`AlertIOS` provides functionality to create an iOS alert dialog with a +message or create a prompt for user input. + +Creating an iOS alert: + +``` +AlertIOS.alert( + 'Sync Complete', + 'All your data are belong to us.' +); +``` + +Creating an iOS prompt: + +``` +AlertIOS.prompt( + 'Enter a value', + null, + text => console.log("You entered "+text) +); +``` + +We recommend using the [`Alert.alert`](alert.md) method for +cross-platform support if you don't need to create iOS-only prompts. + +### Methods + +- [`alert`](alertios.md#alert) +- [`prompt`](alertios.md#prompt) + + +### Type Definitions + +- [`AlertType`](alertios.md#alerttype) +- [`AlertButtonStyle`](alertios.md#alertbuttonstyle) +- [`ButtonsArray`](alertios.md#buttonsarray) + + + + +--- + +# Reference + +## Methods + +### `alert()` + +```javascript +static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object] +``` + +Create and display a popup alert. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| title | string | Yes | The dialog's title. Passing null or '' will hide the title. | +| message | string | No | An optional message that appears below the dialog's title. | +| callbackOrButtons | ?(() => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys. `style` should be one of 'default', 'cancel' or 'destructive'. | +| type | [AlertType](alertios.md#alerttype) | No | Deprecated, do not use. | + + + + +Example with custom buttons: + +```javascript +AlertIOS.alert( + 'Update available', + 'Keep your app up to date to enjoy the latest features', + [ + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'Install', onPress: () => console.log('Install Pressed')}, + ], +); +``` + + + +--- + +### `prompt()` + +```javascript +static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string, [keyboardType]: string): [object Object] +``` + +Create and display a prompt to enter some text. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| title | string | Yes | The dialog's title. | +| message | string | No | An optional message that appears above the text input. | +| callbackOrButtons | ?((text: string) => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys (see example). `style` should be one of 'default', 'cancel' or 'destructive'. | +| type | [AlertType](alertios.md#alerttype) | No | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. | +| defaultValue | string | No | The default text in text input. | +| keyboardType | string | No | The keyboard type of first text field(if exists). One of 'default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter' or 'web-search'. | + + + + +Example with custom buttons: + +```javascript +AlertIOS.prompt( + 'Enter password', + 'Enter your password to claim your $1.5B in lottery winnings', + [ + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, + ], + 'secure-text' +); +``` + +, + +Example with the default button and a custom callback: + +```javascript +AlertIOS.prompt( + 'Update username', + null, + text => console.log("Your username is "+text), + null, + 'default' +); +``` + + + +## Type Definitions + +### AlertType + +An Alert button type + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default alert with no inputs | +| plain-text | Plain text input alert | +| secure-text | Secure text input alert | +| login-password | Login and password alert | + + + + +--- + +### AlertButtonStyle + +An Alert button style + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default button style | +| cancel | Cancel button style | +| destructive | Destructive button style | + + + + +--- + +### ButtonsArray + +Array or buttons + +| Type | +| - | +| Array | + + +**Properties:** + +| Name | Type | Description | +| - | - | - | +| [text] | string | Button label | +| [onPress] | function | Callback function when button pressed | +| [style] | [AlertButtonStyle](alertios.md#alertbuttonstyle) | Button style | + + +**Constants:** + +| Value | Description | +| - | - | +| text | Button label | +| onPress | Callback function when button pressed | +| style | Button style | + + + + diff --git a/docs/android-building-from-source.md b/docs/android-building-from-source.md new file mode 100644 index 00000000000..d718e75bd4b --- /dev/null +++ b/docs/android-building-from-source.md @@ -0,0 +1,158 @@ +--- +id: android-building-from-source +title: Building React Native from source +--- + +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. Android Support Repository >= 17 (for Android Support Library) +4. Android NDK (download links and installation instructions below) + +### Point Gradle to your Android SDK: + +**Step 1:** Set environment variables through your local shell. + +Note: Files may vary based on shell flavor. See below for examples from common shells. + +- bash: `.bash_profile` or `.bashrc` +- zsh: `.zprofile` or `.zshrc` +- ksh: `.profile` or `$ENV` + +Example: + +``` +export ANDROID_SDK=/Users/your_unix_name/android-sdk-macosx +export ANDROID_NDK=/Users/your_unix_name/android-ndk/android-ndk-r10e +``` + +**Step 2:** Create a `local.properties` file in the `android` directory of your react-native app with the following contents: + +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](https://developer.android.com/ndk/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:3.1.2' + + // 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:+'` 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 add: + +```gradle +configurations.all { + 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}" + } +} +``` + +## Building for Maven/Nexus deployment + +If you find that you need to push up a locally compiled React Native .aar and related files to a remote Nexus repository, you can. + +Start by following the `Point Gradle to your Android SDK` section of this page. Once you do this, assuming you have Gradle configured properly, you can then run the following command from the root of your React Native checkout to build and package all required files: + +``` +./gradlew ReactAndroid:installArchives +``` + +This will package everything that would typically be included in the `android` directory of your `node_modules/react-native/` installation in the root directory of your React Native checkout. + +## Testing + +If you made changes to React Native and submit a pull request, all tests will run on your pull request automatically. To run the tests locally, see [Running Tests](testing.md). + +## Troubleshooting + +Gradle build fails in `ndk-build`. See the section about `local.properties` file above. diff --git a/docs/animated.md b/docs/animated.md new file mode 100644 index 00000000000..ee44f55f91f --- /dev/null +++ b/docs/animated.md @@ -0,0 +1,552 @@ +--- +id: animated +title: Animated +--- + +The `Animated` library is designed to make animations fluid, powerful, and +easy to build and maintain. `Animated` focuses on declarative relationships +between inputs and outputs, with configurable transforms in between, and +simple `start`/`stop` methods to control time-based animation execution. + +The simplest workflow for creating an animation is to create an +`Animated.Value`, hook it up to one or more style attributes of an animated +component, and then drive updates via animations using `Animated.timing()`: + +```javascript +Animated.timing( // Animate value over time + this.state.fadeAnim, // The value to drive + { + toValue: 1, // Animate to final value of 1 + } +).start(); // Start the animation +``` + +Refer to the [Animations](animations.md#animated-api) guide to see +additional examples of `Animated` in action. + +## Overview + +There are two value types you can use with `Animated`: + +- [`Animated.Value()`](animated.md#value) for single values +- [`Animated.ValueXY()`](animated.md#valuexy) for vectors + +`Animated.Value` can bind to style properties or other props, and can be +interpolated as well. A single `Animated.Value` can drive any number of +properties. + +### Configuring animations + +`Animated` provides three types of animation types. Each animation type +provides a particular animation curve that controls how your values animate +from their initial value to the final value: + +- [`Animated.decay()`](animated.md#decay) starts with an initial + velocity and gradually slows to a stop. +- [`Animated.spring()`](animated.md#spring) provides a simple + spring physics model. +- [`Animated.timing()`](animated.md#timing) animates a value over time + using [easing functions](easing.md). + +In most cases, you will be using `timing()`. By default, it uses a symmetric +easeInOut curve that conveys the gradual acceleration of an object to full +speed and concludes by gradually decelerating to a stop. + +### Working with animations + +Animations are started by calling `start()` on your animation. `start()` +takes a completion callback that will be called when the animation is done. +If the animation finished running normally, the completion callback will be +invoked with `{finished: true}`. If the animation is done because `stop()` +was called on it before it could finish (e.g. because it was interrupted by a +gesture or another animation), then it will receive `{finished: false}`. + +### Using the native driver + +By using the native driver, we send everything about the animation to native +before starting the animation, allowing native code to perform the animation +on the UI thread without having to go through the bridge on every frame. +Once the animation has started, the JS thread can be blocked without +affecting the animation. + +You can use the native driver by specifying `useNativeDriver: true` in your +animation configuration. See the +[Animations](animations.md#using-the-native-driver) guide to learn +more. + +### Animatable components + +Only animatable components can be animated. These special components do the +magic of binding the animated values to the properties, and do targeted +native updates to avoid the cost of the react render and reconciliation +process on every frame. They also handle cleanup on unmount so they are safe +by default. + +- [`createAnimatedComponent()`](animated.md#createanimatedcomponent) + can be used to make a component animatable. + +`Animated` exports the following animatable components using the above +wrapper: + +- `Animated.Image` +- `Animated.ScrollView` +- `Animated.Text` +- `Animated.View` + +### Composing animations + +Animations can also be combined in complex ways using composition functions: + +- [`Animated.delay()`](animated.md#delay) starts an animation after + a given delay. +- [`Animated.parallel()`](animated.md#parallel) starts a number of + animations at the same time. +- [`Animated.sequence()`](animated.md#sequence) starts the animations + in order, waiting for each to complete before starting the next. +- [`Animated.stagger()`](animated.md#stagger) starts animations in + order and in parallel, but with successive delays. + +Animations can also be chained together simply by setting the `toValue` of +one animation to be another `Animated.Value`. See +[Tracking dynamic values](animations.md#tracking-dynamic-values) in +the Animations guide. + +By default, if one animation is stopped or interrupted, then all other +animations in the group are also stopped. + +### Combining animated values + +You can combine two animated values via addition, multiplication, division, +or modulo to make a new animated value: + +- [`Animated.add()`](animated.md#add) +- [`Animated.divide()`](animated.md#divide) +- [`Animated.modulo()`](animated.md#modulo) +- [`Animated.multiply()`](animated.md#multiply) + +### Interpolation + +The `interpolate()` function allows input ranges to map to different output +ranges. By default, it will extrapolate the curve beyond the ranges given, +but you can also have it clamp the output value. It uses lineal interpolation +by default but also supports easing functions. + +- [`interpolate()`](animated.md#interpolate) + +Read more about interpolation in the +[Animation](animations.md#interpolation) guide. + +### Handling gestures and other events + +Gestures, like panning or scrolling, and other events can map directly to +animated values using `Animated.event()`. This is done with a structured map +syntax so that values can be extracted from complex event objects. The first +level is an array to allow mapping across multiple args, and that array +contains nested objects. + +- [`Animated.event()`](animated.md#event) + +For example, when working with horizontal scrolling gestures, you would do +the following in order to map `event.nativeEvent.contentOffset.x` to +`scrollX` (an `Animated.Value`): + +```javascript + onScroll={Animated.event( + // scrollX = e.nativeEvent.contentOffset.x + [{ nativeEvent: { + contentOffset: { + x: scrollX + } + } + }] + )} +``` + + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`divide`](animated.md#divide) +- [`multiply`](animated.md#multiply) +- [`modulo`](animated.md#modulo) +- [`diffClamp`](animated.md#diffclamp) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`loop`](animated.md#loop) +- [`event`](animated.md#event) +- [`forkEvent`](animated.md#forkevent) +- [`unforkEvent`](animated.md#unforkevent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) +- [`Interpolation`](animated.md#interpolation) +- [`Node`](animated.md#node) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) +- [`attachNativeEvent`](animated.md#attachnativeevent) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + +Config is an object that may have the following options: + + - `velocity`: Initial velocity. Required. + - `deceleration`: Rate of decay. Default 0.997. + - `isInteraction`: Whether or not this animation creates an "interaction handle" on the + `InteractionManager`. Default true. + - `useNativeDriver`: Uses the native driver when true. Default false. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The +[`Easing`](easing.md) module has tons of predefined curves, or you +can use your own function. + +Config is an object that may have the following options: + + - `duration`: Length of animation (milliseconds). Default 500. + - `easing`: Easing function to define curve. + Default is `Easing.inOut(Easing.ease)`. + - `delay`: Start the animation after delay (milliseconds). Default 0. + - `isInteraction`: Whether or not this animation creates an "interaction handle" on the + `InteractionManager`. Default true. + - `useNativeDriver`: Uses the native driver when true. Default false. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Animates a value according to an analytical spring model based on +[damped harmonic oscillation](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). +Tracks velocity state to create fluid motions as the `toValue` updates, and +can be chained together. + +Config is an object that may have the following options. + +Note that you can only define one of bounciness/speed, tension/friction, or +stiffness/damping/mass, but not more than one: + +The friction/tension or bounciness/speed options match the spring model in +[Facebook Pop](https://github.com/facebook/pop), [Rebound](http://facebook.github.io/rebound/), +and [Origami](http://origami.design/). + + - `friction`: Controls "bounciness"/overshoot. Default 7. + - `tension`: Controls speed. Default 40. + - `speed`: Controls speed of the animation. Default 12. + - `bounciness`: Controls bounciness. Default 8. + +Specifying stiffness/damping/mass as parameters makes `Animated.spring` use an +analytical spring model based on the motion equations of a [damped harmonic +oscillator](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator). +This behavior is slightly more precise and faithful to the physics behind +spring dynamics, and closely mimics the implementation in iOS's +CASpringAnimation primitive. + + - `stiffness`: The spring stiffness coefficient. Default 100. + - `damping`: Defines how the spring’s motion should be damped due to the forces of friction. + Default 10. + - `mass`: The mass of the object attached to the end of the spring. Default 1. + +Other configuration options are as follows: + + - `velocity`: The initial velocity of the object attached to the spring. Default 0 (object + is at rest). + - `overshootClamping`: Boolean indiciating whether the spring should be clamped and not + bounce. Default false. + - `restDisplacementThreshold`: The threshold of displacement from rest below which the + spring should be considered at rest. Default 0.001. + - `restSpeedThreshold`: The speed at which the spring should be considered at rest in pixels + per second. Default 0.001. + - `delay`: Start the animation after delay (milliseconds). Default 0. + - `isInteraction`: Whether or not this animation creates an "interaction handle" on the + `InteractionManager`. Default true. + - `useNativeDriver`: Uses the native driver when true. Default false. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `divide()` + +```javascript +static divide(a, b) +``` + + +Creates a new Animated value composed by dividing the first Animated value +by the second Animated value. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `modulo()` + +```javascript +static modulo(a, modulus) +``` + + +Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value + + + + +--- + +### `diffClamp()` + +```javascript +static diffClamp(a, min, max) +``` + + +Create a new Animated value that is limited between 2 values. It uses the +difference between the last value so even if the value is far from the bounds +it will start changing when the value starts getting closer again. +(`value = clamp(value + diff, min, max)`). + +This is useful with scroll events, for example, to show the navbar when +scrolling up and to hide it when scrolling down. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `loop()` + +```javascript +static loop(animation) +``` + + +Loops a given animation continuously, so that each time it reaches the +end, it resets and begins again from the start. Can specify number of +times to loop using the key `iterations` in the config. Will loop without +blocking the UI thread if the child animation is set to `useNativeDriver: true`. +In addition, loops can prevent `VirtualizedList`-based components from rendering +more rows while the animation is running. You can pass `isInteraction: false` in the +child animation config to fix this. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + +Takes an array of mappings and extracts values from each arg accordingly, +then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}], + {listener: (event) => console.log(event)}, // Optional async listener + )} + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg +{listener: (event, gestureState) => console.log(event, gestureState)}, // Optional async listener + ]), +``` + +Config is an object that may have the following options: + + - `listener`: Optional async listener. + - `useNativeDriver`: Uses the native driver when true. Default false. + + + + +--- + +### `forkEvent()` + +```javascript +static forkEvent(event, listener) +``` + + +Advanced imperative API for snooping on animated events that are passed in through props. Use +values directly where possible. + + + + +--- + +### `unforkEvent()` + +```javascript +static unforkEvent(event, listener) +``` + + + +## Properties + + + +--- + + + +--- + + + +--- + + + +--- + + + +--- + + + diff --git a/docs/animatedvalue.md b/docs/animatedvalue.md new file mode 100644 index 00000000000..0d75824b5c7 --- /dev/null +++ b/docs/animatedvalue.md @@ -0,0 +1,229 @@ +--- +id: animatedvalue +title: AnimatedValue +--- + +Standard value for driving animations. One `Animated.Value` can drive multiple properties in a synchronized fashion, but can only be driven by one mechanism at a time. Using a new mechanism (e.g. starting a new animation, or calling `setValue`) will stop any previous ones. + +Typically initialized with `new Animated.Value(0);` + +See also [`Animated`](animated.md). + +### Methods + +- [`setValue`](animatedvalue.md#setvalue) +- [`setOffset`](animatedvalue.md#setoffset) +- [`flattenOffset`](animatedvalue.md#flattenoffset) +- [`extractOffset`](animatedvalue.md#extractoffset) +- [`addListener`](animatedvalue.md#addlistener) +- [`removeListener`](animatedvalue.md#removelistener) +- [`removeAllListeners`](animatedvalue.md#removealllisteners) +- [`stopAnimation`](animatedvalue.md#stopanimation) +- [`resetAnimation`](animatedvalue.md#resetanimation) +- [`interpolate`](animatedvalue.md#interpolate) +- [`animate`](animatedvalue.md#animate) +- [`stopTracking`](animatedvalue.md#stoptracking) +- [`track`](animatedvalue.md#track) + +--- + +# Reference + +## Methods + +### `setValue()` + +```javascript +setValue(value) +``` + +Directly set the value. This will stop any animations running on the value and update all the bound properties. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| value | number | Yes | Value | + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + +Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| offset | number | Yes | Offset value | + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + +Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. + +--- + +### `extractOffset()` + +```javascript +extractOffset() +``` + +Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged. + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + +Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. + +Returns a string that serves as an identifier for the listener. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | function | Yes | The callback function which will receive an object with a `value` key set to the new value. | + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + +Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| id | string | Yes | Id for the listener being removed. | + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + +Remove all registered listeners. + +--- + +### `stopAnimation()` + +```javascript +stopAnimation([callback]) +``` + +Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | function | No | A function that will receive the final value. | + +--- + +### `resetAnimation()` + +```javascript +resetAnimation([callback]) +``` + +Stops any animation and resets the value to its original. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | function | No | A function that will receive the original value. | + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + +Interpolates the value before updating the property, e.g. mapping 0-1 to 0-10. + +See `AnimatedInterpolation.js` + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| config | object | Yes | See below. | + +The `config` object is composed of the following keys: + +- `inputRange`: an array of numbers +- `outputRange`: an array of numbers or strings +- `easing` (optional): a function that returns a number, given an input number +- `extrapolate` (optional): a string such as 'extend', 'identity', or 'clamp' +- `extrapolateLeft` (optional): a string such as 'extend', 'identity', or 'clamp' +- `extrapolateRight` (optional): a string such as 'extend', 'identity', or 'clamp' + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + +Typically only used internally, but could be used by a custom Animation class. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| animation | Animation | Yes | See `Animation.js`. | +| callback | function | Yes | Callback function. | + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + +Typically only used internally. + +--- + +### `track()` + +```javascript +track(tracking) +``` + +Typically only used internally. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| tracking | AnimatedNode | Yes | See `AnimatedNode.js` | diff --git a/docs/animatedvaluexy.md b/docs/animatedvaluexy.md new file mode 100644 index 00000000000..52508ebdc22 --- /dev/null +++ b/docs/animatedvaluexy.md @@ -0,0 +1,223 @@ +--- +id: animatedvaluexy +title: AnimatedValueXY +--- + +2D Value for driving 2D animations, such as pan gestures. Almost identical API to normal [`Animated.Value`](animatedvalue.md), but multiplexed. Contains two regular `Animated.Value`s under the hood. + +See also [`Animated`](animated.md). + +## Example + +```javascript +class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } +} +``` + + +### Methods + +- [`setValue`](animatedvaluexy.md#setvalue) +- [`setOffset`](animatedvaluexy.md#setoffset) +- [`flattenOffset`](animatedvaluexy.md#flattenoffset) +- [`extractOffset`](animatedvaluexy.md#extractoffset) +- [`addListener`](animatedvaluexy.md#addlistener) +- [`removeListener`](animatedvaluexy.md#removelistener) +- [`removeAllListeners`](animatedvaluexy.md#removealllisteners) +- [`stopAnimation`](animatedvaluexy.md#stopanimation) +- [`resetAnimation`](animatedvaluexy.md#resetanimation) +- [`getLayout`](animatedvaluexy.md#getlayout) +- [`getTranslateTransform`](animatedvaluexy.md#gettranslatetransform) + +--- + +# Reference + +## Methods + +### `setValue()` + +```javascript +setValue(value) +``` + +Directly set the value. This will stop any animations running on the value and update all the bound properties. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| value | number | Yes | | + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + +Sets an offset that is applied on top of whatever value is set, whether via `setValue`, an animation, or `Animated.event`. Useful for compensating things like the start of a pan gesture. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| offset | number | Yes | | + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + +Merges the offset value into the base value and resets the offset to zero. The final output of the value is unchanged. + +--- + +### `extractOffset()` + +```javascript +extractOffset() +``` + +Sets the offset value to the base value, and resets the base value to zero. The final output of the value is unchanged. + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + +Adds an asynchronous listener to the value so you can observe updates from animations. This is useful because there is no way to synchronously read the value because it might be driven natively. + +Returns a string that serves as an identifier for the listener. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | function | Yes | The callback function which will receive an object with a `value` key set to the new value. | + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + +Unregister a listener. The `id` param shall match the identifier previously returned by `addListener()`. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| id | string | Yes | Id for the listener being removed. | + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + +Remove all registered listeners. + +--- + +### `stopAnimation()` + +```javascript +stopAnimation([callback]) +``` + +Stops any running animation or tracking. `callback` is invoked with the final value after stopping the animation, which is useful for updating state to match the animation position with layout. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | function | No | A function that will receive the final value. | + +--- + +### `resetAnimation()` + +```javascript +resetAnimation([callback]) +``` + +Stops any animation and resets the value to its original. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | function | No | A function that will receive the original value. | + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript +style={this.state.anim.getLayout()} +``` + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript +style={{ + transform: this.state.anim.getTranslateTransform() +}} +``` diff --git a/docs/animations.md b/docs/animations.md new file mode 100644 index 00000000000..6300827ab4c --- /dev/null +++ b/docs/animations.md @@ -0,0 +1,507 @@ +--- +id: animations +title: Animations +--- + +Animations are very important to create a great user experience. +Stationary objects must overcome inertia as they start moving. +Objects in motion have momentum and rarely come to a stop immediately. +Animations allow you to convey physically believable motion in your interface. + +React Native provides two complementary animation systems: +[`Animated`](animations.md#animated-api) for granular and interactive control of specific values, and +[`LayoutAnimation`](animations.md#layoutanimation) for animated global layout transactions. + +## `Animated` API + +The [`Animated`](animated.md) API is designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way. +`Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution. + +`Animated` exports four animatable component types: `View`, `Text`, `Image`, and `ScrollView`, but you can also create your own using `Animated.createAnimatedComponent()`. + +For example, a container view that fades in when it is mounted may look like this: + +```SnackPlayer +import React from 'react'; +import { Animated, Text, View } from 'react-native'; + +class FadeInView extends React.Component { + state = { + fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 + } + + componentDidMount() { + Animated.timing( // Animate over time + this.state.fadeAnim, // The animated value to drive + { + toValue: 1, // Animate to opacity: 1 (opaque) + duration: 10000, // Make it take a while + } + ).start(); // Starts the animation + } + + render() { + let { fadeAnim } = this.state; + + return ( + + {this.props.children} + + ); + } +} + +// You can then use your `FadeInView` in place of a `View` in your components: +export default class App extends React.Component { + render() { + return ( + + + Fading in + + + ) + } +} +``` + +Let's break down what's happening here. +In the `FadeInView` constructor, a new `Animated.Value` called `fadeAnim` is initialized as part of `state`. +The opacity property on the `View` is mapped to this animated value. +Behind the scenes, the numeric value is extracted and used to set opacity. + +When the component mounts, the opacity is set to 0. +Then, an easing animation is started on the `fadeAnim` animated value, +which will update all of its dependent mappings (in this case, just the opacity) on each frame as the value animates to the final value of 1. + +This is done in an optimized way that is faster than calling `setState` and re-rendering. +Because the entire configuration is declarative, we will be able to implement further optimizations that serialize the configuration and runs the animation on a high-priority thread. + +### Configuring animations + +Animations are heavily configurable. Custom and predefined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation. + +`Animated` provides several animation types, the most commonly used one being [`Animated.timing()`](animated.md#timing). +It supports animating a value over time using one of various predefined easing functions, or you can use your own. +Easing functions are typically used in animation to convey gradual acceleration and deceleration of objects. + +By default, `timing` will use a easeInOut curve that conveys gradual acceleration to full speed and concludes by gradually decelerating to a stop. +You can specify a different easing function by passing a `easing` parameter. +Custom `duration` or even a `delay` before the animation starts is also supported. + +For example, if we want to create a 2-second long animation of an object that slightly backs up before moving to its final position: + +```javascript +Animated.timing( + this.state.xPosition, + { + toValue: 100, + easing: Easing.back(), + duration: 2000, + } +).start(); +``` + +Take a look at the [Configuring animations](animated.md#configuring-animations) section of the `Animated` API reference to learn more about all the config parameters supported by the built-in animations. + +### Composing animations + +Animations can be combined and played in sequence or in parallel. +Sequential animations can play immediately after the previous animation has finished, +or they can start after a specified delay. +The `Animated` API provides several methods, such as `sequence()` and `delay()`, +each of which simply take an array of animations to execute and automatically calls `start()`/`stop()` as needed. + +For example, the following animation coasts to a stop, then it springs back while twirling in parallel: + +```javascript +Animated.sequence([ // decay, then spring to start and twirl + Animated.decay(position, { // coast to a stop + velocity: {x: gestureState.vx, y: gestureState.vy}, // velocity from gesture release + deceleration: 0.997, + }), + Animated.parallel([ // after decay, in parallel: + Animated.spring(position, { + toValue: {x: 0, y: 0} // return to start + }), + Animated.timing(twirl, { // and twirl + toValue: 360, + }), + ]), +]).start(); // start the sequence group +``` + +If one animation is stopped or interrupted, then all other animations in the group are also stopped. +`Animated.parallel` has a `stopTogether` option that can be set to `false` to disable this. + +You can find a full list of composition methods in the [Composing animations](animated.md#composing-animations) section of the `Animated` API reference. + +### Combining animated values + +You can [combine two animated values](animated.md#combining-animated-values) via addition, multiplication, division, or modulo to make a new animated value. + +There are some cases where an animated value needs to invert another animated value for calculation. +An example is inverting a scale (2x --> 0.5x): + +```javascript +const a = new Animated.Value(1); +const b = Animated.divide(1, a); + +Animated.spring(a, { + toValue: 2, +}).start(); +``` + +### Interpolation + +Each property can be run through an interpolation first. +An interpolation maps input ranges to output ranges, +typically using a linear interpolation but also supports easing functions. +By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value. + +A simple mapping to convert a 0-1 range to a 0-100 range would be: + +```javascript +value.interpolate({ + inputRange: [0, 1], + outputRange: [0, 100], +}); +``` + +For example, you may want to think about your `Animated.Value` as going from 0 to 1, +but animate the position from 150px to 0px and the opacity from 0 to 1. +This can easily be done by modifying `style` from the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }} +``` + +[`interpolate()`](animated.md#interpolate) supports multiple range segments as well, which is handy for defining dead zones and other handy tricks. +For example, to get an negation relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then back down to zero at 100 followed by a dead-zone that remains at 0 for everything beyond that, you could do: + +```javascript +value.interpolate({ + inputRange: [-300, -100, 0, 100, 101], + outputRange: [300, 0, 1, 0, 0], +}); +``` + +Which would map like so: + +``` +Input | Output +------|------- + -400| 450 + -300| 300 + -200| 150 + -100| 0 + -50| 0.5 + 0| 1 + 50| 0.5 + 100| 0 + 101| 0 + 200| 0 +``` + +`interpolate()` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do: + +```javascript +value.interpolate({ + inputRange: [0, 360], + outputRange: ['0deg', '360deg'] +}) +``` + +`interpolate()` also supports arbitrary easing functions, many of which are already implemented in the +[`Easing`](easing.md) module. +`interpolate()` also has configurable behavior for extrapolating the `outputRange`. +You can set the extrapolation by setting the `extrapolate`, `extrapolateLeft`, or `extrapolateRight` options. +The default value is `extend` but you can use `clamp` to prevent the output value from exceeding `outputRange`. + +### Tracking dynamic values + +Animated values can also track other values. +Just set the `toValue` of an animation to another animated value instead of a plain number. +For example, a "Chat Heads" animation like the one used by Messenger on Android could be implemented with a `spring()` pinned on another animated value, or with `timing()` and a `duration` of 0 for rigid tracking. +They can also be composed with interpolations: + +```javascript +Animated.spring(follower, {toValue: leader}).start(); +Animated.timing(opacity, { + toValue: pan.x.interpolate({ + inputRange: [0, 300], + outputRange: [1, 0], + }), +}).start(); +``` + +The `leader` and `follower` animated values would be implemented using `Animated.ValueXY()`. +`ValueXY` is a handy way to deal with 2D interactions, such as panning or dragging. +It is a simple wrapper that basically contains two `Animated.Value` instances and some helper functions that call through to them, +making `ValueXY` a drop-in replacement for `Value` in many cases. +It allows us to track both x and y values in the example above. + +### Tracking gestures + +Gestures, like panning or scrolling, and other events can map directly to animated values using [`Animated.event`](animated.md#event). +This is done with a structured map syntax so that values can be extracted from complex event objects. +The first level is an array to allow mapping across multiple args, and that array contains nested objects. + +For example, when working with horizontal scrolling gestures, +you would do the following in order to map `event.nativeEvent.contentOffset.x` to `scrollX` (an `Animated.Value`): + +```javascript + onScroll={Animated.event( + // scrollX = e.nativeEvent.contentOffset.x + [{ nativeEvent: { + contentOffset: { + x: scrollX + } + } + }] + )} +``` + +When using `PanResponder`, you could use the following code to extract the x and y positions from `gestureState.dx` and `gestureState.dy`. +We use a `null` in the first position of the array, as we are only interested in the second argument passed to the `PanResponder` handler, +which is the `gestureState`. + +```javascript +onPanResponderMove={Animated.event( + [null, // ignore the native event + // extract dx and dy from gestureState + // like 'pan.x = gestureState.dx, pan.y = gestureState.dy' + {dx: pan.x, dy: pan.y} +])} +``` + +### Responding to the current animation value + +You may notice that there is no obvious way to read the current value while animating. +This is because the value may only be known in the native runtime due to optimizations. +If you need to run JavaScript in response to the current value, there are two approaches: + +- `spring.stopAnimation(callback)` will stop the animation and invoke `callback` with the final value. This is useful when making gesture transitions. +- `spring.addListener(callback)` will invoke `callback` asynchronously while the animation is running, providing a recent value. + This is useful for triggering state changes, + for example snapping a bobble to a new option as the user drags it closer, + because these larger state changes are less sensitive to a few frames of lag compared to continuous gestures like panning which need to run at 60 fps. + +`Animated` is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. +This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. +Check out `Animated.Value.addListener` as a way to work around some of these limitations, +but use it sparingly since it might have performance implications in the future. + +### Using the native driver + +The `Animated` API is designed to be serializable. +By using the [native driver](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html), +we send everything about the animation to native before starting the animation, +allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. +Once the animation has started, the JS thread can be blocked without affecting the animation. + +Using the native driver for normal animations is quite simple. +Just add `useNativeDriver: true` to the animation config when starting it. + +```javascript +Animated.timing(this.state.animatedValue, { + toValue: 1, + duration: 500, + useNativeDriver: true, // <-- Add this +}).start(); +``` + +Animated values are only compatible with one driver so if you use native driver when starting an animation on a value, +make sure every animation on that value also uses the native driver. + +The native driver also works with `Animated.event`. +This is specially useful for animations that follow the scroll position as without the native driver, +the animation will always run a frame behind the gesture due to the async nature of React Native. + +```javascript + + {content} + +``` + +You can see the native driver in action by running the [RNTester app](https://github.com/facebook/react-native/blob/master/RNTester/), +then loading the Native Animated Example. +You can also take a look at the [source code](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) to learn how these examples were produced. + +#### Caveats + +Not everything you can do with `Animated` is currently supported by the native driver. +The main limitation is that you can only animate non-layout properties: +things like `transform` and `opacity` will work, but flexbox and position properties will not. +When using `Animated.event`, it will only work with direct events and not bubbling events. +This means it does not work with `PanResponder` but does work with things like `ScrollView#onScroll`. + +When an animation is running, it can prevent `VirtualizedList` components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use `isInteraction: false` in your animation's config to prevent this issue. + +### Bear in mind + +While using transform styles such as `rotateY`, `rotateX`, and others ensure the transform style `perspective` is in place. +At this time some animations may not render on Android without it. Example below. + +```javascript + +``` + +### Additional examples + +The RNTester app has various examples of `Animated` in use: + +- [AnimatedGratuitousApp](https://github.com/facebook/react-native/tree/master/RNTester/js/AnimatedGratuitousApp) +- [NativeAnimationsExample](https://github.com/facebook/react-native/blob/master/RNTester/js/NativeAnimationsExample.js) + +## `LayoutAnimation` API + +`LayoutAnimation` allows you to globally configure `create` and `update` +animations that will be used for all views in the next render/layout cycle. +This is useful for doing flexbox layout updates without bothering to measure or +calculate specific properties in order to animate them directly, and is +especially useful when layout changes may affect ancestors, for example a "see +more" expansion that also increases the size of the parent and pushes down the +row below which would otherwise require explicit coordination between the +components in order to animate them all in sync. + +Note that although `LayoutAnimation` is very powerful and can be quite useful, +it provides much less control than `Animated` and other animation libraries, so +you may need to use another approach if you can't get `LayoutAnimation` to do +what you want. + +Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`: + +```javascript +UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true); +``` + +```SnackPlayer +import React from 'react'; +import { + NativeModules, + LayoutAnimation, + Text, + TouchableOpacity, + StyleSheet, + View, +} from 'react-native'; + +const { UIManager } = NativeModules; + +UIManager.setLayoutAnimationEnabledExperimental && + UIManager.setLayoutAnimationEnabledExperimental(true); + +export default class App extends React.Component { + state = { + w: 100, + h: 100, + }; + + _onPress = () => { + // Animate the update + LayoutAnimation.spring(); + this.setState({w: this.state.w + 15, h: this.state.h + 15}) + } + + render() { + return ( + + + + + Press me! + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + box: { + width: 200, + height: 200, + backgroundColor: 'red', + }, + button: { + backgroundColor: 'black', + paddingHorizontal: 20, + paddingVertical: 15, + marginTop: 15, + }, + buttonText: { + color: '#fff', + fontWeight: 'bold', + }, +}); +``` + +This example uses a preset value, you can customize the animations as +you need, see [LayoutAnimation.js](https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js) +for more information. + +## Additional notes + +### `requestAnimationFrame` + +`requestAnimationFrame` is a polyfill from the browser that you might be +familiar with. It accepts a function as its only argument and calls that +function before the next repaint. It is an essential building block for +animations that underlies all of the JavaScript-based animation APIs. In +general, you shouldn't need to call this yourself - the animation APIs will +manage frame updates for you. + +### `setNativeProps` + +As mentioned [in the Direct Manipulation section](direct-manipulation.md), +`setNativeProps` allows us to modify properties of native-backed +components (components that are actually backed by native views, unlike +composite components) directly, without having to `setState` and +re-render the component hierarchy. + +We could use this in the Rebound example to update the scale - this +might be helpful if the component that we are updating is deeply nested +and hasn't been optimized with `shouldComponentUpdate`. + +If you find your animations with dropping frames (performing below 60 frames +per second), look into using `setNativeProps` or `shouldComponentUpdate` to +optimize them. Or you could run the animations on the UI thread rather than +the JavaScript thread [with the useNativeDriver +option](http://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html). +You may also want to defer any computationally intensive work until after +animations are complete, using the +[InteractionManager](interactionmanager.md). You can monitor the +frame rate by using the In-App Developer Menu "FPS Monitor" tool. diff --git a/docs/app-extensions.md b/docs/app-extensions.md new file mode 100644 index 00000000000..57d5a4ed0c0 --- /dev/null +++ b/docs/app-extensions.md @@ -0,0 +1,26 @@ +--- +id: app-extensions +title: App Extensions +--- + +App extensions let you provide custom functionality and content outside of your main app. There are different types of app extensions on iOS, and they are all covered in the [App Extension Programming Guide](https://developer.apple.com/library/content/documentation/General/Conceptual/ExtensibilityPG/index.html#//apple_ref/doc/uid/TP40014214-CH20-SW1). In this guide, we'll briefly cover how you may take advantage of app extensions on iOS. + +## Memory use in extensions + +As these extensions are loaded outside of the regular app sandbox, it's highly likely that several of these app extensions will be loaded simultaneously. As you might expect, these extensions have small memory usage limits. Keep these in mind when developing your app extensions. It's always highly recommended to test your application on an actual device, and more so when developing app extensions: too frequently, developers find that their extension works just fine in the iOS Simulator, only to get user reports that their extension is not loading on actual devices. + +We highly recommend that you watch Conrad Kramer's talk on [Memory Use in Extensions](https://cocoaheads.tv/memory-use-in-extensions-by-conrad-kramer/) to learn more about this topic. + +### Today widget + +The memory limit of a Today widget is 16 MB. As it happens, Today widget implementations using React Native may work unreliably because the memory usage tends to be too high. You can tell if your Today widget is exceeding the memory limit if it yields the message 'Unable to Load': + +![](/react-native/assets/TodayWidgetUnableToLoad.png) + +Always make sure to test your app extensions in a real device, but be aware that this may not be sufficient, especially when dealing with Today widgets. Debug-configured builds are more likely to exceed the memory limits, while release-configured builds don't fail right away. We highly recommend that you use [Xcode's Instruments](https://developer.apple.com/library/content/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/index.html) to analyze your real world memory usage, as it's very likely that your release-configured build is very close to the 16 MB limit. In situations like these, it is easy to go over the 16 MB limit by performing common operations, such as fetching data from an API. + +To experiment with the limits of React Native Today widget implementations, try extending the example project in [react-native-today-widget](https://github.com/matejkriz/react-native-today-widget/). + +### Other app extensions + +Other types of app extensions have greater memory limits than the Today widget. For instance, Custom Keyboard extensions are limited to 48 MB, and Share extensions are limited to 120 MB. Implementing such app extensions with React Native is more viable. One proof of concept example is [react-native-ios-share-extension](https://github.com/andrewsardone/react-native-ios-share-extension). diff --git a/docs/appregistry.md b/docs/appregistry.md new file mode 100644 index 00000000000..7150121b45e --- /dev/null +++ b/docs/appregistry.md @@ -0,0 +1,222 @@ +--- +id: appregistry +title: AppRegistry +--- + + + +`AppRegistry` is the JS entry point to running all React Native apps. App +root components should register themselves with +`AppRegistry.registerComponent`, then the native system can load the bundle +for the app and then actually run the app when it's ready by invoking +`AppRegistry.runApplication`. + +To "stop" an application when a view should be destroyed, call +`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was +passed into `runApplication`. These should always be used as a pair. + +`AppRegistry` should be `require`d early in the `require` sequence to make +sure the JS execution environment is setup before other modules are +`require`d. + + +### Methods + +- [`setWrapperComponentProvider`](appregistry.md#setwrappercomponentprovider) +- [`registerConfig`](appregistry.md#registerconfig) +- [`registerComponent`](appregistry.md#registercomponent) +- [`registerRunnable`](appregistry.md#registerrunnable) +- [`registerSection`](appregistry.md#registersection) +- [`getAppKeys`](appregistry.md#getappkeys) +- [`getSectionKeys`](appregistry.md#getsectionkeys) +- [`getSections`](appregistry.md#getsections) +- [`getRunnable`](appregistry.md#getrunnable) +- [`getRegistry`](appregistry.md#getregistry) +- [`setComponentProviderInstrumentationHook`](appregistry.md#setcomponentproviderinstrumentationhook) +- [`runApplication`](appregistry.md#runapplication) +- [`unmountApplicationComponentAtRootTag`](appregistry.md#unmountapplicationcomponentatroottag) +- [`registerHeadlessTask`](appregistry.md#registerheadlesstask) +- [`startHeadlessTask`](appregistry.md#startheadlesstask) + + + + +--- + +# Reference + +## Methods + +### `setWrapperComponentProvider()` + +```javascript +static setWrapperComponentProvider(provider) +``` + + + +--- + +### `registerConfig()` + +```javascript +static registerConfig(config) +``` + + + +--- + +### `registerComponent()` + +```javascript +static registerComponent(appKey, componentProvider, section?) +``` + + + +--- + +### `registerRunnable()` + +```javascript +static registerRunnable(appKey, run) +``` + + + +--- + +### `registerSection()` + +```javascript +static registerSection(appKey, component) +``` + + + +--- + +### `getAppKeys()` + +```javascript +static getAppKeys() +``` + + + +--- + +### `getSectionKeys()` + +```javascript +static getSectionKeys() +``` + + + +--- + +### `getSections()` + +```javascript +static getSections() +``` + + + +--- + +### `getRunnable()` + +```javascript +static getRunnable(appKey) +``` + + + +--- + +### `getRegistry()` + +```javascript +static getRegistry() +``` + + + +--- + +### `setComponentProviderInstrumentationHook()` + +```javascript +static setComponentProviderInstrumentationHook(hook) +``` + + + +--- + +### `runApplication()` + +```javascript +static runApplication(appKey, appParameters) +``` + + + +--- + +### `unmountApplicationComponentAtRootTag()` + +```javascript +static unmountApplicationComponentAtRootTag(rootTag) +``` + + + +--- + +### `registerHeadlessTask()` + +```javascript +static registerHeadlessTask(taskKey, task) +``` + + +Register a headless task. A headless task is a bit of code that runs without a UI. +@param taskKey the key associated with this task +@param task a promise returning function that takes some data passed from the native side as + the only argument; when the promise is resolved or rejected the native side is + notified of this event and it may decide to destroy the JS context. + + + + +--- + +### `startHeadlessTask()` + +```javascript +static startHeadlessTask(taskId, taskKey, data) +``` + + +Only called from native code. Starts a headless task. + +@param taskId the native id for this task instance to keep track of its execution +@param taskKey the key for the task to start +@param data the data to pass to the task + + + + diff --git a/docs/appstate.md b/docs/appstate.md new file mode 100644 index 00000000000..93853c6fad3 --- /dev/null +++ b/docs/appstate.md @@ -0,0 +1,126 @@ +--- +id: appstate +title: AppState +--- + +`AppState` can tell you if the app is in the foreground or background, +and notify you when the state changes. + +AppState is frequently used to determine the intent and proper behavior when +handling push notifications. + +### App States + + - `active` - The app is running in the foreground + - `background` - The app is running in the background. The user is either + in another app or on the home screen + - `inactive` - This is a state that occurs when transitioning between + foreground & background, and during periods of inactivity such as + entering the Multitasking view or in the event of an incoming call + +For more information, see +[Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html) + +### Basic Usage + +To see the current state, you can check `AppState.currentState`, which +will be kept up-to-date. However, `currentState` will be null at launch +while `AppState` retrieves it over the bridge. + +``` +import React, {Component} from 'react' +import {AppState, Text} from 'react-native' + +class AppStateExample extends Component { + + state = { + appState: AppState.currentState + } + + componentDidMount() { + AppState.addEventListener('change', this._handleAppStateChange); + } + + componentWillUnmount() { + AppState.removeEventListener('change', this._handleAppStateChange); + } + + _handleAppStateChange = (nextAppState) => { + if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') { + console.log('App has come to the foreground!') + } + this.setState({appState: nextAppState}); + } + + render() { + return ( + Current state is: {this.state.appState} + ); + } + +} +``` + +This example will only ever appear to say "Current state is: active" because +the app is only visible to the user when in the `active` state, and the null +state will happen only momentarily. + + +### Methods + +- [`=`](appstate.md#) +- [`addEventListener`](appstate.md#addeventlistener) +- [`removeEventListener`](appstate.md#removeeventlistener) + + + + +--- + +# Reference + +## Methods + +### `=()` + +```javascript +=(;, () +``` + + + +--- + +### `addEventListener()` + +```javascript +addEventListener(type, handler) +``` + + +Add a handler to AppState changes by listening to the `change` event type +and providing the handler + +TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate +`addEventListener` and `removeEventListener` and just use `addListener` and +`listener.remove()` directly. That will be a breaking change though, as both +the method and event names are different (addListener events are currently +required to be globally unique). + + + + +--- + +### `removeEventListener()` + +```javascript +removeEventListener(type, handler) +``` + + +Remove a handler by passing the `change` event type and the handler + + + + diff --git a/docs/assets/AddToLibraries.png b/docs/assets/AddToLibraries.png new file mode 100644 index 00000000000..652cdfd1cfd Binary files /dev/null and b/docs/assets/AddToLibraries.png differ diff --git a/docs/assets/Button.png b/docs/assets/Button.png new file mode 100644 index 00000000000..3158460edb2 Binary files /dev/null and b/docs/assets/Button.png differ diff --git a/docs/assets/DeveloperMenu.png b/docs/assets/DeveloperMenu.png new file mode 100644 index 00000000000..bb295444ee1 Binary files /dev/null and b/docs/assets/DeveloperMenu.png differ diff --git a/docs/assets/GettingStartedAVDManagerMacOS.png b/docs/assets/GettingStartedAVDManagerMacOS.png new file mode 100644 index 00000000000..298d9f4db25 Binary files /dev/null and b/docs/assets/GettingStartedAVDManagerMacOS.png differ diff --git a/docs/assets/GettingStartedAVDManagerWindows.png b/docs/assets/GettingStartedAVDManagerWindows.png new file mode 100644 index 00000000000..15706357464 Binary files /dev/null and b/docs/assets/GettingStartedAVDManagerWindows.png differ diff --git a/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png b/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png new file mode 100644 index 00000000000..1e6d35caa6a Binary files /dev/null and b/docs/assets/GettingStartedAndroidEnvironmentVariableANDROID_HOME.png differ diff --git a/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png b/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png new file mode 100644 index 00000000000..c93b57a6051 Binary files /dev/null and b/docs/assets/GettingStartedAndroidSDKManagerInstallsMacOS.png differ diff --git a/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png b/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png new file mode 100644 index 00000000000..e0e4deb7f99 Binary files /dev/null and b/docs/assets/GettingStartedAndroidSDKManagerInstallsWindows.png differ diff --git a/docs/assets/GettingStartedAndroidSDKManagerMacOS.png b/docs/assets/GettingStartedAndroidSDKManagerMacOS.png new file mode 100644 index 00000000000..8d0a8f3bb9f Binary files /dev/null and b/docs/assets/GettingStartedAndroidSDKManagerMacOS.png differ diff --git a/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png b/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png new file mode 100644 index 00000000000..44f002b5483 Binary files /dev/null and b/docs/assets/GettingStartedAndroidSDKManagerSDKToolsMacOS.png differ diff --git a/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png b/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png new file mode 100644 index 00000000000..5ea04a60483 Binary files /dev/null and b/docs/assets/GettingStartedAndroidSDKManagerSDKToolsWindows.png differ diff --git a/docs/assets/GettingStartedAndroidSDKManagerWindows.png b/docs/assets/GettingStartedAndroidSDKManagerWindows.png new file mode 100644 index 00000000000..fe78e2a2f45 Binary files /dev/null and b/docs/assets/GettingStartedAndroidSDKManagerWindows.png differ diff --git a/docs/assets/GettingStartedAndroidStudioAVD.png b/docs/assets/GettingStartedAndroidStudioAVD.png new file mode 100644 index 00000000000..20d7626ecbf Binary files /dev/null and b/docs/assets/GettingStartedAndroidStudioAVD.png differ diff --git a/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png b/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png new file mode 100644 index 00000000000..3ba178525ab Binary files /dev/null and b/docs/assets/GettingStartedAndroidStudioWelcomeMacOS.png differ diff --git a/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png b/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png new file mode 100644 index 00000000000..e65229bd927 Binary files /dev/null and b/docs/assets/GettingStartedAndroidStudioWelcomeWindows.png differ diff --git a/docs/assets/GettingStartedAndroidSuccessMacOS.png b/docs/assets/GettingStartedAndroidSuccessMacOS.png new file mode 100644 index 00000000000..0fbb4e9f832 Binary files /dev/null and b/docs/assets/GettingStartedAndroidSuccessMacOS.png differ diff --git a/docs/assets/GettingStartedAndroidSuccessWindows.png b/docs/assets/GettingStartedAndroidSuccessWindows.png new file mode 100644 index 00000000000..4c653bae64f Binary files /dev/null and b/docs/assets/GettingStartedAndroidSuccessWindows.png differ diff --git a/docs/assets/GettingStartedCongratulations.png b/docs/assets/GettingStartedCongratulations.png new file mode 100644 index 00000000000..92f520ec123 Binary files /dev/null and b/docs/assets/GettingStartedCongratulations.png differ diff --git a/docs/assets/GettingStartedCreateAVDMacOS.png b/docs/assets/GettingStartedCreateAVDMacOS.png new file mode 100644 index 00000000000..ee922502962 Binary files /dev/null and b/docs/assets/GettingStartedCreateAVDMacOS.png differ diff --git a/docs/assets/GettingStartedCreateAVDWindows.png b/docs/assets/GettingStartedCreateAVDWindows.png new file mode 100644 index 00000000000..545663f7f17 Binary files /dev/null and b/docs/assets/GettingStartedCreateAVDWindows.png differ diff --git a/docs/assets/GettingStartedCreateAVDx86MacOS.png b/docs/assets/GettingStartedCreateAVDx86MacOS.png new file mode 100644 index 00000000000..c1ca88aac03 Binary files /dev/null and b/docs/assets/GettingStartedCreateAVDx86MacOS.png differ diff --git a/docs/assets/GettingStartedCreateAVDx86Windows.png b/docs/assets/GettingStartedCreateAVDx86Windows.png new file mode 100644 index 00000000000..681daade763 Binary files /dev/null and b/docs/assets/GettingStartedCreateAVDx86Windows.png differ diff --git a/docs/assets/GettingStartedXcodeCommandLineTools.png b/docs/assets/GettingStartedXcodeCommandLineTools.png new file mode 100644 index 00000000000..e19d3a9f794 Binary files /dev/null and b/docs/assets/GettingStartedXcodeCommandLineTools.png differ diff --git a/docs/assets/GettingStartediOSSuccess.png b/docs/assets/GettingStartediOSSuccess.png new file mode 100644 index 00000000000..457824f4ee5 Binary files /dev/null and b/docs/assets/GettingStartediOSSuccess.png differ diff --git a/docs/assets/Inspector.gif b/docs/assets/Inspector.gif new file mode 100644 index 00000000000..b7589733c82 Binary files /dev/null and b/docs/assets/Inspector.gif differ diff --git a/docs/assets/NavigationStack-NavigatorIOS.gif b/docs/assets/NavigationStack-NavigatorIOS.gif new file mode 100644 index 00000000000..c1d56a1f555 Binary files /dev/null and b/docs/assets/NavigationStack-NavigatorIOS.gif differ diff --git a/docs/assets/PerfUtil.png b/docs/assets/PerfUtil.png new file mode 100644 index 00000000000..187f114f783 Binary files /dev/null and b/docs/assets/PerfUtil.png differ diff --git a/docs/assets/RunningOnDeviceCodeSigning.png b/docs/assets/RunningOnDeviceCodeSigning.png new file mode 100644 index 00000000000..8bf01d61e7f Binary files /dev/null and b/docs/assets/RunningOnDeviceCodeSigning.png differ diff --git a/docs/assets/TodayWidgetUnableToLoad.jpg b/docs/assets/TodayWidgetUnableToLoad.jpg new file mode 100644 index 00000000000..70461c15cd6 Binary files /dev/null and b/docs/assets/TodayWidgetUnableToLoad.jpg differ diff --git a/docs/assets/buttonExample.png b/docs/assets/buttonExample.png new file mode 100644 index 00000000000..40ce923b45b Binary files /dev/null and b/docs/assets/buttonExample.png differ diff --git a/docs/assets/favicon.png b/docs/assets/favicon.png new file mode 100644 index 00000000000..22c120d09b2 Binary files /dev/null and b/docs/assets/favicon.png differ diff --git a/docs/assets/react-native-existing-app-integration-ios-before.png b/docs/assets/react-native-existing-app-integration-ios-before.png new file mode 100644 index 00000000000..445dd790444 Binary files /dev/null and b/docs/assets/react-native-existing-app-integration-ios-before.png differ diff --git a/docs/asyncstorage.md b/docs/asyncstorage.md new file mode 100644 index 00000000000..3107a238468 --- /dev/null +++ b/docs/asyncstorage.md @@ -0,0 +1,415 @@ +--- +id: asyncstorage +title: AsyncStorage +--- +`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of `AsyncStorage` +instead of `AsyncStorage` directly for anything more than light usage since +it operates globally. + +On iOS, `AsyncStorage` is backed by native code that stores small values in a +serialized dictionary and larger values in separate files. On Android, +`AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite +based on what is available. + +The `AsyncStorage` JavaScript code is a simple facade that provides a clear +JavaScript API, real `Error` objects, and simple non-multi functions. Each +method in the API returns a `Promise` object. + +Persisting data: +``` +try { + await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.'); +} catch (error) { + // Error saving data +} +``` + +Fetching data: +``` +try { + const value = await AsyncStorage.getItem('@MySuperStore:key'); + if (value !== null){ + // We have data!! + console.log(value); + } +} catch (error) { + // Error retrieving data +} +``` + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void) +``` + +Fetches an item for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to fetch. | +| callback | ?(error: ?Error, result: ?string) => void | No | Function that will be called with a result if found or any error. | + + + + +--- + +### `setItem()` + +```javascript +static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) +``` + +Sets the value for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to set. | +| value | string | Yes | Value to set for the `key`. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key: string, [callback]: ?(error: ?Error) => void) +``` + +Removes an item for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to remove. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) +``` + +Merges an existing `key` value with an input value, assuming both values +are stringified JSON. Returns a `Promise` object. + +**NOTE:** This is not supported by all native implementations. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to modify. | +| value | string | Yes | New value to merge for the `key`. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +Example: + +```javascript + +let UID123_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; +// You only need to define what will be added or updated +let UID123_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10} +}; + +AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => { + AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { + AsyncStorage.getItem('UID123', (err, result) => { + console.log(result); + }); + }); +}); + +// Console log result: +// => {'name':'Chris','age':31,'traits': +// {'shoe_size':10,'hair':'brown','eyes':'blue'}} +``` + + + +--- + +### `clear()` + +```javascript +static clear([callback]: ?(error: ?Error) => void) +``` + +Erases *all* `AsyncStorage` for all clients, libraries, etc. You probably +don't want to call this; use `removeItem` or `multiRemove` to clear only +your app's keys. Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void) +``` + +Gets *all* keys known to your app; for all callers, libraries, etc. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | ?(error: ?Error, keys: ?Array) => void | No | Function that will be called the keys found and any error. | + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests(): [object Object] +``` + +Flushes any pending requests using a single batch call to get the data. + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) +``` + +This allows you to batch the fetching of items given an array of `key` +inputs. Your callback will be invoked with an array of corresponding +key-value pairs found: + +``` +multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) +``` + +The method returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keys | Array | Yes | Array of key for the items to get. | +| callback | ?(errors: ?Array, result: ?Array>) => void | No | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. | + + + + +Example: + +```javascript +AsyncStorage.getAllKeys((err, keys) => { + AsyncStorage.multiGet(keys, (err, stores) => { + stores.map((result, i, store) => { + // get at each store's key/value so you can work with it + let key = store[i][0]; + let value = store[i][1]; + }); + }); +}); +``` + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +``` + +Use this as a batch operation for storing multiple key-value pairs. When +the operation completes you'll get a single callback with any errors: + +``` +multiSet([['k1', 'val1'], ['k2', 'val2']], cb); +``` + +The method returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keyValuePairs | Array> | Yes | Array of key-value array for the items to set. | +| callback | ?(errors: ?Array) => void | No | Function that will be called with an array of any key-specific errors found. | + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void) +``` + +Call this to batch the deletion of all keys in the `keys` array. Returns +a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keys | Array | Yes | Array of key for the items to delete. | +| callback | ?(errors: ?Array) => void | No | Function that will be called an array of any key-specific errors found. | + + + + +Example: + +```javascript + +let keys = ['k1', 'k2']; +AsyncStorage.multiRemove(keys, (err) => { + // keys k1 & k2 removed, if they existed + // do most stuff after removal (if you want) +}); +``` + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +``` + +Batch operation to merge in existing and new values for a given set of +keys. This assumes that the values are stringified JSON. Returns a +`Promise` object. + +**NOTE**: This is not supported by all native implementations. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keyValuePairs | Array> | Yes | Array of key-value array for the items to merge. | +| callback | ?(errors: ?Array) => void | No | Function that will be called with an array of any key-specific errors found. | + + + + +Example: + +```javascript + +// first user, initial values +let UID234_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// first user, delta values +let UID234_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10}, +}; + +// second user, initial values +let UID345_object = { + name: 'Marge', + age: 25, + traits: {hair: 'blonde', eyes: 'blue'}, +}; + +// second user, delta values +let UID345_delta = { + age: 26, + traits: {eyes: 'green', shoe_size: 6}, +}; + +let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]] +let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]] + +AsyncStorage.multiSet(multi_set_pairs, (err) => { + AsyncStorage.multiMerge(multi_merge_pairs, (err) => { + AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => { + stores.map( (result, i, store) => { + let key = store[i][0]; + let val = store[i][1]; + console.log(key, val); + }); + }); + }); +}); + +// Console log results: +// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} +// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} +``` + + + diff --git a/docs/backandroid.md b/docs/backandroid.md new file mode 100644 index 00000000000..25710f18e33 --- /dev/null +++ b/docs/backandroid.md @@ -0,0 +1,51 @@ +--- +id: backandroid +title: BackAndroid +--- + +Deprecated. Use BackHandler instead. + + +### Methods + +- [`exitApp`](backandroid.md#exitapp) +- [`addEventListener`](backandroid.md#addeventlistener) +- [`removeEventListener`](backandroid.md#removeeventlistener) + + + + +--- + +# Reference + +## Methods + +### `exitApp()` + +```javascript +static exitApp() +``` + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(eventName, handler) +``` + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(eventName, handler) +``` + + + diff --git a/docs/backhandler.md b/docs/backhandler.md new file mode 100644 index 00000000000..789df5f812e --- /dev/null +++ b/docs/backhandler.md @@ -0,0 +1,78 @@ +--- +id: backhandler +title: BackHandler +--- + +Detect hardware button presses for back navigation. + +Android: Detect hardware back button presses, and programmatically invoke the default back button +functionality to exit the app if there are no listeners or if none of the listeners return true. + +tvOS: Detect presses of the menu button on the TV remote. (Still to be implemented: +programmatically disable menu button handling +functionality to exit the app if there are no listeners or if none of the listeners return true.) + +iOS: Not applicable. + +The event subscriptions are called in reverse order (i.e. last registered subscription first), +and if one subscription returns true then subscriptions registered earlier will not be called. + +Example: + +```javascript +BackHandler.addEventListener('hardwareBackPress', function() { + // this.onMainScreen and this.goBack are just examples, you need to use your own implementation here + // Typically you would use the navigator here to go to the last state. + + if (!this.onMainScreen()) { + this.goBack(); + return true; + } + return false; +}); +``` + + +### Methods + +- [`exitApp`](backhandler.md#exitapp) +- [`addEventListener`](backhandler.md#addeventlistener) +- [`removeEventListener`](backhandler.md#removeeventlistener) + + + + +--- + +# Reference + +## Methods + +### `exitApp()` + +```javascript +static exitApp() +``` + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(eventName, handler) +``` + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(eventName, handler) +``` + + + diff --git a/docs/building-for-apple-tv.md b/docs/building-for-apple-tv.md new file mode 100644 index 00000000000..f64a0142431 --- /dev/null +++ b/docs/building-for-apple-tv.md @@ -0,0 +1,90 @@ +--- +id: building-for-apple-tv +title: Building For Apple TV +--- + +Apple TV support has been implemented with the intention of making existing React Native iOS applications "just work" on tvOS, with few or no changes needed in the JavaScript code for the applications. + +The RNTester app supports Apple TV; use the `RNTester-tvOS` build target to build for tvOS. + +## Build changes + +- *Native layer*: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'. + +- *react-native init*: New React Native projects created with `react-native init` will have Apple TV target automatically created in their XCode projects. + +- *JavaScript layer*: Support for Apple TV has been added to `Platform.ios.js`. You can check whether code is running on AppleTV by doing + +```js +var Platform = require('Platform'); +var running_on_apple_tv = Platform.isTVOS; +``` + +## Code changes + +- *General support for tvOS*: Apple TV specific changes in native code are all wrapped by the TARGET_OS_TV define. These include changes to suppress APIs that are not supported on tvOS (e.g. web views, sliders, switches, status bar, etc.), and changes to support user input from the TV remote or keyboard. + +- *Common codebase*: Since tvOS and iOS share most Objective-C and JavaScript code in common, most documentation for iOS applies equally to tvOS. + +- *Access to touchable controls*: When running on Apple TV, the native view class is `RCTTVView`, which has additional methods to make use of the tvOS focus engine. The `Touchable` mixin has code added to detect focus changes and use existing methods to style the components properly and initiate the proper actions when the view is selected using the TV remote, so `TouchableHighlight` and `TouchableOpacity` will "just work". In particular: + + - `touchableHandleActivePressIn` will be executed when the touchable view goes into focus + - `touchableHandleActivePressOut` will be executed when the touchable view goes out of focus + - `touchableHandlePress` will be executed when the touchable view is actually selected by pressing the "select" button on the TV remote. + +- *TV remote/keyboard input*: A new native class, `RCTTVRemoteHandler`, sets up gesture recognizers for TV remote events. When TV remote events occur, this class fires notifications that are picked up by `RCTTVNavigationEventEmitter` (a subclass of `RCTEventEmitter`), that fires a JS event. This event will be picked up by instances of the `TVEventHandler` JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of `TVEventHandler` and listen for these events, as in the following code: + +```js +var TVEventHandler = require('TVEventHandler'); + +. +. +. + +class Game2048 extends React.Component { + _tvEventHandler: any; + + _enableTVEventHandler() { + this._tvEventHandler = new TVEventHandler(); + this._tvEventHandler.enable(this, function(cmp, evt) { + if (evt && evt.eventType === 'right') { + cmp.setState({board: cmp.state.board.move(2)}); + } else if(evt && evt.eventType === 'up') { + cmp.setState({board: cmp.state.board.move(1)}); + } else if(evt && evt.eventType === 'left') { + cmp.setState({board: cmp.state.board.move(0)}); + } else if(evt && evt.eventType === 'down') { + cmp.setState({board: cmp.state.board.move(3)}); + } else if(evt && evt.eventType === 'playPause') { + cmp.restartGame(); + } + }); + } + + _disableTVEventHandler() { + if (this._tvEventHandler) { + this._tvEventHandler.disable(); + delete this._tvEventHandler; + } + } + + componentDidMount() { + this._enableTVEventHandler(); + } + + componentWillUnmount() { + this._disableTVEventHandler(); + } + +``` +- *Dev Menu support*: On the simulator, cmd-D will bring up the developer menu, just like on iOS. To bring it up on a real Apple TV device, make a long press on the play/pause button on the remote. (Please do not shake the Apple TV device, that will not work :) ) + +- *TV remote animations*: `RCTTVView` native code implements Apple-recommended parallax animations to help guide the eye as the user navigates through views. The animations can be disabled or adjusted with new optional view properties. + +- *Back navigation with the TV remote menu button*: The `BackHandler` component, originally written to support the Android back button, now also supports back navigation on the Apple TV using the menu button on the TV remote. + +- *TabBarIOS behavior*: The `TabBarIOS` component wraps the native `UITabBar` API, which works differently on Apple TV. To avoid jittery rerendering of the tab bar in tvOS (see [this issue](https://github.com/facebook/react-native/issues/15081)), the selected tab bar item can only be set from Javascript on initial render, and is controlled after that by the user through native code. + +- *Known issues*: + + - [ListView scrolling](https://github.com/facebook/react-native/issues/12793). The issue can be easily worked around by setting `removeClippedSubviews` to false in ListView and similar components. For more discussion of this issue, see [this PR](https://github.com/facebook/react-native/pull/12944). diff --git a/docs/button.md b/docs/button.md new file mode 100644 index 00000000000..995fbe6cd79 --- /dev/null +++ b/docs/button.md @@ -0,0 +1,115 @@ +--- +id: button +title: Button +--- + +A basic button component that should render nicely on any platform. Supports a +minimal level of customization. + +
+ +If this button doesn't look right for your app, you can build your own button +using [TouchableOpacity](touchableopacity.md) or +[TouchableNativeFeedback](touchablenativefeedback.md). For inspiration, look at +the +[source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). +Or, take a look at the +[wide variety of button components built by the community](https://js.coach/react-native?search=button). + +Example usage: + +``` +import { Button } from 'react-native'; +... + + + + + ); + } +} + +class Hero extends React.Component { + render() { + return
{this.props.children}
; + } +} + +class HeaderHero extends React.Component { + render() { + return ( + +
React Native
+
+ Build native mobile apps using JavaScript and React +
+
+ +
+ + ); + } +} + +class AppList extends React.Component { + constructor(props, context) { + super(props, context); + + this._renderApp = this._renderApp.bind(this); + } + + render() { + return
{this.props.apps.map(this._renderApp)}
; + } + + _renderApp(app, i) { + return ( + + ); + } + + _renderAppIcon(app) { + let imgSource = app.icon; + if (!app.icon.startsWith("http")) { + imgSource = siteConfig.baseUrl + "img/showcase/" + app.icon; + } + return {app.name}; + } +} + +class Features extends React.Component { + render() { + return ( +
+ +
+
+

Build native mobile apps using JavaScript and React

+ + React Native lets you build mobile apps using only JavaScript. + It uses the same design as React, letting you compose a rich + mobile UI from declarative components. + +
+ + {`\`\`\`javascript +import React, { Component } from 'react'; +import { Text, View } from 'react-native'; + +class WhyReactNativeIsSoGreat extends Component { + render() { + return ( + + + If you like React on the web, you'll like React Native. + + + You just use native components like 'View' and 'Text', + instead of web components like 'div' and 'span'. + + + ); + } +} +\`\`\``} + +
+ + +
+
+

A React Native app is a real mobile app

+ + With React Native, you don't build a "mobile web app", an "HTML5 + app", or a "hybrid app". You build a real mobile app that's + indistinguishable from an app built using Objective-C or Java. + React Native uses the same fundamental UI building blocks as + regular iOS and Android apps. You just put those building blocks + together using JavaScript and React. + +
+ + {`\`\`\`javascript +import React, { Component } from 'react'; +import { Image, ScrollView, Text } from 'react-native'; + +class AwkwardScrollingImageWithText extends Component { + render() { + return ( + + + + On iOS, a React Native ScrollView uses a native UIScrollView. + On Android, it uses a native ScrollView. + + On iOS, a React Native Image uses a native UIImageView. + On Android, it uses a native ImageView. + + React Native wraps the fundamental native components, giving you + the performance of a native app, plus the clean design of React. + + + ); + } +} +\`\`\` +`} + +
+ + +
+
+

Don't waste time recompiling

+
+ + React Native lets you build your app faster. Instead of + recompiling, you can reload your app instantly. With [Hot + Reloading](http://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html), + you can even run new code while retaining your application + state. Give it a try - it's a magical experience. + +
+
+ +
+ + +
+
+

Use native code when you need to

+
+ + React Native combines smoothly with components written in + Objective-C, Java, or Swift. It's simple to drop down to + native code if you need to optimize a few aspects of your + application. It's also easy to build part of your app in React + Native, and part of your app using native code directly - + that's how the Facebook app works. + +
+
+ + {` +\`\`\`javascript +import React, { Component } from 'react'; +import { Text, View } from 'react-native'; +import { TheGreatestComponentInTheWorld } from './your-native-code'; + +class SomethingFast extends Component { + render() { + return ( + + + + TheGreatestComponentInTheWorld could use native Objective-C, + Java, or Swift - the product development process is the same. + + + ); + } +} +\`\`\` +`} + +
+ +
+ ); + } +} + +class MiniShowcase extends React.Component { + render() { + return ( +
+

Who's using React Native?

+

+ Thousands of apps are using React Native, from established Fortune 500 + companies to hot new startups. If you're curious to see what can be + accomplished with React Native,{" "} + + check out these apps + ! +

+
+ +
+
+ ); + } +} + +class Index extends React.Component { + render() { + return ( +
+ + + + + + +
+ ); + } +} + +module.exports = Index; diff --git a/website/pages/en/showcase.js b/website/pages/en/showcase.js new file mode 100644 index 00000000000..f3516843108 --- /dev/null +++ b/website/pages/en/showcase.js @@ -0,0 +1,152 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +const React = require("react"); + +const CompLibrary = require("../../core/CompLibrary.js"); +const Container = CompLibrary.Container; + +const siteConfig = require(process.cwd() + "/siteConfig.js"); + +const showcaseApps = siteConfig.users; +const pinnedApps = showcaseApps.filter(app => { + return app.pinned; +}); +const featuredApps = showcaseApps + .filter(app => { + return !app.pinned; + }) + .sort(function(a, b) { + return a.name.localeCompare(b.name); + }); +const apps = pinnedApps.concat(featuredApps); + +class AppList extends React.Component { + constructor(props, context) { + super(props, context); + + this._renderApp = this._renderApp.bind(this); + this._renderAppIcon = this._renderAppIcon.bind(this); + this._renderAppName = this._renderAppName.bind(this); + this._renderInfo = this._renderInfo.bind(this); + this._renderLinks = this._renderLinks.bind(this); + } + + render() { + return
{this.props.apps.map(this._renderApp)}
; + } + + _renderApp(app, i) { + return ( +
+
+ {this._renderAppIcon(app)} + {this._renderAppName(app.name)} + {this._renderLinks(app)} + {this._renderInfo(app.infoTitle, app.infoLink)} +
+
+ ); + } + + _renderAppIcon(app) { + let imgSource = app.icon; + if (!app.icon.startsWith("http")) { + imgSource = siteConfig.baseUrl + "img/showcase/" + app.icon; + } + return {app.name}; + } + + _renderAppName(name) { + return

{name}

; + } + + _renderInfo(title, uri) { + let info = null; + if (uri) { + info = ( +

+ + {title} + +

+ ); + } + + return info; + } + + _renderLinks(app) { + if (!app.linkAppStore && !app.linkPlayStore) { + return; + } + + var linkAppStore = app.linkAppStore ? ( + + iOS + + ) : ( + "" + ); + var linkPlayStore = app.linkPlayStore ? ( + + Android + + ) : ( + "" + ); + + return ( +

+ {linkAppStore} + {linkAppStore && linkPlayStore ? " · " : ""} + {linkPlayStore} +

+ ); + } +} + +class Showcase extends React.Component { + render() { + return ( +
+ +
+
+

Who's using React Native?

+

+ Thousands of apps are using React Native, from established + Fortune 500 companies to hot new startups. If you're curious to + see what can be accomplished with React Native, check out these + apps! +

+
+
+ +
+

Some of these are hybrid native/React Native apps.

+

+ A curated list of + + open source React Native apps + + is also being kept by React Native News. +

+
+ +
+ ); + } +} + +Showcase.defaultProps = { + language: "en" +}; + +module.exports = Showcase; diff --git a/website/pages/en/versions.js b/website/pages/en/versions.js new file mode 100644 index 00000000000..bd6aa2e6fdc --- /dev/null +++ b/website/pages/en/versions.js @@ -0,0 +1,184 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +const React = require("react"); + +const CompLibrary = require("../../core/CompLibrary.js"); +const Container = CompLibrary.Container; + +const CWD = process.cwd(); +const siteConfig = require(CWD + "/siteConfig.js"); +const versions = require(CWD + "/versions.json"); + +class Versions extends React.Component { + render() { + const releaseCandidateVersion = versions[0]; + const stableVersion = versions[1]; + + return ( +
+ +

React Native Versions

+

+ React Native follows a monthly release train. Every month, a new + branch created off master enters the Release Candidate phase, and + the previous Release Candidate branch is released and considered + stable. +

+

+ If you have an existing project that uses React Native, read the + release notes to learn about new features and fixes. You can follow{" "} + + our guide to upgrade your app to the latest version + . +

+

+ You can view the docs for a particular version of React Native by + clicking on the Documentation link next to the release in this page. + You can come back to this page and switch the version of the docs + you're reading at any time by clicking on the version number at the + top of the page. +

+

Latest versions

+

+ To see what changes are coming and provide better feedback to React + Native contributors, use the latest release candidate when possible. + By the time a release candidate is released, the changes it contains + will have been shipped in production Facebook apps for over two + weeks. +

+ + + + + + + + + + + + +
Master + + Documentation + + +
{releaseCandidateVersion}-RC + + Documentation + + + + Release Notes + +
+

Stable version

+

+ This is the version that is configured automatically when you create + a new project using react-native init. The stable + version is released roughly a month after entering release candidate + status. +

+ + + + + + + + +
{stableVersion} + + Documentation + + + + Release Notes + +
+

Past versions

+

+ You can find past versions of React Native on GitHub. The release + notes can be useful if you would like to learn when a specific + feature or fix was released. +

+ + + {versions.slice(1).map(function(version) { + return ( + + + + + + ); + })} + +
{version} + + Documentation + + + + Release Notes + +
+ +
+ ); + } +} + +Versions.defaultProps = { + language: "en" +}; + +module.exports = Versions; diff --git a/website/showcase.json b/website/showcase.json new file mode 100644 index 00000000000..22712b1ebca --- /dev/null +++ b/website/showcase.json @@ -0,0 +1,274 @@ +[ + { + "name": "Facebook", + "icon": "facebook.png", + "linkAppStore": "https://itunes.apple.com/app/facebook/id284882215", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en", + "infoLink": + "https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/", + "infoTitle": "Using React Native in the Facebook App", + "pinned": true + }, + { + "name": "Facebook Ads Manager", + "icon": "adsmanager.png", + "linkAppStore": + "https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.facebook.adsmanager", + "infoLink": + "https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/", + "infoTitle": "How We Built the First Cross-Platform React Native App", + "pinned": true + }, + { + "name": "Instagram", + "icon": "instagram.png", + "linkAppStore": + "https://itunes.apple.com/app/instagram/id389801252?pt=428156&ct=igweb.unifiedHome.badge&mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.instagram.android&referrer=utm_source%3Dinstagramweb%26utm_campaign%3DunifiedHome%26utm_medium%3Dbadge", + "infoLink": + "https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr", + "infoTitle": "React Native at Instagram", + "pinned": true + }, + { + "name": "F8", + "icon": "f8.png", + "linkAppStore": "https://itunes.apple.com/it/app/f8/id853467066?l=en&mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.facebook.f8&hl=en", + "infoLink": "http://makeitopen.com/tutorials/building-the-f8-app/planning/", + "infoTitle": "Tutorial: Building the F8 conference app", + "pinned": true + }, + { + "name": "Airbnb", + "icon": "airbnb.png", + "linkAppStore": + "https://itunes.apple.com/us/app/airbnb/id401626263?mt=8&bev=1472279725_4ITWKWGX6KrmU6pT&utm_medium=web&utm_source=airbnb&_branch_match_id=307510898795870823", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.airbnb.android&hl=en&referrer=bev%3D1472279725_4ITWKWGX6KrmU6pT%26utm_medium%3Dweb%26utm_source%3Dairbnb", + "infoLink": "https://www.youtube.com/watch?v=tUfgQtmG3R0", + "infoTitle": "Hybrid React Native Apps at Airbnb", + "pinned": true + }, + { + "name": "Skype", + "icon": + "http://is1.mzstatic.com/image/thumb/Purple118/v4/9c/86/19/9c861944-900e-2d61-18b5-9250b3840277/source/175x175bb.jpg", + "linkAppStore": + "https://itunes.apple.com/us/app/skype-for-iphone/id304878510?mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.skype.raider&hl=en", + "pinned": true + }, + { + "name": "Tesla", + "icon": "tesla.png", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.teslamotors.tesla", + "linkAppStore": + "https://itunes.apple.com/us/app/tesla-motors/id582007913?mt=8", + "pinned": true + }, + { + "name": "Walmart", + "icon": "wmt_spark.jpg", + "linkAppStore": + "https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.walmart.android&hl=en", + "infoLink": + " https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc", + "infoTitle": "React Native at Walmart Labs", + "pinned": true + }, + { + "name": "Artsy", + "icon": + "https://raw.githubusercontent.com/artsy/eigen/master/Artsy/Resources/Images.xcassets/AppIcon.appiconset/AppIcon167.png", + "linkAppStore": + "https://itunes.apple.com/us/app/artsy-collect-bid-on-fine/id703796080?mt=8", + "infoLink": "https://artsy.github.io/series/react-native-at-artsy/", + "infoTitle": "React Native at Artsy", + "pinned": false + }, + { + "name": "Baidu Mobile (手机百度)", + "icon": "baidu.png", + "linkPlayStore": "http://shouji.baidu.com/software/9896302.html", + "linkAppStore": + "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8", + "infoLink": + "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K", + "infoTitle": + "Baidu Mobile is a search engine used by over 600 million people in China", + "pinned": false + }, + { + "name": "Bloomberg", + "icon": "bloomberg.png", + "linkAppStore": + "https://itunes.apple.com/us/app/bloomberg/id281941097?mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en", + "infoLink": + "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/", + "infoTitle": + "How Bloomberg Used React Native to Develop its new Consumer App", + "pinned": false + }, + { + "name": "CBS Sports Franchise Football", + "icon": "cbssports.png", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.cbssports.fantasy.franchisefootball2015", + "infoLink": + "http://www.cbssports.com/fantasy/football/games/franchise/2015", + "infoTitle": + "Award winning Fantasy Football league manager built with React Native", + "pinned": false + }, + { + "name": "Chop", + "icon": "chop.png", + "linkAppStore": "http://apple.co/2dfkYH9", + "infoLink": "http://blog.getchop.io/2016/10/13/how-we-built-chop/", + "infoTitle": "How we built Chop using React Native", + "pinned": false + }, + { + "name": "Delivery.com", + "icon": "delivery.png", + "linkAppStore": + "https://itunes.apple.com/us/app/delivery.com-food-alcohol/id435168129?mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.deliverycom&hl=en", + "infoLink": + "https://medium.com/delivery-com-engineering/react-native-in-an-existing-ios-app-delivered-874ba95a3c52#.37qruw6ck", + "infoTitle": "React Native in an Existing iOS App: Getting Started", + "pinned": false + }, + { + "name": "Discord", + "icon": "discord.png", + "linkAppStore": + "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8", + "infoLink": + "https://blog.discordapp.com/using-react-native-one-year-later-91fd5e949933", + "infoTitle": "Using React Native: One Year Later", + "pinned": false + }, + { + "name": "Flare by GoDaddy", + "icon": "flare.png", + "linkAppStore": "http://x.co/Flare", + "linkPlayStore": "http://x.co/FlareAndr", + "infoLink": "http://x.co/FlareNews", + "infoTitle": + "Social network that connects entrepreneurs to fellow entrepreneurs, consumers, investors and experts", + "pinned": false + }, + { + "name": "Gyroscope", + "icon": "gyroscope.png", + "linkAppStore": + "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.gyroscope.gyroscope", + "infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253", + "infoTitle": "Building a visualization experience with React Native", + "pinned": false + }, + { + "name": "Huiseoul (惠首尔)", + "icon": "huiseoul.png", + "linkAppStore": + "https://itunes.apple.com/us/app/hui-shou-er-ni-si-ren-mei/id1127150360?ls=1&mt=8", + "infoLink": + "https://engineering.huiseoul.com/building-a-conversational-e-commerce-app-in-6-weeks-with-react-native-c35d46637e07", + "infoTitle": + "Building a conversational E-commerce app in 6 weeks with React Native", + "pinned": false + }, + { + "name": "JD（手机京东）", + "icon": "jdcom.png", + "linkAppStore": + "https://itunes.apple.com/cn/app/shou-ji-jing-dong-xin-ren/id414245413?mt=8", + "linkPlayStore": "https://app.jd.com/android.html", + "infoLink": "http://ir.jd.com/phoenix.zhtml?c=253315&p=irol-homeProfile", + "infoTitle": + "JD.com is China’s largest ecommerce company by revenue and a member of the Fortune Global 500.", + "pinned": false + }, + { + "name": "li.st", + "icon": "list.png", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=st.li.listapp", + "infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE", + "infoTitle": "Building li.st for Android with React Native", + "pinned": false + }, + { + "name": "SoundCloud Pulse", + "icon": "soundcloud_pulse.jpg", + "linkAppStore": + "https://itunes.apple.com/us/app/soundcloud-pulse-for-creators/id1074278256?mt=8", + "infoLink": + "https://developers.soundcloud.com/blog/react-native-at-soundcloud", + "infoTitle": "Why React Native worked well for us", + "pinned": false + }, + { + "name": "Tencent QQ", + "icon": "qq.png", + "linkPlayStore": + "http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq", + "infoLink": "https://www.tencent.com/en-us/system.html", + "infoTitle": + "QQ is China's largest messaging platform, with over 829 million active accounts", + "pinned": false + }, + { + "name": "Townske", + "icon": "townske.png", + "linkAppStore": + "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8", + "infoLink": + "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c", + "infoTitle": + "The experience of a web developer building an app using React Native", + "pinned": false + }, + { + "name": "UberEATS", + "icon": "ubereats.jpg", + "infoLink": "https://eng.uber.com/ubereats-react-native/", + "infoTitle": "Powering UberEATS with React Native and Uber Engineering", + "pinned": false + }, + { + "name": "Vogue", + "icon": "vogue.jpeg", + "linkAppStore": + "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8", + "infoLink": "http://www.vogue.com/app", + "infoTitle": "", + "pinned": false + }, + { + "name": "Wix.com", + "icon": "wix.jpg", + "linkAppStore": "https://itunes.apple.com/us/app/wix-com/id1099748482?mt=8", + "linkPlayStore": + "https://play.google.com/store/apps/details?id=com.wix.android&hl=en", + "infoLink": "https://www.youtube.com/watch?v=abSNo2P9mMM", + "infoTitle": "Building a React Native App for 80 Million Users", + "pinned": false + } +] diff --git a/website/sidebars.json b/website/sidebars.json new file mode 100644 index 00000000000..f512da909f1 --- /dev/null +++ b/website/sidebars.json @@ -0,0 +1,145 @@ +{ + "docs": { + "The Basics": [ + "getting-started", + "tutorial", + "props", + "state", + "style", + "height-and-width", + "flexbox", + "handling-text-input", + "handling-touches", + "using-a-scrollview", + "using-a-listview", + "network", + "more-resources" + ], + "Guides": [ + "components-and-apis", + "platform-specific-code", + "navigation", + "images", + "animations", + "accessibility", + "improvingux", + "timers", + "debugging", + "performance", + "gesture-responder-system", + "javascript-environment", + "direct-manipulation", + "colors", + "integration-with-existing-apps", + "running-on-device", + "upgrading", + "troubleshooting" + ], + "Guides (iOS)": [ + "native-modules-ios", + "native-components-ios", + "linking-libraries-ios", + "running-on-simulator-ios", + "communication-ios", + "building-for-apple-tv", + "app-extensions" + ], + "Guides (Android)": [ + "native-modules-android", + "native-components-android", + "headless-js-android", + "signed-apk-android", + "android-building-from-source" + ], + "Contributing": [ + "contributing", + "maintainers", + "testing", + "understanding-cli" + ], + "Components": [ + "activityindicator", + "button", + "datepickerios", + "drawerlayoutandroid", + "flatlist", + "image", + "keyboardavoidingview", + "listview", + "maskedviewios", + "modal", + "navigatorios", + "picker", + "pickerios", + "progressbarandroid", + "progressviewios", + "refreshcontrol", + "scrollview", + "sectionlist", + "segmentedcontrolios", + "slider", + "snapshotviewios", + "statusbar", + "switch", + "tabbarios", + "tabbarios-item", + "text", + "textinput", + "toolbarandroid", + "touchablehighlight", + "touchablenativefeedback", + "touchableopacity", + "touchablewithoutfeedback", + "view", + "viewpagerandroid", + "virtualizedlist", + "webview" + ], + "APIs": [ + "accessibilityinfo", + "actionsheetios", + "alert", + "alertios", + "animated", + "appregistry", + "appstate", + "asyncstorage", + "backandroid", + "backhandler", + "cameraroll", + "clipboard", + "datepickerandroid", + "dimensions", + "easing", + "geolocation", + "imageeditor", + "imagepickerios", + "imagestore", + "image-style-props", + "interactionmanager", + "keyboard", + "layout-props", + "layoutanimation", + "linking", + "listviewdatasource", + "netinfo", + "panresponder", + "permissionsandroid", + "pixelratio", + "pushnotificationios", + "settings", + "shadow-props", + "share", + "statusbarios", + "stylesheet", + "systrace", + "text-style-props", + "timepickerandroid", + "toastandroid", + "transforms", + "vibration", + "vibrationios", + "view-style-props" + ] + } +} diff --git a/website/siteConfig.js b/website/siteConfig.js new file mode 100644 index 00000000000..149188c0aa8 --- /dev/null +++ b/website/siteConfig.js @@ -0,0 +1,64 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +const RemarkablePlugins = require("./core/RemarkablePlugins"); + +const users = require("./showcase.json"); + +const baseUrl = "/react-native/"; +const repoUrl = "https://github.com/facebook/react-native"; +const siteConfig = { + title: "React Native", + tagline: "A framework for building native apps using React", + url: "https://facebook.github.io", + baseUrl, + projectName: "react-native", + repoUrl, + users, + editUrl: + "https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/", // TODO: We point to the versioned file here to ensure the Edit button points to the right location for the source of a given file. We actually want people to modify the master source at docs/ instead, so we will need to update Docusaurus to ensure edit buttons are handed properly in versioned sites. + headerLinks: [ + { doc: "getting-started", label: "Docs" }, + { page: "help", label: "Community" }, + { blog: true, label: "Blog" }, + { search: true }, + { href: repoUrl, label: "GitHub" }, + { href: "https://reactjs.org/", label: "React" } + ], + headerIcon: "img/header_logo.png", + footerIcon: "img/header_logo.png", + favicon: "img/favicon.png", + colors: { + primaryColor: "rgb(34, 34, 34)", + secondaryColor: "#05A5D1", + tintColor: "#005068", + backgroundColor: "#f5fcff" + }, + algolia: { + apiKey: "2c98749b4a1e588efec53b2acec13025", + indexName: "react-native-versions", + algoliaOptions: { + facetFilters: ["tags:VERSION"], + hitsPerPage: 5 + } + }, + facebookAppId: "1677033832619985", + twitter: "reactnative", + markdownPlugins: [ + RemarkablePlugins.SnackPlayer, + RemarkablePlugins.ReactNativeWebPlayer + ], + highlight: { + theme: "solarized-dark" + }, + gaTrackingId: "UA-41298772-2", + scripts: ["https://snack.expo.io/embed.js", baseUrl + "js/codeblocks.js"] +}; + +module.exports = siteConfig; diff --git a/website/static/css/codeblocks.css b/website/static/css/codeblocks.css new file mode 100644 index 00000000000..bdce6ea2b22 --- /dev/null +++ b/website/static/css/codeblocks.css @@ -0,0 +1,34 @@ +/** React Native Web Player **/ +.web-player > iframe { + display: none; +} + +.web-player > pre { + display: none; +} + +.web-player.desktop > iframe { + display: block; +} + +.web-player.mobile > pre { + display: block; +} + +.token.keyword { + color: #1990b8; +} + +.token.string, +.token.regex { + color: #2f9c0a; +} + +.token.boolean, +.token.number { + color: #c92c2c; +} + +.token.comment { + color: #7d8b99; +} diff --git a/website/static/css/docs.css b/website/static/css/docs.css new file mode 100644 index 00000000000..a75cf8af1df --- /dev/null +++ b/website/static/css/docs.css @@ -0,0 +1,163 @@ +.props { + background-color: #ebf9ff; +} + +.compactProps { + border-left: 2px solid #e0f6ff; + margin-left: 20px; + padding-left: 5px; +} + +.props > .prop:nth-child(2n) { + background-color: #e0f6ff; +} + +.propTitle { + font-weight: bold !important; + font-size: 16px !important; +} + +.compactProps .propTitle { + font-size: 14px; + margin-bottom: 0; + margin-top: 0; +} + +.compactProps .propTitle div { + font-weight: normal; + margin-left: 20px; +} + +.methodTitle { + font-weight: bold !important; + font-size: 24px !important; + color: #025268 !important; +} + +.compactProps .methodTitle { + font-size: 14px; + margin-bottom: 0; + margin-top: 0; +} + +.compactProps .methodTitle div { + font-weight: normal; + margin-left: 20px; +} + +.prop { + word-wrap: break-word; + padding: 5px 10px; +} + +.compactProps .prop { + padding: 3px 10px; +} + +.propType { + font-family: "source-code-pro", Menlo, "Courier New", Consolas, monospace; + font-weight: normal; + font-size: 15px; + white-space: pre-wrap; +} + +.compactProps .propType { + font-weight: normal; + font-size: 13px; +} + +.methodType { + font-weight: normal; + font-size: 24px; +} + +.compactProps .methodType { + font-weight: normal; + font-size: 13px; +} + +.botActions { + background-color: #ebf9ff; +} + +.botActions > .botAction:nth-child(2n) { + background-color: #e0f6ff; +} + +.botCommand { + font-family: "source-code-pro", Menlo, "Courier New", Consolas, monospace; + font-weight: bold; + color: #025268; +} + +.botAction { + padding: 5px 10px; +} + +.botMentionName { + font-weight: normal; +} + +/* API Docs */ + +hr { + height: 1px; + margin-bottom: -1px; + border: none; + border-bottom: 1px solid #ececec; + margin-top: 40px; +} + +table { + background: #ebf9ff; + border: 1px solid #b0b0b0; + border-collapse: collapse; + display: table; + margin: 20px 0; + width: 80%; +} +table thead { + display: table-header-group; +} +table tbody { + display: table-row-group; +} +table tr { + display: table-row; +} +table tr:nth-of-type(odd) { + background: #ebf9ff; +} +table tr:nth-of-type(even) { + background: #e0f6ff; +} +table tr th, +table tr td { + border-right: 1px dotted #b0b0b0; + display: table-cell; + font-size: 14px; + line-height: 1.3em; + padding: 10px; + text-align: left; +} +table tr th:last-of-type, +table tr td:last-of-type { + border-right: 0; +} +table tr th code, +table tr td code { + display: inline-block; + font-size: 12px; +} +table tr th { + color: #000000; + font-weight: bold; + font-family: "Helvetica Neue", Arial, sans-serif; + text-transform: uppercase; +} +table tr th:first-of-type { + width: 60%; +} +table tr th:nth-of-type(4) { + width: 80%; +} diff --git a/website/static/css/footer.css b/website/static/css/footer.css new file mode 100644 index 00000000000..13c0c4afd99 --- /dev/null +++ b/website/static/css/footer.css @@ -0,0 +1,14 @@ +footer .sitemap h6, +footer .sitemap h5 > a, +footer .sitemap h6 > a { + color: $secondaryColor; +} + +footer.nav-footer { + background-color: #012129; +} + +footer.nav-footer .nav-home img { + height: auto; + width: 34px; +} diff --git a/website/static/css/hero.css b/website/static/css/hero.css new file mode 100644 index 00000000000..2725b75414d --- /dev/null +++ b/website/static/css/hero.css @@ -0,0 +1,92 @@ +.hero .button { + background: -webkit-linear-gradient(#9a9a9a, #646464); + background: linear-gradient(#9a9a9a, #646464); + border-radius: 4px; + padding: 8px 16px; + font-size: 18px; + font-weight: 300; + margin: 0 12px; + display: inline-block; + color: #fafafa; + text-decoration: none; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3); +} + +.button:hover { + text-decoration: none; +} + +.button:active { + box-shadow: none; +} + +.button.blue { + background: -webkit-linear-gradient(#77a3d2, #4783c2); + background: linear-gradient(#77a3d2, #4783c2); +} + +@media only screen and (max-device-width: 1024px) { + .hero { + padding: 10px 0 30px 0; + } +} + +.hero { + background: #2d2d2d; + padding: 50px 0; + color: #fdf3e7; + font-weight: 300; + text-align: center; +} + +.hero .text { + font-size: 300%; + text-align: center; + height: 44px; +} + +.hero .minitext { + font-size: 24px; + text-align: center; +} + +@media only screen and (max-width: 680px) { + .hero .text { + font-size: 200%; + text-align: center; + } + .hero .minitext { + font-size: 18px; + text-align: center; + } +} + +.buttons-unit { + margin-top: 40px; +} + +.buttons-unit a { + color:white; +} + +.buttons-unit .button { + background: $secondaryColor; + color: #fafafa; +} + +@media screen and (min-width: 600px) { + .buttons-unit .button { + font-size: 24px; + } +} + +.buttons-unit .button:active { + background: #0485a9; +} + +@media screen and (max-width: 373px) { + .hero .buttons-unit .button { + margin-bottom: 4px; + } +} diff --git a/website/static/css/react-native.css b/website/static/css/react-native.css new file mode 100644 index 00000000000..899097fa961 --- /dev/null +++ b/website/static/css/react-native.css @@ -0,0 +1,244 @@ +body { + background-color: $backgroundColor; +} + +.headerTitle { + font-weight: 300 !important; +} + +.mainContainer { + background-color: $backgroundColor !important; +} + +.mainContainer h1, +.mainContainer h2, +.mainContainer h3, +.mainContainer h4, +.mainContainer h5, +.mainContainer h6 { + color: $tintColor !important; +} + +a { + color: $secondaryColor; + text-decoration: none !important; +} + +.navGroup { + background-color: #eaf2f5 !important; +} + +.navitemactive { + color: $secondaryColor !important; +} + +input#search_input_react { + background-color: #2f2f2f; +} + +.button { + color: $tintColor; + border: 1px solid $tintColor; +} + +.button:hover { + background: $tintColor; +} + +.hero { + box-sizing: border-box; +} +.hero .button { + text-transform: none; +} + +code { + color: $tintColor !important; +} + +.mainContainer .component-grid { + max-width: 800px; +} + +.mainContainer .component { + border: 1px solid #05a5d1; + border-radius: 3px; + margin: 0 auto 10px; + width: 100%; + display: inline-block; + background-color: white; +} + +.mainContainer .component-grid .component h3 { + font-size: 16px; + font-weight: 400; + margin: 0; + padding: 0 10px; + background-color: #05a5d1; + color: white; + line-height: 40px; +} + +.mainContainer .component h3 a { + color: white; +} + +.mainContainer .component p { + padding: 10px; + margin: 2px; +} + +@supports (display: grid) { + .mainContainer .component-grid { + display: grid; + grid-gap: 22px; + } +} + +@media only screen and (min-device-width: 768px) { + .mainContainer .component-grid { + width: 768px; + } + .mainContainer .component-grid.component-grid-border { + border-bottom: 1px solid #f1eff0; + } + .mainContainer .component { + width: 30%; + height: 150px; + margin: 0 22px 22px auto; + vertical-align: top; + } + + @supports (display: grid) { + .mainContainer .component-grid { + grid-template-columns: repeat(3, 1fr); + } + .mainContainer .component { + width: auto; + height: auto; + margin: 0; + } + } +} + +.wrapper { + max-width: 1200px; +} + +.container { + max-width: 900px; +} + +.container .wrapper h2 { + font-size: 31px; +} + +.container .wrapper .hljs { + margin: 14px 0; +} + +.pageContainer .container { + margin: 40px auto; +} + +p { + font-size: 18px; + line-height: 1.4; +} + +.big-button { + text-align: center; + background: $secondaryColor; + color: #fafafa; + border-radius: 4px; + padding: 12px 16px; + font-size: 18px; + font-weight: 300; + margin: 0 12px; + display: inline-block; + color: #fafafa; + text-decoration: none; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3); + transition: background 0.3s, color 0.3s; +} + +.big-button:hover { + background: $tintColor; + color: #fff; +} + +.big-button a { + color: white; +} + +.big-button:active { + background: #0485a9; +} + +@media screen and (min-width: 600px) { + .big-button { + font-size: 24px; + } +} + +@media screen and (max-width: 373px) { + .big-button { + margin-bottom: 4px; + } +} + +@media only screen and (min-width: 1024px) { + .docsNavContainer { + margin-right: 0; + } +} + +.prose h1 { + padding: 0 0; +} + +.prose { + max-width: 800px; +} + +.hljs { + line-height: 20px; + border-left: 4px solid #05a5d1; + background-color: rgba(5, 165, 209, 0.05); +} + +.hljs + .hljs { + margin-top: 10px; +} + +/* Versions Page */ + +table.versions { + width: 60%; + border: 0; + border-collapse: separate; +} + +table.versions tr th { + width: 20%; +} + +table.versions td, +table.versions th { + padding: 2px 5px; +} + +table.versions tr th, +table.versions tr td { + border: 0; + width: 33%; + padding: 5px; +} + +table.versions tr:nth-of-type(odd) { + background: #e0f6ff; +} +table.versions tr:nth-of-type(even) { + background: #ebf9ff; +} diff --git a/website/static/css/showcase.css b/website/static/css/showcase.css new file mode 100644 index 00000000000..3e837c36f72 --- /dev/null +++ b/website/static/css/showcase.css @@ -0,0 +1,98 @@ +.showcaseSection .inner-content { + width: 800px; +} + +@media only screen and (max-device-width: 840px) { + .showcaseSection .inner-content { + width: 100%; + } +} + +.home-showcase-section { + max-width: 800px; + margin: 20px auto 20px auto; + text-align: center; + padding-bottom: 40px; +} + +.home-showcase-section p { + max-width: 560px; + margin: 0 auto; +} + +.footnote { + font-size: 12px; + color: rgba(0, 0, 0, 0.4); +} + + +.home-showcase-section h2 { + font-size: 31px; + line-height: 40px; + margin: 10px 0; +} + +.home-showcase-section .showcase img { + width: 100px; + height: 100px; + border-radius: 20px; +} + +.showcaseHeader { + padding-bottom: 15px; + padding-top: 15px; + text-align: center; +} + +.showcase { + margin: 30px auto 30px auto; + width: 50%; + display: inline-block; + text-align: center; + vertical-align: top; +} + +@media only screen and (min-device-width: 1024px) { + .showcase { + width: 25%; + } +} + +.showcase h3 { + margin-bottom: 0px; + line-height: 20px; + padding-left: 5px; + padding-right: 5px; + padding-bottom: 0 !important; + font-size: 16px; +} + +.showcase p { + margin-top: 5px; + padding-top: 0 !important; +} + +.showcase h3, +.showcase p { + color: #484848; +} + +@media only screen and (min-device-width: 736px) { + .showcaseSection .showcase img { + width: 100px; + } +} + +.showcaseSection .showcase img { + height: 100px; + border-radius: 20px; +} + +.showcaseSection .logos img { + padding: 0; +} + +.pinned img { + width: 150px; + border-radius: 20px; +} diff --git a/website/static/css/tabs.css b/website/static/css/tabs.css new file mode 100644 index 00000000000..57374c08ec2 --- /dev/null +++ b/website/static/css/tabs.css @@ -0,0 +1,51 @@ +.toggler li { + display: inline-block; + position: relative; + top: 1px; + padding: 10px !important; + margin: 0px 2px 0px 2px !important; + border: 1px solid $secondaryColor; + border-bottom-color: transparent; + border-radius: 3px 3px 0px 0px; + background-color: transparent; + font-size: 0.99em; + cursor: pointer; +} +.toggler li:first-child { + margin-left: 0 !important; +} +.toggler li:last-child { + margin-right: 0 !important; +} +.toggler ul { + width: 100%; + display: inline-block; + list-style-type: none; + padding: 0 !important; + margin: 0 !important; + border-bottom: 1px solid $secondaryColor; + cursor: default; +} +@media screen and (max-width: 960px) { + .toggler li, + .toggler li:first-child, + .toggler li:last-child { + display: block; + border-bottom-color: $secondaryColor; + border-radius: 3px; + margin: 2px 0px 2px 0px; + } + .toggler ul { + border-bottom: 0; + } +} +.toggler a { + display: inline-block; + padding: 10px 5px; + margin: 2px; + border: 1px solid $secondaryColor; + border-radius: 3px; + text-decoration: none !important; + color: $secondaryColor; +} + diff --git a/website/static/img/AddToBuildPhases.png b/website/static/img/AddToBuildPhases.png new file mode 100644 index 00000000000..7b83937020d Binary files /dev/null and b/website/static/img/AddToBuildPhases.png differ diff --git a/website/static/img/AddToSearchPaths.png b/website/static/img/AddToSearchPaths.png new file mode 100644 index 00000000000..ccbe819ba78 Binary files /dev/null and b/website/static/img/AddToSearchPaths.png differ diff --git a/website/static/img/AdministratorCommandPrompt.png b/website/static/img/AdministratorCommandPrompt.png new file mode 100644 index 00000000000..99345236bd3 Binary files /dev/null and b/website/static/img/AdministratorCommandPrompt.png differ diff --git a/website/static/img/AndroidAVDConfiguration.png b/website/static/img/AndroidAVDConfiguration.png new file mode 100644 index 00000000000..ef5e3e8b25c Binary files /dev/null and b/website/static/img/AndroidAVDConfiguration.png differ diff --git a/website/static/img/AndroidDevServerDialog.png b/website/static/img/AndroidDevServerDialog.png new file mode 100644 index 00000000000..9fd5536acdf Binary files /dev/null and b/website/static/img/AndroidDevServerDialog.png differ diff --git a/website/static/img/AndroidDevSettings.png b/website/static/img/AndroidDevSettings.png new file mode 100644 index 00000000000..0c214571f7e Binary files /dev/null and b/website/static/img/AndroidDevSettings.png differ diff --git a/website/static/img/AndroidDeveloperMenu.png b/website/static/img/AndroidDeveloperMenu.png new file mode 100644 index 00000000000..2fae4ccaa23 Binary files /dev/null and b/website/static/img/AndroidDeveloperMenu.png differ diff --git a/website/static/img/AndroidSDK1.png b/website/static/img/AndroidSDK1.png new file mode 100644 index 00000000000..9b9add740ed Binary files /dev/null and b/website/static/img/AndroidSDK1.png differ diff --git a/website/static/img/AndroidSDK2.png b/website/static/img/AndroidSDK2.png new file mode 100644 index 00000000000..a554e07d48e Binary files /dev/null and b/website/static/img/AndroidSDK2.png differ diff --git a/website/static/img/AndroidStudioCustomSetup.png b/website/static/img/AndroidStudioCustomSetup.png new file mode 100644 index 00000000000..4d7e16b6fd5 Binary files /dev/null and b/website/static/img/AndroidStudioCustomSetup.png differ diff --git a/website/static/img/AnimatedFadeInView.gif b/website/static/img/AnimatedFadeInView.gif new file mode 100644 index 00000000000..d0d02a1a2ab Binary files /dev/null and b/website/static/img/AnimatedFadeInView.gif differ diff --git a/website/static/img/AnimationExperimentalOpacity.gif b/website/static/img/AnimationExperimentalOpacity.gif new file mode 100644 index 00000000000..cdc79022b7e Binary files /dev/null and b/website/static/img/AnimationExperimentalOpacity.gif differ diff --git a/website/static/img/AnimationExperimentalScaleXY.gif b/website/static/img/AnimationExperimentalScaleXY.gif new file mode 100644 index 00000000000..850cfd18c2b Binary files /dev/null and b/website/static/img/AnimationExperimentalScaleXY.gif differ diff --git a/website/static/img/ConfigureReleaseScheme.png b/website/static/img/ConfigureReleaseScheme.png new file mode 100644 index 00000000000..dd671cc8391 Binary files /dev/null and b/website/static/img/ConfigureReleaseScheme.png differ diff --git a/website/static/img/EmbeddedAppAndroid.png b/website/static/img/EmbeddedAppAndroid.png new file mode 100644 index 00000000000..126ba2d7442 Binary files /dev/null and b/website/static/img/EmbeddedAppAndroid.png differ diff --git a/website/static/img/EmbeddedAppContainerViewExample.png b/website/static/img/EmbeddedAppContainerViewExample.png new file mode 100644 index 00000000000..6130dfb1e10 Binary files /dev/null and b/website/static/img/EmbeddedAppContainerViewExample.png differ diff --git a/website/static/img/Inspector.gif b/website/static/img/Inspector.gif new file mode 100644 index 00000000000..b7589733c82 Binary files /dev/null and b/website/static/img/Inspector.gif differ diff --git a/website/static/img/LayoutAnimationExample.gif b/website/static/img/LayoutAnimationExample.gif new file mode 100644 index 00000000000..68fcfcee4d7 Binary files /dev/null and b/website/static/img/LayoutAnimationExample.gif differ diff --git a/website/static/img/NavigationStack-Navigator.gif b/website/static/img/NavigationStack-Navigator.gif new file mode 100644 index 00000000000..c1f8313996c Binary files /dev/null and b/website/static/img/NavigationStack-Navigator.gif differ diff --git a/website/static/img/NavigationStack-NavigatorIOS.gif b/website/static/img/NavigationStack-NavigatorIOS.gif new file mode 100644 index 00000000000..c1d56a1f555 Binary files /dev/null and b/website/static/img/NavigationStack-NavigatorIOS.gif differ diff --git a/website/static/img/ObjectObserveError.png b/website/static/img/ObjectObserveError.png new file mode 100644 index 00000000000..3634969fdfc Binary files /dev/null and b/website/static/img/ObjectObserveError.png differ diff --git a/website/static/img/ReactDevTools.png b/website/static/img/ReactDevTools.png new file mode 100644 index 00000000000..caa3af713b3 Binary files /dev/null and b/website/static/img/ReactDevTools.png differ diff --git a/website/static/img/ReactDevToolsDollarR.gif b/website/static/img/ReactDevToolsDollarR.gif new file mode 100644 index 00000000000..373d80b90a9 Binary files /dev/null and b/website/static/img/ReactDevToolsDollarR.gif differ diff --git a/website/static/img/ReactDevToolsInspector.gif b/website/static/img/ReactDevToolsInspector.gif new file mode 100644 index 00000000000..c3540bee79c Binary files /dev/null and b/website/static/img/ReactDevToolsInspector.gif differ diff --git a/website/static/img/Rebound.gif b/website/static/img/Rebound.gif new file mode 100644 index 00000000000..03716633818 Binary files /dev/null and b/website/static/img/Rebound.gif differ diff --git a/website/static/img/ReboundExample.png b/website/static/img/ReboundExample.png new file mode 100644 index 00000000000..db33e5f8a85 Binary files /dev/null and b/website/static/img/ReboundExample.png differ diff --git a/website/static/img/ReboundImage.gif b/website/static/img/ReboundImage.gif new file mode 100644 index 00000000000..9c1da74f150 Binary files /dev/null and b/website/static/img/ReboundImage.gif differ diff --git a/website/static/img/RunningOnDeviceReady.png b/website/static/img/RunningOnDeviceReady.png new file mode 100644 index 00000000000..e251d1663bd Binary files /dev/null and b/website/static/img/RunningOnDeviceReady.png differ diff --git a/website/static/img/StaticImageAssets.png b/website/static/img/StaticImageAssets.png new file mode 100644 index 00000000000..e79acdc1b6f Binary files /dev/null and b/website/static/img/StaticImageAssets.png differ diff --git a/website/static/img/SystraceBadCreateUI.png b/website/static/img/SystraceBadCreateUI.png new file mode 100644 index 00000000000..813b1014aea Binary files /dev/null and b/website/static/img/SystraceBadCreateUI.png differ diff --git a/website/static/img/SystraceBadJS.png b/website/static/img/SystraceBadJS.png new file mode 100644 index 00000000000..c67c840ac92 Binary files /dev/null and b/website/static/img/SystraceBadJS.png differ diff --git a/website/static/img/SystraceBadJS2.png b/website/static/img/SystraceBadJS2.png new file mode 100644 index 00000000000..de972c6494a Binary files /dev/null and b/website/static/img/SystraceBadJS2.png differ diff --git a/website/static/img/SystraceBadUI.png b/website/static/img/SystraceBadUI.png new file mode 100644 index 00000000000..ebd9faf7d66 Binary files /dev/null and b/website/static/img/SystraceBadUI.png differ diff --git a/website/static/img/SystraceExample.png b/website/static/img/SystraceExample.png new file mode 100644 index 00000000000..521ee1635c8 Binary files /dev/null and b/website/static/img/SystraceExample.png differ diff --git a/website/static/img/SystraceHighlightVSync.png b/website/static/img/SystraceHighlightVSync.png new file mode 100644 index 00000000000..dc7595a3611 Binary files /dev/null and b/website/static/img/SystraceHighlightVSync.png differ diff --git a/website/static/img/SystraceJSThreadExample.png b/website/static/img/SystraceJSThreadExample.png new file mode 100644 index 00000000000..736af7d0562 Binary files /dev/null and b/website/static/img/SystraceJSThreadExample.png differ diff --git a/website/static/img/SystraceNativeModulesThreadExample.png b/website/static/img/SystraceNativeModulesThreadExample.png new file mode 100644 index 00000000000..7e919f24c22 Binary files /dev/null and b/website/static/img/SystraceNativeModulesThreadExample.png differ diff --git a/website/static/img/SystraceRenderThreadExample.png b/website/static/img/SystraceRenderThreadExample.png new file mode 100644 index 00000000000..2fa05bdbddd Binary files /dev/null and b/website/static/img/SystraceRenderThreadExample.png differ diff --git a/website/static/img/SystraceUIThreadExample.png b/website/static/img/SystraceUIThreadExample.png new file mode 100644 index 00000000000..4883e85c075 Binary files /dev/null and b/website/static/img/SystraceUIThreadExample.png differ diff --git a/website/static/img/SystraceWellBehaved.png b/website/static/img/SystraceWellBehaved.png new file mode 100644 index 00000000000..95408738f74 Binary files /dev/null and b/website/static/img/SystraceWellBehaved.png differ diff --git a/website/static/img/TodayWidgetUnableToLoad.jpg b/website/static/img/TodayWidgetUnableToLoad.jpg new file mode 100644 index 00000000000..70461c15cd6 Binary files /dev/null and b/website/static/img/TodayWidgetUnableToLoad.jpg differ diff --git a/website/static/img/TutorialFinal.png b/website/static/img/TutorialFinal.png new file mode 100644 index 00000000000..2f05b13e2ea Binary files /dev/null and b/website/static/img/TutorialFinal.png differ diff --git a/website/static/img/TutorialFinal2.png b/website/static/img/TutorialFinal2.png new file mode 100644 index 00000000000..75ec47c54ea Binary files /dev/null and b/website/static/img/TutorialFinal2.png differ diff --git a/website/static/img/TutorialMock.png b/website/static/img/TutorialMock.png new file mode 100644 index 00000000000..6a267d08995 Binary files /dev/null and b/website/static/img/TutorialMock.png differ diff --git a/website/static/img/TutorialMock2.png b/website/static/img/TutorialMock2.png new file mode 100644 index 00000000000..94c7f656b1d Binary files /dev/null and b/website/static/img/TutorialMock2.png differ diff --git a/website/static/img/TutorialSingleFetched.png b/website/static/img/TutorialSingleFetched.png new file mode 100644 index 00000000000..914cb8833b9 Binary files /dev/null and b/website/static/img/TutorialSingleFetched.png differ diff --git a/website/static/img/TutorialSingleFetched2.png b/website/static/img/TutorialSingleFetched2.png new file mode 100644 index 00000000000..c7dfd69e8d3 Binary files /dev/null and b/website/static/img/TutorialSingleFetched2.png differ diff --git a/website/static/img/TutorialStyledMock.png b/website/static/img/TutorialStyledMock.png new file mode 100644 index 00000000000..48fb1c5e732 Binary files /dev/null and b/website/static/img/TutorialStyledMock.png differ diff --git a/website/static/img/TutorialStyledMock2.png b/website/static/img/TutorialStyledMock2.png new file mode 100644 index 00000000000..16e99c2028f Binary files /dev/null and b/website/static/img/TutorialStyledMock2.png differ diff --git a/website/static/img/TweenState.gif b/website/static/img/TweenState.gif new file mode 100644 index 00000000000..84f34d2ec8f Binary files /dev/null and b/website/static/img/TweenState.gif differ diff --git a/website/static/img/Warning.png b/website/static/img/Warning.png new file mode 100644 index 00000000000..ceeb6edf2c6 Binary files /dev/null and b/website/static/img/Warning.png differ diff --git a/website/static/img/XcodeBuildIP.png b/website/static/img/XcodeBuildIP.png new file mode 100644 index 00000000000..33bf43c83e7 Binary files /dev/null and b/website/static/img/XcodeBuildIP.png differ diff --git a/website/static/img/alertIOS.png b/website/static/img/alertIOS.png new file mode 100644 index 00000000000..b35a2a457f9 Binary files /dev/null and b/website/static/img/alertIOS.png differ diff --git a/website/static/img/author.png b/website/static/img/author.png new file mode 100644 index 00000000000..deff4c45562 Binary files /dev/null and b/website/static/img/author.png differ diff --git a/website/static/img/blog/RNPerformanceStartup.png b/website/static/img/blog/RNPerformanceStartup.png new file mode 100644 index 00000000000..7f8381c694f Binary files /dev/null and b/website/static/img/blog/RNPerformanceStartup.png differ diff --git a/website/static/img/blog/animated-diagram.png b/website/static/img/blog/animated-diagram.png new file mode 100644 index 00000000000..26019db8ac8 Binary files /dev/null and b/website/static/img/blog/animated-diagram.png differ diff --git a/website/static/img/blog/big-hero.jpg b/website/static/img/blog/big-hero.jpg new file mode 100644 index 00000000000..98047927b81 Binary files /dev/null and b/website/static/img/blog/big-hero.jpg differ diff --git a/website/static/img/blog/blue-hero.jpg b/website/static/img/blog/blue-hero.jpg new file mode 100644 index 00000000000..33a9a7ebc97 Binary files /dev/null and b/website/static/img/blog/blue-hero.jpg differ diff --git a/website/static/img/blog/button-android-ios.png b/website/static/img/blog/button-android-ios.png new file mode 100644 index 00000000000..28f7a709113 Binary files /dev/null and b/website/static/img/blog/button-android-ios.png differ diff --git a/website/static/img/blog/dark-hero.png b/website/static/img/blog/dark-hero.png new file mode 100644 index 00000000000..e54bd6598f7 Binary files /dev/null and b/website/static/img/blog/dark-hero.png differ diff --git a/website/static/img/blog/git-upgrade-conflict.png b/website/static/img/blog/git-upgrade-conflict.png new file mode 100644 index 00000000000..ac8a0447310 Binary files /dev/null and b/website/static/img/blog/git-upgrade-conflict.png differ diff --git a/website/static/img/blog/git-upgrade-output.png b/website/static/img/blog/git-upgrade-output.png new file mode 100644 index 00000000000..38b52282455 Binary files /dev/null and b/website/static/img/blog/git-upgrade-output.png differ diff --git a/website/static/img/blog/hmr-architecture.png b/website/static/img/blog/hmr-architecture.png new file mode 100644 index 00000000000..2b19d78c82e Binary files /dev/null and b/website/static/img/blog/hmr-architecture.png differ diff --git a/website/static/img/blog/hmr-diamond.png b/website/static/img/blog/hmr-diamond.png new file mode 100644 index 00000000000..bb70c8805dd Binary files /dev/null and b/website/static/img/blog/hmr-diamond.png differ diff --git a/website/static/img/blog/hmr-log.png b/website/static/img/blog/hmr-log.png new file mode 100644 index 00000000000..945f8f7c815 Binary files /dev/null and b/website/static/img/blog/hmr-log.png differ diff --git a/website/static/img/blog/hmr-proxy.png b/website/static/img/blog/hmr-proxy.png new file mode 100644 index 00000000000..86b74f858a4 Binary files /dev/null and b/website/static/img/blog/hmr-proxy.png differ diff --git a/website/static/img/blog/hmr-step.png b/website/static/img/blog/hmr-step.png new file mode 100644 index 00000000000..963b571736a Binary files /dev/null and b/website/static/img/blog/hmr-step.png differ diff --git a/website/static/img/blog/rnmsf-august-2016-airbnb.jpg b/website/static/img/blog/rnmsf-august-2016-airbnb.jpg new file mode 100644 index 00000000000..bbbc28957fb Binary files /dev/null and b/website/static/img/blog/rnmsf-august-2016-airbnb.jpg differ diff --git a/website/static/img/blog/rnmsf-august-2016-docs.jpg b/website/static/img/blog/rnmsf-august-2016-docs.jpg new file mode 100644 index 00000000000..a89b25fc26e Binary files /dev/null and b/website/static/img/blog/rnmsf-august-2016-docs.jpg differ diff --git a/website/static/img/blog/rnmsf-august-2016-hero.jpg b/website/static/img/blog/rnmsf-august-2016-hero.jpg new file mode 100644 index 00000000000..bd006c916a6 Binary files /dev/null and b/website/static/img/blog/rnmsf-august-2016-hero.jpg differ diff --git a/website/static/img/blog/rnmsf-august-2016-netflix.jpg b/website/static/img/blog/rnmsf-august-2016-netflix.jpg new file mode 100644 index 00000000000..2ee4f0d8deb Binary files /dev/null and b/website/static/img/blog/rnmsf-august-2016-netflix.jpg differ diff --git a/website/static/img/blog/rtl-ama-android-hebrew.png b/website/static/img/blog/rtl-ama-android-hebrew.png new file mode 100644 index 00000000000..3d371c3b41d Binary files /dev/null and b/website/static/img/blog/rtl-ama-android-hebrew.png differ diff --git a/website/static/img/blog/rtl-ama-ios-arabic.png b/website/static/img/blog/rtl-ama-ios-arabic.png new file mode 100644 index 00000000000..949f6a555ed Binary files /dev/null and b/website/static/img/blog/rtl-ama-ios-arabic.png differ diff --git a/website/static/img/blog/rtl-demo-forcertl.png b/website/static/img/blog/rtl-demo-forcertl.png new file mode 100644 index 00000000000..fc6c3167f7c Binary files /dev/null and b/website/static/img/blog/rtl-demo-forcertl.png differ diff --git a/website/static/img/blog/rtl-demo-icon-ltr.png b/website/static/img/blog/rtl-demo-icon-ltr.png new file mode 100644 index 00000000000..ed3fe429fc2 Binary files /dev/null and b/website/static/img/blog/rtl-demo-icon-ltr.png differ diff --git a/website/static/img/blog/rtl-demo-icon-rtl.png b/website/static/img/blog/rtl-demo-icon-rtl.png new file mode 100644 index 00000000000..13113b0b72d Binary files /dev/null and b/website/static/img/blog/rtl-demo-icon-rtl.png differ diff --git a/website/static/img/blog/rtl-demo-listitem-ltr.png b/website/static/img/blog/rtl-demo-listitem-ltr.png new file mode 100644 index 00000000000..5b1718d7923 Binary files /dev/null and b/website/static/img/blog/rtl-demo-listitem-ltr.png differ diff --git a/website/static/img/blog/rtl-demo-listitem-rtl.png b/website/static/img/blog/rtl-demo-listitem-rtl.png new file mode 100644 index 00000000000..c36d3548a14 Binary files /dev/null and b/website/static/img/blog/rtl-demo-listitem-rtl.png differ diff --git a/website/static/img/blog/rtl-demo-swipe-ltr.png b/website/static/img/blog/rtl-demo-swipe-ltr.png new file mode 100644 index 00000000000..00369b7a722 Binary files /dev/null and b/website/static/img/blog/rtl-demo-swipe-ltr.png differ diff --git a/website/static/img/blog/rtl-demo-swipe-rtl.png b/website/static/img/blog/rtl-demo-swipe-rtl.png new file mode 100644 index 00000000000..db1973fc0bd Binary files /dev/null and b/website/static/img/blog/rtl-demo-swipe-rtl.png differ diff --git a/website/static/img/blog/rtl-rn-core-updates.png b/website/static/img/blog/rtl-rn-core-updates.png new file mode 100644 index 00000000000..0827e73cd87 Binary files /dev/null and b/website/static/img/blog/rtl-rn-core-updates.png differ diff --git a/website/static/img/blog/yarn-rncli.png b/website/static/img/blog/yarn-rncli.png new file mode 100644 index 00000000000..7c935161b20 Binary files /dev/null and b/website/static/img/blog/yarn-rncli.png differ diff --git a/website/static/img/chrome_breakpoint.png b/website/static/img/chrome_breakpoint.png new file mode 100644 index 00000000000..d37c9538b03 Binary files /dev/null and b/website/static/img/chrome_breakpoint.png differ diff --git a/website/static/img/favicon.png b/website/static/img/favicon.png new file mode 100644 index 00000000000..22c120d09b2 Binary files /dev/null and b/website/static/img/favicon.png differ diff --git a/website/static/img/header_logo.png b/website/static/img/header_logo.png new file mode 100644 index 00000000000..8858ffa29da Binary files /dev/null and b/website/static/img/header_logo.png differ diff --git a/website/static/img/hitslop.mp4 b/website/static/img/hitslop.mp4 new file mode 100644 index 00000000000..56177bcf781 Binary files /dev/null and b/website/static/img/hitslop.mp4 differ diff --git a/website/static/img/keyboardavoidingview.mp4 b/website/static/img/keyboardavoidingview.mp4 new file mode 100644 index 00000000000..526a36d04e5 Binary files /dev/null and b/website/static/img/keyboardavoidingview.mp4 differ diff --git a/website/static/img/opengraph.png b/website/static/img/opengraph.png new file mode 100644 index 00000000000..437433e9afa Binary files /dev/null and b/website/static/img/opengraph.png differ diff --git a/website/static/img/oss_logo.png b/website/static/img/oss_logo.png new file mode 100644 index 00000000000..8183e289b13 Binary files /dev/null and b/website/static/img/oss_logo.png differ diff --git a/website/static/img/react-native-add-react-native-integration-example-high-scores.png b/website/static/img/react-native-add-react-native-integration-example-high-scores.png new file mode 100644 index 00000000000..6d07707ba86 Binary files /dev/null and b/website/static/img/react-native-add-react-native-integration-example-high-scores.png differ diff --git a/website/static/img/react-native-add-react-native-integration-example-home-screen.png b/website/static/img/react-native-add-react-native-integration-example-home-screen.png new file mode 100644 index 00000000000..2b1b8b28735 Binary files /dev/null and b/website/static/img/react-native-add-react-native-integration-example-home-screen.png differ diff --git a/website/static/img/react-native-add-react-native-integration-link.png b/website/static/img/react-native-add-react-native-integration-link.png new file mode 100644 index 00000000000..3d89eaf020a Binary files /dev/null and b/website/static/img/react-native-add-react-native-integration-link.png differ diff --git a/website/static/img/react-native-add-react-native-integration-wire-up.png b/website/static/img/react-native-add-react-native-integration-wire-up.png new file mode 100644 index 00000000000..43d2add57ba Binary files /dev/null and b/website/static/img/react-native-add-react-native-integration-wire-up.png differ diff --git a/website/static/img/react-native-android-studio-additional-installs-linux.png b/website/static/img/react-native-android-studio-additional-installs-linux.png new file mode 100644 index 00000000000..3a0eda555b5 Binary files /dev/null and b/website/static/img/react-native-android-studio-additional-installs-linux.png differ diff --git a/website/static/img/react-native-android-studio-additional-installs.png b/website/static/img/react-native-android-studio-additional-installs.png new file mode 100644 index 00000000000..de32a09e007 Binary files /dev/null and b/website/static/img/react-native-android-studio-additional-installs.png differ diff --git a/website/static/img/react-native-android-studio-android-sdk-build-tools-linux.png b/website/static/img/react-native-android-studio-android-sdk-build-tools-linux.png new file mode 100644 index 00000000000..10391c74108 Binary files /dev/null and b/website/static/img/react-native-android-studio-android-sdk-build-tools-linux.png differ diff --git a/website/static/img/react-native-android-studio-android-sdk-build-tools-windows.png b/website/static/img/react-native-android-studio-android-sdk-build-tools-windows.png new file mode 100644 index 00000000000..600ef3a428a Binary files /dev/null and b/website/static/img/react-native-android-studio-android-sdk-build-tools-windows.png differ diff --git a/website/static/img/react-native-android-studio-android-sdk-build-tools.png b/website/static/img/react-native-android-studio-android-sdk-build-tools.png new file mode 100644 index 00000000000..a1d80be7a57 Binary files /dev/null and b/website/static/img/react-native-android-studio-android-sdk-build-tools.png differ diff --git a/website/static/img/react-native-android-studio-android-sdk-platforms-linux.png b/website/static/img/react-native-android-studio-android-sdk-platforms-linux.png new file mode 100644 index 00000000000..8c43a493867 Binary files /dev/null and b/website/static/img/react-native-android-studio-android-sdk-platforms-linux.png differ diff --git a/website/static/img/react-native-android-studio-android-sdk-platforms-windows.png b/website/static/img/react-native-android-studio-android-sdk-platforms-windows.png new file mode 100644 index 00000000000..a5cf1758d28 Binary files /dev/null and b/website/static/img/react-native-android-studio-android-sdk-platforms-windows.png differ diff --git a/website/static/img/react-native-android-studio-android-sdk-platforms.png b/website/static/img/react-native-android-studio-android-sdk-platforms.png new file mode 100644 index 00000000000..34407b136d6 Binary files /dev/null and b/website/static/img/react-native-android-studio-android-sdk-platforms.png differ diff --git a/website/static/img/react-native-android-studio-avd-linux.png b/website/static/img/react-native-android-studio-avd-linux.png new file mode 100644 index 00000000000..de5f2542095 Binary files /dev/null and b/website/static/img/react-native-android-studio-avd-linux.png differ diff --git a/website/static/img/react-native-android-studio-avd-windows.png b/website/static/img/react-native-android-studio-avd-windows.png new file mode 100644 index 00000000000..ddc8f4790a7 Binary files /dev/null and b/website/static/img/react-native-android-studio-avd-windows.png differ diff --git a/website/static/img/react-native-android-studio-avd.png b/website/static/img/react-native-android-studio-avd.png new file mode 100644 index 00000000000..74c053b6cf9 Binary files /dev/null and b/website/static/img/react-native-android-studio-avd.png differ diff --git a/website/static/img/react-native-android-studio-configure-sdk-linux.png b/website/static/img/react-native-android-studio-configure-sdk-linux.png new file mode 100644 index 00000000000..8bb9d5fea6f Binary files /dev/null and b/website/static/img/react-native-android-studio-configure-sdk-linux.png differ diff --git a/website/static/img/react-native-android-studio-configure-sdk-windows.png b/website/static/img/react-native-android-studio-configure-sdk-windows.png new file mode 100644 index 00000000000..1adf5cbdb80 Binary files /dev/null and b/website/static/img/react-native-android-studio-configure-sdk-windows.png differ diff --git a/website/static/img/react-native-android-studio-configure-sdk.png b/website/static/img/react-native-android-studio-configure-sdk.png new file mode 100644 index 00000000000..acfe1f30c8c Binary files /dev/null and b/website/static/img/react-native-android-studio-configure-sdk.png differ diff --git a/website/static/img/react-native-android-studio-custom-install-linux.png b/website/static/img/react-native-android-studio-custom-install-linux.png new file mode 100644 index 00000000000..4410948cf84 Binary files /dev/null and b/website/static/img/react-native-android-studio-custom-install-linux.png differ diff --git a/website/static/img/react-native-android-studio-custom-install-windows.png b/website/static/img/react-native-android-studio-custom-install-windows.png new file mode 100644 index 00000000000..7ed385a00e7 Binary files /dev/null and b/website/static/img/react-native-android-studio-custom-install-windows.png differ diff --git a/website/static/img/react-native-android-studio-custom-install.png b/website/static/img/react-native-android-studio-custom-install.png new file mode 100644 index 00000000000..01ab7b2ac01 Binary files /dev/null and b/website/static/img/react-native-android-studio-custom-install.png differ diff --git a/website/static/img/react-native-android-studio-kvm-linux.png b/website/static/img/react-native-android-studio-kvm-linux.png new file mode 100644 index 00000000000..dab081084e6 Binary files /dev/null and b/website/static/img/react-native-android-studio-kvm-linux.png differ diff --git a/website/static/img/react-native-android-studio-no-virtual-device-windows.png b/website/static/img/react-native-android-studio-no-virtual-device-windows.png new file mode 100644 index 00000000000..933a583f03d Binary files /dev/null and b/website/static/img/react-native-android-studio-no-virtual-device-windows.png differ diff --git a/website/static/img/react-native-android-studio-verify-installs-windows.png b/website/static/img/react-native-android-studio-verify-installs-windows.png new file mode 100644 index 00000000000..8f0cf1b2e20 Binary files /dev/null and b/website/static/img/react-native-android-studio-verify-installs-windows.png differ diff --git a/website/static/img/react-native-android-tools-environment-variable-windows.png b/website/static/img/react-native-android-tools-environment-variable-windows.png new file mode 100644 index 00000000000..5ddeb614977 Binary files /dev/null and b/website/static/img/react-native-android-tools-environment-variable-windows.png differ diff --git a/website/static/img/react-native-sdk-platforms.png b/website/static/img/react-native-sdk-platforms.png new file mode 100644 index 00000000000..51d0317cfac Binary files /dev/null and b/website/static/img/react-native-sdk-platforms.png differ diff --git a/website/static/img/react-native-sorry-not-supported.png b/website/static/img/react-native-sorry-not-supported.png new file mode 100644 index 00000000000..8848f4cdc6c Binary files /dev/null and b/website/static/img/react-native-sorry-not-supported.png differ diff --git a/website/static/img/ripple.mp4 b/website/static/img/ripple.mp4 new file mode 100644 index 00000000000..f20afe9f798 Binary files /dev/null and b/website/static/img/ripple.mp4 differ diff --git a/website/static/img/search.png b/website/static/img/search.png new file mode 100644 index 00000000000..222fb660dae Binary files /dev/null and b/website/static/img/search.png differ diff --git a/website/static/img/showcase/adsmanager.png b/website/static/img/showcase/adsmanager.png new file mode 100644 index 00000000000..92bd3577971 Binary files /dev/null and b/website/static/img/showcase/adsmanager.png differ diff --git a/website/static/img/showcase/airbnb.png b/website/static/img/showcase/airbnb.png new file mode 100644 index 00000000000..d677e02008f Binary files /dev/null and b/website/static/img/showcase/airbnb.png differ diff --git a/website/static/img/showcase/artsy.png b/website/static/img/showcase/artsy.png new file mode 100644 index 00000000000..738604bd8e6 Binary files /dev/null and b/website/static/img/showcase/artsy.png differ diff --git a/website/static/img/showcase/baidu.png b/website/static/img/showcase/baidu.png new file mode 100644 index 00000000000..b92cc258411 Binary files /dev/null and b/website/static/img/showcase/baidu.png differ diff --git a/website/static/img/showcase/bloomberg.png b/website/static/img/showcase/bloomberg.png new file mode 100644 index 00000000000..3dbf0967dee Binary files /dev/null and b/website/static/img/showcase/bloomberg.png differ diff --git a/website/static/img/showcase/cbssports.png b/website/static/img/showcase/cbssports.png new file mode 100644 index 00000000000..be0abf45e51 Binary files /dev/null and b/website/static/img/showcase/cbssports.png differ diff --git a/website/static/img/showcase/chop.png b/website/static/img/showcase/chop.png new file mode 100644 index 00000000000..ef736b2e641 Binary files /dev/null and b/website/static/img/showcase/chop.png differ diff --git a/website/static/img/showcase/delivery.png b/website/static/img/showcase/delivery.png new file mode 100644 index 00000000000..e8e245d499b Binary files /dev/null and b/website/static/img/showcase/delivery.png differ diff --git a/website/static/img/showcase/discord.png b/website/static/img/showcase/discord.png new file mode 100644 index 00000000000..4ff03653270 Binary files /dev/null and b/website/static/img/showcase/discord.png differ diff --git a/website/static/img/showcase/f8.png b/website/static/img/showcase/f8.png new file mode 100644 index 00000000000..61bc7c59eba Binary files /dev/null and b/website/static/img/showcase/f8.png differ diff --git a/website/static/img/showcase/facebook.png b/website/static/img/showcase/facebook.png new file mode 100644 index 00000000000..d2cecafb200 Binary files /dev/null and b/website/static/img/showcase/facebook.png differ diff --git a/website/static/img/showcase/flare.png b/website/static/img/showcase/flare.png new file mode 100644 index 00000000000..3e80ebd17a6 Binary files /dev/null and b/website/static/img/showcase/flare.png differ diff --git a/website/static/img/showcase/gyroscope.png b/website/static/img/showcase/gyroscope.png new file mode 100644 index 00000000000..076b83308b2 Binary files /dev/null and b/website/static/img/showcase/gyroscope.png differ diff --git a/website/static/img/showcase/huiseoul.png b/website/static/img/showcase/huiseoul.png new file mode 100644 index 00000000000..292f8777c9f Binary files /dev/null and b/website/static/img/showcase/huiseoul.png differ diff --git a/website/static/img/showcase/instagram.png b/website/static/img/showcase/instagram.png new file mode 100644 index 00000000000..598ce96ff7e Binary files /dev/null and b/website/static/img/showcase/instagram.png differ diff --git a/website/static/img/showcase/jdcom.png b/website/static/img/showcase/jdcom.png new file mode 100644 index 00000000000..6a9ff680882 Binary files /dev/null and b/website/static/img/showcase/jdcom.png differ diff --git a/website/static/img/showcase/list.png b/website/static/img/showcase/list.png new file mode 100644 index 00000000000..8885cd0b7e9 Binary files /dev/null and b/website/static/img/showcase/list.png differ diff --git a/website/static/img/showcase/qq.png b/website/static/img/showcase/qq.png new file mode 100644 index 00000000000..37539b55b75 Binary files /dev/null and b/website/static/img/showcase/qq.png differ diff --git a/website/static/img/showcase/skype.png b/website/static/img/showcase/skype.png new file mode 100644 index 00000000000..115d200cc53 Binary files /dev/null and b/website/static/img/showcase/skype.png differ diff --git a/website/static/img/showcase/soundcloud_pulse.jpg b/website/static/img/showcase/soundcloud_pulse.jpg new file mode 100644 index 00000000000..9246f63b040 Binary files /dev/null and b/website/static/img/showcase/soundcloud_pulse.jpg differ diff --git a/website/static/img/showcase/tesla.png b/website/static/img/showcase/tesla.png new file mode 100644 index 00000000000..d63f98b5d15 Binary files /dev/null and b/website/static/img/showcase/tesla.png differ diff --git a/website/static/img/showcase/townske.png b/website/static/img/showcase/townske.png new file mode 100644 index 00000000000..c93b51d6893 Binary files /dev/null and b/website/static/img/showcase/townske.png differ diff --git a/website/static/img/showcase/ubereats.jpg b/website/static/img/showcase/ubereats.jpg new file mode 100644 index 00000000000..74cc000c856 Binary files /dev/null and b/website/static/img/showcase/ubereats.jpg differ diff --git a/website/static/img/showcase/vogue.jpeg b/website/static/img/showcase/vogue.jpeg new file mode 100644 index 00000000000..c7ad3315ab0 Binary files /dev/null and b/website/static/img/showcase/vogue.jpeg differ diff --git a/website/static/img/showcase/wix.jpg b/website/static/img/showcase/wix.jpg new file mode 100644 index 00000000000..8c634b001d6 Binary files /dev/null and b/website/static/img/showcase/wix.jpg differ diff --git a/website/static/img/showcase/wmt_spark.jpg b/website/static/img/showcase/wmt_spark.jpg new file mode 100644 index 00000000000..8eef75934c4 Binary files /dev/null and b/website/static/img/showcase/wmt_spark.jpg differ diff --git a/website/static/img/survey.png b/website/static/img/survey.png new file mode 100644 index 00000000000..af025067da2 Binary files /dev/null and b/website/static/img/survey.png differ diff --git a/website/static/img/textinput.mp4 b/website/static/img/textinput.mp4 new file mode 100644 index 00000000000..cdc2c4820ea Binary files /dev/null and b/website/static/img/textinput.mp4 differ diff --git a/website/static/img/uiexplorer_main_android.png b/website/static/img/uiexplorer_main_android.png new file mode 100644 index 00000000000..d510e7aded3 Binary files /dev/null and b/website/static/img/uiexplorer_main_android.png differ diff --git a/website/static/img/uiexplorer_main_ios.png b/website/static/img/uiexplorer_main_ios.png new file mode 100644 index 00000000000..2274ef2dfb4 Binary files /dev/null and b/website/static/img/uiexplorer_main_ios.png differ diff --git a/website/static/js/codeblocks.js b/website/static/js/codeblocks.js new file mode 100644 index 00000000000..08d23af981b --- /dev/null +++ b/website/static/js/codeblocks.js @@ -0,0 +1,112 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ + +/* eslint-disable module-strict */ + +(function() { + "use strict"; + if (typeof document === "undefined") { + // Not on browser + return; + } + + document.addEventListener("DOMContentLoaded", init); + + function init() { + var mobile = isMobile(); + + var webPlayerList = document.querySelectorAll(".web-player"); + + // Either show interactive or static code block, depending on desktop or mobile + for (var i = 0; i < webPlayerList.length; ++i) { + webPlayerList[i].classList.add(mobile ? "mobile" : "desktop"); + + if (!mobile) { + // Determine location to look up required assets + var assetRoot = encodeURIComponent( + document.location.origin + "/react-native" + ); + + // Set iframe src. Do this dynamically so the iframe never loads on mobile. + var iframe = webPlayerList[i].querySelector("iframe"); + iframe.src = + iframe.getAttribute("data-src") + "&assetRoot=" + assetRoot; + } + } + + window.ExpoSnack && window.ExpoSnack.initialize(); + + var snackPlayerList = document.querySelectorAll(".snack-player"); + + // Either show interactive or static code block, depending on desktop or mobile + for (var i = 0; i < snackPlayerList.length; ++i) { + var snackPlayer = snackPlayerList[i]; + var snackDesktopPlayer = snackPlayer.querySelectorAll( + ".desktop-friendly-snack" + )[0]; + var plainCodeExample = snackPlayer.querySelectorAll( + ".mobile-friendly-snack" + )[0]; + + if (mobile) { + snackDesktopPlayer.remove(); + plainCodeExample.style.display = "block"; + } else { + plainCodeExample.remove(); + } + } + + var backdrop = document.querySelector(".modal-backdrop"); + if (!backdrop) { + return; + } + + var modalButtonOpenList = document.querySelectorAll(".modal-button-open"); + var modalButtonClose = document.querySelector(".modal-button-close"); + + backdrop.addEventListener("click", hideModal); + modalButtonClose.addEventListener("click", hideModal); + + // Bind event to NodeList items + for (var i = 0; i < modalButtonOpenList.length; ++i) { + modalButtonOpenList[i].addEventListener("click", showModal); + } + } + + function showModal(e) { + var backdrop = document.querySelector(".modal-backdrop"); + if (!backdrop) { + return; + } + + var modal = document.querySelector(".modal"); + + backdrop.classList.add("modal-open"); + modal.classList.add("modal-open"); + } + + function hideModal(e) { + var backdrop = document.querySelector(".modal-backdrop"); + if (!backdrop) { + return; + } + + var modal = document.querySelector(".modal"); + + backdrop.classList.remove("modal-open"); + modal.classList.remove("modal-open"); + } + + // Primitive mobile detection + function isMobile() { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( + navigator.userAgent + ); + } +})(); diff --git a/website/versioned_docs/version-0.10/modal.md b/website/versioned_docs/version-0.10/modal.md new file mode 100644 index 00000000000..6993828f293 --- /dev/null +++ b/website/versioned_docs/version-0.10/modal.md @@ -0,0 +1,11 @@ +--- +id: version-0.10-modal +title: Modal +original_id: modal +--- + + +--- + +# Reference + diff --git a/website/versioned_docs/version-0.10/text.md b/website/versioned_docs/version-0.10/text.md new file mode 100644 index 00000000000..b52665ffdb3 --- /dev/null +++ b/website/versioned_docs/version-0.10/text.md @@ -0,0 +1,256 @@ +--- +id: version-0.10-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`allowFontScaling`](text.md#allowfontscaling) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + +### Methods + +- [`onStartShouldSetResponder`](text.md#onstartshouldsetresponder) +- [`handleResponderTerminationRequest`](text.md#handleresponderterminationrequest) +- [`handleResponderGrant`](text.md#handlerespondergrant) +- [`handleResponderMove`](text.md#handlerespondermove) +- [`handleResponderRelease`](text.md#handleresponderrelease) +- [`handleResponderTerminate`](text.md#handleresponderterminate) + + + + +--- + +# Reference + +## Props + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an elipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS. + + - **`color`**: string + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`fontFamily`**: string + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: string (_iOS_) + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + +## Methods + +### `onStartShouldSetResponder()` + +```javascript +onStartShouldSetResponder(): +``` + + + +--- + +### `handleResponderTerminationRequest()` + +```javascript +handleResponderTerminationRequest(): +``` + + + +--- + +### `handleResponderGrant()` + +```javascript +handleResponderGrant(e: SyntheticEvent, dispatchID: string) +``` + + + +--- + +### `handleResponderMove()` + +```javascript +handleResponderMove(e: SyntheticEvent) +``` + + + +--- + +### `handleResponderRelease()` + +```javascript +handleResponderRelease(e: SyntheticEvent) +``` + + + +--- + +### `handleResponderTerminate()` + +```javascript +handleResponderTerminate(e: SyntheticEvent) +``` + + + diff --git a/website/versioned_docs/version-0.10/textinput.md b/website/versioned_docs/version-0.10/textinput.md new file mode 100644 index 00000000000..36b7f64ea06 --- /dev/null +++ b/website/versioned_docs/version-0.10/textinput.md @@ -0,0 +1,530 @@ +--- +id: version-0.10-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with multiline={true/false}: + + var onlyMultiline = { + onSelectionChange: true, // not supported in Open Source yet + onTextInput: true, // not supported in Open Source yet + children: true, + }; + + var notMultiline = { + onSubmitEditing: true, + }; + +### Props + +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`textAlign`](textinput.md#textalign) +- [`value`](textinput.md#value) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`maxLength`](textinput.md#maxlength) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. +@platorm android + +| Type | Required | +| - | - | +| enum('start', 'center', 'end') | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.11/drawerlayoutandroid.md b/website/versioned_docs/version-0.11/drawerlayoutandroid.md new file mode 100644 index 00000000000..7d04b9434a6 --- /dev/null +++ b/website/versioned_docs/version-0.11/drawerlayoutandroid.md @@ -0,0 +1,190 @@ +--- +id: version-0.11-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + I'm in the Drawer! + ); + return ( + navigationView}> + Hello + World! + + ); +}, +``` + +### Props + +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interation with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.11/image.md b/website/versioned_docs/version-0.11/image.md new file mode 100644 index 00000000000..760ad2a7948 --- /dev/null +++ b/website/versioned_docs/version-0.11/image.md @@ -0,0 +1,278 @@ +--- +id: version-0.11-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`capInsets`](image.md#capinsets) +- [`onLayout`](image.md#onlayout) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`testID`](image.md#testid) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`resizeMode`](image.md#resizemode) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onLoad`](image.md#onload) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`onProgress`](image.md#onprogress) + + + + + + +--- + +# Reference + +## Props + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `source` + +`uri` is 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 `require('image!name')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`backgroundColor`**: string + + - **`borderColor`**: string + + - **`borderRadius`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: string + + + +--- + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `defaultSource` + +A static image to display while downloading the final image off the +network. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string} | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onLoad` + +Invoked when load completes successfully + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onLoadStart` + +Invoked on load start + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.11/layoutanimation.md b/website/versioned_docs/version-0.11/layoutanimation.md new file mode 100644 index 00000000000..86665d2a713 --- /dev/null +++ b/website/versioned_docs/version-0.11/layoutanimation.md @@ -0,0 +1,103 @@ +--- +id: version-0.11-layoutanimation +title: LayoutAnimation +original_id: layoutanimation +--- + +Automatically animates views to their new positions when the +next layout happens. + +A common way to use this API is to call `LayoutAnimation.configureNext` +before calling `setState`. + + +### Methods + +- [`configureNext`](layoutanimation.md#configurenext) +- [`create`](layoutanimation.md#create) + + +### Properties + +- [`Types`](layoutanimation.md#types) +- [`Properties`](layoutanimation.md#properties) +- [`configChecker`](layoutanimation.md#configchecker) +- [`Presets`](layoutanimation.md#presets) +- [`easeInEaseOut`](layoutanimation.md#easeineaseout) +- [`linear`](layoutanimation.md#linear) +- [`spring`](layoutanimation.md#spring) + + + + +--- + +# Reference + +## Methods + +### `configureNext()` + +```javascript +static configureNext(config, onAnimationDidEnd?) +``` + + +Schedules an animation to happen on the next layout. + +@param config Specifies animation properties: + + - `duration` in milliseconds + - `create`, config for animating in new views (see `Anim` type) + - `update`, config for animating views that have been updated +(see `Anim` type) + +@param onAnimationDidEnd Called when the animation finished. +Only supported on iOS. +@param onError Called on error. Only supported on iOS. + + + + +--- + +### `create()` + +```javascript +static create(duration, type, creationProp) +``` + + +Helper for creating a config for `configureNext`. + + + + +## Properties + + + +--- + + + +--- + + + +--- + + + +--- + + + +--- + + + +--- + + + diff --git a/website/versioned_docs/version-0.11/modal.md b/website/versioned_docs/version-0.11/modal.md new file mode 100644 index 00000000000..6741a2430a8 --- /dev/null +++ b/website/versioned_docs/version-0.11/modal.md @@ -0,0 +1,47 @@ +--- +id: version-0.11-modal +title: Modal +original_id: modal +--- +### Props + +- [`animated`](modal.md#animated) +- [`transparent`](modal.md#transparent) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.11/progressbarandroid.md b/website/versioned_docs/version-0.11/progressbarandroid.md new file mode 100644 index 00000000000..c772a70009f --- /dev/null +++ b/website/versioned_docs/version-0.11/progressbarandroid.md @@ -0,0 +1,76 @@ +--- +id: version-0.11-progressbarandroid +title: ProgressBarAndroid +original_id: progressbarandroid +--- +React component that wraps the Android-only `ProgressBar`. This component is used to indicate +that the app is loading or there is some activity in the app. + +Example: + +``` +render: function() { + var progressBar = + + + ; + + return ( + + ); +}, +``` + +### Props + +- [`styleAttr`](progressbarandroid.md#styleattr) +- [`testID`](progressbarandroid.md#testid) + + + + + + +--- + +# Reference + +## Props + +### `styleAttr` + +Style of the ProgressBar. One of: + +- Horizontal +- Small +- Large +- Inverse +- SmallInverse +- LargeInverse + +| Type | Required | +| - | - | +| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.11/scrollview.md b/website/versioned_docs/version-0.11/scrollview.md new file mode 100644 index 00000000000..a34fdfcd25a --- /dev/null +++ b/website/versioned_docs/version-0.11/scrollview.md @@ -0,0 +1,614 @@ +--- +id: version-0.11-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +- [`centerContent`](scrollview.md#centercontent) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onScroll`](scrollview.md#onscroll) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`horizontal`](scrollview.md#horizontal) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be contolled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: string + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderColor`**: string + + - **`borderLeftColor`**: string + + - **`borderRadius`**: number + + - **`borderRightColor`**: string + + - **`backgroundColor`**: string + + - **`borderTopColor`**: string + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`shadowColor`**: string + + - **`shadowOffset`**: object: {width: number,height: number} + + - **`shadowOpacity`**: number + + - **`shadowRadius`**: number + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([destY]: number, [destX]: number) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo([destY]: number, [destX]: number) +``` + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Event) +``` + + + diff --git a/website/versioned_docs/version-0.11/toastandroid.md b/website/versioned_docs/version-0.11/toastandroid.md new file mode 100644 index 00000000000..264e2127c60 --- /dev/null +++ b/website/versioned_docs/version-0.11/toastandroid.md @@ -0,0 +1,48 @@ +--- +id: version-0.11-toastandroid +title: ToastAndroid +original_id: toastandroid +--- + +This exposes the native ToastAndroid module as a JS module. This has a function 'showText' +which takes the following parameters: + +1. String message: A string with the text to toast +2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG + + +### Methods + +- [`show`](toastandroid.md#show) + + +### Properties + +- [`SHORT`](toastandroid.md#short) +- [`LONG`](toastandroid.md#long) + + + + +--- + +# Reference + +## Methods + +### `show()` + +```javascript +static show(message, duration) +``` + + + +## Properties + + + +--- + + + diff --git a/website/versioned_docs/version-0.11/toolbarandroid.md b/website/versioned_docs/version-0.11/toolbarandroid.md new file mode 100644 index 00000000000..8a5a534e95d --- /dev/null +++ b/website/versioned_docs/version-0.11/toolbarandroid.md @@ -0,0 +1,198 @@ +--- +id: version-0.11-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +- [`actions`](toolbarandroid.md#actions) +- [`logo`](toolbarandroid.md#logo) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('image!some_icon')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| array of object: {title: string,icon: Image.propTypes.source,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passeed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.11/touchablenativefeedback.md b/website/versioned_docs/version-0.11/touchablenativefeedback.md new file mode 100644 index 00000000000..dd78aa9728d --- /dev/null +++ b/website/versioned_docs/version-0.11/touchablenativefeedback.md @@ -0,0 +1,115 @@ +--- +id: version-0.11-touchablenativefeedback +title: TouchableNativeFeedback +original_id: touchablenativefeedback +--- +A wrapper for making views respond properly to touches (Android only). +On Android this component uses native state drawable to display touch +feedback. At the moment it only supports having a single View instance as a +child node, as it's implemented by replacing that View with another instance +of RCTView node with some additional properties set. + +Background drawable of native feedback touchable can be customized with +`background` property. + +Example: + +``` +renderButton: function() { + return ( + + + Button + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`background`](touchablenativefeedback.md#background) + + + + +### Methods + +- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) +- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) +- [`Ripple`](touchablenativefeedback.md#ripple) + + + + +--- + +# Reference + +## Props + +### `background` + +Determines the type of background drawable that's going to be used to +display feedback. It takes an object with `type` property and extra data +depending on the `type`. It's recommended to use one of the following +static methods to generate that dictionary: + +1) TouchableNativeFeedback.SelectableBackground() - will create object +that represents android theme's default background for selectable +elements (?android:attr/selectableItemBackground) + +2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create +object that represent android theme's default background for borderless +selectable elements (?android:attr/selectableItemBackgroundBorderless). +Available on android API level 21+ + +3) TouchableNativeFeedback.RippleAndroid(color, borderless) - will create +object that represents ripple drawable with specified color (as a +string). If property `borderless` evaluates to true the ripple will +render outside of the view bounds (see native actionbar buttons as an +example of that behavior). This background type is available on Android +API level 21+ + +| Type | Required | +| - | - | +| backgroundPropType | No | + + + + + + +## Methods + +### `SelectableBackground()` + +```javascript +static SelectableBackground() +``` + + + +--- + +### `SelectableBackgroundBorderless()` + +```javascript +static SelectableBackgroundBorderless() +``` + + + +--- + +### `Ripple()` + +```javascript +static Ripple(color, borderless) +``` + + + diff --git a/website/versioned_docs/version-0.12/animated.md b/website/versioned_docs/version-0.12/animated.md new file mode 100644 index 00000000000..ee55e49741d --- /dev/null +++ b/website/versioned_docs/version-0.12/animated.md @@ -0,0 +1,606 @@ +--- +id: version-0.12-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1}, // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targetted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](http://facebook.github.io/react-native/animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performace way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={this.AnimatedEvent( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: this.AnimatedEvent([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and udpate all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations or whathaveyou. This is useful because there is no way to +syncronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.12/drawerlayoutandroid.md b/website/versioned_docs/version-0.12/drawerlayoutandroid.md new file mode 100644 index 00000000000..d12a6fbf883 --- /dev/null +++ b/website/versioned_docs/version-0.12/drawerlayoutandroid.md @@ -0,0 +1,190 @@ +--- +id: version-0.12-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + I'm in the Drawer! + ); + return ( + navigationView}> + Hello + World! + + ); +}, +``` + +### Props + +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interation with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.12/easing.md b/website/versioned_docs/version-0.12/easing.md new file mode 100644 index 00000000000..a99331a8288 --- /dev/null +++ b/website/versioned_docs/version-0.12/easing.md @@ -0,0 +1,227 @@ +--- +id: version-0.12-easing +title: Easing +original_id: easing +--- + +This class implements common easing functions. The math is pretty obscure, +but this cool website has nice visual illustrations of what they represent: +http://xaedes.de/dev/transitions/ + + +### Methods + +- [`step0`](easing.md#step0) +- [`step1`](easing.md#step1) +- [`linear`](easing.md#linear) +- [`ease`](easing.md#ease) +- [`quad`](easing.md#quad) +- [`cubic`](easing.md#cubic) +- [`poly`](easing.md#poly) +- [`sin`](easing.md#sin) +- [`circle`](easing.md#circle) +- [`exp`](easing.md#exp) +- [`elastic`](easing.md#elastic) +- [`back`](easing.md#back) +- [`bounce`](easing.md#bounce) +- [`bezier`](easing.md#bezier) +- [`in`](easing.md#in) +- [`out`](easing.md#out) +- [`inOut`](easing.md#inout) + + + + +--- + +# Reference + +## Methods + +### `step0()` + +```javascript +static step0(n) +``` + + + +--- + +### `step1()` + +```javascript +static step1(n) +``` + + + +--- + +### `linear()` + +```javascript +static linear(t) +``` + + + +--- + +### `ease()` + +```javascript +static ease(t) +``` + + + +--- + +### `quad()` + +```javascript +static quad(t) +``` + + + +--- + +### `cubic()` + +```javascript +static cubic(t) +``` + + + +--- + +### `poly()` + +```javascript +static poly(n) +``` + + + +--- + +### `sin()` + +```javascript +static sin(t) +``` + + + +--- + +### `circle()` + +```javascript +static circle(t) +``` + + + +--- + +### `exp()` + +```javascript +static exp(t) +``` + + + +--- + +### `elastic()` + +```javascript +static elastic(bounciness) +``` + + +A simple elastic interaction, similar to a spring. Default bounciness +is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot +at all, and bounciness of N > 1 will overshoot about N times. + +Wolfram Plots: + + http://tiny.cc/elastic_b_1 (default bounciness = 1) + http://tiny.cc/elastic_b_3 (bounciness = 3) + + + + +--- + +### `back()` + +```javascript +static back(s) +``` + + + +--- + +### `bounce()` + +```javascript +static bounce(t) +``` + + + +--- + +### `bezier()` + +```javascript +static bezier(x1, y1, x2, y2, epsilon?) +``` + + + +--- + +### `in()` + +```javascript +static in(easing) +``` + + + +--- + +### `out()` + +```javascript +static out(easing) +``` + + +Runs an easing function backwards. + + + + +--- + +### `inOut()` + +```javascript +static inOut(easing) +``` + + +Makes any easing function symmetrical. + + + + diff --git a/website/versioned_docs/version-0.12/imagepickerios.md b/website/versioned_docs/version-0.12/imagepickerios.md new file mode 100644 index 00000000000..50032135a87 --- /dev/null +++ b/website/versioned_docs/version-0.12/imagepickerios.md @@ -0,0 +1,62 @@ +--- +id: version-0.12-imagepickerios +title: ImagePickerIOS +original_id: imagepickerios +--- + + + +### Methods + +- [`canRecordVideos`](imagepickerios.md#canrecordvideos) +- [`canUseCamera`](imagepickerios.md#canusecamera) +- [`openCameraDialog`](imagepickerios.md#opencameradialog) +- [`openSelectDialog`](imagepickerios.md#openselectdialog) + + + + +--- + +# Reference + +## Methods + +### `canRecordVideos()` + +```javascript +static canRecordVideos(callback) +``` + + + +--- + +### `canUseCamera()` + +```javascript +static canUseCamera(callback) +``` + + + +--- + +### `openCameraDialog()` + +```javascript +static openCameraDialog(config, successCallback, cancelCallback) +``` + + + +--- + +### `openSelectDialog()` + +```javascript +static openSelectDialog(config, successCallback, cancelCallback) +``` + + + diff --git a/website/versioned_docs/version-0.12/modal.md b/website/versioned_docs/version-0.12/modal.md new file mode 100644 index 00000000000..8a6f3d157bc --- /dev/null +++ b/website/versioned_docs/version-0.12/modal.md @@ -0,0 +1,61 @@ +--- +id: version-0.12-modal +title: Modal +original_id: modal +--- +### Props + +- [`animated`](modal.md#animated) +- [`onDismiss`](modal.md#ondismiss) +- [`transparent`](modal.md#transparent) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onDismiss` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.12/scrollview.md b/website/versioned_docs/version-0.12/scrollview.md new file mode 100644 index 00000000000..f2bd5339b67 --- /dev/null +++ b/website/versioned_docs/version-0.12/scrollview.md @@ -0,0 +1,651 @@ +--- +id: version-0.12-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +- [`contentInset`](scrollview.md#contentinset) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onScroll`](scrollview.md#onscroll) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`horizontal`](scrollview.md#horizontal) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be contolled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: string + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderColor`**: string + + - **`borderLeftColor`**: string + + - **`borderRadius`**: number + + - **`borderRightColor`**: string + + - **`backgroundColor`**: string + + - **`borderTopColor`**: string + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`shadowColor`**: string + + - **`shadowOffset`**: object: {width: number,height: number} + + - **`shadowOpacity`**: number + + - **`shadowRadius`**: number + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([destY]: number, [destX]: number) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo([destY]: number, [destX]: number) +``` + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Event) +``` + + + diff --git a/website/versioned_docs/version-0.12/textinput.md b/website/versioned_docs/version-0.12/textinput.md new file mode 100644 index 00000000000..d58908d8480 --- /dev/null +++ b/website/versioned_docs/version-0.12/textinput.md @@ -0,0 +1,546 @@ +--- +id: version-0.12-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with multiline={true/false}: + + var onlyMultiline = { + onSelectionChange: true, // not supported in Open Source yet + onTextInput: true, // not supported in Open Source yet + children: true, + }; + + var notMultiline = { + onSubmitEditing: true, + }; + +### Props + +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`textAlign`](textinput.md#textalign) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`maxLength`](textinput.md#maxlength) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. +@platorm android + +| Type | Required | +| - | - | +| enum('start', 'center', 'end') | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.12/touchablehighlight.md b/website/versioned_docs/version-0.12/touchablehighlight.md new file mode 100644 index 00000000000..16f1b254397 --- /dev/null +++ b/website/versioned_docs/version-0.12/touchablehighlight.md @@ -0,0 +1,132 @@ +--- +id: version-0.12-touchablehighlight +title: TouchableHighlight +original_id: touchablehighlight +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, which allows +the underlay color to show through, darkening or tinting the view. The +underlay comes from adding a view to the view hierarchy, which can sometimes +cause unwanted visual artifacts if not used correctly, for example if the +backgroundColor of the wrapped view isn't explicitly set to an opaque color. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` +> **NOTE**: TouchableHighlight supports only one child +> +> If you wish to have to have several child components, wrap them in a View. + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchablehighlight.md#activeopacity) +- [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) +- [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) +- [`style`](touchablehighlight.md#style) +- [`underlayColor`](touchablehighlight.md#underlaycolor) + + + + +### Methods + +- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onHideUnderlay` + +Called immediately after the underlay is hidden + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShowUnderlay` + +Called immediately after the underlay is shown + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `underlayColor` + +The color of the underlay that will show through when the touch is +active. + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `computeSyntheticState()` + +```javascript +computeSyntheticState(props) +``` + + + diff --git a/website/versioned_docs/version-0.12/touchablenativefeedback.md b/website/versioned_docs/version-0.12/touchablenativefeedback.md new file mode 100644 index 00000000000..f4cc547e0e1 --- /dev/null +++ b/website/versioned_docs/version-0.12/touchablenativefeedback.md @@ -0,0 +1,115 @@ +--- +id: version-0.12-touchablenativefeedback +title: TouchableNativeFeedback +original_id: touchablenativefeedback +--- +A wrapper for making views respond properly to touches (Android only). +On Android this component uses native state drawable to display touch +feedback. At the moment it only supports having a single View instance as a +child node, as it's implemented by replacing that View with another instance +of RCTView node with some additional properties set. + +Background drawable of native feedback touchable can be customized with +`background` property. + +Example: + +``` +renderButton: function() { + return ( + + + Button + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`background`](touchablenativefeedback.md#background) + + + + +### Methods + +- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) +- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) +- [`Ripple`](touchablenativefeedback.md#ripple) + + + + +--- + +# Reference + +## Props + +### `background` + +Determines the type of background drawable that's going to be used to +display feedback. It takes an object with `type` property and extra data +depending on the `type`. It's recommended to use one of the following +static methods to generate that dictionary: + +1) TouchableNativeFeedback.SelectableBackground() - will create object +that represents android theme's default background for selectable +elements (?android:attr/selectableItemBackground) + +2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create +object that represent android theme's default background for borderless +selectable elements (?android:attr/selectableItemBackgroundBorderless). +Available on android API level 21+ + +3) TouchableNativeFeedback.Ripple(color, borderless) - will create +object that represents ripple drawable with specified color (as a +string). If property `borderless` evaluates to true the ripple will +render outside of the view bounds (see native actionbar buttons as an +example of that behavior). This background type is available on Android +API level 21+ + +| Type | Required | +| - | - | +| backgroundPropType | No | + + + + + + +## Methods + +### `SelectableBackground()` + +```javascript +static SelectableBackground() +``` + + + +--- + +### `SelectableBackgroundBorderless()` + +```javascript +static SelectableBackgroundBorderless() +``` + + + +--- + +### `Ripple()` + +```javascript +static Ripple(color, borderless) +``` + + + diff --git a/website/versioned_docs/version-0.12/touchableopacity.md b/website/versioned_docs/version-0.12/touchableopacity.md new file mode 100644 index 00000000000..66038610442 --- /dev/null +++ b/website/versioned_docs/version-0.12/touchableopacity.md @@ -0,0 +1,70 @@ +--- +id: version-0.12-touchableopacity +title: TouchableOpacity +original_id: touchableopacity +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, dimming it. +This is done without actually changing the view hierarchy, and in general is +easy to add to an app without weird side-effects. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchableopacity.md#activeopacity) + + + + +### Methods + +- [`setOpacityTo`](touchableopacity.md#setopacityto) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + + + +## Methods + +### `setOpacityTo()` + +```javascript +setOpacityTo(value) +``` + + + diff --git a/website/versioned_docs/version-0.12/touchablewithoutfeedback.md b/website/versioned_docs/version-0.12/touchablewithoutfeedback.md new file mode 100644 index 00000000000..86ae9f85a4d --- /dev/null +++ b/website/versioned_docs/version-0.12/touchablewithoutfeedback.md @@ -0,0 +1,180 @@ +--- +id: version-0.12-touchablewithoutfeedback +title: TouchableWithoutFeedback +original_id: touchablewithoutfeedback +--- +Do not use unless you have a very good reason. All the elements that +respond to press should have a visual feedback when touched. This is +one of the primary reason a "web" app doesn't feel "native". + +### Props + +- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) +- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) +- [`accessible`](touchablewithoutfeedback.md#accessible) +- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) +- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) +- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) +- [`onLayout`](touchablewithoutfeedback.md#onlayout) +- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) +- [`onPress`](touchablewithoutfeedback.md#onpress) +- [`onPressIn`](touchablewithoutfeedback.md#onpressin) +- [`onPressOut`](touchablewithoutfeedback.md#onpressout) + + + + + + +--- + +# Reference + +## Props + +### `delayPressOut` + +Delay in ms, from the release of the touch, before onPressOut is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `accessibilityComponentType` + + + +| Type | Required | +| - | - | +| View.AccessibilityComponentType | No | + + + + +--- + +### `accessible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `delayLongPress` + +Delay in ms, from onPressIn, before onLongPress is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressIn` + +Delay in ms, from the start of the touch, before onPressIn is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `accessibilityTraits` + + + +| Type | Required | +| - | - | +| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +Called when the touch is released, but not if cancelled (e.g. by a scroll +that steals the responder lock). + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressIn` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressOut` + + + +| Type | Required | +| - | - | +| function | No | + + + + + + diff --git a/website/versioned_docs/version-0.12/transforms.md b/website/versioned_docs/version-0.12/transforms.md new file mode 100644 index 00000000000..d424ff6f9b6 --- /dev/null +++ b/website/versioned_docs/version-0.12/transforms.md @@ -0,0 +1,47 @@ +--- +id: version-0.12-transforms +title: Transforms +original_id: transforms +--- +### Props + +- [`transform`](transforms.md#transform) +- [`transformMatrix`](transforms.md#transformmatrix) + + + + + + +--- + +# Reference + +## Props + +### `transform` + + + +| Type | Required | +| - | - | +| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | + + + + +--- + +### `transformMatrix` + + + +| Type | Required | +| - | - | +| array of number | No | + + + + + + diff --git a/website/versioned_docs/version-0.13/drawerlayoutandroid.md b/website/versioned_docs/version-0.13/drawerlayoutandroid.md new file mode 100644 index 00000000000..16e9d6c6d9f --- /dev/null +++ b/website/versioned_docs/version-0.13/drawerlayoutandroid.md @@ -0,0 +1,194 @@ +--- +id: version-0.13-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interation with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.13/modal.md b/website/versioned_docs/version-0.13/modal.md new file mode 100644 index 00000000000..39c67e6e858 --- /dev/null +++ b/website/versioned_docs/version-0.13/modal.md @@ -0,0 +1,72 @@ +--- +id: version-0.13-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app. + +### Props + +- [`animated`](modal.md#animated) +- [`onDismiss`](modal.md#ondismiss) +- [`transparent`](modal.md#transparent) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onDismiss` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.13/pushnotificationios.md b/website/versioned_docs/version-0.13/pushnotificationios.md new file mode 100644 index 00000000000..dacad760a9a --- /dev/null +++ b/website/versioned_docs/version-0.13/pushnotificationios.md @@ -0,0 +1,310 @@ +--- +id: version-0.13-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. + + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. + + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instansiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.13/scrollview.md b/website/versioned_docs/version-0.13/scrollview.md new file mode 100644 index 00000000000..bb5e8e1425b --- /dev/null +++ b/website/versioned_docs/version-0.13/scrollview.md @@ -0,0 +1,661 @@ +--- +id: version-0.13-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +- [`contentInset`](scrollview.md#contentinset) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onScroll`](scrollview.md#onscroll) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`horizontal`](scrollview.md#horizontal) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be contolled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: string + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: string + + - **`borderLeftColor`**: string + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`borderRightColor`**: string + + - **`borderRightWidth`**: number + + - **`backgroundColor`**: string + + - **`borderTopColor`**: string + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`shadowColor`**: string + + - **`shadowOffset`**: object: {width: number,height: number} + + - **`shadowOpacity`**: number + + - **`shadowRadius`**: number + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([destY]: number, [destX]: number) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo([destY]: number, [destX]: number) +``` + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Event) +``` + + + diff --git a/website/versioned_docs/version-0.13/switch.md b/website/versioned_docs/version-0.13/switch.md new file mode 100644 index 00000000000..5282e7355ab --- /dev/null +++ b/website/versioned_docs/version-0.13/switch.md @@ -0,0 +1,124 @@ +--- +id: version-0.13-switch +title: Switch +original_id: switch +--- +Universal two-state toggle component. + +### Props + +- [`disabled`](switch.md#disabled) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`value`](switch.md#value) +- [`onTintColor`](switch.md#ontintcolor) +- [`thumbTintColor`](switch.md#thumbtintcolor) +- [`tintColor`](switch.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `disabled` + +If true the user won't be able to toggle the switch. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onValueChange` + +Invoked with the new value when the value chages. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value of the switch. If true the switch will be turned on. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onTintColor` + +Background color when the switch is turned on. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `thumbTintColor` + +Color of the foreground switch grip. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `tintColor` + +Background color when the switch is turned off. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.13/textinput.md b/website/versioned_docs/version-0.13/textinput.md new file mode 100644 index 00000000000..d0365dbe37a --- /dev/null +++ b/website/versioned_docs/version-0.13/textinput.md @@ -0,0 +1,547 @@ +--- +id: version-0.13-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: +``` + var onlyMultiline = { + onSelectionChange: true, // not supported in Open Source yet + onTextInput: true, // not supported in Open Source yet + children: true, + }; + + var notMultiline = { + onSubmitEditing: true, + }; +``` + +### Props + +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`textAlign`](textinput.md#textalign) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`maxLength`](textinput.md#maxlength) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. +@platorm android + +| Type | Required | +| - | - | +| enum('start', 'center', 'end') | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.13/toolbarandroid.md b/website/versioned_docs/version-0.13/toolbarandroid.md new file mode 100644 index 00000000000..7dff509373d --- /dev/null +++ b/website/versioned_docs/version-0.13/toolbarandroid.md @@ -0,0 +1,204 @@ +--- +id: version-0.13-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Although the Toolbar supports remote images for the logo, navigation and action icons, this +should only be used in DEV mode where `require('./some_icon.png')` translates into a packager +URL. In release mode you should always use a drawable resource for these icons. Using +`require('./some_icon.png')` will do this automatically for you, so as long as you don't +explicitly use e.g. `{uri: 'http://...'}`, you will be good. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +- [`actions`](toolbarandroid.md#actions) +- [`logo`](toolbarandroid.md#logo) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('image!some_icon')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passeed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.13/touchablehighlight.md b/website/versioned_docs/version-0.13/touchablehighlight.md new file mode 100644 index 00000000000..7e43c1f2d08 --- /dev/null +++ b/website/versioned_docs/version-0.13/touchablehighlight.md @@ -0,0 +1,132 @@ +--- +id: version-0.13-touchablehighlight +title: TouchableHighlight +original_id: touchablehighlight +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, which allows +the underlay color to show through, darkening or tinting the view. The +underlay comes from adding a view to the view hierarchy, which can sometimes +cause unwanted visual artifacts if not used correctly, for example if the +backgroundColor of the wrapped view isn't explicitly set to an opaque color. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` +> **NOTE**: TouchableHighlight supports only one child +> +> If you wish to have several child components, wrap them in a View. + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchablehighlight.md#activeopacity) +- [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) +- [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) +- [`style`](touchablehighlight.md#style) +- [`underlayColor`](touchablehighlight.md#underlaycolor) + + + + +### Methods + +- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onHideUnderlay` + +Called immediately after the underlay is hidden + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShowUnderlay` + +Called immediately after the underlay is shown + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `underlayColor` + +The color of the underlay that will show through when the touch is +active. + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `computeSyntheticState()` + +```javascript +computeSyntheticState(props) +``` + + + diff --git a/website/versioned_docs/version-0.13/transforms.md b/website/versioned_docs/version-0.13/transforms.md new file mode 100644 index 00000000000..8cf61b9f01a --- /dev/null +++ b/website/versioned_docs/version-0.13/transforms.md @@ -0,0 +1,47 @@ +--- +id: version-0.13-transforms +title: Transforms +original_id: transforms +--- +### Props + +- [`transform`](transforms.md#transform) +- [`transformMatrix`](transforms.md#transformmatrix) + + + + + + +--- + +# Reference + +## Props + +### `transform` + + + +| Type | Required | +| - | - | +| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | + + + + +--- + +### `transformMatrix` + + + +| Type | Required | +| - | - | +| TransformMatrixPropType | No | + + + + + + diff --git a/website/versioned_docs/version-0.13/view-style-props.md b/website/versioned_docs/version-0.13/view-style-props.md new file mode 100644 index 00000000000..2a2f4b6bc3b --- /dev/null +++ b/website/versioned_docs/version-0.13/view-style-props.md @@ -0,0 +1,355 @@ +--- +id: version-0.13-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderStyle`](view-style-props.md#borderstyle) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`overflow`](view-style-props.md#overflow) +- [`shadowColor`](view-style-props.md#shadowcolor) +- [`shadowOffset`](view-style-props.md#shadowoffset) +- [`shadowOpacity`](view-style-props.md#shadowopacity) +- [`shadowRadius`](view-style-props.md#shadowradius) + + + + + + +--- + +# Reference + +## Props + +### `borderStyle` + + + +| Type | Required | +| - | - | +| enum('solid', 'dotted', 'dashed') | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `shadowColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `shadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `shadowOpacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `shadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + + + diff --git a/website/versioned_docs/version-0.13/viewpagerandroid.md b/website/versioned_docs/version-0.13/viewpagerandroid.md new file mode 100644 index 00000000000..33cb54b9bbd --- /dev/null +++ b/website/versioned_docs/version-0.13/viewpagerandroid.md @@ -0,0 +1,139 @@ +--- +id: version-0.13-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be streched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be caleld once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage) +``` + + + diff --git a/website/versioned_docs/version-0.14/modal.md b/website/versioned_docs/version-0.14/modal.md new file mode 100644 index 00000000000..39e0d626309 --- /dev/null +++ b/website/versioned_docs/version-0.14/modal.md @@ -0,0 +1,73 @@ +--- +id: version-0.14-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +### Props + +- [`animated`](modal.md#animated) +- [`onDismiss`](modal.md#ondismiss) +- [`transparent`](modal.md#transparent) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onDismiss` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.14/pushnotificationios.md b/website/versioned_docs/version-0.14/pushnotificationios.md new file mode 100644 index 00000000000..69609a7bb55 --- /dev/null +++ b/website/versioned_docs/version-0.14/pushnotificationios.md @@ -0,0 +1,346 @@ +--- +id: version-0.14-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +To enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager application:application didReceiveRemoteNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. + + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. + + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instansiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.14/snapshotviewios.md b/website/versioned_docs/version-0.14/snapshotviewios.md new file mode 100644 index 00000000000..0b2b928f07d --- /dev/null +++ b/website/versioned_docs/version-0.14/snapshotviewios.md @@ -0,0 +1,62 @@ +--- +id: version-0.14-snapshotviewios +title: SnapshotViewIOS +original_id: snapshotviewios +--- +### Props + +- [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) +- [`testIdentifier`](snapshotviewios.md#testidentifier) + + + + +### Methods + +- [`onDefaultAction`](snapshotviewios.md#ondefaultaction) + + + + +--- + +# Reference + +## Props + +### `onSnapshotReady` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testIdentifier` + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `onDefaultAction()` + +```javascript +onDefaultAction(event: Object) +``` + + + diff --git a/website/versioned_docs/version-0.14/textinput.md b/website/versioned_docs/version-0.14/textinput.md new file mode 100644 index 00000000000..24825af86f6 --- /dev/null +++ b/website/versioned_docs/version-0.14/textinput.md @@ -0,0 +1,547 @@ +--- +id: version-0.14-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: +``` + var onlyMultiline = { + onSelectionChange: true, // not supported in Open Source yet + onTextInput: true, // not supported in Open Source yet + children: true, + }; + + var notMultiline = { + onSubmitEditing: true, + }; +``` + +### Props + +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`textAlign`](textinput.md#textalign) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`maxLength`](textinput.md#maxlength) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | Android | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.14/toolbarandroid.md b/website/versioned_docs/version-0.14/toolbarandroid.md new file mode 100644 index 00000000000..3d49a2d015d --- /dev/null +++ b/website/versioned_docs/version-0.14/toolbarandroid.md @@ -0,0 +1,218 @@ +--- +id: version-0.14-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Although the Toolbar supports remote images for the logo, navigation and action icons, this +should only be used in DEV mode where `require('./some_icon.png')` translates into a packager +URL. In release mode you should always use a drawable resource for these icons. Using +`require('./some_icon.png')` will do this automatically for you, so as long as you don't +explicitly use e.g. `{uri: 'http://...'}`, you will be good. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +- [`overflowIcon`](toolbarandroid.md#overflowicon) +- [`actions`](toolbarandroid.md#actions) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`logo`](toolbarandroid.md#logo) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `overflowIcon` + +Sets the overflow icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('image!some_icon')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passeed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.14/transforms.md b/website/versioned_docs/version-0.14/transforms.md new file mode 100644 index 00000000000..ee454b21ade --- /dev/null +++ b/website/versioned_docs/version-0.14/transforms.md @@ -0,0 +1,117 @@ +--- +id: version-0.14-transforms +title: Transforms +original_id: transforms +--- +### Props + +- [`rotation`](transforms.md#rotation) +- [`scaleX`](transforms.md#scalex) +- [`scaleY`](transforms.md#scaley) +- [`transform`](transforms.md#transform) +- [`transformMatrix`](transforms.md#transformmatrix) +- [`translateX`](transforms.md#translatex) +- [`translateY`](transforms.md#translatey) + + + + + + +--- + +# Reference + +## Props + +### `rotation` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `scaleX` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `scaleY` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `transform` + + + +| Type | Required | +| - | - | +| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | + + + + +--- + +### `transformMatrix` + + + +| Type | Required | +| - | - | +| TransformMatrixPropType | No | + + + + +--- + +### `translateX` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `translateY` + + + +| Type | Required | +| - | - | +| number | No | + + + + + + diff --git a/website/versioned_docs/version-0.15/asyncstorage.md b/website/versioned_docs/version-0.15/asyncstorage.md new file mode 100644 index 00000000000..aeddfad4b0d --- /dev/null +++ b/website/versioned_docs/version-0.15/asyncstorage.md @@ -0,0 +1,192 @@ +--- +id: version-0.15-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- + +AsyncStorage is a simple, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of AsyncStorage instead +of AsyncStorage directly for anything more than light usage since it +operates globally. + +This JS code is a simple facade over the native iOS implementation to provide +a clear JS API, real Error objects, and simple non-multi functions. Each +method returns a `Promise` object. + + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key, callback?) +``` + + +Fetches `key` and passes the result to `callback`, along with an `Error` if +there is any. Returns a `Promise` object. + + + + +--- + +### `setItem()` + +```javascript +static setItem(key, value, callback?) +``` + + +Sets `value` for `key` and calls `callback` on completion, along with an +`Error` if there is any. Returns a `Promise` object. + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key, callback?) +``` + + +Returns a `Promise` object. + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key, value, callback?) +``` + + +Merges existing value with input value, assuming they are stringified json. +Returns a `Promise` object. Not supported by all native implementations. + + + + +--- + +### `clear()` + +```javascript +static clear(callback?) +``` + + +Erases *all* AsyncStorage for all clients, libraries, etc. You probably +don't want to call this - use removeItem or multiRemove to clear only your +own keys instead. Returns a `Promise` object. + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys(callback?) +``` + + +Gets *all* keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. + + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys, callback?) +``` + + +multiGet invokes callback with an array of key-value pair arrays that +matches the input format of multiSet. Returns a `Promise` object. + + multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) + + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs, callback?) +``` + + +multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g. Returns a `Promise` object. + + multiSet([['k1', 'val1'], ['k2', 'val2']], cb); + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys, callback?) +``` + + +Delete all the keys in the `keys` array. Returns a `Promise` object. + + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs, callback?) +``` + + +Merges existing values with input values, assuming they are stringified +json. Returns a `Promise` object. + +Not supported by all native implementations. + + + + diff --git a/website/versioned_docs/version-0.15/cameraroll.md b/website/versioned_docs/version-0.15/cameraroll.md new file mode 100644 index 00000000000..140dc748ce4 --- /dev/null +++ b/website/versioned_docs/version-0.15/cameraroll.md @@ -0,0 +1,70 @@ +--- +id: version-0.15-cameraroll +title: CameraRoll +original_id: cameraroll +--- + +`CameraRoll` provides access to the local camera roll / gallery. + + +### Methods + +- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) +- [`getPhotos`](cameraroll.md#getphotos) + + + + +--- + +# Reference + +## Methods + +### `saveImageWithTag()` + +```javascript +static saveImageWithTag(tag, successCallback, errorCallback) +``` + + +Saves the image to the camera roll / gallery. + +The CameraRoll API is not yet implemented for Android. + +@param {string} tag On Android, this is a local URI, such +as `"file:///sdcard/img.png"`. + +On iOS, the tag can be one of the following: + + - local URI + - assets-library tag + - a tag not maching any of the above, which means the image data will +be stored in memory (and consume memory as long as the process is alive) + +@param successCallback Invoked with the value of `tag` on success. +@param errorCallback Invoked with error message on error. + + + + +--- + +### `getPhotos()` + +```javascript +static getPhotos(params, callback, errorCallback) +``` + + + Invokes `callback` with photo identifier objects from the local camera + roll of the device matching shape defined by `getPhotosReturnChecker`. + + @param {object} params See `getPhotosParamChecker`. + @param {function} callback Invoked with arg of shape defined by + `getPhotosReturnChecker` on success. + @param {function} errorCallback Invoked with error message on error. + + + + diff --git a/website/versioned_docs/version-0.15/geolocation.md b/website/versioned_docs/version-0.15/geolocation.md new file mode 100644 index 00000000000..90795e6483c --- /dev/null +++ b/website/versioned_docs/version-0.15/geolocation.md @@ -0,0 +1,85 @@ +--- +id: version-0.15-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API follows the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.15/modal.md b/website/versioned_docs/version-0.15/modal.md new file mode 100644 index 00000000000..1a2261807a9 --- /dev/null +++ b/website/versioned_docs/version-0.15/modal.md @@ -0,0 +1,87 @@ +--- +id: version-0.15-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +### Props + +- [`animated`](modal.md#animated) +- [`onDismiss`](modal.md#ondismiss) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onDismiss` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.15/progressbarandroid.md b/website/versioned_docs/version-0.15/progressbarandroid.md new file mode 100644 index 00000000000..a0b0c41a826 --- /dev/null +++ b/website/versioned_docs/version-0.15/progressbarandroid.md @@ -0,0 +1,90 @@ +--- +id: version-0.15-progressbarandroid +title: ProgressBarAndroid +original_id: progressbarandroid +--- +React component that wraps the Android-only `ProgressBar`. This component is used to indicate +that the app is loading or there is some activity in the app. + +Example: + +``` +render: function() { + var progressBar = + + + ; + + return ( + + ); +}, +``` + +### Props + +- [`color`](progressbarandroid.md#color) +- [`styleAttr`](progressbarandroid.md#styleattr) +- [`testID`](progressbarandroid.md#testid) + + + + + + +--- + +# Reference + +## Props + +### `color` + +Color of the progress bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `styleAttr` + +Style of the ProgressBar. One of: + +- Horizontal +- Small +- Large +- Inverse +- SmallInverse +- LargeInverse + +| Type | Required | +| - | - | +| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.15/textinput.md b/website/versioned_docs/version-0.15/textinput.md new file mode 100644 index 00000000000..2071bc4eea3 --- /dev/null +++ b/website/versioned_docs/version-0.15/textinput.md @@ -0,0 +1,580 @@ +--- +id: version-0.15-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: +``` + var onlyMultiline = { + onSelectionChange: true, // not supported in Open Source yet + onTextInput: true, // not supported in Open Source yet + children: true, + }; + + var notMultiline = { + onSubmitEditing: true, + }; +``` + +### Props + +- [`secureTextEntry`](textinput.md#securetextentry) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCorrect`](textinput.md#autocorrect) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`textAlign`](textinput.md#textalign) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`maxLength`](textinput.md#maxlength) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | Android | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.15/webview.md b/website/versioned_docs/version-0.15/webview.md new file mode 100644 index 00000000000..b2fe332db99 --- /dev/null +++ b/website/versioned_docs/version-0.15/webview.md @@ -0,0 +1,331 @@ +--- +id: version-0.15-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +Note that WebView is only supported on iOS for now, +see https://facebook.github.io/react-native/known-issues.md + +### Props + +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`contentInset`](webview.md#contentinset) +- [`html`](webview.md#html) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`bounces`](webview.md#bounces) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`url`](webview.md#url) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `html` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `javaScriptEnabledAndroid` + +Used for android only, JS is enabled by default for WebView on iOS + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `bounces` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `renderError` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `scalesPageToFit` + +Used for iOS only, sets whether the webpage scales to fit the view and the +user can change the scale + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `url` + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.16/animated.md b/website/versioned_docs/version-0.16/animated.md new file mode 100644 index 00000000000..207d16090b5 --- /dev/null +++ b/website/versioned_docs/version-0.16/animated.md @@ -0,0 +1,606 @@ +--- +id: version-0.16-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1}, // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targetted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](http://facebook.github.io/react-native/animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performace way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={this.AnimatedEvent( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: this.AnimatedEvent([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations or whathaveyou. This is useful because there is no way to +syncronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.16/datepickerios.md b/website/versioned_docs/version-0.16/datepickerios.md new file mode 100644 index 00000000000..68ec7ec0e3f --- /dev/null +++ b/website/versioned_docs/version-0.16/datepickerios.md @@ -0,0 +1,136 @@ +--- +id: version-0.16-datepickerios +title: DatePickerIOS +original_id: datepickerios +--- +Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is +a controlled component, so you must hook in to the `onDateChange` callback +and update the `date` prop in order for the component to update, otherwise +the user's change will be reverted immediately to reflect `props.date` as the +source of truth. + +### Props + +* [View props...](view.md#props) +- [`date`](datepickerios.md#date) +- [`onDateChange`](datepickerios.md#ondatechange) +- [`maximumDate`](datepickerios.md#maximumdate) +- [`minimumDate`](datepickerios.md#minimumdate) +- [`minuteInterval`](datepickerios.md#minuteinterval) +- [`mode`](datepickerios.md#mode) +- [`timeZoneOffsetInMinutes`](datepickerios.md#timezoneoffsetinminutes) + + + + + + +--- + +# Reference + +## Props + +### `date` + +The currently selected date. + +| Type | Required | +| - | - | +| Date | Yes | + + + + +--- + +### `onDateChange` + +Date change handler. + +This is called when the user changes the date or time in the UI. +The first and only argument is a Date object representing the new +date and time. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `maximumDate` + +Maximum date. + +Restricts the range of possible date/time values. + +| Type | Required | +| - | - | +| Date | No | + + + + +--- + +### `minimumDate` + +Minimum date. + +Restricts the range of possible date/time values. + +| Type | Required | +| - | - | +| Date | No | + + + + +--- + +### `minuteInterval` + +The interval at which minutes can be selected. + +| Type | Required | +| - | - | +| enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30) | No | + + + + +--- + +### `mode` + +The date picker mode. + +| Type | Required | +| - | - | +| enum('date', 'time', 'datetime') | No | + + + + +--- + +### `timeZoneOffsetInMinutes` + +Timezone offset in minutes. + +By default, the date picker will use the device's timezone. With this +parameter, it is possible to force a certain timezone offset. For +instance, to show times in Pacific Standard Time, pass -7 * 60. + +| Type | Required | +| - | - | +| number | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/drawerlayoutandroid.md b/website/versioned_docs/version-0.16/drawerlayoutandroid.md new file mode 100644 index 00000000000..95ae937d47d --- /dev/null +++ b/website/versioned_docs/version-0.16/drawerlayoutandroid.md @@ -0,0 +1,195 @@ +--- +id: version-0.16-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interation with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.16/geolocation.md b/website/versioned_docs/version-0.16/geolocation.md new file mode 100644 index 00000000000..deab67b7828 --- /dev/null +++ b/website/versioned_docs/version-0.16/geolocation.md @@ -0,0 +1,89 @@ +--- +id: version-0.16-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API follows the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + +Geolocation support for Android is planned but not yet open sourced. See +[Known Issues](http://facebook.github.io/react-native/known-issues.md#missing-modules-and-native-views). + + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.16/layout-props.md b/website/versioned_docs/version-0.16/layout-props.md new file mode 100644 index 00000000000..918a789a2ad --- /dev/null +++ b/website/versioned_docs/version-0.16/layout-props.md @@ -0,0 +1,523 @@ +--- +id: version-0.16-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginRight`](layout-props.md#marginright) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`marginLeft`](layout-props.md#marginleft) +- [`alignSelf`](layout-props.md#alignself) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) + + + + + + +--- + +# Reference + +## Props + +### `marginRight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `alignItems` + + + +| Type | Required | +| - | - | +| enum('flex-start', 'flex-end', 'center', 'stretch') | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `bottom` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `flex` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `flexDirection` + + + +| Type | Required | +| - | - | +| enum('row', 'column') | No | + + + + +--- + +### `flexWrap` + + + +| Type | Required | +| - | - | +| enum('wrap', 'nowrap') | No | + + + + +--- + +### `height` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `justifyContent` + + + +| Type | Required | +| - | - | +| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No | + + + + +--- + +### `left` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `margin` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginBottom` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginHorizontal` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginLeft` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `alignSelf` + + + +| Type | Required | +| - | - | +| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') | No | + + + + +--- + +### `marginTop` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginVertical` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `maxHeight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `maxWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `minHeight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `minWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `padding` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingBottom` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingHorizontal` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingLeft` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingRight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingTop` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingVertical` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `position` + + + +| Type | Required | +| - | - | +| enum('absolute', 'relative') | No | + + + + +--- + +### `right` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `top` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `width` + + + +| Type | Required | +| - | - | +| number | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/progressbarandroid.md b/website/versioned_docs/version-0.16/progressbarandroid.md new file mode 100644 index 00000000000..393b76384d4 --- /dev/null +++ b/website/versioned_docs/version-0.16/progressbarandroid.md @@ -0,0 +1,120 @@ +--- +id: version-0.16-progressbarandroid +title: ProgressBarAndroid +original_id: progressbarandroid +--- +React component that wraps the Android-only `ProgressBar`. This component is used to indicate +that the app is loading or there is some activity in the app. + +Example: + +``` +render: function() { + var progressBar = + + + ; + + return ( + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`color`](progressbarandroid.md#color) +- [`indeterminate`](progressbarandroid.md#indeterminate) +- [`progress`](progressbarandroid.md#progress) +- [`styleAttr`](progressbarandroid.md#styleattr) +- [`testID`](progressbarandroid.md#testid) + + + + + + +--- + +# Reference + +## Props + +### `color` + +Color of the progress bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `indeterminate` + +If the progress bar will show indeterminate progress. Note that this +can only be false if styleAttr is Horizontal. + +| Type | Required | +| - | - | +| indeterminateType | No | + + + + +--- + +### `progress` + +The progress value (between 0 and 1). + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `styleAttr` + +Style of the ProgressBar. One of: + +- Horizontal +- Small +- Large +- Inverse +- SmallInverse +- LargeInverse + +| Type | Required | +| - | - | +| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/progressviewios.md b/website/versioned_docs/version-0.16/progressviewios.md new file mode 100644 index 00000000000..10d85b0e09a --- /dev/null +++ b/website/versioned_docs/version-0.16/progressviewios.md @@ -0,0 +1,106 @@ +--- +id: version-0.16-progressviewios +title: ProgressViewIOS +original_id: progressviewios +--- +Use `ProgressViewIOS` to render a UIProgressView on iOS. + +### Props + +* [View props...](view.md#props) +- [`progress`](progressviewios.md#progress) +- [`progressImage`](progressviewios.md#progressimage) +- [`progressTintColor`](progressviewios.md#progresstintcolor) +- [`progressViewStyle`](progressviewios.md#progressviewstyle) +- [`trackImage`](progressviewios.md#trackimage) +- [`trackTintColor`](progressviewios.md#tracktintcolor) + + + + + + +--- + +# Reference + +## Props + +### `progress` + +The progress value (between 0 and 1). + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `progressImage` + +A stretchable image to display as the progress bar. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `progressTintColor` + +The tint color of the progress bar itself. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `progressViewStyle` + +The progress bar style. + +| Type | Required | +| - | - | +| enum('default', 'bar') | No | + + + + +--- + +### `trackImage` + +A stretchable image to display behind the progress bar. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `trackTintColor` + +The tint color of the progress bar track. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/scrollview.md b/website/versioned_docs/version-0.16/scrollview.md new file mode 100644 index 00000000000..8a67908f5b9 --- /dev/null +++ b/website/versioned_docs/version-0.16/scrollview.md @@ -0,0 +1,720 @@ +--- +id: version-0.16-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`contentInset`](scrollview.md#contentinset) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`horizontal`](scrollview.md#horizontal) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be contolled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: string + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: string + + - **`borderLeftColor`**: string + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`borderRightColor`**: string + + - **`borderRightWidth`**: number + + - **`backgroundColor`**: string + + - **`borderTopColor`**: string + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`shadowColor`**: string + + - **`shadowOffset`**: object: {width: number,height: number} + + - **`shadowOpacity`**: number + + - **`shadowRadius`**: number + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +When defined, displays a UIRefreshControl. +Invoked with a function to stop refreshing when the UIRefreshControl is animating. + +``` +(endRefreshing) => { + endRefreshing(); +} +``` + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([destY]: number, [destX]: number) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo([destY]: number, [destX]: number) +``` + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.16/segmentedcontrolios.md b/website/versioned_docs/version-0.16/segmentedcontrolios.md new file mode 100644 index 00000000000..cd8ef90fbfa --- /dev/null +++ b/website/versioned_docs/version-0.16/segmentedcontrolios.md @@ -0,0 +1,124 @@ +--- +id: version-0.16-segmentedcontrolios +title: SegmentedControlIOS +original_id: segmentedcontrolios +--- +Use `SegmentedControlIOS` to render a UISegmentedControl iOS. + +### Props + +* [View props...](view.md#props) +- [`enabled`](segmentedcontrolios.md#enabled) +- [`momentary`](segmentedcontrolios.md#momentary) +- [`onChange`](segmentedcontrolios.md#onchange) +- [`onValueChange`](segmentedcontrolios.md#onvaluechange) +- [`selectedIndex`](segmentedcontrolios.md#selectedindex) +- [`tintColor`](segmentedcontrolios.md#tintcolor) +- [`values`](segmentedcontrolios.md#values) + + + + + + +--- + +# Reference + +## Props + +### `enabled` + +If false the user won't be able to interact with the control. +Default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `momentary` + +If true, then selecting a segment won't persist visually. +The `onValueChange` callback will still work as expected. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onChange` + +Callback that is called when the user taps a segment; +passes the event as an argument + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onValueChange` + +Callback that is called when the user taps a segment; +passes the segment's value as an argument + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selectedIndex` + +The index in `props.values` of the segment to be pre-selected + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `tintColor` + +Accent color of the control. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `values` + +The labels for the control's segment buttons, in order. + +| Type | Required | +| - | - | +| array of string | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/snapshotviewios.md b/website/versioned_docs/version-0.16/snapshotviewios.md new file mode 100644 index 00000000000..91e42d0f19e --- /dev/null +++ b/website/versioned_docs/version-0.16/snapshotviewios.md @@ -0,0 +1,63 @@ +--- +id: version-0.16-snapshotviewios +title: SnapshotViewIOS +original_id: snapshotviewios +--- +### Props + +* [View props...](view.md#props) +- [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) +- [`testIdentifier`](snapshotviewios.md#testidentifier) + + + + +### Methods + +- [`onDefaultAction`](snapshotviewios.md#ondefaultaction) + + + + +--- + +# Reference + +## Props + +### `onSnapshotReady` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testIdentifier` + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `onDefaultAction()` + +```javascript +onDefaultAction(event: Object) +``` + + + diff --git a/website/versioned_docs/version-0.16/switch.md b/website/versioned_docs/version-0.16/switch.md new file mode 100644 index 00000000000..6523ff32b10 --- /dev/null +++ b/website/versioned_docs/version-0.16/switch.md @@ -0,0 +1,125 @@ +--- +id: version-0.16-switch +title: Switch +original_id: switch +--- +Universal two-state toggle component. + +### Props + +* [View props...](view.md#props) +- [`disabled`](switch.md#disabled) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`value`](switch.md#value) +- [`onTintColor`](switch.md#ontintcolor) +- [`thumbTintColor`](switch.md#thumbtintcolor) +- [`tintColor`](switch.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `disabled` + +If true the user won't be able to toggle the switch. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onValueChange` + +Invoked with the new value when the value chages. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value of the switch. If true the switch will be turned on. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onTintColor` + +Background color when the switch is turned on. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `thumbTintColor` + +Color of the foreground switch grip. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `tintColor` + +Background color when the switch is turned off. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.16/tabbarios-item.md b/website/versioned_docs/version-0.16/tabbarios-item.md new file mode 100644 index 00000000000..32fdb37e5dd --- /dev/null +++ b/website/versioned_docs/version-0.16/tabbarios-item.md @@ -0,0 +1,138 @@ +--- +id: version-0.16-tabbarios-item +title: TabBarIOS.Item +original_id: tabbarios-item +--- +### Props + +* [View props...](view.md#props) +- [`badge`](tabbarios-item.md#badge) +- [`icon`](tabbarios-item.md#icon) +- [`onPress`](tabbarios-item.md#onpress) +- [`selected`](tabbarios-item.md#selected) +- [`selectedIcon`](tabbarios-item.md#selectedicon) +- [`style`](tabbarios-item.md#style) +- [`systemIcon`](tabbarios-item.md#systemicon) +- [`title`](tabbarios-item.md#title) + + + + + + +--- + +# Reference + +## Props + +### `badge` + +Little red bubble that sits at the top right of the icon. + +| Type | Required | +| - | - | +| string, ,number | No | + + + + +--- + +### `icon` + +A custom icon for the tab. It is ignored when a system icon is defined. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `onPress` + +Callback when this tab is being selected, you should change the state of your +component to set selected={true}. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selected` + +It specifies whether the children are visible or not. If you see a +blank content, you probably forgot to add a selected one. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectedIcon` + +A custom icon when the tab is selected. It is ignored when a system +icon is defined. If left empty, the icon will be tinted in blue. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `style` + +React style object. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `systemIcon` + +Items comes with a few predefined system icons. Note that if you are +using them, the title and selectedIcon will be overriden with the +system ones. + +| Type | Required | +| - | - | +| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | + + + + +--- + +### `title` + +Text that appears under the icon. It is ignored when a system icon +is defined. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/tabbarios.md b/website/versioned_docs/version-0.16/tabbarios.md new file mode 100644 index 00000000000..14c384f21d0 --- /dev/null +++ b/website/versioned_docs/version-0.16/tabbarios.md @@ -0,0 +1,76 @@ +--- +id: version-0.16-tabbarios +title: TabBarIOS +original_id: tabbarios +--- +### Props + +* [View props...](view.md#props) +- [`barTintColor`](tabbarios.md#bartintcolor) +- [`style`](tabbarios.md#style) +- [`tintColor`](tabbarios.md#tintcolor) +- [`translucent`](tabbarios.md#translucent) + + + + + + +--- + +# Reference + +## Props + +### `barTintColor` + +Background color of the tab bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `tintColor` + +Color of the currently selected tab icon + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the tab bar is translucent + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/textinput.md b/website/versioned_docs/version-0.16/textinput.md new file mode 100644 index 00000000000..6eadf5ff7f5 --- /dev/null +++ b/website/versioned_docs/version-0.16/textinput.md @@ -0,0 +1,596 @@ +--- +id: version-0.16-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: +``` + var onlyMultiline = { + onSelectionChange: true, // not supported in Open Source yet + onTextInput: true, // not supported in Open Source yet + children: true, + }; + + var notMultiline = { + onSubmitEditing: true, + }; +``` + +### Props + +* [View props...](view.md#props) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCorrect`](textinput.md#autocorrect) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`textAlign`](textinput.md#textalign) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | Android | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.16/toastandroid.md b/website/versioned_docs/version-0.16/toastandroid.md new file mode 100644 index 00000000000..bf0b90566a2 --- /dev/null +++ b/website/versioned_docs/version-0.16/toastandroid.md @@ -0,0 +1,48 @@ +--- +id: version-0.16-toastandroid +title: ToastAndroid +original_id: toastandroid +--- + +This exposes the native ToastAndroid module as a JS module. This has a function 'show' +which takes the following parameters: + +1. String message: A string with the text to toast +2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG + + +### Methods + +- [`show`](toastandroid.md#show) + + +### Properties + +- [`SHORT`](toastandroid.md#short) +- [`LONG`](toastandroid.md#long) + + + + +--- + +# Reference + +## Methods + +### `show()` + +```javascript +static show(message, duration) +``` + + + +## Properties + + + +--- + + + diff --git a/website/versioned_docs/version-0.16/toolbarandroid.md b/website/versioned_docs/version-0.16/toolbarandroid.md new file mode 100644 index 00000000000..8340dce8d5f --- /dev/null +++ b/website/versioned_docs/version-0.16/toolbarandroid.md @@ -0,0 +1,219 @@ +--- +id: version-0.16-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Although the Toolbar supports remote images for the logo, navigation and action icons, this +should only be used in DEV mode where `require('./some_icon.png')` translates into a packager +URL. In release mode you should always use a drawable resource for these icons. Using +`require('./some_icon.png')` will do this automatically for you, so as long as you don't +explicitly use e.g. `{uri: 'http://...'}`, you will be good. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +* [View props...](view.md#props) +- [`overflowIcon`](toolbarandroid.md#overflowicon) +- [`actions`](toolbarandroid.md#actions) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`logo`](toolbarandroid.md#logo) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `overflowIcon` + +Sets the overflow icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('image!some_icon')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passeed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/touchablewithoutfeedback.md b/website/versioned_docs/version-0.16/touchablewithoutfeedback.md new file mode 100644 index 00000000000..929e5f2d625 --- /dev/null +++ b/website/versioned_docs/version-0.16/touchablewithoutfeedback.md @@ -0,0 +1,198 @@ +--- +id: version-0.16-touchablewithoutfeedback +title: TouchableWithoutFeedback +original_id: touchablewithoutfeedback +--- +Do not use unless you have a very good reason. All the elements that +respond to press should have a visual feedback when touched. This is +one of the primary reason a "web" app doesn't feel "native". + +### Props + +- [`onLayout`](touchablewithoutfeedback.md#onlayout) +- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) +- [`accessible`](touchablewithoutfeedback.md#accessible) +- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) +- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) +- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) +- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) +- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) +- [`onPress`](touchablewithoutfeedback.md#onpress) +- [`onPressIn`](touchablewithoutfeedback.md#onpressin) +- [`onPressOut`](touchablewithoutfeedback.md#onpressout) +- [`pressRetentionOffset`](touchablewithoutfeedback.md#pressretentionoffset) + + + + + + +--- + +# Reference + +## Props + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityComponentType` + + + +| Type | Required | +| - | - | +| View.AccessibilityComponentType | No | + + + + +--- + +### `accessible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `delayLongPress` + +Delay in ms, from onPressIn, before onLongPress is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressIn` + +Delay in ms, from the start of the touch, before onPressIn is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressOut` + +Delay in ms, from the release of the touch, before onPressOut is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `accessibilityTraits` + + + +| Type | Required | +| - | - | +| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | + + + + +--- + +### `onLongPress` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +Called when the touch is released, but not if cancelled (e.g. by a scroll +that steals the responder lock). + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressIn` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressOut` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pressRetentionOffset` + +When the scroll view is disabled, this defines how far your touch may +move off of the button, before deactivating the button. Once deactivated, +try moving it back and you'll see that the button is once again +reactivated! Move it back and forth several times while the scroll view +is disabled. Ensure you pass in a constant to reduce memory allocations. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + + + diff --git a/website/versioned_docs/version-0.16/view-style-props.md b/website/versioned_docs/version-0.16/view-style-props.md new file mode 100644 index 00000000000..92af57592b0 --- /dev/null +++ b/website/versioned_docs/version-0.16/view-style-props.md @@ -0,0 +1,373 @@ +--- +id: version-0.16-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderStyle`](view-style-props.md#borderstyle) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`overflow`](view-style-props.md#overflow) +- [`shadowColor`](view-style-props.md#shadowcolor) +- [`shadowOffset`](view-style-props.md#shadowoffset) +- [`shadowOpacity`](view-style-props.md#shadowopacity) +- [`shadowRadius`](view-style-props.md#shadowradius) +- [`elevation`](view-style-props.md#elevation) + + + + + + +--- + +# Reference + +## Props + +### `borderStyle` + + + +| Type | Required | +| - | - | +| enum('solid', 'dotted', 'dashed') | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `shadowColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `shadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `shadowOpacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `shadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `elevation` + +(Android-only) Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +This adds a drop shadow to the item and affects z-order for overlapping views. +Only supported on Android 5.0+, has no effect on earlier versions. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.16/viewpagerandroid.md b/website/versioned_docs/version-0.16/viewpagerandroid.md new file mode 100644 index 00000000000..c0f41c07841 --- /dev/null +++ b/website/versioned_docs/version-0.16/viewpagerandroid.md @@ -0,0 +1,157 @@ +--- +id: version-0.16-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be streched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be caleld once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be *not* be animated. + + + diff --git a/website/versioned_docs/version-0.16/webview.md b/website/versioned_docs/version-0.16/webview.md new file mode 100644 index 00000000000..c68b55560b0 --- /dev/null +++ b/website/versioned_docs/version-0.16/webview.md @@ -0,0 +1,354 @@ +--- +id: version-0.16-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +Note that WebView is only supported on iOS for now, +see https://facebook.github.io/react-native/known-issues.md + +### Props + +* [View props...](view.md#props) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`contentInset`](webview.md#contentinset) +- [`html`](webview.md#html) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`bounces`](webview.md#bounces) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`url`](webview.md#url) +- [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`scalesPageToFit`](webview.md#scalespagetofit) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `scrollEnabled` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `html` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `bounces` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `url` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `javaScriptEnabledAndroid` + +Used for android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.17/asyncstorage.md b/website/versioned_docs/version-0.17/asyncstorage.md new file mode 100644 index 00000000000..e699a3b6ea3 --- /dev/null +++ b/website/versioned_docs/version-0.17/asyncstorage.md @@ -0,0 +1,213 @@ +--- +id: version-0.17-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- + +AsyncStorage is a simple, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of AsyncStorage instead +of AsyncStorage directly for anything more than light usage since it +operates globally. + +This JS code is a simple facade over the native iOS implementation to provide +a clear JS API, real Error objects, and simple non-multi functions. Each +method returns a `Promise` object. + + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + +### Properties + + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key, callback?) +``` + + +Fetches `key` and passes the result to `callback`, along with an `Error` if +there is any. Returns a `Promise` object. + + + + +--- + +### `setItem()` + +```javascript +static setItem(key, value, callback?) +``` + + +Sets `value` for `key` and calls `callback` on completion, along with an +`Error` if there is any. Returns a `Promise` object. + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key, callback?) +``` + + +Returns a `Promise` object. + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key, value, callback?) +``` + + +Merges existing value with input value, assuming they are stringified json. +Returns a `Promise` object. Not supported by all native implementations. + + + + +--- + +### `clear()` + +```javascript +static clear(callback?) +``` + + +Erases *all* AsyncStorage for all clients, libraries, etc. You probably +don't want to call this - use removeItem or multiRemove to clear only your +own keys instead. Returns a `Promise` object. + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys(callback?) +``` + + +Gets *all* keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests() +``` + +Flushes any pending requests using a single multiget + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys, callback?) +``` + + +multiGet invokes callback with an array of key-value pair arrays that +matches the input format of multiSet. Returns a `Promise` object. + + multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) + + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs, callback?) +``` + + +multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g. Returns a `Promise` object. + + multiSet([['k1', 'val1'], ['k2', 'val2']], cb); + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys, callback?) +``` + + +Delete all the keys in the `keys` array. Returns a `Promise` object. + + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs, callback?) +``` + + +Merges existing values with input values, assuming they are stringified +json. Returns a `Promise` object. + +Not supported by all native implementations. + + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.17/image.md b/website/versioned_docs/version-0.17/image.md new file mode 100644 index 00000000000..2ec1e37daee --- /dev/null +++ b/website/versioned_docs/version-0.17/image.md @@ -0,0 +1,274 @@ +--- +id: version-0.17-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('image!name')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`backgroundColor`**: string + + - **`borderColor`**: string + + - **`borderRadius`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: string + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.17/modal.md b/website/versioned_docs/version-0.17/modal.md new file mode 100644 index 00000000000..25124f1f1f2 --- /dev/null +++ b/website/versioned_docs/version-0.17/modal.md @@ -0,0 +1,89 @@ +--- +id: version-0.17-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +This component is only available in iOS at this time. + +### Props + +- [`animated`](modal.md#animated) +- [`onDismiss`](modal.md#ondismiss) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onDismiss` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.17/navigatorios.md b/website/versioned_docs/version-0.17/navigatorios.md new file mode 100644 index 00000000000..fbc5fc1b787 --- /dev/null +++ b/website/versioned_docs/version-0.17/navigatorios.md @@ -0,0 +1,359 @@ +--- +id: version-0.17-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +functionality across your app. + +> **NOTE**: This Component is not maintained by Facebook +> +> This component is under community responsibility. +> If a pure JavaScript solution fits your needs you may try the `Navigator` +> component instead. + +#### 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 ( + + ); +}, +``` + +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. + +#### 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: () => ( + + ), +}); +``` + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) +- [`handleNavigationComplete`](navigatorios.md#handlenavigationcomplete) +- [`renderNavigationStackItems`](navigatorios.md#rendernavigationstackitems) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +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: + +| Type | Required | +| - | - | +| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style)} | Yes | + + + + +--- + +### `barTintColor` + +The background color of the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the backgroundColor for every page + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +A Boolean value that indicates whether the navigation bar is hidden + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +A Boolean value that indicates whether to hide the 1px hairline shadow + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The color used for buttons in the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The text color of the navigation bar title + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the navigation bar is translucent + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + + + +--- + +### `pop()` + +```javascript +pop() +``` + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +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. + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replaces the top of the navigation stack. + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the current route's parent. + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + + + +--- + +### `handleNavigationComplete()` + +```javascript +handleNavigationComplete(e: Event) +``` + + + +--- + +### `renderNavigationStackItems()` + +```javascript +renderNavigationStackItems() +``` + + + diff --git a/website/versioned_docs/version-0.17/netinfo.md b/website/versioned_docs/version-0.17/netinfo.md new file mode 100644 index 00000000000..8e7c7303680 --- /dev/null +++ b/website/versioned_docs/version-0.17/netinfo.md @@ -0,0 +1,158 @@ +--- +id: version-0.17-netinfo +title: NetInfo +original_id: netinfo +--- + +NetInfo exposes info about online/offline status + +``` +NetInfo.fetch().done((reach) => { + console.log('Initial: ' + reach); +}); +function handleFirstConnectivityChange(reach) { + console.log('First change: ' + reach); + NetInfo.removeEventListener( + 'change', + handleFirstConnectivityChange + ); +} +NetInfo.addEventListener( + 'change', + handleFirstConnectivityChange +); +``` + +### IOS + +Asynchronously determine if the device is online and on a cellular network. + +- `none` - device is offline +- `wifi` - device is online and connected via wifi, or is the iOS simulator +- `cell` - device is connected via Edge, 3G, WiMax, or LTE +- `unknown` - error case and the network status is unknown + +### Android + +To request network info, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` +Asynchronously determine if the device is connected and details about that connection. + +Android Connectivity Types. + +- `NONE` - device is offline +- `BLUETOOTH` - The Bluetooth data connection. +- `DUMMY` - Dummy data connection. +- `ETHERNET` - The Ethernet data connection. +- `MOBILE` - The Mobile data connection. +- `MOBILE_DUN` - A DUN-specific Mobile data connection. +- `MOBILE_HIPRI` - A High Priority Mobile data connection. +- `MOBILE_MMS` - An MMS-specific Mobile data connection. +- `MOBILE_SUPL` - A SUPL-specific Mobile data connection. +- `VPN` - A virtual network using one or more native bearers. Requires API Level 21 +- `WIFI` - The WIFI data connection. +- `WIMAX` - The WiMAX data connection. +- `UNKNOWN` - Unknown data connection. + +The rest ConnectivityStates are hidden by the Android API, but can be used if necessary. + +### isConnectionExpensive + +Available on Android. Detect if the current active connection is metered or not. A network is +classified as metered when the user is sensitive to heavy data usage on that connection due to +monetary costs, data limitations or battery/performance issues. + +``` +NetInfo.isConnectionExpensive((isConnectionExpensive) => { + console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); +}); +``` + +### isConnected + +Available on all platforms. Asynchronously fetch a boolean to determine +internet connectivity. + +``` +NetInfo.isConnected.fetch().done((isConnected) => { + console.log('First, is ' + (isConnected ? 'online' : 'offline')); +}); +function handleFirstConnectivityChange(isConnected) { + console.log('Then, is ' + (isConnected ? 'online' : 'offline')); + NetInfo.isConnected.removeEventListener( + 'change', + handleFirstConnectivityChange + ); +} +NetInfo.isConnected.addEventListener( + 'change', + handleFirstConnectivityChange +); +``` + + +### Methods + +- [`addEventListener`](netinfo.md#addeventlistener) +- [`removeEventListener`](netinfo.md#removeeventlistener) +- [`fetch`](netinfo.md#fetch) +- [`isConnectionExpensive`](netinfo.md#isconnectionexpensive) + + +### Properties + +- [`isConnected`](netinfo.md#isconnected) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(eventName, handler) +``` + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(eventName, handler) +``` + + + +--- + +### `fetch()` + +```javascript +static fetch() +``` + + + +--- + +### `isConnectionExpensive()` + +```javascript +static isConnectionExpensive(callback) +``` + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.17/scrollview.md b/website/versioned_docs/version-0.17/scrollview.md new file mode 100644 index 00000000000..26312f7b4b9 --- /dev/null +++ b/website/versioned_docs/version-0.17/scrollview.md @@ -0,0 +1,720 @@ +--- +id: version-0.17-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`contentInset`](scrollview.md#contentinset) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`horizontal`](scrollview.md#horizontal) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be contolled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: string + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: string + + - **`borderLeftColor`**: string + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`borderRightColor`**: string + + - **`borderRightWidth`**: number + + - **`backgroundColor`**: string + + - **`borderTopColor`**: string + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`shadowColor`**: string + + - **`shadowOffset`**: object: {width: number,height: number} + + - **`shadowOpacity`**: number + + - **`shadowRadius`**: number + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +When defined, displays a UIRefreshControl. +Invoked with a function to stop refreshing when the UIRefreshControl is animating. + +``` +(endRefreshing) => { + endRefreshing(); +} +``` + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([destY]: number, [destX]: number) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo([destY]: number, [destX]: number) +``` + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.17/text.md b/website/versioned_docs/version-0.17/text.md new file mode 100644 index 00000000000..707171f9da6 --- /dev/null +++ b/website/versioned_docs/version-0.17/text.md @@ -0,0 +1,200 @@ +--- +id: version-0.17-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`accessible`](text.md#accessible) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `accessible` + + + +| Type | Required | +| - | - | +| | No | + + + + +--- + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an elipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS. + + - **`color`**: string + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`fontFamily`**: string + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: string (_iOS_) + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.17/textinput.md b/website/versioned_docs/version-0.17/textinput.md new file mode 100644 index 00000000000..5f88bbdddb3 --- /dev/null +++ b/website/versioned_docs/version-0.17/textinput.md @@ -0,0 +1,588 @@ +--- +id: version-0.17-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: + +### Props + +* [View props...](view.md#props) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCorrect`](textinput.md#autocorrect) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`textAlign`](textinput.md#textalign) +- [`textAlignVertical`](textinput.md#textalignvertical) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'numeric', 'email-address', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `textAlign` + +Set the position of the cursor from where editing will begin. + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | Android | + + + + +--- + +### `textAlignVertical` + +Aligns text vertically within the TextInput. + + +| Type | Required | Platform | +| - | - | - | +| enum('top', 'center', 'bottom') | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.17/toolbarandroid.md b/website/versioned_docs/version-0.17/toolbarandroid.md new file mode 100644 index 00000000000..91c5f1bb1f0 --- /dev/null +++ b/website/versioned_docs/version-0.17/toolbarandroid.md @@ -0,0 +1,240 @@ +--- +id: version-0.17-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Although the Toolbar supports remote images for the logo, navigation and action icons, this +should only be used in DEV mode where `require('./some_icon.png')` translates into a packager +URL. In release mode you should always use a drawable resource for these icons. Using +`require('./some_icon.png')` will do this automatically for you, so as long as you don't +explicitly use e.g. `{uri: 'http://...'}`, you will be good. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +* [View props...](view.md#props) +- [`rtl`](toolbarandroid.md#rtl) +- [`actions`](toolbarandroid.md#actions) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`overflowIcon`](toolbarandroid.md#overflowicon) +- [`logo`](toolbarandroid.md#logo) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `rtl` + +Used to set the toolbar direction to RTL. +In addition to this property you need to add + + android:supportsRtl="true" + +to your application AndroidManifest.xml and then call +`setLayoutDirection(LayoutDirection.RTL)` in your MainActivity +`onCreate` method. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('image!some_icon')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passeed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `overflowIcon` + +Sets the overflow icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.17/view-style-props.md b/website/versioned_docs/version-0.17/view-style-props.md new file mode 100644 index 00000000000..3eee7bb880d --- /dev/null +++ b/website/versioned_docs/version-0.17/view-style-props.md @@ -0,0 +1,373 @@ +--- +id: version-0.17-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderStyle`](view-style-props.md#borderstyle) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`overflow`](view-style-props.md#overflow) +- [`shadowColor`](view-style-props.md#shadowcolor) +- [`shadowOffset`](view-style-props.md#shadowoffset) +- [`shadowOpacity`](view-style-props.md#shadowopacity) +- [`shadowRadius`](view-style-props.md#shadowradius) +- [`elevation`](view-style-props.md#elevation) + + + + + + +--- + +# Reference + +## Props + +### `borderStyle` + + + +| Type | Required | +| - | - | +| enum('solid', 'dotted', 'dashed') | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `shadowColor` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `shadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `shadowOpacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `shadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `elevation` + +(Android-only) Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +This adds a drop shadow to the item and affects z-order for overlapping views. +Only supported on Android 5.0+, has no effect on earlier versions. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.17/webview.md b/website/versioned_docs/version-0.17/webview.md new file mode 100644 index 00000000000..078d7d793c9 --- /dev/null +++ b/website/versioned_docs/version-0.17/webview.md @@ -0,0 +1,351 @@ +--- +id: version-0.17-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`style`](webview.md#style) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`html`](webview.md#html) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`contentInset`](webview.md#contentinset) +- [`url`](webview.md#url) +- [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`scrollEnabled`](webview.md#scrollenabled) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `html` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `url` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `javaScriptEnabledAndroid` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.18/animated.md b/website/versioned_docs/version-0.18/animated.md new file mode 100644 index 00000000000..7cc8dcb9e5e --- /dev/null +++ b/website/versioned_docs/version-0.18/animated.md @@ -0,0 +1,638 @@ +--- +id: version-0.18-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scrolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1}, // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targeted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performance way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`multiply`](animated.md#multiply) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations or whathaveyou. This is useful because there is no way to +synchronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.18/cameraroll.md b/website/versioned_docs/version-0.18/cameraroll.md new file mode 100644 index 00000000000..36b6745b59e --- /dev/null +++ b/website/versioned_docs/version-0.18/cameraroll.md @@ -0,0 +1,70 @@ +--- +id: version-0.18-cameraroll +title: CameraRoll +original_id: cameraroll +--- + +`CameraRoll` provides access to the local camera roll / gallery. + + +### Methods + +- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) +- [`getPhotos`](cameraroll.md#getphotos) + + + + +--- + +# Reference + +## Methods + +### `saveImageWithTag()` + +```javascript +static saveImageWithTag(tag, successCallback, errorCallback) +``` + + +Saves the image to the camera roll / gallery. + +The CameraRoll API is not yet implemented for Android. + +@param {string} tag On Android, this is a local URI, such +as `"file:///sdcard/img.png"`. + +On iOS, the tag can be one of the following: + + - local URI + - assets-library tag + - a tag not matching any of the above, which means the image data will +be stored in memory (and consume memory as long as the process is alive) + +@param successCallback Invoked with the value of `tag` on success. +@param errorCallback Invoked with error message on error. + + + + +--- + +### `getPhotos()` + +```javascript +static getPhotos(params, callback, errorCallback) +``` + + + Invokes `callback` with photo identifier objects from the local camera + roll of the device matching shape defined by `getPhotosReturnChecker`. + + @param {object} params See `getPhotosParamChecker`. + @param {function} callback Invoked with arg of shape defined by + `getPhotosReturnChecker` on success. + @param {function} errorCallback Invoked with error message on error. + + + + diff --git a/website/versioned_docs/version-0.18/dimensions.md b/website/versioned_docs/version-0.18/dimensions.md new file mode 100644 index 00000000000..cf65bada213 --- /dev/null +++ b/website/versioned_docs/version-0.18/dimensions.md @@ -0,0 +1,62 @@ +--- +id: version-0.18-dimensions +title: Dimensions +original_id: dimensions +--- + + + +### Methods + +- [`set`](dimensions.md#set) +- [`get`](dimensions.md#get) + + + + +--- + +# Reference + +## Methods + +### `set()` + +```javascript +static set(dims) +``` + + +This should only be called from native code. + +@param {object} dims Simple string-keyed object of dimensions to set + + + + +--- + +### `get()` + +```javascript +static get(dim) +``` + + +Initial dimensions are set before `runApplication` is called so they should +be available before any other require's are run, but may be updated later. + +Note: Although dimensions are available immediately, they may change (e.g +due to device rotation) so any rendering logic or styles that depend on +these constants should try to call this function on every render, rather +than caching the value (for example, using inline styles rather than +setting a value in a `StyleSheet`). + +Example: `var {height, width} = Dimensions.get('window');` + +@param {string} dim Name of dimension as defined when calling `set`. +@returns {Object?} Value for the dimension. + + + + diff --git a/website/versioned_docs/version-0.18/drawerlayoutandroid.md b/website/versioned_docs/version-0.18/drawerlayoutandroid.md new file mode 100644 index 00000000000..fdb8dd18c03 --- /dev/null +++ b/website/versioned_docs/version-0.18/drawerlayoutandroid.md @@ -0,0 +1,195 @@ +--- +id: version-0.18-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.18/geolocation.md b/website/versioned_docs/version-0.18/geolocation.md new file mode 100644 index 00000000000..6876df518af --- /dev/null +++ b/website/versioned_docs/version-0.18/geolocation.md @@ -0,0 +1,86 @@ +--- +id: version-0.18-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API follows the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.18/image-style-props.md b/website/versioned_docs/version-0.18/image-style-props.md new file mode 100644 index 00000000000..80252c5a861 --- /dev/null +++ b/website/versioned_docs/version-0.18/image-style-props.md @@ -0,0 +1,145 @@ +--- +id: version-0.18-image-style-props +title: Image Style Props +original_id: image-style-props +--- +### Props + +- [`backfaceVisibility`](image-style-props.md#backfacevisibility) +- [`backgroundColor`](image-style-props.md#backgroundcolor) +- [`borderColor`](image-style-props.md#bordercolor) +- [`borderRadius`](image-style-props.md#borderradius) +- [`borderWidth`](image-style-props.md#borderwidth) +- [`opacity`](image-style-props.md#opacity) +- [`overflow`](image-style-props.md#overflow) +- [`resizeMode`](image-style-props.md#resizemode) +- [`tintColor`](image-style-props.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `resizeMode` + + + +| Type | Required | +| - | - | +| Object.keys(ImageResizeMode) | No | + + + + +--- + +### `tintColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.18/image.md b/website/versioned_docs/version-0.18/image.md new file mode 100644 index 00000000000..f741c225238 --- /dev/null +++ b/website/versioned_docs/version-0.18/image.md @@ -0,0 +1,287 @@ +--- +id: version-0.18-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('./path/to/image.png')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`backgroundColor`**: [color](colors.md) + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: [color](colors.md) + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.18/imageeditor.md b/website/versioned_docs/version-0.18/imageeditor.md new file mode 100644 index 00000000000..13a5b2b325e --- /dev/null +++ b/website/versioned_docs/version-0.18/imageeditor.md @@ -0,0 +1,40 @@ +--- +id: version-0.18-imageeditor +title: ImageEditor +original_id: imageeditor +--- + + + +### Methods + +- [`cropImage`](imageeditor.md#cropimage) + + + + +--- + +# Reference + +## Methods + +### `cropImage()` + +```javascript +static cropImage(uri, cropData, success, failure) +``` + + +Crop the image specified by the URI param. If URI points to a remote +image, it will be downloaded automatically. If the image cannot be +loaded/downloaded, the failure callback will be called. + +If the cropping process is successful, the resultant cropped image +will be stored in the ImageStore, and the URI returned in the success +callback will point to the image in the store. Remember to delete the +cropped image from the ImageStore when you are done with it. + + + + diff --git a/website/versioned_docs/version-0.18/imagestore.md b/website/versioned_docs/version-0.18/imagestore.md new file mode 100644 index 00000000000..57881b0741b --- /dev/null +++ b/website/versioned_docs/version-0.18/imagestore.md @@ -0,0 +1,99 @@ +--- +id: version-0.18-imagestore +title: ImageStore +original_id: imagestore +--- + + + +### Methods + +- [`hasImageForTag`](imagestore.md#hasimagefortag) +- [`removeImageForTag`](imagestore.md#removeimagefortag) +- [`addImageFromBase64`](imagestore.md#addimagefrombase64) +- [`getBase64ForTag`](imagestore.md#getbase64fortag) + + + + +--- + +# Reference + +## Methods + +### `hasImageForTag()` + +```javascript +static hasImageForTag(uri, callback) +``` + + +Check if the ImageStore contains image data for the specified URI. +@platform ios + + + + +--- + +### `removeImageForTag()` + +```javascript +static removeImageForTag(uri) +``` + + +Delete an image from the ImageStore. Images are stored in memory and +must be manually removed when you are finished with them, otherwise they +will continue to use up RAM until the app is terminated. It is safe to +call `removeImageForTag()` without first calling `hasImageForTag()`, it +will simply fail silently. +@platform ios + + + + +--- + +### `addImageFromBase64()` + +```javascript +static addImageFromBase64(base64ImageData, success, failure) +``` + + +Stores a base64-encoded image in the ImageStore, and returns a URI that +can be used to access or display the image later. Images are stored in +memory only, and must be manually deleted when you are finished with +them by calling `removeImageForTag()`. + +Note that it is very inefficient to transfer large quantities of binary +data between JS and native code, so you should avoid calling this more +than necessary. + + + + +--- + +### `getBase64ForTag()` + +```javascript +static getBase64ForTag(uri, success, failure) +``` + + +Retrieves the base64-encoded data for an image in the ImageStore. If the +specified URI does not match an image in the store, the failure callback +will be called. + +Note that it is very inefficient to transfer large quantities of binary +data between JS and native code, so you should avoid calling this more +than necessary. To display an image in the ImageStore, you can just pass +the URI to an `` component; there is no need to retrieve the +base64 data. + + + + diff --git a/website/versioned_docs/version-0.18/interactionmanager.md b/website/versioned_docs/version-0.18/interactionmanager.md new file mode 100644 index 00000000000..fc75977a8f9 --- /dev/null +++ b/website/versioned_docs/version-0.18/interactionmanager.md @@ -0,0 +1,141 @@ +--- +id: version-0.18-interactionmanager +title: InteractionManager +original_id: interactionmanager +--- + +InteractionManager allows long-running work to be scheduled after any +interactions/animations have completed. In particular, this allows JavaScript +animations to run smoothly. + +Applications can schedule tasks to run after interactions with the following: + +``` +InteractionManager.runAfterInteractions(() => { + // ...long-running synchronous task... +}); +``` + +Compare this to other scheduling alternatives: + +- requestAnimationFrame(): for code that animates a view over time. +- setImmediate/setTimeout(): run code later, note this may delay animations. +- runAfterInteractions(): run code later, without delaying active animations. + +The touch handling system considers one or more active touches to be an +'interaction' and will delay `runAfterInteractions()` callbacks until all +touches have ended or been cancelled. + +InteractionManager also allows applications to register animations by +creating an interaction 'handle' on animation start, and clearing it upon +completion: + +``` +var handle = InteractionManager.createInteractionHandle(); +// run animation... (`runAfterInteractions` tasks are queued) +// later, on animation completion: +InteractionManager.clearInteractionHandle(handle); +// queued tasks run if all handles were cleared +``` + +`runAfterInteractions` takes either a plain callback function, or a +`PromiseTask` object with a `gen` method that returns a `Promise`. If a +`PromiseTask` is supplied, then it is fully resolved (including asynchronous +dependencies that also schedule more tasks via `runAfterInteractions`) before +starting on the next task that might have been queued up synchronously +earlier. + +By default, queued tasks are executed together in a loop in one +`setImmediate` batch. If `setDeadline` is called with a positive number, then +tasks will only be executed until the deadline (in terms of js event loop run +time) approaches, at which point execution will yield via setTimeout, +allowing events such as touches to start interactions and block queued tasks +from executing, making apps more responsive. + + +### Methods + +- [`runAfterInteractions`](interactionmanager.md#runafterinteractions) +- [`createInteractionHandle`](interactionmanager.md#createinteractionhandle) +- [`clearInteractionHandle`](interactionmanager.md#clearinteractionhandle) +- [`setDeadline`](interactionmanager.md#setdeadline) + + +### Properties + +- [`Events`](interactionmanager.md#events) +- [`addListener`](interactionmanager.md#addlistener) + + + + +--- + +# Reference + +## Methods + +### `runAfterInteractions()` + +```javascript +static runAfterInteractions(task) +``` + + +Schedule a function to run after all interactions have completed. + + + + +--- + +### `createInteractionHandle()` + +```javascript +static createInteractionHandle() +``` + + +Notify manager that an interaction has started. + + + + +--- + +### `clearInteractionHandle()` + +```javascript +static clearInteractionHandle(handle) +``` + + +Notify manager that an interaction has completed. + + + + +--- + +### `setDeadline()` + +```javascript +static setDeadline(deadline) +``` + + +A positive number will use setTimeout to schedule any tasks after the +eventLoopRunningTime hits the deadline value, otherwise all tasks will be +executed in one setImmediate batch (default). + + + + +## Properties + + + +--- + + + diff --git a/website/versioned_docs/version-0.18/navigatorios.md b/website/versioned_docs/version-0.18/navigatorios.md new file mode 100644 index 00000000000..bff6fb9621b --- /dev/null +++ b/website/versioned_docs/version-0.18/navigatorios.md @@ -0,0 +1,364 @@ +--- +id: version-0.18-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +functionality across your app. + +> **NOTE**: This Component is not maintained by Facebook +> +> This component is under community responsibility. +> If a pure JavaScript solution fits your needs you may try the `Navigator` +> component instead. + +#### 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 ( + + ); +}, +``` + +Now MyView will be rendered by the navigator. It will receive 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. + +#### 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: () => ( + + ), +}); +``` + +Props passed to the NavigatorIOS component will set the default configuration +for the navigation bar. Props passed as properties to a route object will set +the configuration for that route's navigation bar, overriding any props +passed to the NavigatorIOS component. + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) +- [`handleNavigationComplete`](navigatorios.md#handlenavigationcomplete) +- [`renderNavigationStackItems`](navigatorios.md#rendernavigationstackitems) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +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: + +| Type | Required | +| - | - | +| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | + + + + +--- + +### `barTintColor` + +The default background color of the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the backgroundColor for every page + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +A Boolean value that indicates whether the navigation bar is hidden by default + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +A Boolean value that indicates whether to hide the 1px hairline shadow by default + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The default color used for buttons in the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The default text color of the navigation bar title + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the navigation bar is translucent by default + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + + + +--- + +### `pop()` + +```javascript +pop() +``` + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +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. + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replaces the top of the navigation stack. + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the current route's parent. + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + + + +--- + +### `handleNavigationComplete()` + +```javascript +handleNavigationComplete(e: Event) +``` + + + +--- + +### `renderNavigationStackItems()` + +```javascript +renderNavigationStackItems() +``` + + + diff --git a/website/versioned_docs/version-0.18/progressbarandroid.md b/website/versioned_docs/version-0.18/progressbarandroid.md new file mode 100644 index 00000000000..9e10eca2206 --- /dev/null +++ b/website/versioned_docs/version-0.18/progressbarandroid.md @@ -0,0 +1,120 @@ +--- +id: version-0.18-progressbarandroid +title: ProgressBarAndroid +original_id: progressbarandroid +--- +React component that wraps the Android-only `ProgressBar`. This component is used to indicate +that the app is loading or there is some activity in the app. + +Example: + +``` +render: function() { + var progressBar = + + + ; + + return ( + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`color`](progressbarandroid.md#color) +- [`indeterminate`](progressbarandroid.md#indeterminate) +- [`progress`](progressbarandroid.md#progress) +- [`styleAttr`](progressbarandroid.md#styleattr) +- [`testID`](progressbarandroid.md#testid) + + + + + + +--- + +# Reference + +## Props + +### `color` + +Color of the progress bar. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `indeterminate` + +If the progress bar will show indeterminate progress. Note that this +can only be false if styleAttr is Horizontal. + +| Type | Required | +| - | - | +| indeterminateType | No | + + + + +--- + +### `progress` + +The progress value (between 0 and 1). + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `styleAttr` + +Style of the ProgressBar. One of: + +- Horizontal +- Small +- Large +- Inverse +- SmallInverse +- LargeInverse + +| Type | Required | +| - | - | +| enum('Horizontal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.18/pushnotificationios.md b/website/versioned_docs/version-0.18/pushnotificationios.md new file mode 100644 index 00000000000..6577ba903d7 --- /dev/null +++ b/website/versioned_docs/version-0.18/pushnotificationios.md @@ -0,0 +1,351 @@ +--- +id: version-0.18-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +To enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. + + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. + + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.18/refreshcontrol.md b/website/versioned_docs/version-0.18/refreshcontrol.md new file mode 100644 index 00000000000..9ec1a117d59 --- /dev/null +++ b/website/versioned_docs/version-0.18/refreshcontrol.md @@ -0,0 +1,141 @@ +--- +id: version-0.18-refreshcontrol +title: RefreshControl +original_id: refreshcontrol +--- +This component is used inside a ScrollView to add pull to refresh +functionality. When the ScrollView is at `scrollY: 0`, swiping down +triggers an `onRefresh` event. + +### Props + +- [`onRefresh`](refreshcontrol.md#onrefresh) +- [`refreshing`](refreshcontrol.md#refreshing) +- [`colors`](refreshcontrol.md#colors) +- [`enabled`](refreshcontrol.md#enabled) +- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) +- [`size`](refreshcontrol.md#size) +- [`tintColor`](refreshcontrol.md#tintcolor) +- [`title`](refreshcontrol.md#title) + + + + + + +--- + +# Reference + +## Props + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| array of [color](colors.md) | No | Android | + + + + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + + +| Type | Required | Platform | +| - | - | - | +| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | + + + + +--- + +### `tintColor` + +The color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `title` + +The title displayed under the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.18/scrollview.md b/website/versioned_docs/version-0.18/scrollview.md new file mode 100644 index 00000000000..02abd368b24 --- /dev/null +++ b/website/versioned_docs/version-0.18/scrollview.md @@ -0,0 +1,746 @@ +--- +id: version-0.18-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`centerContent`](scrollview.md#centercontent) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`sendMomentumEvents`](scrollview.md#sendmomentumevents) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`horizontal`](scrollview.md#horizontal) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`borderRightColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`shadowColor`**: [color](colors.md) + + - **`shadowOffset`**: object: {width: number,height: number} + + - **`shadowOpacity`**: number + + - **`shadowRadius`**: number + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `sendMomentumEvents` + +When true, momentum events will be sent from Android +This is internal and set automatically by the framework if you have +onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +Deprecated - use `refreshControl` property instead. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([destY]: number, [destX]: number) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo([destY]: number, [destX]: number) +``` + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.18/switch.md b/website/versioned_docs/version-0.18/switch.md new file mode 100644 index 00000000000..57c8d42860c --- /dev/null +++ b/website/versioned_docs/version-0.18/switch.md @@ -0,0 +1,125 @@ +--- +id: version-0.18-switch +title: Switch +original_id: switch +--- +Universal two-state toggle component. + +### Props + +* [View props...](view.md#props) +- [`disabled`](switch.md#disabled) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`value`](switch.md#value) +- [`onTintColor`](switch.md#ontintcolor) +- [`thumbTintColor`](switch.md#thumbtintcolor) +- [`tintColor`](switch.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `disabled` + +If true the user won't be able to toggle the switch. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onValueChange` + +Invoked with the new value when the value changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value of the switch. If true the switch will be turned on. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onTintColor` + +Background color when the switch is turned on. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `thumbTintColor` + +Color of the foreground switch grip. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `tintColor` + +Background color when the switch is turned off. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.18/tabbarios-item.md b/website/versioned_docs/version-0.18/tabbarios-item.md new file mode 100644 index 00000000000..6e6e6f0f62d --- /dev/null +++ b/website/versioned_docs/version-0.18/tabbarios-item.md @@ -0,0 +1,138 @@ +--- +id: version-0.18-tabbarios-item +title: TabBarIOS.Item +original_id: tabbarios-item +--- +### Props + +* [View props...](view.md#props) +- [`badge`](tabbarios-item.md#badge) +- [`icon`](tabbarios-item.md#icon) +- [`onPress`](tabbarios-item.md#onpress) +- [`selected`](tabbarios-item.md#selected) +- [`selectedIcon`](tabbarios-item.md#selectedicon) +- [`style`](tabbarios-item.md#style) +- [`systemIcon`](tabbarios-item.md#systemicon) +- [`title`](tabbarios-item.md#title) + + + + + + +--- + +# Reference + +## Props + +### `badge` + +Little red bubble that sits at the top right of the icon. + +| Type | Required | +| - | - | +| string, ,number | No | + + + + +--- + +### `icon` + +A custom icon for the tab. It is ignored when a system icon is defined. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `onPress` + +Callback when this tab is being selected, you should change the state of your +component to set selected={true}. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selected` + +It specifies whether the children are visible or not. If you see a +blank content, you probably forgot to add a selected one. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectedIcon` + +A custom icon when the tab is selected. It is ignored when a system +icon is defined. If left empty, the icon will be tinted in blue. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `style` + +React style object. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `systemIcon` + +Items comes with a few predefined system icons. Note that if you are +using them, the title and selectedIcon will be overridden with the +system ones. + +| Type | Required | +| - | - | +| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | + + + + +--- + +### `title` + +Text that appears under the icon. It is ignored when a system icon +is defined. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.18/tabbarios.md b/website/versioned_docs/version-0.18/tabbarios.md new file mode 100644 index 00000000000..c5b4dba8369 --- /dev/null +++ b/website/versioned_docs/version-0.18/tabbarios.md @@ -0,0 +1,76 @@ +--- +id: version-0.18-tabbarios +title: TabBarIOS +original_id: tabbarios +--- +### Props + +* [View props...](view.md#props) +- [`barTintColor`](tabbarios.md#bartintcolor) +- [`style`](tabbarios.md#style) +- [`tintColor`](tabbarios.md#tintcolor) +- [`translucent`](tabbarios.md#translucent) + + + + + + +--- + +# Reference + +## Props + +### `barTintColor` + +Background color of the tab bar + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `tintColor` + +Color of the currently selected tab icon + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the tab bar is translucent + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.18/text-style-props.md b/website/versioned_docs/version-0.18/text-style-props.md new file mode 100644 index 00000000000..fbc97059c23 --- /dev/null +++ b/website/versioned_docs/version-0.18/text-style-props.md @@ -0,0 +1,231 @@ +--- +id: version-0.18-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| enum('normal', 'italic') | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS. + +| Type | Required | +| - | - | +| enum('auto', 'left', 'right', 'center', 'justify') | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationLine` + + + +| Type | Required | Platform | +| - | - | - | +| enum('none', 'underline', 'line-through', 'underline line-through') | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'ltr', 'rtl') | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.18/text.md b/website/versioned_docs/version-0.18/text.md new file mode 100644 index 00000000000..8dd7b2be5d0 --- /dev/null +++ b/website/versioned_docs/version-0.18/text.md @@ -0,0 +1,206 @@ +--- +id: version-0.18-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`accessible`](text.md#accessible) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `accessible` + + + +| Type | Required | +| - | - | +| | No | + + + + +--- + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS. + + - **`fontFamily`**: string + + - **`textShadowOffset`**: object: {width: number,height: number} + + - **`textShadowRadius`**: number + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.18/toolbarandroid.md b/website/versioned_docs/version-0.18/toolbarandroid.md new file mode 100644 index 00000000000..76c20454792 --- /dev/null +++ b/website/versioned_docs/version-0.18/toolbarandroid.md @@ -0,0 +1,278 @@ +--- +id: version-0.18-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Although the Toolbar supports remote images for the logo, navigation and action icons, this +should only be used in DEV mode where `require('./some_icon.png')` translates into a packager +URL. In release mode you should always use a drawable resource for these icons. Using +`require('./some_icon.png')` will do this automatically for you, so as long as you don't +explicitly use e.g. `{uri: 'http://...'}`, you will be good. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +* [View props...](view.md#props) +- [`overflowIcon`](toolbarandroid.md#overflowicon) +- [`actions`](toolbarandroid.md#actions) +- [`contentInsetStart`](toolbarandroid.md#contentinsetstart) +- [`logo`](toolbarandroid.md#logo) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`contentInsetEnd`](toolbarandroid.md#contentinsetend) +- [`rtl`](toolbarandroid.md#rtl) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `overflowIcon` + +Sets the overflow icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('./some_icon.png')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| array of object: {title: string,icon: optionalImageSource,show: enum('always', 'ifRoom', 'never'),showWithText: bool} | No | + + + + +--- + +### `contentInsetStart` + +Sets the content inset for the toolbar starting edge. + +The content inset affects the valid area for Toolbar content other than +the navigation button and menu. Insets define the minimum margin for +these components and can be used to effectively align Toolbar content +along well-known gridlines. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInsetEnd` + +Sets the content inset for the toolbar ending edge. + +The content inset affects the valid area for Toolbar content other than +the navigation button and menu. Insets define the minimum margin for +these components and can be used to effectively align Toolbar content +along well-known gridlines. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `rtl` + +Used to set the toolbar direction to RTL. +In addition to this property you need to add + + android:supportsRtl="true" + +to your application AndroidManifest.xml and then call +`setLayoutDirection(LayoutDirection.RTL)` in your MainActivity +`onCreate` method. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.18/touchablehighlight.md b/website/versioned_docs/version-0.18/touchablehighlight.md new file mode 100644 index 00000000000..cd211b97f6f --- /dev/null +++ b/website/versioned_docs/version-0.18/touchablehighlight.md @@ -0,0 +1,132 @@ +--- +id: version-0.18-touchablehighlight +title: TouchableHighlight +original_id: touchablehighlight +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, which allows +the underlay color to show through, darkening or tinting the view. The +underlay comes from adding a view to the view hierarchy, which can sometimes +cause unwanted visual artifacts if not used correctly, for example if the +backgroundColor of the wrapped view isn't explicitly set to an opaque color. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` +> **NOTE**: TouchableHighlight supports only one child +> +> If you wish to have several child components, wrap them in a View. + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchablehighlight.md#activeopacity) +- [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) +- [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) +- [`style`](touchablehighlight.md#style) +- [`underlayColor`](touchablehighlight.md#underlaycolor) + + + + +### Methods + +- [`computeSyntheticState`](touchablehighlight.md#computesyntheticstate) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onHideUnderlay` + +Called immediately after the underlay is hidden + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShowUnderlay` + +Called immediately after the underlay is shown + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `underlayColor` + +The color of the underlay that will show through when the touch is +active. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + +## Methods + +### `computeSyntheticState()` + +```javascript +computeSyntheticState(props) +``` + + + diff --git a/website/versioned_docs/version-0.18/view-style-props.md b/website/versioned_docs/version-0.18/view-style-props.md new file mode 100644 index 00000000000..82fc66a3e27 --- /dev/null +++ b/website/versioned_docs/version-0.18/view-style-props.md @@ -0,0 +1,373 @@ +--- +id: version-0.18-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderStyle`](view-style-props.md#borderstyle) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`overflow`](view-style-props.md#overflow) +- [`shadowColor`](view-style-props.md#shadowcolor) +- [`shadowOffset`](view-style-props.md#shadowoffset) +- [`shadowOpacity`](view-style-props.md#shadowopacity) +- [`shadowRadius`](view-style-props.md#shadowradius) +- [`elevation`](view-style-props.md#elevation) + + + + + + +--- + +# Reference + +## Props + +### `borderStyle` + + + +| Type | Required | +| - | - | +| enum('solid', 'dotted', 'dashed') | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `shadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `shadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `shadowOpacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `shadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `elevation` + +(Android-only) Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +This adds a drop shadow to the item and affects z-order for overlapping views. +Only supported on Android 5.0+, has no effect on earlier versions. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.18/viewpagerandroid.md b/website/versioned_docs/version-0.18/viewpagerandroid.md new file mode 100644 index 00000000000..b37a8110089 --- /dev/null +++ b/website/versioned_docs/version-0.18/viewpagerandroid.md @@ -0,0 +1,157 @@ +--- +id: version-0.18-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be *not* be animated. + + + diff --git a/website/versioned_docs/version-0.18/webview.md b/website/versioned_docs/version-0.18/webview.md new file mode 100644 index 00000000000..ba84d4e9dc3 --- /dev/null +++ b/website/versioned_docs/version-0.18/webview.md @@ -0,0 +1,366 @@ +--- +id: version-0.18-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`style`](webview.md#style) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`html`](webview.md#html) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`contentInset`](webview.md#contentinset) +- [`url`](webview.md#url) +- [`domStorageEnabledAndroid`](webview.md#domstorageenabledandroid) +- [`javaScriptEnabledAndroid`](webview.md#javascriptenabledandroid) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`scrollEnabled`](webview.md#scrollenabled) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `html` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `url` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `domStorageEnabledAndroid` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabledAndroid` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.19/animated.md b/website/versioned_docs/version-0.19/animated.md new file mode 100644 index 00000000000..d3cedc8c5d0 --- /dev/null +++ b/website/versioned_docs/version-0.19/animated.md @@ -0,0 +1,638 @@ +--- +id: version-0.19-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scrolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1}, // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targeted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performance way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`multiply`](animated.md#multiply) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations. This is useful because there is no way to +synchronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.19/appstate.md b/website/versioned_docs/version-0.19/appstate.md new file mode 100644 index 00000000000..ca3d078751a --- /dev/null +++ b/website/versioned_docs/version-0.19/appstate.md @@ -0,0 +1,106 @@ +--- +id: version-0.19-appstate +title: AppState +original_id: appstate +--- + +`AppState` can tell you if the app is in the foreground or background, +and notify you when the state changes. + +AppState is frequently used to determine the intent and proper behavior when +handling push notifications. + +### App States + + - `active` - The app is running in the foreground + - `background` - The app is running in the background. The user is either + in another app or on the home screen + - `inactive` - This is a transition state that currently never happens for + typical React Native apps. + +For more information, see +[Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html) + +### Basic Usage + +To see the current state, you can check `AppState.currentState`, which +will be kept up-to-date. However, `currentState` will be null at launch +while `AppState` retrieves it over the bridge. + +``` +getInitialState: function() { + return { + currentAppState: AppState.currentState, + }; +}, +componentDidMount: function() { + AppState.addEventListener('change', this._handleAppStateChange); +}, +componentWillUnmount: function() { + AppState.removeEventListener('change', this._handleAppStateChange); +}, +_handleAppStateChange: function(currentAppState) { + this.setState({ currentAppState, }); +}, +render: function() { + return ( + Current state is: {this.state.currentAppState} + ); +}, +``` + +This example will only ever appear to say "Current state is: active" because +the app is only visible to the user when in the `active` state, and the null +state will happen only momentarily. + + +### Methods + +- [`addEventListener`](appstate.md#addeventlistener) +- [`removeEventListener`](appstate.md#removeeventlistener) + + +### Properties + +- [`currentState`](appstate.md#currentstate) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Add a handler to AppState changes by listening to the `change` event type +and providing the handler + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Remove a handler by passing the `change` event type and the handler + + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.19/image.md b/website/versioned_docs/version-0.19/image.md new file mode 100644 index 00000000000..7478583a3a6 --- /dev/null +++ b/website/versioned_docs/version-0.19/image.md @@ -0,0 +1,289 @@ +--- +id: version-0.19-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('./path/to/image.png')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`backgroundColor`**: [color](colors.md) + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: [color](colors.md) + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.19/picker.md b/website/versioned_docs/version-0.19/picker.md new file mode 100644 index 00000000000..785c742770f --- /dev/null +++ b/website/versioned_docs/version-0.19/picker.md @@ -0,0 +1,155 @@ +--- +id: version-0.19-picker +title: Picker +original_id: picker +--- +Renders the native picker component on iOS and Android. Example: + + this.setState({language: lang})}> + + + + +Note: The picker has a default fixed height which you can modify +using `style` if needed. To set the width, you can use `style` +as well, e.g. to set a fixed width or stretch the picker horizontally. + +### Props + +* [View props...](view.md#props) +- [`onValueChange`](picker.md#onvaluechange) +- [`selectedValue`](picker.md#selectedvalue) +- [`style`](picker.md#style) +- [`testID`](picker.md#testid) +- [`enabled`](picker.md#enabled) +- [`mode`](picker.md#mode) +- [`prompt`](picker.md#prompt) +- [`itemStyle`](picker.md#itemstyle) + + + + + + +--- + +# Reference + +## Props + +### `onValueChange` + +Callback for when an item is selected. This is called with the following parameters: + - `itemValue`: the `value` prop of the item that was selected + - `itemPosition`: the index of the selected item in this picker + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selectedValue` + +Value matching value of one of the items. Can be a string or an integer. + +| Type | Required | +| - | - | +| any | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| pickerStyleType | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `enabled` + +If set to false, the picker will be disabled, i.e. the user will not be able to make a +selection. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `mode` + +On Android, specifies how to display the selection items when the user taps on the picker: + - 'dialog': Show a modal dialog. This is the default. + - 'dropdown': Shows a dropdown anchored to the picker view + + + +| Type | Required | Platform | +| - | - | - | +| enum('dialog', 'dropdown') | No | Android | + + + + +--- + +### `prompt` + +Prompt string for this picker, used on Android in dialog mode as the title of the dialog. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `itemStyle` + +Style to apply to each of the item labels. + + +| Type | Required | Platform | +| - | - | - | +| itemStylePropType | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.19/pixelratio.md b/website/versioned_docs/version-0.19/pixelratio.md new file mode 100644 index 00000000000..2b2d00714bf --- /dev/null +++ b/website/versioned_docs/version-0.19/pixelratio.md @@ -0,0 +1,134 @@ +--- +id: version-0.19-pixelratio +title: PixelRatio +original_id: pixelratio +--- + +PixelRatio class gives access to the device pixel density. + +### Fetching a correctly sized image + +You should get a higher resolution image if you are on a high pixel density +device. A good rule of thumb is to multiply the size of the image you display +by the pixel ratio. + +``` +var image = getImage({ + width: PixelRatio.getPixelSizeForLayoutSize(200), + height: PixelRatio.getPixelSizeForLayoutSize(100), +}); + +``` + + +### Methods + +- [`get`](pixelratio.md#get) +- [`getFontScale`](pixelratio.md#getfontscale) +- [`getPixelSizeForLayoutSize`](pixelratio.md#getpixelsizeforlayoutsize) +- [`roundToNearestPixel`](pixelratio.md#roundtonearestpixel) +- [`startDetecting`](pixelratio.md#startdetecting) + + + + +--- + +# Reference + +## Methods + +### `get()` + +```javascript +static get() +``` + + +Returns the device pixel density. Some examples: + + - PixelRatio.get() === 1 + - mdpi Android devices (160 dpi) + - PixelRatio.get() === 1.5 + - hdpi Android devices (240 dpi) + - PixelRatio.get() === 2 + - iPhone 4, 4S + - iPhone 5, 5c, 5s + - iPhone 6 + - xhdpi Android devices (320 dpi) + - PixelRatio.get() === 3 + - iPhone 6 plus + - xxhdpi Android devices (480 dpi) + - PixelRatio.get() === 3.5 + - Nexus 6 + + + + +--- + +### `getFontScale()` + +```javascript +static getFontScale() +``` + + +Returns the scaling factor for font sizes. This is the ratio that is used to calculate the +absolute font size, so any elements that heavily depend on that should use this to do +calculations. + +If a font scale is not set, this returns the device pixel ratio. + +Currently this is only implemented on Android and reflects the user preference set in +Settings > Display > Font size, on iOS it will always return the default pixel ratio. +@platform android + + + + +--- + +### `getPixelSizeForLayoutSize()` + +```javascript +static getPixelSizeForLayoutSize(layoutSize) +``` + + +Converts a layout size (dp) to pixel size (px). + +Guaranteed to return an integer number. + + + + +--- + +### `roundToNearestPixel()` + +```javascript +static roundToNearestPixel(layoutSize) +``` + + +Rounds a layout size (dp) to the nearest layout size that corresponds to +an integer number of pixels. For example, on a device with a PixelRatio +of 3, `PixelRatio.roundToNearestPixel(8.4) = 8.33`, which corresponds to +exactly (8.33 * 3) = 25 pixels. + + + + +--- + +### `startDetecting()` + +```javascript +static startDetecting() +``` + +// No-op for iOS, but used on the web. Should not be documented. + + + diff --git a/website/versioned_docs/version-0.19/progressbarandroid.md b/website/versioned_docs/version-0.19/progressbarandroid.md new file mode 100644 index 00000000000..7be23209e81 --- /dev/null +++ b/website/versioned_docs/version-0.19/progressbarandroid.md @@ -0,0 +1,121 @@ +--- +id: version-0.19-progressbarandroid +title: ProgressBarAndroid +original_id: progressbarandroid +--- +React component that wraps the Android-only `ProgressBar`. This component is used to indicate +that the app is loading or there is some activity in the app. + +Example: + +``` +render: function() { + var progressBar = + + + ; + + return ( + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`color`](progressbarandroid.md#color) +- [`indeterminate`](progressbarandroid.md#indeterminate) +- [`progress`](progressbarandroid.md#progress) +- [`styleAttr`](progressbarandroid.md#styleattr) +- [`testID`](progressbarandroid.md#testid) + + + + + + +--- + +# Reference + +## Props + +### `color` + +Color of the progress bar. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `indeterminate` + +If the progress bar will show indeterminate progress. Note that this +can only be false if styleAttr is Horizontal. + +| Type | Required | +| - | - | +| indeterminateType | No | + + + + +--- + +### `progress` + +The progress value (between 0 and 1). + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `styleAttr` + +Style of the ProgressBar. One of: + +- Horizontal +- Normal (default) +- Small +- Large +- Inverse +- SmallInverse +- LargeInverse + +| Type | Required | +| - | - | +| enum('Horizontal', 'Normal', 'Small', 'Large', 'Inverse', 'SmallInverse', 'LargeInverse') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.19/pushnotificationios.md b/website/versioned_docs/version-0.19/pushnotificationios.md new file mode 100644 index 00000000000..50eb31413bd --- /dev/null +++ b/website/versioned_docs/version-0.19/pushnotificationios.md @@ -0,0 +1,359 @@ +--- +id: version-0.19-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Be sure to add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` +- Set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `soundName` : The sound played when the notification is fired (optional). + + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `soundName` : The sound played when the notification is fired (optional). + + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.19/scrollview.md b/website/versioned_docs/version-0.19/scrollview.md new file mode 100644 index 00000000000..47b0f7ee53c --- /dev/null +++ b/website/versioned_docs/version-0.19/scrollview.md @@ -0,0 +1,742 @@ +--- +id: version-0.19-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`centerContent`](scrollview.md#centercontent) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`sendMomentumEvents`](scrollview.md#sendmomentumevents) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`horizontal`](scrollview.md#horizontal) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `sendMomentumEvents` + +When true, momentum events will be sent from Android +This is internal and set automatically by the framework if you have +onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. Reasonable choices include + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +Deprecated - use `refreshControl` property instead. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo(destY, destX, animated) +``` + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(destY, destX) +``` + +Deprecated, do not use. + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.19/stylesheet.md b/website/versioned_docs/version-0.19/stylesheet.md new file mode 100644 index 00000000000..fe81dddee11 --- /dev/null +++ b/website/versioned_docs/version-0.19/stylesheet.md @@ -0,0 +1,89 @@ +--- +id: version-0.19-stylesheet +title: StyleSheet +original_id: stylesheet +--- + +A StyleSheet is an abstraction similar to CSS StyleSheets + +Create a new StyleSheet: + +``` +var styles = StyleSheet.create({ + container: { + borderRadius: 4, + borderWidth: 0.5, + borderColor: '#d6d7da', + }, + title: { + fontSize: 19, + fontWeight: 'bold', + }, + activeTitle: { + color: 'red', + }, +}); +``` + +Use a StyleSheet: + +``` + + + +``` + +Code quality: + + - By moving styles away from the render function, you're making the code + easier to understand. + - Naming the styles is a good way to add meaning to the low level components + in the render function. + +Performance: + + - Making a stylesheet from a style object makes it possible to refer to it +by ID instead of creating a new style object every time. + - It also allows to send the style only once through the bridge. All +subsequent uses are going to refer an id (not implemented yet). + + +### Methods + +- [`create`](stylesheet.md#create) + + +### Properties + +- [`hairlineWidth`](stylesheet.md#hairlinewidth) +- [`flatten`](stylesheet.md#flatten) + + + + +--- + +# Reference + +## Methods + +### `create()` + +```javascript +static create(obj) +``` + + +Creates a StyleSheet style reference from the given object. + + + + +## Properties + + + +--- + + + diff --git a/website/versioned_docs/version-0.19/text-style-props.md b/website/versioned_docs/version-0.19/text-style-props.md new file mode 100644 index 00000000000..ded66e055b6 --- /dev/null +++ b/website/versioned_docs/version-0.19/text-style-props.md @@ -0,0 +1,245 @@ +--- +id: version-0.19-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`textAlignVertical`](text-style-props.md#textalignvertical) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| enum('normal', 'italic') | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS. + +| Type | Required | +| - | - | +| enum('auto', 'left', 'right', 'center', 'justify') | No | + + + + +--- + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlignVertical` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'top', 'bottom', 'center') | No | Android | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationLine` + + + +| Type | Required | Platform | +| - | - | - | +| enum('none', 'underline', 'line-through', 'underline line-through') | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'ltr', 'rtl') | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.19/text.md b/website/versioned_docs/version-0.19/text.md new file mode 100644 index 00000000000..95945cff30a --- /dev/null +++ b/website/versioned_docs/version-0.19/text.md @@ -0,0 +1,208 @@ +--- +id: version-0.19-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`accessible`](text.md#accessible) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `accessible` + + + +| Type | Required | +| - | - | +| | No | + + + + +--- + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowOffset`**: object: {width: number,height: number} + + - **`color`**: [color](colors.md) + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS. + + - **`textShadowColor`**: [color](colors.md) + + - **`fontFamily`**: string + + - **`textShadowRadius`**: number + + - **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.19/textinput.md b/website/versioned_docs/version-0.19/textinput.md new file mode 100644 index 00000000000..0cfad42e29c --- /dev/null +++ b/website/versioned_docs/version-0.19/textinput.md @@ -0,0 +1,572 @@ +--- +id: version-0.19-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: + +### Props + +* [View props...](view.md#props) +- [`placeholder`](textinput.md#placeholder) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`style`](textinput.md#style) +- [`testID`](textinput.md#testid) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.19/touchablewithoutfeedback.md b/website/versioned_docs/version-0.19/touchablewithoutfeedback.md new file mode 100644 index 00000000000..9b1027266e6 --- /dev/null +++ b/website/versioned_docs/version-0.19/touchablewithoutfeedback.md @@ -0,0 +1,202 @@ +--- +id: version-0.19-touchablewithoutfeedback +title: TouchableWithoutFeedback +original_id: touchablewithoutfeedback +--- +Do not use unless you have a very good reason. All the elements that +respond to press should have a visual feedback when touched. This is +one of the primary reason a "web" app doesn't feel "native". + +> **NOTE**: TouchableWithoutFeedback supports only one child +> +> If you wish to have several child components, wrap them in a View. + +### Props + +- [`onLayout`](touchablewithoutfeedback.md#onlayout) +- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) +- [`accessible`](touchablewithoutfeedback.md#accessible) +- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) +- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) +- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) +- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) +- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) +- [`onPress`](touchablewithoutfeedback.md#onpress) +- [`onPressIn`](touchablewithoutfeedback.md#onpressin) +- [`onPressOut`](touchablewithoutfeedback.md#onpressout) +- [`pressRetentionOffset`](touchablewithoutfeedback.md#pressretentionoffset) + + + + + + +--- + +# Reference + +## Props + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityComponentType` + + + +| Type | Required | +| - | - | +| View.AccessibilityComponentType | No | + + + + +--- + +### `accessible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `delayLongPress` + +Delay in ms, from onPressIn, before onLongPress is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressIn` + +Delay in ms, from the start of the touch, before onPressIn is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressOut` + +Delay in ms, from the release of the touch, before onPressOut is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `accessibilityTraits` + + + +| Type | Required | +| - | - | +| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | + + + + +--- + +### `onLongPress` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +Called when the touch is released, but not if cancelled (e.g. by a scroll +that steals the responder lock). + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressIn` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressOut` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pressRetentionOffset` + +When the scroll view is disabled, this defines how far your touch may +move off of the button, before deactivating the button. Once deactivated, +try moving it back and you'll see that the button is once again +reactivated! Move it back and forth several times while the scroll view +is disabled. Ensure you pass in a constant to reduce memory allocations. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + + + diff --git a/website/versioned_docs/version-0.19/view-style-props.md b/website/versioned_docs/version-0.19/view-style-props.md new file mode 100644 index 00000000000..49d02799272 --- /dev/null +++ b/website/versioned_docs/version-0.19/view-style-props.md @@ -0,0 +1,317 @@ +--- +id: version-0.19-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`borderStyle`](view-style-props.md#borderstyle) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`overflow`](view-style-props.md#overflow) +- [`elevation`](view-style-props.md#elevation) + + + + + + +--- + +# Reference + +## Props + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderStyle` + + + +| Type | Required | +| - | - | +| enum('solid', 'dotted', 'dashed') | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `elevation` + +(Android-only) Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +This adds a drop shadow to the item and affects z-order for overlapping views. +Only supported on Android 5.0+, has no effect on earlier versions. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.19/webview.md b/website/versioned_docs/version-0.19/webview.md new file mode 100644 index 00000000000..782f8b496e0 --- /dev/null +++ b/website/versioned_docs/version-0.19/webview.md @@ -0,0 +1,422 @@ +--- +id: version-0.19-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`renderLoading`](webview.md#renderloading) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`html`](webview.md#html) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`contentInset`](webview.md#contentinset) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`url`](webview.md#url) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`scrollEnabled`](webview.md#scrollenabled) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `html` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onError` + +Invoked when load fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Invoked when load finish + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `url` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `domStorageEnabled` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.20/cameraroll.md b/website/versioned_docs/version-0.20/cameraroll.md new file mode 100644 index 00000000000..5a77ff5c506 --- /dev/null +++ b/website/versioned_docs/version-0.20/cameraroll.md @@ -0,0 +1,65 @@ +--- +id: version-0.20-cameraroll +title: CameraRoll +original_id: cameraroll +--- + +`CameraRoll` provides access to the local camera roll / gallery. + + +### Methods + +- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) +- [`getPhotos`](cameraroll.md#getphotos) + + + + +--- + +# Reference + +## Methods + +### `saveImageWithTag()` + +```javascript +static saveImageWithTag(tag) +``` + + +Saves the image to the camera roll / gallery. + +On Android, the tag is a local URI, such as `"file:///sdcard/img.png"`. + +On iOS, the tag can be one of the following: + + - local URI + - assets-library tag + - a tag not matching any of the above, which means the image data will +be stored in memory (and consume memory as long as the process is alive) + +Returns a Promise which when resolved will be passed the new URI. + + + + +--- + +### `getPhotos()` + +```javascript +static getPhotos(params) +``` + + +Returns a Promise with photo identifier objects from the local camera +roll of the device matching shape defined by `getPhotosReturnChecker`. + +@param {object} params See `getPhotosParamChecker`. + +Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`. + + + + diff --git a/website/versioned_docs/version-0.20/clipboard.md b/website/versioned_docs/version-0.20/clipboard.md new file mode 100644 index 00000000000..9fcf4ebca93 --- /dev/null +++ b/website/versioned_docs/version-0.20/clipboard.md @@ -0,0 +1,60 @@ +--- +id: version-0.20-clipboard +title: Clipboard +original_id: clipboard +--- + +`Clipboard` gives you an interface for setting and getting content from Clipboard on both iOS and Android + + +### Methods + +- [`getString`](clipboard.md#getstring) +- [`setString`](clipboard.md#setstring) + + + + +--- + +# Reference + +## Methods + +### `getString()` + +```javascript +static getString() +``` + + +Get content of string type, this method returns a `Promise`, so you can use following code to get clipboard content +```javascript +async _getContent() { + var content = await Clipboard.getString(); +} +``` + + + + +--- + +### `setString()` + +```javascript +static setString(content) +``` + + +Set content of string type. You can use following code to set clipboard content +```javascript +_setContent() { + Clipboard.setString('hello world'); +} +``` +@param the content to be stored in the clipboard. + + + + diff --git a/website/versioned_docs/version-0.20/datepickerandroid.md b/website/versioned_docs/version-0.20/datepickerandroid.md new file mode 100644 index 00000000000..b6a0236166e --- /dev/null +++ b/website/versioned_docs/version-0.20/datepickerandroid.md @@ -0,0 +1,94 @@ +--- +id: version-0.20-datepickerandroid +title: DatePickerAndroid +original_id: datepickerandroid +--- + +Opens the standard Android date picker dialog. + +### Example + +``` +try { + const {action, year, month, day} = await DatePickerAndroid.open({ + // Use `new Date()` for current date. + // May 25 2020. Month 0 is January. + date: new Date(2020, 4, 25) + }); + if (action !== DatePickerAndroid.dismissedAction) { + // Selected year, month (0-11), day + } +} catch ({code, message}) { + console.warn('Cannot open date picker', message); +} +``` + + +### Methods + +- [`open`](datepickerandroid.md#open) +- [`dateSetAction`](datepickerandroid.md#datesetaction) +- [`dismissedAction`](datepickerandroid.md#dismissedaction) + + + + +--- + +# Reference + +## Methods + +### `open()` + +```javascript +static open(options) +``` + + +Opens the standard Android date picker dialog. + +The available keys for the `options` object are: + * `date` (`Date` object or timestamp in milliseconds) - date to show by default + * `minDate` (`Date` or timestamp in milliseconds) - minimum date that can be selected + * `maxDate` (`Date` object or timestamp in milliseconds) - minimum date that can be selected + +Returns a Promise which will be invoked an object containing `action`, `year`, `month` (0-11), +`day` if the user picked a date. If the user dismissed the dialog, the Promise will +still be resolved with action being `DatePickerAndroid.dismissedAction` and all the other keys +being undefined. **Always** check whether the `action` before reading the values. + +Note the native date picker dialog has some UI glitches on Android 4 and lower +when using the `minDate` and `maxDate` options. + + + + +--- + +### `dateSetAction()` + +```javascript +static dateSetAction() +``` + + +A date has been selected. + + + + +--- + +### `dismissedAction()` + +```javascript +static dismissedAction() +``` + + +The dialog has been dismissed. + + + + diff --git a/website/versioned_docs/version-0.20/image-style-props.md b/website/versioned_docs/version-0.20/image-style-props.md new file mode 100644 index 00000000000..d03d4efbbf6 --- /dev/null +++ b/website/versioned_docs/version-0.20/image-style-props.md @@ -0,0 +1,175 @@ +--- +id: version-0.20-image-style-props +title: Image Style Props +original_id: image-style-props +--- +### Props + +- [`backfaceVisibility`](image-style-props.md#backfacevisibility) +- [`backgroundColor`](image-style-props.md#backgroundcolor) +- [`borderColor`](image-style-props.md#bordercolor) +- [`borderRadius`](image-style-props.md#borderradius) +- [`borderWidth`](image-style-props.md#borderwidth) +- [`opacity`](image-style-props.md#opacity) +- [`overflow`](image-style-props.md#overflow) +- [`resizeMode`](image-style-props.md#resizemode) +- [`overlayColor`](image-style-props.md#overlaycolor) +- [`tintColor`](image-style-props.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `resizeMode` + + + +| Type | Required | +| - | - | +| Object.keys(ImageResizeMode) | No | + + + + +--- + +### `overlayColor` + +When the image has rounded corners, specifying an overlayColor will +cause the remaining space in the corners to be filled with a solid color. +This is useful in cases which are not supported by the Android +implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + +A typical way to use this prop is with images displayed on a solid +background and setting the `overlayColor` to the same color +as the background. + +For details of how this works under the hood, see +http://frescolib.org/rounded-corners-and-circles.md + + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `tintColor` + +iOS-Specific style to "tint" an image. +Changes the color of all the non-transparent pixels to the tintColor. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.20/image.md b/website/versioned_docs/version-0.20/image.md new file mode 100644 index 00000000000..69707b93e43 --- /dev/null +++ b/website/versioned_docs/version-0.20/image.md @@ -0,0 +1,336 @@ +--- +id: version-0.20-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('./path/to/image.png')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`backgroundColor`**: [color](colors.md) + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`overlayColor`**: string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + - **`tintColor`**: [color](colors.md) (_iOS_) + + iOS-Specific style to "tint" an image. + Changes the color of all the non-transparent pixels to the tintColor. + + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function) +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + + + diff --git a/website/versioned_docs/version-0.20/imagestore.md b/website/versioned_docs/version-0.20/imagestore.md new file mode 100644 index 00000000000..a17703288bf --- /dev/null +++ b/website/versioned_docs/version-0.20/imagestore.md @@ -0,0 +1,100 @@ +--- +id: version-0.20-imagestore +title: ImageStore +original_id: imagestore +--- + + + +### Methods + +- [`hasImageForTag`](imagestore.md#hasimagefortag) +- [`removeImageForTag`](imagestore.md#removeimagefortag) +- [`addImageFromBase64`](imagestore.md#addimagefrombase64) +- [`getBase64ForTag`](imagestore.md#getbase64fortag) + + + + +--- + +# Reference + +## Methods + +### `hasImageForTag()` + +```javascript +static hasImageForTag(uri, callback) +``` + + +Check if the ImageStore contains image data for the specified URI. +@platform ios + + + + +--- + +### `removeImageForTag()` + +```javascript +static removeImageForTag(uri) +``` + + +Delete an image from the ImageStore. Images are stored in memory and +must be manually removed when you are finished with them, otherwise they +will continue to use up RAM until the app is terminated. It is safe to +call `removeImageForTag()` without first calling `hasImageForTag()`, it +will simply fail silently. +@platform ios + + + + +--- + +### `addImageFromBase64()` + +```javascript +static addImageFromBase64(base64ImageData, success, failure) +``` + + +Stores a base64-encoded image in the ImageStore, and returns a URI that +can be used to access or display the image later. Images are stored in +memory only, and must be manually deleted when you are finished with +them by calling `removeImageForTag()`. + +Note that it is very inefficient to transfer large quantities of binary +data between JS and native code, so you should avoid calling this more +than necessary. +@platform ios + + + + +--- + +### `getBase64ForTag()` + +```javascript +static getBase64ForTag(uri, success, failure) +``` + + +Retrieves the base64-encoded data for an image in the ImageStore. If the +specified URI does not match an image in the store, the failure callback +will be called. + +Note that it is very inefficient to transfer large quantities of binary +data between JS and native code, so you should avoid calling this more +than necessary. To display an image in the ImageStore, you can just pass +the URI to an `` component; there is no need to retrieve the +base64 data. + + + + diff --git a/website/versioned_docs/version-0.20/layout-props.md b/website/versioned_docs/version-0.20/layout-props.md new file mode 100644 index 00000000000..24a31ca2fc6 --- /dev/null +++ b/website/versioned_docs/version-0.20/layout-props.md @@ -0,0 +1,467 @@ +--- +id: version-0.20-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`alignSelf`](layout-props.md#alignself) +- [`marginLeft`](layout-props.md#marginleft) +- [`marginRight`](layout-props.md#marginright) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) + + + + + + +--- + +# Reference + +## Props + +### `marginHorizontal` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `alignItems` + + + +| Type | Required | +| - | - | +| enum('flex-start', 'flex-end', 'center', 'stretch') | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `bottom` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `flex` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `flexDirection` + + + +| Type | Required | +| - | - | +| enum('row', 'column') | No | + + + + +--- + +### `flexWrap` + + + +| Type | Required | +| - | - | +| enum('wrap', 'nowrap') | No | + + + + +--- + +### `height` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `justifyContent` + + + +| Type | Required | +| - | - | +| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No | + + + + +--- + +### `left` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `margin` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginBottom` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `alignSelf` + + + +| Type | Required | +| - | - | +| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') | No | + + + + +--- + +### `marginLeft` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginRight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginTop` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginVertical` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `padding` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingBottom` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingHorizontal` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingLeft` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingRight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingTop` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingVertical` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `position` + + + +| Type | Required | +| - | - | +| enum('absolute', 'relative') | No | + + + + +--- + +### `right` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `top` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `width` + + + +| Type | Required | +| - | - | +| number | No | + + + + + + diff --git a/website/versioned_docs/version-0.20/linking.md b/website/versioned_docs/version-0.20/linking.md new file mode 100644 index 00000000000..6cc5438c170 --- /dev/null +++ b/website/versioned_docs/version-0.20/linking.md @@ -0,0 +1,195 @@ +--- +id: version-0.20-linking +title: Linking +original_id: linking +--- + +`Linking` gives you a general interface to interact with both incoming +and outgoing app links. + +### Basic Usage + +#### Handling deep links + +If your app was launched from an external url registered to your app you can +access and handle it from any component you want with + +``` +componentDidMount() { + var url = Linking.getInitialURL().then(url) => { + if (url) { + console.log('Initial url is: ' + url); + } + }).catch(err => console.error('An error occurred', err)); +} +``` + +NOTE: For instructions on how to add support for deep linking on Android, +refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). + +NOTE: For iOS, in case you also want to listen to incoming app links during your app's +execution you'll need to add the following lines to you `*AppDelegate.m`: + +``` +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [LinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} + +// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). +- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity + restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler +{ + return [LinkingManager application:application + continueUserActivity:userActivity + restorationHandler:restorationHandler]; +} + +``` + +And then on your React component you'll be able to listen to the events on +`Linking` as follows + +``` +componentDidMount() { + Linking.addEventListener('url', this._handleOpenURL); +}, +componentWillUnmount() { + Linking.removeEventListener('url', this._handleOpenURL); +}, +_handleOpenURL(event) { + console.log(event.url); +} +``` +Note that this is only supported on iOS. + +#### Opening external links + +To start the corresponding activity for a link (web URL, email, contact etc.), call + +``` +Linking.openURL(url).catch(err => console.error('An error occurred', err)); +``` + +If you want to check if any installed app can handle a given URL beforehand you can call +``` +Linking.canOpenURL(url).then(supported => { + if (!supported) { + console.log('Can\'t handle url: ' + url); + } else { + return Linking.openURL(url); + } +}).catch(err => console.error('An error occurred', err)); +``` + + +### Methods + +- [`addEventListener`](linking.md#addeventlistener) +- [`removeEventListener`](linking.md#removeeventlistener) +- [`openURL`](linking.md#openurl) +- [`canOpenURL`](linking.md#canopenurl) +- [`getInitialURL`](linking.md#getinitialurl) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Add a handler to Linking changes by listening to the `url` event type +and providing the handler + +@platform ios + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Remove a handler by passing the `url` event type and the handler + +@platform ios + + + + +--- + +### `openURL()` + +```javascript +static openURL(url) +``` + + +Try to open the given `url` with any of the installed apps. + +You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, +or any other URL that can be opened with the installed apps. + +NOTE: This method will fail if the system doesn't know how to open the specified URL. +If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + + + + +--- + +### `canOpenURL()` + +```javascript +static canOpenURL(url) +``` + + +Determine whether or not an installed app can handle a given URL. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + +NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key +inside `Info.plist`. + +@param URL the URL to open + + + + +--- + +### `getInitialURL()` + +```javascript +static getInitialURL() +``` + + +If the app launch was triggered by an app link with, +it will give the link url, otherwise it will give `null` + +NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents + + + + diff --git a/website/versioned_docs/version-0.20/picker.md b/website/versioned_docs/version-0.20/picker.md new file mode 100644 index 00000000000..94eb39b8618 --- /dev/null +++ b/website/versioned_docs/version-0.20/picker.md @@ -0,0 +1,152 @@ +--- +id: version-0.20-picker +title: Picker +original_id: picker +--- +Renders the native picker component on iOS and Android. Example: + + this.setState({language: lang})}> + + + + +### Props + +* [View props...](view.md#props) +- [`onValueChange`](picker.md#onvaluechange) +- [`selectedValue`](picker.md#selectedvalue) +- [`style`](picker.md#style) +- [`testID`](picker.md#testid) +- [`enabled`](picker.md#enabled) +- [`mode`](picker.md#mode) +- [`prompt`](picker.md#prompt) +- [`itemStyle`](picker.md#itemstyle) + + + + + + +--- + +# Reference + +## Props + +### `onValueChange` + +Callback for when an item is selected. This is called with the following parameters: + - `itemValue`: the `value` prop of the item that was selected + - `itemPosition`: the index of the selected item in this picker + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selectedValue` + +Value matching value of one of the items. Can be a string or an integer. + +| Type | Required | +| - | - | +| any | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| pickerStyleType | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `enabled` + +If set to false, the picker will be disabled, i.e. the user will not be able to make a +selection. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `mode` + +On Android, specifies how to display the selection items when the user taps on the picker: + + - 'dialog': Show a modal dialog. This is the default. + - 'dropdown': Shows a dropdown anchored to the picker view + + + +| Type | Required | Platform | +| - | - | - | +| enum('dialog', 'dropdown') | No | Android | + + + + +--- + +### `prompt` + +Prompt string for this picker, used on Android in dialog mode as the title of the dialog. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `itemStyle` + +Style to apply to each of the item labels. + + +| Type | Required | Platform | +| - | - | - | +| itemStylePropType | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.20/refreshcontrol.md b/website/versioned_docs/version-0.20/refreshcontrol.md new file mode 100644 index 00000000000..180b10d4b0e --- /dev/null +++ b/website/versioned_docs/version-0.20/refreshcontrol.md @@ -0,0 +1,142 @@ +--- +id: version-0.20-refreshcontrol +title: RefreshControl +original_id: refreshcontrol +--- +This component is used inside a ScrollView to add pull to refresh +functionality. When the ScrollView is at `scrollY: 0`, swiping down +triggers an `onRefresh` event. + +### Props + +* [View props...](view.md#props) +- [`onRefresh`](refreshcontrol.md#onrefresh) +- [`refreshing`](refreshcontrol.md#refreshing) +- [`colors`](refreshcontrol.md#colors) +- [`enabled`](refreshcontrol.md#enabled) +- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) +- [`size`](refreshcontrol.md#size) +- [`tintColor`](refreshcontrol.md#tintcolor) +- [`title`](refreshcontrol.md#title) + + + + + + +--- + +# Reference + +## Props + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| array of [color](colors.md) | No | Android | + + + + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + + +| Type | Required | Platform | +| - | - | - | +| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | + + + + +--- + +### `tintColor` + +The color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `title` + +The title displayed under the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.20/scrollview.md b/website/versioned_docs/version-0.20/scrollview.md new file mode 100644 index 00000000000..0be685d7710 --- /dev/null +++ b/website/versioned_docs/version-0.20/scrollview.md @@ -0,0 +1,772 @@ +--- +id: version-0.20-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`sendMomentumEvents`](scrollview.md#sendmomentumevents) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`horizontal`](scrollview.md#horizontal) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `sendMomentumEvents` + +When true, momentum events will be sent from Android +This is internal and set automatically by the framework if you have +onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. +Syntax: + +scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.20/statusbar.md b/website/versioned_docs/version-0.20/statusbar.md new file mode 100644 index 00000000000..4445dc3ce5c --- /dev/null +++ b/website/versioned_docs/version-0.20/statusbar.md @@ -0,0 +1,156 @@ +--- +id: version-0.20-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light-content') | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| enum('fade', 'slide') | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.20/text.md b/website/versioned_docs/version-0.20/text.md new file mode 100644 index 00000000000..909c463801b --- /dev/null +++ b/website/versioned_docs/version-0.20/text.md @@ -0,0 +1,209 @@ +--- +id: version-0.20-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `accessible` + + + +| Type | Required | +| - | - | +| | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowOffset`**: object: {width: number,height: number} + + - **`color`**: [color](colors.md) + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS. + + - **`textShadowColor`**: [color](colors.md) + + - **`fontFamily`**: string + + - **`textShadowRadius`**: number + + - **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.20/textinput.md b/website/versioned_docs/version-0.20/textinput.md new file mode 100644 index 00000000000..6e399fc5add --- /dev/null +++ b/website/versioned_docs/version-0.20/textinput.md @@ -0,0 +1,572 @@ +--- +id: version-0.20-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: + +### Props + +* [View props...](view.md#props) +- [`placeholder`](textinput.md#placeholder) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on ios) color of the text input + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.20/timepickerandroid.md b/website/versioned_docs/version-0.20/timepickerandroid.md new file mode 100644 index 00000000000..b40133bb16a --- /dev/null +++ b/website/versioned_docs/version-0.20/timepickerandroid.md @@ -0,0 +1,93 @@ +--- +id: version-0.20-timepickerandroid +title: TimePickerAndroid +original_id: timepickerandroid +--- + +Opens the standard Android time picker dialog. + +### Example + +``` +try { + const {action, hour, minute} = await TimePickerAndroid.open({ + hour: 14, + minute: 0, + is24Hour: false, // Will display '2 PM' + }); + if (action !== DatePickerAndroid.dismissedAction) { + // Selected hour (0-23), minute (0-59) + } +} catch ({code, message}) { + console.warn('Cannot open time picker', message); +} +``` + + +### Methods + +- [`open`](timepickerandroid.md#open) +- [`timeSetAction`](timepickerandroid.md#timesetaction) +- [`dismissedAction`](timepickerandroid.md#dismissedaction) + + + + +--- + +# Reference + +## Methods + +### `open()` + +```javascript +static open(options) +``` + + +Opens the standard Android time picker dialog. + +The available keys for the `options` object are: + * `hour` (0-23) - the hour to show, defaults to the current time + * `minute` (0-59) - the minute to show, defaults to the current time + * `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, + the picker shows an AM/PM chooser. If undefined, the default for the current locale + is used. + +Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), +`minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will +still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys +being undefined. **Always** check whether the `action` before reading the values. + + + + +--- + +### `timeSetAction()` + +```javascript +static timeSetAction() +``` + + +A time has been selected. + + + + +--- + +### `dismissedAction()` + +```javascript +static dismissedAction() +``` + + +The dialog has been dismissed. + + + + diff --git a/website/versioned_docs/version-0.20/transforms.md b/website/versioned_docs/version-0.20/transforms.md new file mode 100644 index 00000000000..e1da5c49a53 --- /dev/null +++ b/website/versioned_docs/version-0.20/transforms.md @@ -0,0 +1,117 @@ +--- +id: version-0.20-transforms +title: Transforms +original_id: transforms +--- +### Props + +- [`rotation`](transforms.md#rotation) +- [`scaleX`](transforms.md#scalex) +- [`scaleY`](transforms.md#scaley) +- [`transform`](transforms.md#transform) +- [`transformMatrix`](transforms.md#transformmatrix) +- [`translateX`](transforms.md#translatex) +- [`translateY`](transforms.md#translatey) + + + + + + +--- + +# Reference + +## Props + +### `rotation` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `scaleX` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `scaleY` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `transform` + + + +| Type | Required | +| - | - | +| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | + + + + +--- + +### `transformMatrix` + + + +| Type | Required | +| - | - | +| TransformMatrixPropType | No | + + + + +--- + +### `translateX` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `translateY` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + + + diff --git a/website/versioned_docs/version-0.20/viewpagerandroid.md b/website/versioned_docs/version-0.20/viewpagerandroid.md new file mode 100644 index 00000000000..93fd8c18e56 --- /dev/null +++ b/website/versioned_docs/version-0.20/viewpagerandroid.md @@ -0,0 +1,201 @@ +--- +id: version-0.20-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + +### Type Definitions + +- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageScrollStateChanged` + +Function called when the page scrolling state has changed. +The page scrolling state can be in 3 states: +- idle, meaning there is no interaction with the page scroller happening at the time +- dragging, meaning there is currently an interaction with the page scroller +- settling, meaning that there was an interaction with the page scroller, and the + page scroller is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be *not* be animated. + + + +## Type Definitions + +### ViewPagerScrollState + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| idle | | +| dragging | | +| settling | | + + + + diff --git a/website/versioned_docs/version-0.20/webview.md b/website/versioned_docs/version-0.20/webview.md new file mode 100644 index 00000000000..7003bc78ba6 --- /dev/null +++ b/website/versioned_docs/version-0.20/webview.md @@ -0,0 +1,461 @@ +--- +id: version-0.20-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`source`](webview.md#source) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`contentInset`](webview.md#contentinset) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`decelerationRate`](webview.md#decelerationrate) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onError` + +Invoked when load fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Invoked when load finish + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - Normal: 0.998 + - Fast: 0.9 (the default for iOS WebView) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.21/geolocation.md b/website/versioned_docs/version-0.21/geolocation.md new file mode 100644 index 00000000000..3c3c505fd1f --- /dev/null +++ b/website/versioned_docs/version-0.21/geolocation.md @@ -0,0 +1,86 @@ +--- +id: version-0.21-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API follows the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.21/linking.md b/website/versioned_docs/version-0.21/linking.md new file mode 100644 index 00000000000..6818aca7bc9 --- /dev/null +++ b/website/versioned_docs/version-0.21/linking.md @@ -0,0 +1,197 @@ +--- +id: version-0.21-linking +title: Linking +original_id: linking +--- + +`Linking` gives you a general interface to interact with both incoming +and outgoing app links. + +### Basic Usage + +#### Handling deep links + +If your app was launched from an external url registered to your app you can +access and handle it from any component you want with + +``` +componentDidMount() { + var url = Linking.getInitialURL().then((url) => { + if (url) { + console.log('Initial url is: ' + url); + } + }).catch(err => console.error('An error occurred', err)); +} +``` + +NOTE: For instructions on how to add support for deep linking on Android, +refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). + +NOTE: For iOS, in case you also want to listen to incoming app links during your app's +execution you'll need to add the following lines to you `*AppDelegate.m`: + +``` +#import "RCTLinkingManager.h" + +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [RCTLinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} + +// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). +- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity + restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler +{ + return [RCTLinkingManager application:application + continueUserActivity:userActivity + restorationHandler:restorationHandler]; +} + +``` + +And then on your React component you'll be able to listen to the events on +`Linking` as follows + +``` +componentDidMount() { + Linking.addEventListener('url', this._handleOpenURL); +}, +componentWillUnmount() { + Linking.removeEventListener('url', this._handleOpenURL); +}, +_handleOpenURL(event) { + console.log(event.url); +} +``` +Note that this is only supported on iOS. + +#### Opening external links + +To start the corresponding activity for a link (web URL, email, contact etc.), call + +``` +Linking.openURL(url).catch(err => console.error('An error occurred', err)); +``` + +If you want to check if any installed app can handle a given URL beforehand you can call +``` +Linking.canOpenURL(url).then(supported => { + if (!supported) { + console.log('Can\'t handle url: ' + url); + } else { + return Linking.openURL(url); + } +}).catch(err => console.error('An error occurred', err)); +``` + + +### Methods + +- [`addEventListener`](linking.md#addeventlistener) +- [`removeEventListener`](linking.md#removeeventlistener) +- [`openURL`](linking.md#openurl) +- [`canOpenURL`](linking.md#canopenurl) +- [`getInitialURL`](linking.md#getinitialurl) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Add a handler to Linking changes by listening to the `url` event type +and providing the handler + +@platform ios + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Remove a handler by passing the `url` event type and the handler + +@platform ios + + + + +--- + +### `openURL()` + +```javascript +static openURL(url) +``` + + +Try to open the given `url` with any of the installed apps. + +You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, +or any other URL that can be opened with the installed apps. + +NOTE: This method will fail if the system doesn't know how to open the specified URL. +If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + + + + +--- + +### `canOpenURL()` + +```javascript +static canOpenURL(url) +``` + + +Determine whether or not an installed app can handle a given URL. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + +NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key +inside `Info.plist`. + +@param URL the URL to open + + + + +--- + +### `getInitialURL()` + +```javascript +static getInitialURL() +``` + + +If the app launch was triggered by an app link with, +it will give the link url, otherwise it will give `null` + +NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents + + + + diff --git a/website/versioned_docs/version-0.21/pushnotificationios.md b/website/versioned_docs/version-0.21/pushnotificationios.md new file mode 100644 index 00000000000..54cb959d75d --- /dev/null +++ b/website/versioned_docs/version-0.21/pushnotificationios.md @@ -0,0 +1,382 @@ +--- +id: version-0.21-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Be sure to add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` +- Set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `soundName` : The sound played when the notification is fired (optional). + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `soundName` : The sound played when the notification is fired (optional). +- `userInfo` : An optional object containing additional notification data. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.21/scrollview.md b/website/versioned_docs/version-0.21/scrollview.md new file mode 100644 index 00000000000..d71ae94b350 --- /dev/null +++ b/website/versioned_docs/version-0.21/scrollview.md @@ -0,0 +1,772 @@ +--- +id: version-0.21-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`sendMomentumEvents`](scrollview.md#sendmomentumevents) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`horizontal`](scrollview.md#horizontal) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `sendMomentumEvents` + +When true, momentum events will be sent from Android +This is internal and set automatically by the framework if you have +onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - Normal: 0.998 (the default) + - Fast: 0.9 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(in events per seconds). A higher number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +The default value is zero, which means the scroll event will be sent +only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. +Syntax: + +scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.22/actionsheetios.md b/website/versioned_docs/version-0.22/actionsheetios.md new file mode 100644 index 00000000000..37be856af77 --- /dev/null +++ b/website/versioned_docs/version-0.22/actionsheetios.md @@ -0,0 +1,52 @@ +--- +id: version-0.22-actionsheetios +title: ActionSheetIOS +original_id: actionsheetios +--- + + + +### Methods + +- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) +- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) + + + + +--- + +# Reference + +## Methods + +### `showActionSheetWithOptions()` + +```javascript +static showActionSheetWithOptions(options, callback) +``` + + + +--- + +### `showShareActionSheetWithOptions()` + +```javascript +static showShareActionSheetWithOptions(options, failureCallback, successCallback) +``` + + +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. + + + + diff --git a/website/versioned_docs/version-0.22/animated.md b/website/versioned_docs/version-0.22/animated.md new file mode 100644 index 00000000000..963b9b549a6 --- /dev/null +++ b/website/versioned_docs/version-0.22/animated.md @@ -0,0 +1,654 @@ +--- +id: version-0.22-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scrolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1}, // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targeted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performance way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`multiply`](animated.md#multiply) +- [`modulo`](animated.md#modulo) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `modulo()` + +```javascript +static modulo(a, modulus) +``` + + +Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations. This is useful because there is no way to +synchronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.22/drawerlayoutandroid.md b/website/versioned_docs/version-0.22/drawerlayoutandroid.md new file mode 100644 index 00000000000..885269adcf5 --- /dev/null +++ b/website/versioned_docs/version-0.22/drawerlayoutandroid.md @@ -0,0 +1,213 @@ +--- +id: version-0.22-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerLockMode` + +Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. +- locked closed, meaning that the drawer will stay closed and not respond to gestures. +- locked open, meaning that the drawer will stay opened and not respond to gestures. +The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + +| Type | Required | +| - | - | +| enum('unlocked', 'locked-closed', 'locked-open') | No | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.22/modal.md b/website/versioned_docs/version-0.22/modal.md new file mode 100644 index 00000000000..b4fef7cd51b --- /dev/null +++ b/website/versioned_docs/version-0.22/modal.md @@ -0,0 +1,103 @@ +--- +id: version-0.22-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +This component is only available in iOS at this time. + +### Props + +- [`animated`](modal.md#animated) +- [`onDismiss`](modal.md#ondismiss) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onDismiss` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShow` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.22/netinfo.md b/website/versioned_docs/version-0.22/netinfo.md new file mode 100644 index 00000000000..90bc37ee780 --- /dev/null +++ b/website/versioned_docs/version-0.22/netinfo.md @@ -0,0 +1,162 @@ +--- +id: version-0.22-netinfo +title: NetInfo +original_id: netinfo +--- + +NetInfo exposes info about online/offline status + +``` +NetInfo.fetch().done((reach) => { + console.log('Initial: ' + reach); +}); +function handleFirstConnectivityChange(reach) { + console.log('First change: ' + reach); + NetInfo.removeEventListener( + 'change', + handleFirstConnectivityChange + ); +} +NetInfo.addEventListener( + 'change', + handleFirstConnectivityChange +); +``` + +### IOS + +Asynchronously determine if the device is online and on a cellular network. + +- `none` - device is offline +- `wifi` - device is online and connected via wifi, or is the iOS simulator +- `cell` - device is connected via Edge, 3G, WiMax, or LTE +- `unknown` - error case and the network status is unknown + +### Android + +To request network info, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` +Asynchronously determine if the device is connected and details about that connection. + +Android Connectivity Types. + +- `NONE` - device is offline +- `BLUETOOTH` - The Bluetooth data connection. +- `DUMMY` - Dummy data connection. +- `ETHERNET` - The Ethernet data connection. +- `MOBILE` - The Mobile data connection. +- `MOBILE_DUN` - A DUN-specific Mobile data connection. +- `MOBILE_HIPRI` - A High Priority Mobile data connection. +- `MOBILE_MMS` - An MMS-specific Mobile data connection. +- `MOBILE_SUPL` - A SUPL-specific Mobile data connection. +- `VPN` - A virtual network using one or more native bearers. Requires API Level 21 +- `WIFI` - The WIFI data connection. +- `WIMAX` - The WiMAX data connection. +- `UNKNOWN` - Unknown data connection. + +The rest ConnectivityStates are hidden by the Android API, but can be used if necessary. + +### isConnectionExpensive + +Available on Android. Detect if the current active connection is metered or not. A network is +classified as metered when the user is sensitive to heavy data usage on that connection due to +monetary costs, data limitations or battery/performance issues. + +``` +NetInfo.isConnectionExpensive() +.then(isConnectionExpensive => { + console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); +}) +.catch(error => { + console.error(error); +}); +``` + +### isConnected + +Available on all platforms. Asynchronously fetch a boolean to determine +internet connectivity. + +``` +NetInfo.isConnected.fetch().then(isConnected => { + console.log('First, is ' + (isConnected ? 'online' : 'offline')); +}); +function handleFirstConnectivityChange(isConnected) { + console.log('Then, is ' + (isConnected ? 'online' : 'offline')); + NetInfo.isConnected.removeEventListener( + 'change', + handleFirstConnectivityChange + ); +} +NetInfo.isConnected.addEventListener( + 'change', + handleFirstConnectivityChange +); +``` + + +### Methods + +- [`addEventListener`](netinfo.md#addeventlistener) +- [`removeEventListener`](netinfo.md#removeeventlistener) +- [`fetch`](netinfo.md#fetch) +- [`isConnectionExpensive`](netinfo.md#isconnectionexpensive) + + +### Properties + +- [`isConnected`](netinfo.md#isconnected) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(eventName, handler) +``` + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(eventName, handler) +``` + + + +--- + +### `fetch()` + +```javascript +static fetch() +``` + + + +--- + +### `isConnectionExpensive()` + +```javascript +static isConnectionExpensive() +``` + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.22/pushnotificationios.md b/website/versioned_docs/version-0.22/pushnotificationios.md new file mode 100644 index 00000000000..1aa18728fe1 --- /dev/null +++ b/website/versioned_docs/version-0.22/pushnotificationios.md @@ -0,0 +1,387 @@ +--- +id: version-0.22-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Be sure to add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` +- Set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.22/statusbar.md b/website/versioned_docs/version-0.22/statusbar.md new file mode 100644 index 00000000000..998a8db1012 --- /dev/null +++ b/website/versioned_docs/version-0.22/statusbar.md @@ -0,0 +1,268 @@ +--- +id: version-0.22-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Imperative API + +For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the compoment for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render. + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + +### Methods + +- [`setHidden`](statusbar.md#sethidden) +- [`setBarStyle`](statusbar.md#setbarstyle) +- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) +- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) +- [`setTranslucent`](statusbar.md#settranslucent) + + +### Type Definitions + +- [`StatusBarStyle`](statusbar.md#statusbarstyle) +- [`StatusBarAnimation`](statusbar.md#statusbaranimation) + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light-content') | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| enum('fade', 'slide') | No | iOS | + + + + + + +## Methods + +### `setHidden()` + +```javascript +static setHidden(hidden: boolean, [animation]: StatusBarAnimation) +``` + + + +--- + +### `setBarStyle()` + +```javascript +static setBarStyle(style: StatusBarStyle, [animated]: boolean) +``` + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible: boolean) +``` + + + +--- + +### `setBackgroundColor()` + +```javascript +static setBackgroundColor(color, [animated]: boolean) +``` + + + +--- + +### `setTranslucent()` + +```javascript +static setTranslucent(translucent: boolean) +``` + + + +## Type Definitions + +### StatusBarStyle + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | | +| light-content | | + + + + +--- + +### StatusBarAnimation + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| none | | +| fade | | +| slide | | + + + + diff --git a/website/versioned_docs/version-0.22/statusbarios.md b/website/versioned_docs/version-0.22/statusbarios.md new file mode 100644 index 00000000000..7f68d646478 --- /dev/null +++ b/website/versioned_docs/version-0.22/statusbarios.md @@ -0,0 +1,52 @@ +--- +id: version-0.22-statusbarios +title: StatusBarIOS +original_id: statusbarios +--- + +Deprecated. Use `StatusBar` instead. + + +### Methods + +- [`setStyle`](statusbarios.md#setstyle) +- [`setHidden`](statusbarios.md#sethidden) +- [`setNetworkActivityIndicatorVisible`](statusbarios.md#setnetworkactivityindicatorvisible) + + + + +--- + +# Reference + +## Methods + +### `setStyle()` + +```javascript +static setStyle(style, animated?) +``` + + + +--- + +### `setHidden()` + +```javascript +static setHidden(hidden, animation?) +``` + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible) +``` + + + diff --git a/website/versioned_docs/version-0.22/textinput.md b/website/versioned_docs/version-0.22/textinput.md new file mode 100644 index 00000000000..a2f91f32830 --- /dev/null +++ b/website/versioned_docs/version-0.22/textinput.md @@ -0,0 +1,571 @@ +--- +id: version-0.22-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`: + +### Props + +* [View props...](view.md#props) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on ios) color of the text input + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.22/touchablewithoutfeedback.md b/website/versioned_docs/version-0.22/touchablewithoutfeedback.md new file mode 100644 index 00000000000..8162ecaba1f --- /dev/null +++ b/website/versioned_docs/version-0.22/touchablewithoutfeedback.md @@ -0,0 +1,235 @@ +--- +id: version-0.22-touchablewithoutfeedback +title: TouchableWithoutFeedback +original_id: touchablewithoutfeedback +--- +Do not use unless you have a very good reason. All the elements that +respond to press should have a visual feedback when touched. This is +one of the primary reason a "web" app doesn't feel "native". + +> **NOTE**: TouchableWithoutFeedback supports only one child +> +> If you wish to have several child components, wrap them in a View. + +### Props + +- [`hitSlop`](touchablewithoutfeedback.md#hitslop) +- [`accessibilityComponentType`](touchablewithoutfeedback.md#accessibilitycomponenttype) +- [`accessible`](touchablewithoutfeedback.md#accessible) +- [`delayLongPress`](touchablewithoutfeedback.md#delaylongpress) +- [`delayPressIn`](touchablewithoutfeedback.md#delaypressin) +- [`delayPressOut`](touchablewithoutfeedback.md#delaypressout) +- [`disabled`](touchablewithoutfeedback.md#disabled) +- [`accessibilityTraits`](touchablewithoutfeedback.md#accessibilitytraits) +- [`onLayout`](touchablewithoutfeedback.md#onlayout) +- [`onLongPress`](touchablewithoutfeedback.md#onlongpress) +- [`onPress`](touchablewithoutfeedback.md#onpress) +- [`onPressIn`](touchablewithoutfeedback.md#onpressin) +- [`onPressOut`](touchablewithoutfeedback.md#onpressout) +- [`pressRetentionOffset`](touchablewithoutfeedback.md#pressretentionoffset) + + + + + + +--- + +# Reference + +## Props + +### `hitSlop` + +This defines how far your touch can start away from the button. This is +added to `pressRetentionOffset` when moving off of the button. +** NOTE ** +The touch area never extends past the parent view bounds and the Z-index +of sibling views always takes precedence if a touch hits two overlapping +views. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `accessibilityComponentType` + + + +| Type | Required | +| - | - | +| View.AccessibilityComponentType | No | + + + + +--- + +### `accessible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `delayLongPress` + +Delay in ms, from onPressIn, before onLongPress is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressIn` + +Delay in ms, from the start of the touch, before onPressIn is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `delayPressOut` + +Delay in ms, from the release of the touch, before onPressOut is called. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `disabled` + +If true, disable all interactions for this component. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `accessibilityTraits` + + + +| Type | Required | +| - | - | +| View.AccessibilityTraits, ,array of View.AccessibilityTraits | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +Called when the touch is released, but not if cancelled (e.g. by a scroll +that steals the responder lock). + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressIn` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPressOut` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pressRetentionOffset` + +When the scroll view is disabled, this defines how far your touch may +move off of the button, before deactivating the button. Once deactivated, +try moving it back and you'll see that the button is once again +reactivated! Move it back and forth several times while the scroll view +is disabled. Ensure you pass in a constant to reduce memory allocations. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + + + diff --git a/website/versioned_docs/version-0.22/vibration.md b/website/versioned_docs/version-0.22/vibration.md new file mode 100644 index 00000000000..ead49c902a7 --- /dev/null +++ b/website/versioned_docs/version-0.22/vibration.md @@ -0,0 +1,38 @@ +--- +id: version-0.22-vibration +title: Vibration +original_id: vibration +--- + +The Vibration API is exposed at `Vibration.vibrate()`. +The vibration is asynchronous so this method will return immediately. + +There will be no effect on devices that do not support Vibration, eg. the simulator. + +Note for android +add `` to `AndroidManifest.xml` + +Vibration patterns are currently unsupported. + + +### Methods + +- [`vibrate`](vibration.md#vibrate) + + + + +--- + +# Reference + +## Methods + +### `vibrate()` + +```javascript +static vibrate(duration) +``` + + + diff --git a/website/versioned_docs/version-0.22/vibrationios.md b/website/versioned_docs/version-0.22/vibrationios.md new file mode 100644 index 00000000000..6e2be20af71 --- /dev/null +++ b/website/versioned_docs/version-0.22/vibrationios.md @@ -0,0 +1,43 @@ +--- +id: version-0.22-vibrationios +title: VibrationIOS +original_id: vibrationios +--- + +NOTE: `VibrationIOS` is being deprecated. Use `Vibration` instead. + +The Vibration API is exposed at `VibrationIOS.vibrate()`. On iOS, calling this +function will trigger a one second vibration. The vibration is asynchronous +so this method will return immediately. + +There will be no effect on devices that do not support Vibration, eg. the iOS +simulator. + +Vibration patterns are currently unsupported. + + +### Methods + +- [`vibrate`](vibrationios.md#vibrate) + + + + +--- + +# Reference + +## Methods + +### `vibrate()` + +```javascript +static vibrate() +``` + + +@deprecated + + + + diff --git a/website/versioned_docs/version-0.22/webview.md b/website/versioned_docs/version-0.22/webview.md new file mode 100644 index 00000000000..38accb8ea45 --- /dev/null +++ b/website/versioned_docs/version-0.22/webview.md @@ -0,0 +1,460 @@ +--- +id: version-0.22-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`contentInset`](webview.md#contentinset) +- [`source`](webview.md#source) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onError` + +Invoked when load fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Invoked when load finish + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - Normal: 0.998 + - Fast: 0.9 (the default for iOS WebView) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.23/animated.md b/website/versioned_docs/version-0.23/animated.md new file mode 100644 index 00000000000..d4ab4dd135f --- /dev/null +++ b/website/versioned_docs/version-0.23/animated.md @@ -0,0 +1,654 @@ +--- +id: version-0.23-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scrolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1} // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targeted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performance way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`multiply`](animated.md#multiply) +- [`modulo`](animated.md#modulo) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `modulo()` + +```javascript +static modulo(a, modulus) +``` + + +Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations. This is useful because there is no way to +synchronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.23/asyncstorage.md b/website/versioned_docs/version-0.23/asyncstorage.md new file mode 100644 index 00000000000..df0887b5f08 --- /dev/null +++ b/website/versioned_docs/version-0.23/asyncstorage.md @@ -0,0 +1,309 @@ +--- +id: version-0.23-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- + +AsyncStorage is a simple, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of AsyncStorage instead +of AsyncStorage directly for anything more than light usage since it +operates globally. + +This JS code is a simple facade over the native iOS implementation to provide +a clear JS API, real Error objects, and simple non-multi functions. Each +method returns a `Promise` object. + + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + +### Properties + + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key, callback?) +``` + + +Fetches `key` and passes the result to `callback`, along with an `Error` if +there is any. Returns a `Promise` object. + + + + +--- + +### `setItem()` + +```javascript +static setItem(key, value, callback?) +``` + + +Sets `value` for `key` and calls `callback` on completion, along with an +`Error` if there is any. Returns a `Promise` object. + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key, callback?) +``` + + +Returns a `Promise` object. + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key, value, callback?) +``` + + +Merges existing value with input value, assuming they are stringified json. +Returns a `Promise` object. Not supported by all native implementations. + +Example: +```javascript +let UID123_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// need only define what will be added or updated +let UID123_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10} +}; + +AsyncStorage.setItem(store_key, JSON.stringify(UID123_object), () => { + AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { + AsyncStorage.getItem('UID123', (err, result) => { + console.log(result); + // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} + }); + }); +}); +``` + + + + +--- + +### `clear()` + +```javascript +static clear(callback?) +``` + + +Erases *all* AsyncStorage for all clients, libraries, etc. You probably +don't want to call this - use removeItem or multiRemove to clear only your +own keys instead. Returns a `Promise` object. + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys(callback?) +``` + + +Gets *all* keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. + +Example: see multiGet for example + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests() +``` + +Flushes any pending requests using a single multiget + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys, callback?) +``` + + +multiGet invokes callback with an array of key-value pair arrays that +matches the input format of multiSet. Returns a `Promise` object. + + multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) + +Example: +```javascript +AsyncStorage.getAllKeys((err, keys) => { + AsyncStorage.multiGet(keys, (err, stores) => { + stores.map((result, i, store) => { + // get at each store's key/value so you can work with it + let key = store[i][0]; + let value = store[i][1]; + }); + }); +}); +``` + + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs, callback?) +``` + + +multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g. Returns a `Promise` object. + + multiSet([['k1', 'val1'], ['k2', 'val2']], cb); + +Example: see multiMerge for an example + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys, callback?) +``` + + +Delete all the keys in the `keys` array. Returns a `Promise` object. + +Example: +```javascript +let keys = ['k1', 'k2']; +AsyncStorage.multiRemove(keys, (err) => { + // keys k1 & k2 removed, if they existed + // do most stuff after removal (if you want) +}); +``` + + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs, callback?) +``` + + +Merges existing values with input values, assuming they are stringified +json. Returns a `Promise` object. + +Not supported by all native implementations. + +Example: +```javascript +// first user, initial values +let UID234_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// first user, delta values +let UID234_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10}, +}; + +// second user, initial values +let UID345_object = { + name: 'Marge', + age: 25, + traits: {hair: 'blonde', eyes: 'blue'}, +}; + +// second user, delta values +let UID345_delta = { + age: 26, + traits: {eyes: 'green', shoe_size: 6}, +}; + +let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]] +let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]] + +AsyncStorage.multiSet(multi_set_pairs, (err) => { + AsyncStorage.multiMerge(multi_merge_pairs, (err) => { + AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => { + stores.map( (result, i, store) => { + let key = store[i][0]; + let val = store[i][1]; + console.log(key, val); + // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} + // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} + }); + }); + }); +}); +``` + + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.23/dimensions.md b/website/versioned_docs/version-0.23/dimensions.md new file mode 100644 index 00000000000..00043382c63 --- /dev/null +++ b/website/versioned_docs/version-0.23/dimensions.md @@ -0,0 +1,63 @@ +--- +id: version-0.23-dimensions +title: Dimensions +original_id: dimensions +--- + + + +### Methods + +- [`set`](dimensions.md#set) +- [`get`](dimensions.md#get) + + + + +--- + +# Reference + +## Methods + +### `set()` + +```javascript +static set(dims) +``` + + +This should only be called from native code by sending the +didUpdateDimensions event. + +@param {object} dims Simple string-keyed object of dimensions to set + + + + +--- + +### `get()` + +```javascript +static get(dim) +``` + + +Initial dimensions are set before `runApplication` is called so they should +be available before any other require's are run, but may be updated later. + +Note: Although dimensions are available immediately, they may change (e.g +due to device rotation) so any rendering logic or styles that depend on +these constants should try to call this function on every render, rather +than caching the value (for example, using inline styles rather than +setting a value in a `StyleSheet`). + +Example: `var {height, width} = Dimensions.get('window');` + +@param {string} dim Name of dimension as defined when calling `set`. +@returns {Object?} Value for the dimension. + + + + diff --git a/website/versioned_docs/version-0.23/drawerlayoutandroid.md b/website/versioned_docs/version-0.23/drawerlayoutandroid.md new file mode 100644 index 00000000000..4bad4aa6afa --- /dev/null +++ b/website/versioned_docs/version-0.23/drawerlayoutandroid.md @@ -0,0 +1,213 @@ +--- +id: version-0.23-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerLockMode` + +Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. +- locked-closed, meaning that the drawer will stay closed and not respond to gestures. +- locked-open, meaning that the drawer will stay opened and not respond to gestures. +The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + +| Type | Required | +| - | - | +| enum('unlocked', 'locked-closed', 'locked-open') | No | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.23/easing.md b/website/versioned_docs/version-0.23/easing.md new file mode 100644 index 00000000000..18b7f7bd71b --- /dev/null +++ b/website/versioned_docs/version-0.23/easing.md @@ -0,0 +1,227 @@ +--- +id: version-0.23-easing +title: Easing +original_id: easing +--- + +This class implements common easing functions. The math is pretty obscure, +but this cool website has nice visual illustrations of what they represent: +http://xaedes.de/dev/transitions/ + + +### Methods + +- [`step0`](easing.md#step0) +- [`step1`](easing.md#step1) +- [`linear`](easing.md#linear) +- [`ease`](easing.md#ease) +- [`quad`](easing.md#quad) +- [`cubic`](easing.md#cubic) +- [`poly`](easing.md#poly) +- [`sin`](easing.md#sin) +- [`circle`](easing.md#circle) +- [`exp`](easing.md#exp) +- [`elastic`](easing.md#elastic) +- [`back`](easing.md#back) +- [`bounce`](easing.md#bounce) +- [`bezier`](easing.md#bezier) +- [`in`](easing.md#in) +- [`out`](easing.md#out) +- [`inOut`](easing.md#inout) + + + + +--- + +# Reference + +## Methods + +### `step0()` + +```javascript +static step0(n) +``` + + + +--- + +### `step1()` + +```javascript +static step1(n) +``` + + + +--- + +### `linear()` + +```javascript +static linear(t) +``` + + + +--- + +### `ease()` + +```javascript +static ease(t) +``` + + + +--- + +### `quad()` + +```javascript +static quad(t) +``` + + + +--- + +### `cubic()` + +```javascript +static cubic(t) +``` + + + +--- + +### `poly()` + +```javascript +static poly(n) +``` + + + +--- + +### `sin()` + +```javascript +static sin(t) +``` + + + +--- + +### `circle()` + +```javascript +static circle(t) +``` + + + +--- + +### `exp()` + +```javascript +static exp(t) +``` + + + +--- + +### `elastic()` + +```javascript +static elastic(bounciness) +``` + + +A simple elastic interaction, similar to a spring. Default bounciness +is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot +at all, and bounciness of N > 1 will overshoot about N times. + +Wolfram Plots: + + http://tiny.cc/elastic_b_1 (default bounciness = 1) + http://tiny.cc/elastic_b_3 (bounciness = 3) + + + + +--- + +### `back()` + +```javascript +static back(s) +``` + + + +--- + +### `bounce()` + +```javascript +static bounce(t) +``` + + + +--- + +### `bezier()` + +```javascript +static bezier(x1, y1, x2, y2) +``` + + + +--- + +### `in()` + +```javascript +static in(easing) +``` + + + +--- + +### `out()` + +```javascript +static out(easing) +``` + + +Runs an easing function backwards. + + + + +--- + +### `inOut()` + +```javascript +static inOut(easing) +``` + + +Makes any easing function symmetrical. + + + + diff --git a/website/versioned_docs/version-0.23/image.md b/website/versioned_docs/version-0.23/image.md new file mode 100644 index 00000000000..325ee8aa5b8 --- /dev/null +++ b/website/versioned_docs/version-0.23/image.md @@ -0,0 +1,351 @@ +--- +id: version-0.23-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('./path/to/image.png')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`backgroundColor`**: [color](colors.md) + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`overlayColor`**: string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + - **`tintColor`**: [color](colors.md) (_iOS_) + + iOS-Specific style to "tint" an image. + Changes the color of all the non-transparent pixels to the tintColor. + + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function) +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + + + diff --git a/website/versioned_docs/version-0.23/modal.md b/website/versioned_docs/version-0.23/modal.md new file mode 100644 index 00000000000..d6db87eb6db --- /dev/null +++ b/website/versioned_docs/version-0.23/modal.md @@ -0,0 +1,101 @@ +--- +id: version-0.23-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +### Props + +- [`animated`](modal.md#animated) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onRequestClose` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShow` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.23/refreshcontrol.md b/website/versioned_docs/version-0.23/refreshcontrol.md new file mode 100644 index 00000000000..6b43a394990 --- /dev/null +++ b/website/versioned_docs/version-0.23/refreshcontrol.md @@ -0,0 +1,182 @@ +--- +id: version-0.23-refreshcontrol +title: RefreshControl +original_id: refreshcontrol +--- +This component is used inside a ScrollView or ListView to add pull to refresh +functionality. When the ScrollView is at `scrollY: 0`, swiping down +triggers an `onRefresh` event. + +### Usage example + +``` js +class RefreshableList extends Component { + constructor(props) { + super(props); + this.state = { + refreshing: false, + }; + } + + _onRefresh() { + this.setState({refreshing: true}); + fetchData().then(() => { + this.setState({refreshing: false}); + }); + } + + render() { + return ( + + } + ... + > + ... + + ); + } + ... +} +``` + +__Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true +in the `onRefresh` function otherwise the refresh indicator will stop immediatly. + +### Props + +* [View props...](view.md#props) +- [`onRefresh`](refreshcontrol.md#onrefresh) +- [`refreshing`](refreshcontrol.md#refreshing) +- [`colors`](refreshcontrol.md#colors) +- [`enabled`](refreshcontrol.md#enabled) +- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) +- [`size`](refreshcontrol.md#size) +- [`tintColor`](refreshcontrol.md#tintcolor) +- [`title`](refreshcontrol.md#title) + + + + + + +--- + +# Reference + +## Props + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| array of [color](colors.md) | No | Android | + + + + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + + +| Type | Required | Platform | +| - | - | - | +| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | + + + + +--- + +### `tintColor` + +The color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `title` + +The title displayed under the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.23/scrollview.md b/website/versioned_docs/version-0.23/scrollview.md new file mode 100644 index 00000000000..6b20cd05a33 --- /dev/null +++ b/website/versioned_docs/version-0.23/scrollview.md @@ -0,0 +1,775 @@ +--- +id: version-0.23-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`sendMomentumEvents`](scrollview.md#sendmomentumevents) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`horizontal`](scrollview.md#horizontal) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `sendMomentumEvents` + +When true, momentum events will be sent from Android +This is internal and set automatically by the framework if you have +onMomentumScrollBegin or onMomentumScrollEnd set on your ScrollView + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. +Syntax: + +scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.23/segmentedcontrolios.md b/website/versioned_docs/version-0.23/segmentedcontrolios.md new file mode 100644 index 00000000000..d97b5c7ee22 --- /dev/null +++ b/website/versioned_docs/version-0.23/segmentedcontrolios.md @@ -0,0 +1,141 @@ +--- +id: version-0.23-segmentedcontrolios +title: SegmentedControlIOS +original_id: segmentedcontrolios +--- +Use `SegmentedControlIOS` to render a UISegmentedControl iOS. + +#### Programmatically changing selected index + +The selected index can be changed on the fly by assigning the +selectIndex prop to a state variable, then changing that variable. +Note that the state variable would need to be updated as the user +selects a value and changes the index, as shown in the example below. + +```` + { + this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); + }} +/> +```` + +### Props + +* [View props...](view.md#props) +- [`enabled`](segmentedcontrolios.md#enabled) +- [`momentary`](segmentedcontrolios.md#momentary) +- [`onChange`](segmentedcontrolios.md#onchange) +- [`onValueChange`](segmentedcontrolios.md#onvaluechange) +- [`selectedIndex`](segmentedcontrolios.md#selectedindex) +- [`tintColor`](segmentedcontrolios.md#tintcolor) +- [`values`](segmentedcontrolios.md#values) + + + + + + +--- + +# Reference + +## Props + +### `enabled` + +If false the user won't be able to interact with the control. +Default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `momentary` + +If true, then selecting a segment won't persist visually. +The `onValueChange` callback will still work as expected. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onChange` + +Callback that is called when the user taps a segment; +passes the event as an argument + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onValueChange` + +Callback that is called when the user taps a segment; +passes the segment's value as an argument + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selectedIndex` + +The index in `props.values` of the segment to be (pre)selected. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `tintColor` + +Accent color of the control. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `values` + +The labels for the control's segment buttons, in order. + +| Type | Required | +| - | - | +| array of string | No | + + + + + + diff --git a/website/versioned_docs/version-0.23/textinput.md b/website/versioned_docs/version-0.23/textinput.md new file mode 100644 index 00000000000..acf774b3e3d --- /dev/null +++ b/website/versioned_docs/version-0.23/textinput.md @@ -0,0 +1,581 @@ +--- +id: version-0.23-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +``` + + + +``` + +### Props + +* [View props...](view.md#props) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on ios) color of the text input + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.23/webview.md b/website/versioned_docs/version-0.23/webview.md new file mode 100644 index 00000000000..3ad9a0500a8 --- /dev/null +++ b/website/versioned_docs/version-0.23/webview.md @@ -0,0 +1,475 @@ +--- +id: version-0.23-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`contentInset`](webview.md#contentinset) +- [`source`](webview.md#source) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`updateNavigationState`](webview.md#updatenavigationstate) +- [`getWebViewHandle`](webview.md#getwebviewhandle) +- [`onLoadingStart`](webview.md#onloadingstart) +- [`onLoadingError`](webview.md#onloadingerror) +- [`onLoadingFinish`](webview.md#onloadingfinish) + + + + +--- + +# Reference + +## Props + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `mediaPlaybackRequiresUserAction` + +Determines whether HTML5 audio & videos require the user to tap before they can +start playing. The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onError` + +Invoked when load fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Invoked when load finish + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 + - fast: 0.99 (the default for iOS WebView) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + + + +--- + +### `reload()` + +```javascript +reload() +``` + + + +--- + +### `updateNavigationState()` + +```javascript +updateNavigationState(event: Event) +``` + +We return an event with a bunch of fields including: + url, title, loading, canGoBack, canGoForward + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + + + +--- + +### `onLoadingStart()` + +```javascript +onLoadingStart(event: Event) +``` + + + +--- + +### `onLoadingError()` + +```javascript +onLoadingError(event: Event) +``` + + + +--- + +### `onLoadingFinish()` + +```javascript +onLoadingFinish(event: Event) +``` + + + diff --git a/website/versioned_docs/version-0.24/actionsheetios.md b/website/versioned_docs/version-0.24/actionsheetios.md new file mode 100644 index 00000000000..e67629c9cd9 --- /dev/null +++ b/website/versioned_docs/version-0.24/actionsheetios.md @@ -0,0 +1,63 @@ +--- +id: version-0.24-actionsheetios +title: ActionSheetIOS +original_id: actionsheetios +--- + + + +### Methods + +- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) +- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) + + + + +--- + +# Reference + +## Methods + +### `showActionSheetWithOptions()` + +```javascript +static showActionSheetWithOptions(options, callback) +``` + + +Display an iOS action sheet. The `options` object must contain one or more +of: + +- `options` (array of strings) - a list of button titles (required) +- `cancelButtonIndex` (int) - index of cancel button in `options` +- `destructiveButtonIndex` (int) - index of destructive button in `options` +- `title` (string) - a title to show above the action sheet +- `message` (string) - a message to show below the title + + + + +--- + +### `showShareActionSheetWithOptions()` + +```javascript +static showShareActionSheetWithOptions(options, failureCallback, successCallback) +``` + + +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. + + + + diff --git a/website/versioned_docs/version-0.24/drawerlayoutandroid.md b/website/versioned_docs/version-0.24/drawerlayoutandroid.md new file mode 100644 index 00000000000..257d45490bd --- /dev/null +++ b/website/versioned_docs/version-0.24/drawerlayoutandroid.md @@ -0,0 +1,229 @@ +--- +id: version-0.24-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) +- [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `drawerLockMode` + +Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. +- locked-closed, meaning that the drawer will stay closed and not respond to gestures. +- locked-open, meaning that the drawer will stay opened and not respond to gestures. +The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + +| Type | Required | +| - | - | +| enum('unlocked', 'locked-closed', 'locked-open') | No | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `statusBarBackgroundColor` + +Make the drawer take the entire screen and draw the background of the +status bar to allow it to open over the status bar. It will only have an +effect on API 21+. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + + + diff --git a/website/versioned_docs/version-0.24/modal.md b/website/versioned_docs/version-0.24/modal.md new file mode 100644 index 00000000000..61a41e96e49 --- /dev/null +++ b/website/versioned_docs/version-0.24/modal.md @@ -0,0 +1,101 @@ +--- +id: version-0.24-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +### Props + +- [`animated`](modal.md#animated) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) + + + + + + +--- + +# Reference + +## Props + +### `animated` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onRequestClose` + + + +| Type | Required | +| - | - | +| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | + + + + +--- + +### `onShow` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.24/pushnotificationios.md b/website/versioned_docs/version-0.24/pushnotificationios.md new file mode 100644 index 00000000000..add8fd6799b --- /dev/null +++ b/website/versioned_docs/version-0.24/pushnotificationios.md @@ -0,0 +1,389 @@ +--- +id: version-0.24-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Be sure to add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` +- Set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.24/scrollview.md b/website/versioned_docs/version-0.24/scrollview.md new file mode 100644 index 00000000000..5f364451341 --- /dev/null +++ b/website/versioned_docs/version-0.24/scrollview.md @@ -0,0 +1,776 @@ +--- +id: version-0.24-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`horizontal`](scrollview.md#horizontal) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) +- [`handleScroll`](scrollview.md#handlescroll) + + + + +--- + +# Reference + +## Props + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. +Syntax: + +scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true}) + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + +--- + +### `handleScroll()` + +```javascript +handleScroll(e: Object) +``` + + + diff --git a/website/versioned_docs/version-0.24/slider.md b/website/versioned_docs/version-0.24/slider.md new file mode 100644 index 00000000000..f944211a2ea --- /dev/null +++ b/website/versioned_docs/version-0.24/slider.md @@ -0,0 +1,253 @@ +--- +id: version-0.24-slider +title: Slider +original_id: slider +--- +A component used to select a single value from a range of values. + +### Props + +* [View props...](view.md#props) +- [`testID`](slider.md#testid) +- [`disabled`](slider.md#disabled) +- [`minimumValue`](slider.md#minimumvalue) +- [`onSlidingComplete`](slider.md#onslidingcomplete) +- [`onValueChange`](slider.md#onvaluechange) +- [`step`](slider.md#step) +- [`style`](slider.md#style) +- [`maximumValue`](slider.md#maximumvalue) +- [`value`](slider.md#value) +- [`maximumTrackImage`](slider.md#maximumtrackimage) +- [`maximumTrackTintColor`](slider.md#maximumtracktintcolor) +- [`minimumTrackImage`](slider.md#minimumtrackimage) +- [`minimumTrackTintColor`](slider.md#minimumtracktintcolor) +- [`thumbImage`](slider.md#thumbimage) +- [`trackImage`](slider.md#trackimage) + + + + + + +--- + +# Reference + +## Props + +### `testID` + +Used to locate this view in UI automation tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `disabled` + +If true the user won't be able to move the slider. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `minimumValue` + +Initial minimum value of the slider. Default value is 0. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onSlidingComplete` + +Callback called when the user finishes changing the value (e.g. when +the slider is released). + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onValueChange` + +Callback continuously called while the user is dragging the slider. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `step` + +Step value of the slider. The value should be +between 0 and (maximumValue - minimumValue). +Default value is 0. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `style` + +Used to style and layout the `Slider`. See `StyleSheet.js` and +`ViewStylePropTypes.js` for more info. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `maximumValue` + +Initial maximum value of the slider. Default value is 1. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `value` + +Initial value of the slider. The value should be between minimumValue +and maximumValue, which default to 0 and 1 respectively. +Default value is 0. + +*This is not a controlled component*, you don't need to update the +value during dragging. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `maximumTrackImage` + +Assigns a maximum track image. Only static images are supported. The +leftmost pixel of the image will be stretched to fill the track. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + +--- + +### `maximumTrackTintColor` + +The color used for the track to the right of the button. Overrides the +default blue gradient image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `minimumTrackImage` + +Assigns a minimum track image. Only static images are supported. The +rightmost pixel of the image will be stretched to fill the track. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + +--- + +### `minimumTrackTintColor` + +The color used for the track to the left of the button. Overrides the +default blue gradient image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `thumbImage` + +Sets an image for the thumb. Only static images are supported. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + +--- + +### `trackImage` + +Assigns a single image for the track. Only static images are supported. +The center pixel of the image will be stretched to fill the track. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.24/statusbar.md b/website/versioned_docs/version-0.24/statusbar.md new file mode 100644 index 00000000000..c0f26af0d12 --- /dev/null +++ b/website/versioned_docs/version-0.24/statusbar.md @@ -0,0 +1,268 @@ +--- +id: version-0.24-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Imperative API + +For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the component for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render. + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + +### Methods + +- [`setHidden`](statusbar.md#sethidden) +- [`setBarStyle`](statusbar.md#setbarstyle) +- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) +- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) +- [`setTranslucent`](statusbar.md#settranslucent) + + +### Type Definitions + +- [`StatusBarStyle`](statusbar.md#statusbarstyle) +- [`StatusBarAnimation`](statusbar.md#statusbaranimation) + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light-content') | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| enum('fade', 'slide') | No | iOS | + + + + + + +## Methods + +### `setHidden()` + +```javascript +static setHidden(hidden: boolean, [animation]: StatusBarAnimation) +``` + + + +--- + +### `setBarStyle()` + +```javascript +static setBarStyle(style: StatusBarStyle, [animated]: boolean) +``` + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible: boolean) +``` + + + +--- + +### `setBackgroundColor()` + +```javascript +static setBackgroundColor(color, [animated]: boolean) +``` + + + +--- + +### `setTranslucent()` + +```javascript +static setTranslucent(translucent: boolean) +``` + + + +## Type Definitions + +### StatusBarStyle + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | | +| light-content | | + + + + +--- + +### StatusBarAnimation + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| none | | +| fade | | +| slide | | + + + + diff --git a/website/versioned_docs/version-0.24/switch.md b/website/versioned_docs/version-0.24/switch.md new file mode 100644 index 00000000000..d24181b7080 --- /dev/null +++ b/website/versioned_docs/version-0.24/switch.md @@ -0,0 +1,133 @@ +--- +id: version-0.24-switch +title: Switch +original_id: switch +--- +Renders a boolean input. + +This is a controlled component that requires an `onValueChange` callback that +updates the `value` prop in order for the component to reflect user actions. +If the `value` prop is not updated, the component will continue to render +the supplied `value` prop instead of the expected result of any user actions. + +@keyword checkbox +@keyword toggle + +### Props + +* [View props...](view.md#props) +- [`disabled`](switch.md#disabled) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`value`](switch.md#value) +- [`onTintColor`](switch.md#ontintcolor) +- [`thumbTintColor`](switch.md#thumbtintcolor) +- [`tintColor`](switch.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `disabled` + +If true the user won't be able to toggle the switch. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onValueChange` + +Invoked with the new value when the value changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value of the switch. If true the switch will be turned on. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onTintColor` + +Background color when the switch is turned on. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `thumbTintColor` + +Color of the foreground switch grip. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `tintColor` + +Background color when the switch is turned off. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.24/textinput.md b/website/versioned_docs/version-0.24/textinput.md new file mode 100644 index 00000000000..eb402b8f8f9 --- /dev/null +++ b/website/versioned_docs/version-0.24/textinput.md @@ -0,0 +1,580 @@ +--- +id: version-0.24-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +``` + + + +``` + +### Props + +* [View props...](view.md#props) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on ios) color of the text input + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + + + +--- + +### `clear()` + +```javascript +clear() +``` + + + diff --git a/website/versioned_docs/version-0.24/vibration.md b/website/versioned_docs/version-0.24/vibration.md new file mode 100644 index 00000000000..5af4628978a --- /dev/null +++ b/website/versioned_docs/version-0.24/vibration.md @@ -0,0 +1,55 @@ +--- +id: version-0.24-vibration +title: Vibration +original_id: vibration +--- + +The Vibration API is exposed at `Vibration.vibrate()`. +The vibration is asynchronous so this method will return immediately. + +There will be no effect on devices that do not support Vibration, eg. the simulator. + +Note for android +add `` to `AndroidManifest.xml` + +Vibration patterns are currently unsupported. + + +### Methods + +- [`vibrate`](vibration.md#vibrate) +- [`cancel`](vibration.md#cancel) + + + + +--- + +# Reference + +## Methods + +### `vibrate()` + +```javascript +static vibrate(pattern, repeat) +``` + + + +--- + +### `cancel()` + +```javascript +static cancel() +``` + + +Stop vibration + +@platform android + + + + diff --git a/website/versioned_docs/version-0.25/asyncstorage.md b/website/versioned_docs/version-0.25/asyncstorage.md new file mode 100644 index 00000000000..f700b2475d2 --- /dev/null +++ b/website/versioned_docs/version-0.25/asyncstorage.md @@ -0,0 +1,311 @@ +--- +id: version-0.25-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- + +AsyncStorage is a simple, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of AsyncStorage instead +of AsyncStorage directly for anything more than light usage since it +operates globally. + +On iOS, AsyncStorage is backed by native code that stores small values in a serialized +dictionary and larger values in separate files. On Android, AsyncStorage will use either +RocksDB or SQLite based on what is available. This JS code is a simple facade that +provides a clear JS API, real Error objects, and simple non-multi functions. Each +method returns a `Promise` object. + + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + +### Properties + + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key, callback?) +``` + + +Fetches `key` and passes the result to `callback`, along with an `Error` if +there is any. Returns a `Promise` object. + + + + +--- + +### `setItem()` + +```javascript +static setItem(key, value, callback?) +``` + + +Sets `value` for `key` and calls `callback` on completion, along with an +`Error` if there is any. Returns a `Promise` object. + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key, callback?) +``` + + +Returns a `Promise` object. + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key, value, callback?) +``` + + +Merges existing value with input value, assuming they are stringified json. +Returns a `Promise` object. Not supported by all native implementations. + +Example: +```javascript +let UID123_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// need only define what will be added or updated +let UID123_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10} +}; + +AsyncStorage.setItem(store_key, JSON.stringify(UID123_object), () => { + AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { + AsyncStorage.getItem('UID123', (err, result) => { + console.log(result); + // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} + }); + }); +}); +``` + + + + +--- + +### `clear()` + +```javascript +static clear(callback?) +``` + + +Erases *all* AsyncStorage for all clients, libraries, etc. You probably +don't want to call this - use removeItem or multiRemove to clear only your +own keys instead. Returns a `Promise` object. + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys(callback?) +``` + + +Gets *all* keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. + +Example: see multiGet for example + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests() +``` + +Flushes any pending requests using a single multiget + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys, callback?) +``` + + +multiGet invokes callback with an array of key-value pair arrays that +matches the input format of multiSet. Returns a `Promise` object. + + multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) + +Example: +```javascript +AsyncStorage.getAllKeys((err, keys) => { + AsyncStorage.multiGet(keys, (err, stores) => { + stores.map((result, i, store) => { + // get at each store's key/value so you can work with it + let key = store[i][0]; + let value = store[i][1]; + }); + }); +}); +``` + + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs, callback?) +``` + + +multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g. Returns a `Promise` object. + + multiSet([['k1', 'val1'], ['k2', 'val2']], cb); + +Example: see multiMerge for an example + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys, callback?) +``` + + +Delete all the keys in the `keys` array. Returns a `Promise` object. + +Example: +```javascript +let keys = ['k1', 'k2']; +AsyncStorage.multiRemove(keys, (err) => { + // keys k1 & k2 removed, if they existed + // do most stuff after removal (if you want) +}); +``` + + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs, callback?) +``` + + +Merges existing values with input values, assuming they are stringified +json. Returns a `Promise` object. + +Not supported by all native implementations. + +Example: +```javascript +// first user, initial values +let UID234_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// first user, delta values +let UID234_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10}, +}; + +// second user, initial values +let UID345_object = { + name: 'Marge', + age: 25, + traits: {hair: 'blonde', eyes: 'blue'}, +}; + +// second user, delta values +let UID345_delta = { + age: 26, + traits: {eyes: 'green', shoe_size: 6}, +}; + +let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]] +let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]] + +AsyncStorage.multiSet(multi_set_pairs, (err) => { + AsyncStorage.multiMerge(multi_merge_pairs, (err) => { + AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => { + stores.map( (result, i, store) => { + let key = store[i][0]; + let val = store[i][1]; + console.log(key, val); + // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} + // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} + }); + }); + }); +}); +``` + + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.25/drawerlayoutandroid.md b/website/versioned_docs/version-0.25/drawerlayoutandroid.md new file mode 100644 index 00000000000..82ba1e54895 --- /dev/null +++ b/website/versioned_docs/version-0.25/drawerlayoutandroid.md @@ -0,0 +1,255 @@ +--- +id: version-0.25-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) +- [`drawerBackgroundColor`](drawerlayoutandroid.md#drawerbackgroundcolor) +- [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `drawerLockMode` + +Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. +- locked-closed, meaning that the drawer will stay closed and not respond to gestures. +- locked-open, meaning that the drawer will stay opened and not respond to gestures. +The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + +| Type | Required | +| - | - | +| enum('unlocked', 'locked-closed', 'locked-open') | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `drawerBackgroundColor` + +Specifies the background color of the drawer. The default value is white. +If you want to set the opacity of the drawer, use rgba. Example: + +``` +return ( + + +); +``` + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `statusBarBackgroundColor` + +Make the drawer take the entire screen and draw the background of the +status bar to allow it to open over the status bar. It will only have an +effect on API 21+. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + +Opens the drawer. + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + +Closes the drawer. + + + diff --git a/website/versioned_docs/version-0.25/geolocation.md b/website/versioned_docs/version-0.25/geolocation.md new file mode 100644 index 00000000000..6df45bad791 --- /dev/null +++ b/website/versioned_docs/version-0.25/geolocation.md @@ -0,0 +1,88 @@ +--- +id: version-0.25-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API follows the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) +On Android, this can return almost immediately if the location is cached or +request an update, which might take a while. + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.25/image-style-props.md b/website/versioned_docs/version-0.25/image-style-props.md new file mode 100644 index 00000000000..ce454bd52e9 --- /dev/null +++ b/website/versioned_docs/version-0.25/image-style-props.md @@ -0,0 +1,231 @@ +--- +id: version-0.25-image-style-props +title: Image Style Props +original_id: image-style-props +--- +### Props + +- [`borderTopRightRadius`](image-style-props.md#bordertoprightradius) +- [`backfaceVisibility`](image-style-props.md#backfacevisibility) +- [`borderBottomLeftRadius`](image-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](image-style-props.md#borderbottomrightradius) +- [`borderColor`](image-style-props.md#bordercolor) +- [`borderRadius`](image-style-props.md#borderradius) +- [`borderTopLeftRadius`](image-style-props.md#bordertopleftradius) +- [`backgroundColor`](image-style-props.md#backgroundcolor) +- [`borderWidth`](image-style-props.md#borderwidth) +- [`opacity`](image-style-props.md#opacity) +- [`overflow`](image-style-props.md#overflow) +- [`resizeMode`](image-style-props.md#resizemode) +- [`overlayColor`](image-style-props.md#overlaycolor) +- [`tintColor`](image-style-props.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `resizeMode` + + + +| Type | Required | +| - | - | +| Object.keys(ImageResizeMode) | No | + + + + +--- + +### `overlayColor` + +When the image has rounded corners, specifying an overlayColor will +cause the remaining space in the corners to be filled with a solid color. +This is useful in cases which are not supported by the Android +implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + +A typical way to use this prop is with images displayed on a solid +background and setting the `overlayColor` to the same color +as the background. + +For details of how this works under the hood, see +http://frescolib.org/rounded-corners-and-circles.md + + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `tintColor` + +iOS-Specific style to "tint" an image. +Changes the color of all the non-transparent pixels to the tintColor. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.25/image.md b/website/versioned_docs/version-0.25/image.md new file mode 100644 index 00000000000..dabc1d26555 --- /dev/null +++ b/website/versioned_docs/version-0.25/image.md @@ -0,0 +1,373 @@ +--- +id: version-0.25-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('./path/to/image.png')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: number + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderTopLeftRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`overlayColor`**: string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + - **`tintColor`**: [color](colors.md) (_iOS_) + + iOS-Specific style to "tint" an image. + Changes the color of all the non-transparent pixels to the tintColor. + + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function) +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string) +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + + + diff --git a/website/versioned_docs/version-0.25/navigatorios.md b/website/versioned_docs/version-0.25/navigatorios.md new file mode 100644 index 00000000000..9f84782b135 --- /dev/null +++ b/website/versioned_docs/version-0.25/navigatorios.md @@ -0,0 +1,343 @@ +--- +id: version-0.25-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +functionality across your app. + +> **NOTE**: This Component is not maintained by Facebook +> +> This component is under community responsibility. +> If a pure JavaScript solution fits your needs you may try the `Navigator` +> component instead. + +#### 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 ( + + ); +}, +``` + +Now MyView will be rendered by the navigator. It will receive 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. + +#### 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); + }, + ... +}); +``` + +Navigator functions are also available on the NavigatorIOS component: + +``` +var MyView = React.createClass({ + _handleNavigationRequest: function() { + this.refs.nav.push(otherRoute); + }, + render: () => ( + + ), +}); +``` + +Props passed to the NavigatorIOS component will set the default configuration +for the navigation bar. Props passed as properties to a route object will set +the configuration for that route's navigation bar, overriding any props +passed to the NavigatorIOS component. + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +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: + +| Type | Required | +| - | - | +| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | + + + + +--- + +### `barTintColor` + +The default background color of the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the backgroundColor for every page + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +A Boolean value that indicates whether the navigation bar is hidden by default + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +A Boolean value that indicates whether to hide the 1px hairline shadow by default + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The default color used for buttons in the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The default text color of the navigation bar title + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the navigation bar is translucent by default + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + +Navigate forward to a new route + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + +Go back N pages at once. When N=1, behavior matches `pop()` + + + +--- + +### `pop()` + +```javascript +pop() +``` + +Go back one page + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +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. + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replace the route for the current page and immediately +load the view for the new route. + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the route/view for the previous page. + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + +Go back to the top item + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + +Go back to the item for a particular route object + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + +Replaces the previous route/view and transitions back to it. + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + +Replaces the top item and popToTop + + + diff --git a/website/versioned_docs/version-0.25/refreshcontrol.md b/website/versioned_docs/version-0.25/refreshcontrol.md new file mode 100644 index 00000000000..7b4c1cd6c45 --- /dev/null +++ b/website/versioned_docs/version-0.25/refreshcontrol.md @@ -0,0 +1,197 @@ +--- +id: version-0.25-refreshcontrol +title: RefreshControl +original_id: refreshcontrol +--- +This component is used inside a ScrollView or ListView to add pull to refresh +functionality. When the ScrollView is at `scrollY: 0`, swiping down +triggers an `onRefresh` event. + +### Usage example + +``` js +class RefreshableList extends Component { + constructor(props) { + super(props); + this.state = { + refreshing: false, + }; + } + + _onRefresh() { + this.setState({refreshing: true}); + fetchData().then(() => { + this.setState({refreshing: false}); + }); + } + + render() { + return ( + + } + ... + > + ... + + ); + } + ... +} +``` + +__Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true +in the `onRefresh` function otherwise the refresh indicator will stop immediatly. + +### Props + +* [View props...](view.md#props) +- [`onRefresh`](refreshcontrol.md#onrefresh) +- [`refreshing`](refreshcontrol.md#refreshing) +- [`colors`](refreshcontrol.md#colors) +- [`enabled`](refreshcontrol.md#enabled) +- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) +- [`size`](refreshcontrol.md#size) +- [`tintColor`](refreshcontrol.md#tintcolor) +- [`title`](refreshcontrol.md#title) +- [`titleColor`](refreshcontrol.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| array of [color](colors.md) | No | Android | + + + + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + + +| Type | Required | Platform | +| - | - | - | +| RefreshLayoutConsts.SIZE.DEFAULT | No | Android | + + + + +--- + +### `tintColor` + +The color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `title` + +The title displayed under the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `titleColor` + +Title color. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.25/scrollview.md b/website/versioned_docs/version-0.25/scrollview.md new file mode 100644 index 00000000000..674191cc43c --- /dev/null +++ b/website/versioned_docs/version-0.25/scrollview.md @@ -0,0 +1,768 @@ +--- +id: version-0.25-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`horizontal`](scrollview.md#horizontal) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. It's +implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + +Deprecated. Use `RefreshControl` instead. + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.25/statusbar.md b/website/versioned_docs/version-0.25/statusbar.md new file mode 100644 index 00000000000..37b56005dda --- /dev/null +++ b/website/versioned_docs/version-0.25/statusbar.md @@ -0,0 +1,268 @@ +--- +id: version-0.25-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Imperative API + +For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the component for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render. + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + +### Methods + +- [`setHidden`](statusbar.md#sethidden) +- [`setBarStyle`](statusbar.md#setbarstyle) +- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) +- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) +- [`setTranslucent`](statusbar.md#settranslucent) + + +### Type Definitions + +- [`StatusBarStyle`](statusbar.md#statusbarstyle) +- [`StatusBarAnimation`](statusbar.md#statusbaranimation) + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light-content') | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| enum('fade', 'slide') | No | iOS | + + + + + + +## Methods + +### `setHidden()` + +```javascript +static setHidden(hidden: boolean, [animation]: StatusBarAnimation) +``` + + + +--- + +### `setBarStyle()` + +```javascript +static setBarStyle(style: StatusBarStyle, [animated]: boolean) +``` + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible: boolean) +``` + + + +--- + +### `setBackgroundColor()` + +```javascript +static setBackgroundColor(color: string, [animated]: boolean) +``` + + + +--- + +### `setTranslucent()` + +```javascript +static setTranslucent(translucent: boolean) +``` + + + +## Type Definitions + +### StatusBarStyle + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | | +| light-content | | + + + + +--- + +### StatusBarAnimation + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| none | | +| fade | | +| slide | | + + + + diff --git a/website/versioned_docs/version-0.25/text-style-props.md b/website/versioned_docs/version-0.25/text-style-props.md new file mode 100644 index 00000000000..6d0fe5bc187 --- /dev/null +++ b/website/versioned_docs/version-0.25/text-style-props.md @@ -0,0 +1,245 @@ +--- +id: version-0.25-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`textAlignVertical`](text-style-props.md#textalignvertical) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| enum('normal', 'italic') | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS. + +| Type | Required | +| - | - | +| enum('auto', 'left', 'right', 'center', 'justify') | No | + + + + +--- + +### `textDecorationLine` + + + +| Type | Required | +| - | - | +| enum('none', 'underline', 'line-through', 'underline line-through') | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlignVertical` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'top', 'bottom', 'center') | No | Android | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'ltr', 'rtl') | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.25/text.md b/website/versioned_docs/version-0.25/text.md new file mode 100644 index 00000000000..406970eddda --- /dev/null +++ b/website/versioned_docs/version-0.25/text.md @@ -0,0 +1,209 @@ +--- +id: version-0.25-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `accessible` + + + +| Type | Required | +| - | - | +| | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS. + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') + + - **`fontFamily`**: string + + - **`textShadowOffset`**: object: {width: number,height: number} + + - **`textShadowRadius`**: number + + - **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.25/textinput.md b/website/versioned_docs/version-0.25/textinput.md new file mode 100644 index 00000000000..0379419e8e7 --- /dev/null +++ b/website/versioned_docs/version-0.25/textinput.md @@ -0,0 +1,584 @@ +--- +id: version-0.25-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +``` + + + +``` + +### Props + +* [View props...](view.md#props) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholder`](textinput.md#placeholder) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on ios) color of the text input + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns if the input is currently focused. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the input. + + + diff --git a/website/versioned_docs/version-0.25/timepickerandroid.md b/website/versioned_docs/version-0.25/timepickerandroid.md new file mode 100644 index 00000000000..446ee75e37d --- /dev/null +++ b/website/versioned_docs/version-0.25/timepickerandroid.md @@ -0,0 +1,93 @@ +--- +id: version-0.25-timepickerandroid +title: TimePickerAndroid +original_id: timepickerandroid +--- + +Opens the standard Android time picker dialog. + +### Example + +``` +try { + const {action, hour, minute} = await TimePickerAndroid.open({ + hour: 14, + minute: 0, + is24Hour: false, // Will display '2 PM' + }); + if (action !== TimePickerAndroid.dismissedAction) { + // Selected hour (0-23), minute (0-59) + } +} catch ({code, message}) { + console.warn('Cannot open time picker', message); +} +``` + + +### Methods + +- [`open`](timepickerandroid.md#open) +- [`timeSetAction`](timepickerandroid.md#timesetaction) +- [`dismissedAction`](timepickerandroid.md#dismissedaction) + + + + +--- + +# Reference + +## Methods + +### `open()` + +```javascript +static open(options) +``` + + +Opens the standard Android time picker dialog. + +The available keys for the `options` object are: + * `hour` (0-23) - the hour to show, defaults to the current time + * `minute` (0-59) - the minute to show, defaults to the current time + * `is24Hour` (boolean) - If `true`, the picker uses the 24-hour format. If `false`, + the picker shows an AM/PM chooser. If undefined, the default for the current locale + is used. + +Returns a Promise which will be invoked an object containing `action`, `hour` (0-23), +`minute` (0-59) if the user picked a time. If the user dismissed the dialog, the Promise will +still be resolved with action being `TimePickerAndroid.dismissedAction` and all the other keys +being undefined. **Always** check whether the `action` before reading the values. + + + + +--- + +### `timeSetAction()` + +```javascript +static timeSetAction() +``` + + +A time has been selected. + + + + +--- + +### `dismissedAction()` + +```javascript +static dismissedAction() +``` + + +The dialog has been dismissed. + + + + diff --git a/website/versioned_docs/version-0.25/touchablehighlight.md b/website/versioned_docs/version-0.25/touchablehighlight.md new file mode 100644 index 00000000000..97c7205cb61 --- /dev/null +++ b/website/versioned_docs/version-0.25/touchablehighlight.md @@ -0,0 +1,117 @@ +--- +id: version-0.25-touchablehighlight +title: TouchableHighlight +original_id: touchablehighlight +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, which allows +the underlay color to show through, darkening or tinting the view. The +underlay comes from adding a view to the view hierarchy, which can sometimes +cause unwanted visual artifacts if not used correctly, for example if the +backgroundColor of the wrapped view isn't explicitly set to an opaque color. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` +> **NOTE**: TouchableHighlight supports only one child +> +> If you wish to have several child components, wrap them in a View. + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchablehighlight.md#activeopacity) +- [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) +- [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) +- [`style`](touchablehighlight.md#style) +- [`underlayColor`](touchablehighlight.md#underlaycolor) + + + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onHideUnderlay` + +Called immediately after the underlay is hidden + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShowUnderlay` + +Called immediately after the underlay is shown + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `underlayColor` + +The color of the underlay that will show through when the touch is +active. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.25/touchablenativefeedback.md b/website/versioned_docs/version-0.25/touchablenativefeedback.md new file mode 100644 index 00000000000..502eeae6542 --- /dev/null +++ b/website/versioned_docs/version-0.25/touchablenativefeedback.md @@ -0,0 +1,120 @@ +--- +id: version-0.25-touchablenativefeedback +title: TouchableNativeFeedback +original_id: touchablenativefeedback +--- +A wrapper for making views respond properly to touches (Android only). +On Android this component uses native state drawable to display touch +feedback. At the moment it only supports having a single View instance as a +child node, as it's implemented by replacing that View with another instance +of RCTView node with some additional properties set. + +Background drawable of native feedback touchable can be customized with +`background` property. + +Example: + +``` +renderButton: function() { + return ( + + + Button + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`background`](touchablenativefeedback.md#background) + + + + +### Methods + +- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) +- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) +- [`Ripple`](touchablenativefeedback.md#ripple) + + + + +--- + +# Reference + +## Props + +### `background` + +Determines the type of background drawable that's going to be used to +display feedback. It takes an object with `type` property and extra data +depending on the `type`. It's recommended to use one of the static +methods to generate that dictionary. + +| Type | Required | +| - | - | +| backgroundPropType | No | + + + + + + +## Methods + +### `SelectableBackground()` + +```javascript +static SelectableBackground() +``` + +Creates an object that represents android theme's default background for +selectable elements (?android:attr/selectableItemBackground). + + + +--- + +### `SelectableBackgroundBorderless()` + +```javascript +static SelectableBackgroundBorderless() +``` + +Creates an object that represent android theme's default background for borderless +selectable elements (?android:attr/selectableItemBackgroundBorderless). +Available on android API level 21+. + + + +--- + +### `Ripple()` + +```javascript +static Ripple(color: string, borderless: boolean) +``` + +Creates an object that represents ripple drawable with specified color (as a +string). If property `borderless` evaluates to true the ripple will +render outside of the view bounds (see native actionbar buttons as an +example of that behavior). This background type is available on Android +API level 21+. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| color | string | Yes | The ripple color | +| borderless | boolean | Yes | If the ripple can render outside it's bounds | + + + + diff --git a/website/versioned_docs/version-0.25/touchableopacity.md b/website/versioned_docs/version-0.25/touchableopacity.md new file mode 100644 index 00000000000..493faca0695 --- /dev/null +++ b/website/versioned_docs/version-0.25/touchableopacity.md @@ -0,0 +1,72 @@ +--- +id: version-0.25-touchableopacity +title: TouchableOpacity +original_id: touchableopacity +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, dimming it. +This is done without actually changing the view hierarchy, and in general is +easy to add to an app without weird side-effects. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchableopacity.md#activeopacity) + + + + +### Methods + +- [`setOpacityTo`](touchableopacity.md#setopacityto) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + + + +## Methods + +### `setOpacityTo()` + +```javascript +setOpacityTo(value: number) +``` + +Animate the touchable to a new opacity. + + + diff --git a/website/versioned_docs/version-0.25/viewpagerandroid.md b/website/versioned_docs/version-0.25/viewpagerandroid.md new file mode 100644 index 00000000000..3e770906e48 --- /dev/null +++ b/website/versioned_docs/version-0.25/viewpagerandroid.md @@ -0,0 +1,216 @@ +--- +id: version-0.25-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) +- [`pageMargin`](viewpagerandroid.md#pagemargin) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + +### Type Definitions + +- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageScrollStateChanged` + +Function called when the page scrolling state has changed. +The page scrolling state can be in 3 states: +- idle, meaning there is no interaction with the page scroller happening at the time +- dragging, meaning there is currently an interaction with the page scroller +- settling, meaning that there was an interaction with the page scroller, and the + page scroller is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pageMargin` + +Blank space to show between pages. This is only visible while scrolling, pages are still +edge-to-edge. + +| Type | Required | +| - | - | +| number | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be *not* be animated. + + + +## Type Definitions + +### ViewPagerScrollState + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| idle | | +| dragging | | +| settling | | + + + + diff --git a/website/versioned_docs/version-0.25/webview.md b/website/versioned_docs/version-0.25/webview.md new file mode 100644 index 00000000000..ed44470aa2f --- /dev/null +++ b/website/versioned_docs/version-0.25/webview.md @@ -0,0 +1,436 @@ +--- +id: version-0.25-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`contentInset`](webview.md#contentinset) +- [`source`](webview.md#source) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`getWebViewHandle`](webview.md#getwebviewhandle) + + + + +--- + +# Reference + +## Props + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `mediaPlaybackRequiresUserAction` + +Determines whether HTML5 audio & videos require the user to tap before they can +start playing. The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onError` + +Invoked when load fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Invoked when load finish + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 + - fast: 0.99 (the default for iOS WebView) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + +Go forward one page in the webview's history. + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + +Go back one page in the webview's history. + + + +--- + +### `reload()` + +```javascript +reload() +``` + +Reloads the current page. + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + +Returns the native webview node. + + + diff --git a/website/versioned_docs/version-0.26/linking.md b/website/versioned_docs/version-0.26/linking.md new file mode 100644 index 00000000000..c2caad6ff11 --- /dev/null +++ b/website/versioned_docs/version-0.26/linking.md @@ -0,0 +1,199 @@ +--- +id: version-0.26-linking +title: Linking +original_id: linking +--- + +`Linking` gives you a general interface to interact with both incoming +and outgoing app links. + +### Basic Usage + +#### Handling deep links + +If your app was launched from an external url registered to your app you can +access and handle it from any component you want with + +``` +componentDidMount() { + var url = Linking.getInitialURL().then((url) => { + if (url) { + console.log('Initial url is: ' + url); + } + }).catch(err => console.error('An error occurred', err)); +} +``` + +NOTE: For instructions on how to add support for deep linking on Android, +refer [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). + +NOTE: On iOS you'll need to link `RCTLinking` to your project by following +the steps described [here](linking-libraries-ios.md#manual-linking). +In case you also want to listen to incoming app links during your app's +execution you'll need to add the following lines to you `*AppDelegate.m`: + +``` +#import "RCTLinkingManager.h" + +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [RCTLinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} + +// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). +- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity + restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler +{ + return [RCTLinkingManager application:application + continueUserActivity:userActivity + restorationHandler:restorationHandler]; +} + +``` + +And then on your React component you'll be able to listen to the events on +`Linking` as follows + +``` +componentDidMount() { + Linking.addEventListener('url', this._handleOpenURL); +}, +componentWillUnmount() { + Linking.removeEventListener('url', this._handleOpenURL); +}, +_handleOpenURL(event) { + console.log(event.url); +} +``` +Note that this is only supported on iOS. + +#### Opening external links + +To start the corresponding activity for a link (web URL, email, contact etc.), call + +``` +Linking.openURL(url).catch(err => console.error('An error occurred', err)); +``` + +If you want to check if any installed app can handle a given URL beforehand you can call +``` +Linking.canOpenURL(url).then(supported => { + if (!supported) { + console.log('Can\'t handle url: ' + url); + } else { + return Linking.openURL(url); + } +}).catch(err => console.error('An error occurred', err)); +``` + + +### Methods + +- [`addEventListener`](linking.md#addeventlistener) +- [`removeEventListener`](linking.md#removeeventlistener) +- [`openURL`](linking.md#openurl) +- [`canOpenURL`](linking.md#canopenurl) +- [`getInitialURL`](linking.md#getinitialurl) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Add a handler to Linking changes by listening to the `url` event type +and providing the handler + +@platform ios + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Remove a handler by passing the `url` event type and the handler + +@platform ios + + + + +--- + +### `openURL()` + +```javascript +static openURL(url) +``` + + +Try to open the given `url` with any of the installed apps. + +You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, +or any other URL that can be opened with the installed apps. + +NOTE: This method will fail if the system doesn't know how to open the specified URL. +If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + + + + +--- + +### `canOpenURL()` + +```javascript +static canOpenURL(url) +``` + + +Determine whether or not an installed app can handle a given URL. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + +NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key +inside `Info.plist`. + +@param URL the URL to open + + + + +--- + +### `getInitialURL()` + +```javascript +static getInitialURL() +``` + + +If the app launch was triggered by an app link with, +it will give the link url, otherwise it will give `null` + +NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents + + + + diff --git a/website/versioned_docs/version-0.26/modal.md b/website/versioned_docs/version-0.26/modal.md new file mode 100644 index 00000000000..f9af50edd2a --- /dev/null +++ b/website/versioned_docs/version-0.26/modal.md @@ -0,0 +1,117 @@ +--- +id: version-0.26-modal +title: Modal +original_id: modal +--- +A Modal component covers the native view (e.g. UIViewController, Activity) +that contains the React Native root. + +Use Modal in hybrid apps that embed React Native; Modal allows the portion of +your app written in React Native to present content above the enclosing +native view hierarchy. + +In apps written with React Native from the root view down, you should use +Navigator instead of Modal. With a top-level Navigator, you have more control +over how to present the modal scene over the rest of your app by using the +configureScene property. + +### Props + +- [`animationType`](modal.md#animationtype) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) +- [`animated`](modal.md#animated) + + + + + + +--- + +# Reference + +## Props + +### `animationType` + + + +| Type | Required | +| - | - | +| enum('none', 'slide', 'fade') | No | + + + + +--- + +### `onRequestClose` + + + +| Type | Required | +| - | - | +| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | + + + + +--- + +### `onShow` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `animated` + +**Deprecated.** Use the `animationType` prop instead. + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.26/panresponder.md b/website/versioned_docs/version-0.26/panresponder.md new file mode 100644 index 00000000000..99810e2a6e3 --- /dev/null +++ b/website/versioned_docs/version-0.26/panresponder.md @@ -0,0 +1,157 @@ +--- +id: version-0.26-panresponder +title: PanResponder +original_id: panresponder +--- + +`PanResponder` reconciles several touches into a single gesture. It makes +single-touch gestures resilient to extra touches, and can be used to +recognize simple multi-touch gestures. + +By default, `PanResponder` holds an `InteractionManager handle to block +long-running JS events from interrupting active gestures. + +It provides a predictable wrapper of the responder handlers provided by the +[gesture responder system](gesture-responder-system.md). +For each handler, it provides a new `gestureState` object alongside the +native event object: + +``` +onPanResponderMove: (event, gestureState) => {} +``` + +A native event is a synthetic touch event with the following form: + + - `nativeEvent` + + `changedTouches` - Array of all touch events that have changed since the last event + + `identifier` - The ID of the touch + + `locationX` - The X position of the touch, relative to the element + + `locationY` - The Y position of the touch, relative to the element + + `pageX` - The X position of the touch, relative to the root element + + `pageY` - The Y position of the touch, relative to the root element + + `target` - The node id of the element receiving the touch event + + `timestamp` - A time identifier for the touch, useful for velocity calculation + + `touches` - Array of all current touches on the screen + +A `gestureState` object has the following: + + - `stateID` - ID of the gestureState- persisted as long as there at least + one touch on screen + - `moveX` - the latest screen coordinates of the recently-moved touch + - `moveY` - the latest screen coordinates of the recently-moved touch + - `x0` - the screen coordinates of the responder grant + - `y0` - the screen coordinates of the responder grant + - `dx` - accumulated distance of the gesture since the touch started + - `dy` - accumulated distance of the gesture since the touch started + - `vx` - current velocity of the gesture + - `vy` - current velocity of the gesture + - `numberActiveTouches` - Number of touches currently on screen + +### Basic Usage + +``` + componentWillMount: function() { + this._panResponder = PanResponder.create({ + // Ask to be the responder: + onStartShouldSetPanResponder: (evt, gestureState) => true, + onStartShouldSetPanResponderCapture: (evt, gestureState) => true, + onMoveShouldSetPanResponder: (evt, gestureState) => true, + onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, + + onPanResponderGrant: (evt, gestureState) => { + // The guesture has started. Show visual feedback so the user knows + // what is happening! + + // gestureState.{x,y}0 will be set to zero now + }, + onPanResponderMove: (evt, gestureState) => { + // The most recent move distance is gestureState.move{X,Y} + + // The accumulated gesture distance since becoming responder is + // gestureState.d{x,y} + }, + onPanResponderTerminationRequest: (evt, gestureState) => true, + onPanResponderRelease: (evt, gestureState) => { + // The user has released all touches while this view is the + // responder. This typically means a gesture has succeeded + }, + onPanResponderTerminate: (evt, gestureState) => { + // Another component has become the responder, so this gesture + // should be cancelled + }, + onShouldBlockNativeResponder: (evt, gestureState) => { + // Returns whether this component should block native components from becoming the JS + // responder. Returns true by default. Is currently only supported on android. + return true; + }, + }); + }, + + render: function() { + return ( + + ); + }, + +``` + +### Working Example + +To see it in action, try the +[PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/PanResponderExample.js) + + +### Methods + +- [`create`](panresponder.md#create) + + + + +--- + +# Reference + +## Methods + +### `create()` + +```javascript +static create(config) +``` + + +@param {object} config Enhanced versions of all of the responder callbacks +that provide not only the typical `ResponderSyntheticEvent`, but also the +`PanResponder` gesture state. Simply replace the word `Responder` with +`PanResponder` in each of the typical `onResponder*` callbacks. For +example, the `config` object would look like: + + - `onMoveShouldSetPanResponder: (e, gestureState) => {...}` + - `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}` + - `onStartShouldSetPanResponder: (e, gestureState) => {...}` + - `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}` + - `onPanResponderReject: (e, gestureState) => {...}` + - `onPanResponderGrant: (e, gestureState) => {...}` + - `onPanResponderStart: (e, gestureState) => {...}` + - `onPanResponderEnd: (e, gestureState) => {...}` + - `onPanResponderRelease: (e, gestureState) => {...}` + - `onPanResponderMove: (e, gestureState) => {...}` + - `onPanResponderTerminate: (e, gestureState) => {...}` + - `onPanResponderTerminationRequest: (e, gestureState) => {...}` + - `onShouldBlockNativeResponder: (e, gestureState) => {...}` + + In general, for events that have capture equivalents, we update the + gestureState once in the capture phase and can use it in the bubble phase + as well. + + Be careful with onStartShould* callbacks. They only reflect updated + `gestureState` for start/end events that bubble/capture to the Node. + Once the node is the responder, you can rely on every start/end event + being processed by the gesture and `gestureState` being updated + accordingly. (numberActiveTouches) may not be totally accurate unless you + are the responder. + + + + diff --git a/website/versioned_docs/version-0.26/pickerios.md b/website/versioned_docs/version-0.26/pickerios.md new file mode 100644 index 00000000000..b5c6e5b2e3d --- /dev/null +++ b/website/versioned_docs/version-0.26/pickerios.md @@ -0,0 +1,62 @@ +--- +id: version-0.26-pickerios +title: PickerIOS +original_id: pickerios +--- +### Props + +* [View props...](view.md#props) +- [`itemStyle`](pickerios.md#itemstyle) +- [`onValueChange`](pickerios.md#onvaluechange) +- [`selectedValue`](pickerios.md#selectedvalue) + + + + + + +--- + +# Reference + +## Props + +### `itemStyle` + + + +| Type | Required | +| - | - | +| itemStylePropType | No | + + + + +--- + +### `onValueChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `selectedValue` + + + +| Type | Required | +| - | - | +| any | No | + + + + + + diff --git a/website/versioned_docs/version-0.26/pushnotificationios.md b/website/versioned_docs/version-0.26/pushnotificationios.md new file mode 100644 index 00000000000..c65c381f6a5 --- /dev/null +++ b/website/versioned_docs/version-0.26/pushnotificationios.md @@ -0,0 +1,391 @@ +--- +id: version-0.26-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Be sure to add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` +- Set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. The default value of this property is 0, which means that no badge is displayed. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. Setting the number to 0 removes the icon badge. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +An initial notification will be available if the app was cold-launched +from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.26/scrollview.md b/website/versioned_docs/version-0.26/scrollview.md new file mode 100644 index 00000000000..86ab94b1703 --- /dev/null +++ b/website/versioned_docs/version-0.26/scrollview.md @@ -0,0 +1,771 @@ +--- +id: version-0.26-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`horizontal`](scrollview.md#horizontal) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + var styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `pagingEnabled` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + +Deprecated. Use `RefreshControl` instead. + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.26/tabbarios-item.md b/website/versioned_docs/version-0.26/tabbarios-item.md new file mode 100644 index 00000000000..e992925801c --- /dev/null +++ b/website/versioned_docs/version-0.26/tabbarios-item.md @@ -0,0 +1,153 @@ +--- +id: version-0.26-tabbarios-item +title: TabBarIOS.Item +original_id: tabbarios-item +--- +### Props + +* [View props...](view.md#props) +- [`badge`](tabbarios-item.md#badge) +- [`icon`](tabbarios-item.md#icon) +- [`onPress`](tabbarios-item.md#onpress) +- [`renderAsOriginal`](tabbarios-item.md#renderasoriginal) +- [`selected`](tabbarios-item.md#selected) +- [`selectedIcon`](tabbarios-item.md#selectedicon) +- [`style`](tabbarios-item.md#style) +- [`systemIcon`](tabbarios-item.md#systemicon) +- [`title`](tabbarios-item.md#title) + + + + + + +--- + +# Reference + +## Props + +### `badge` + +Little red bubble that sits at the top right of the icon. + +| Type | Required | +| - | - | +| string, ,number | No | + + + + +--- + +### `icon` + +A custom icon for the tab. It is ignored when a system icon is defined. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `onPress` + +Callback when this tab is being selected, you should change the state of your +component to set selected={true}. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderAsOriginal` + +If set to true it renders the image as original, +it defaults to being displayed as a template + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selected` + +It specifies whether the children are visible or not. If you see a +blank content, you probably forgot to add a selected one. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectedIcon` + +A custom icon when the tab is selected. It is ignored when a system +icon is defined. If left empty, the icon will be tinted in blue. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `style` + +React style object. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `systemIcon` + +Items comes with a few predefined system icons. Note that if you are +using them, the title and selectedIcon will be overridden with the +system ones. + +| Type | Required | +| - | - | +| enum('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated') | No | + + + + +--- + +### `title` + +Text that appears under the icon. It is ignored when a system icon +is defined. + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.26/tabbarios.md b/website/versioned_docs/version-0.26/tabbarios.md new file mode 100644 index 00000000000..6837f8b258c --- /dev/null +++ b/website/versioned_docs/version-0.26/tabbarios.md @@ -0,0 +1,90 @@ +--- +id: version-0.26-tabbarios +title: TabBarIOS +original_id: tabbarios +--- +### Props + +* [View props...](view.md#props) +- [`barTintColor`](tabbarios.md#bartintcolor) +- [`style`](tabbarios.md#style) +- [`tintColor`](tabbarios.md#tintcolor) +- [`translucent`](tabbarios.md#translucent) +- [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) + + + + + + +--- + +# Reference + +## Props + +### `barTintColor` + +Background color of the tab bar + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `tintColor` + +Color of the currently selected tab icon + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the tab bar is translucent + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `unselectedTintColor` + +Color of text on unselected tabs + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.26/text-style-props.md b/website/versioned_docs/version-0.26/text-style-props.md new file mode 100644 index 00000000000..eea98da32e9 --- /dev/null +++ b/website/versioned_docs/version-0.26/text-style-props.md @@ -0,0 +1,246 @@ +--- +id: version-0.26-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`textAlignVertical`](text-style-props.md#textalignvertical) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| enum('normal', 'italic') | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS and +fallbacks to `left` on Android. + +| Type | Required | +| - | - | +| enum('auto', 'left', 'right', 'center', 'justify') | No | + + + + +--- + +### `textDecorationLine` + + + +| Type | Required | +| - | - | +| enum('none', 'underline', 'line-through', 'underline line-through') | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| object: {width: number,height: number} | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `textAlignVertical` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'top', 'bottom', 'center') | No | Android | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| enum('solid', 'double', 'dotted', 'dashed') | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| enum('auto', 'ltr', 'rtl') | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.26/text.md b/website/versioned_docs/version-0.26/text.md new file mode 100644 index 00000000000..67cbfaf9102 --- /dev/null +++ b/website/versioned_docs/version-0.26/text.md @@ -0,0 +1,224 @@ +--- +id: version-0.26-text +title: Text +original_id: text +--- +A React component for displaying text which supports nesting, +styling, and touch handling. In the following example, the nested title and +body text will inherit the `fontFamily` from `styles.baseText`, but the title +provides its own additional styles. The title and body will stack on top of +each other on account of the literal newlines: + +``` +renderText: function() { + return ( + + + {this.state.titleText + '\n\n'} + + + {this.state.bodyText} + + + ); +}, +... +var styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}; +``` + +### Props + +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onLongPress`](text.md#onlongpress) +- [`onPress`](text.md#onpress) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `accessible` + + + +| Type | Required | +| - | - | +| | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + +This function is called on long press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS and + fallbacks to `left` on Android. + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') + + - **`fontFamily`**: string + + - **`textShadowOffset`**: object: {width: number,height: number} + + - **`textShadowRadius`**: number + + - **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `allowFontScaling` + +Specifies should fonts scale to respect Text Size accessibility setting on iOS. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When true, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.26/touchableopacity.md b/website/versioned_docs/version-0.26/touchableopacity.md new file mode 100644 index 00000000000..98ac56804cc --- /dev/null +++ b/website/versioned_docs/version-0.26/touchableopacity.md @@ -0,0 +1,72 @@ +--- +id: version-0.26-touchableopacity +title: TouchableOpacity +original_id: touchableopacity +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, dimming it. +This is done without actually changing the view hierarchy, and in general is +easy to add to an app without weird side-effects. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchableopacity.md#activeopacity) + + + + +### Methods + +- [`setOpacityTo`](touchableopacity.md#setopacityto) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. Defaults to 0.2. + +| Type | Required | +| - | - | +| number | No | + + + + + + +## Methods + +### `setOpacityTo()` + +```javascript +setOpacityTo(value: number) +``` + +Animate the touchable to a new opacity. + + + diff --git a/website/versioned_docs/version-0.26/transforms.md b/website/versioned_docs/version-0.26/transforms.md new file mode 100644 index 00000000000..fa256fad16e --- /dev/null +++ b/website/versioned_docs/version-0.26/transforms.md @@ -0,0 +1,131 @@ +--- +id: version-0.26-transforms +title: Transforms +original_id: transforms +--- +### Props + +- [`decomposedMatrix`](transforms.md#decomposedmatrix) +- [`rotation`](transforms.md#rotation) +- [`scaleX`](transforms.md#scalex) +- [`scaleY`](transforms.md#scaley) +- [`transform`](transforms.md#transform) +- [`transformMatrix`](transforms.md#transformmatrix) +- [`translateX`](transforms.md#translatex) +- [`translateY`](transforms.md#translatey) + + + + + + +--- + +# Reference + +## Props + +### `decomposedMatrix` + + + +| Type | Required | +| - | - | +| DecomposedMatrixPropType | No | + + + + +--- + +### `rotation` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `scaleX` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `scaleY` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `transform` + + + +| Type | Required | +| - | - | +| array of object: {perspective: number}, ,object: {rotate: string}, ,object: {rotateX: string}, ,object: {rotateY: string}, ,object: {rotateZ: string}, ,object: {scale: number}, ,object: {scaleX: number}, ,object: {scaleY: number}, ,object: {translateX: number}, ,object: {translateY: number}, ,object: {skewX: string}, ,object: {skewY: string} | No | + + + + +--- + +### `transformMatrix` + + + +| Type | Required | +| - | - | +| TransformMatrixPropType | No | + + + + +--- + +### `translateX` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `translateY` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + + + diff --git a/website/versioned_docs/version-0.26/viewpagerandroid.md b/website/versioned_docs/version-0.26/viewpagerandroid.md new file mode 100644 index 00000000000..56a58e4df16 --- /dev/null +++ b/website/versioned_docs/version-0.26/viewpagerandroid.md @@ -0,0 +1,231 @@ +--- +id: version-0.26-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) +- [`pageMargin`](viewpagerandroid.md#pagemargin) +- [`scrollEnabled`](viewpagerandroid.md#scrollenabled) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + +### Type Definitions + +- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageScrollStateChanged` + +Function called when the page scrolling state has changed. +The page scrolling state can be in 3 states: +- idle, meaning there is no interaction with the page scroller happening at the time +- dragging, meaning there is currently an interaction with the page scroller +- settling, meaning that there was an interaction with the page scroller, and the + page scroller is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pageMargin` + +Blank space to show between pages. This is only visible while scrolling, pages are still +edge-to-edge. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be *not* be animated. + + + +## Type Definitions + +### ViewPagerScrollState + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| idle | | +| dragging | | +| settling | | + + + + diff --git a/website/versioned_docs/version-0.26/webview.md b/website/versioned_docs/version-0.26/webview.md new file mode 100644 index 00000000000..62a60617ad5 --- /dev/null +++ b/website/versioned_docs/version-0.26/webview.md @@ -0,0 +1,447 @@ +--- +id: version-0.26-webview +title: WebView +original_id: webview +--- +Renders a native WebView. + +### Props + +* [View props...](view.md#props) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`contentInset`](webview.md#contentinset) +- [`source`](webview.md#source) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`stopLoading`](webview.md#stoploading) +- [`getWebViewHandle`](webview.md#getwebviewhandle) + + + + +--- + +# Reference + +## Props + +### `scalesPageToFit` + +Sets whether the webpage scales to fit the view and the user can change the scale. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Allows custom handling of any webview requests by a JS handler. Return true +or false from this method to continue loading the request. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Sets the JS to be injected when the webpage loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `mediaPlaybackRequiresUserAction` + +Determines whether HTML5 audio & videos require the user to tap before they can +start playing. The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onError` + +Invoked when load fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Invoked when load finish + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + + + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + + + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `startInLoadingState` + + + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 + - fast: 0.99 (the default for iOS WebView) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Used on Android only, controls whether DOM Storage is enabled or not + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Used on Android only, JS is enabled by default for WebView on iOS + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Determines whether HTML5 videos play inline or use the native full-screen +controller. +default value `false` +**NOTE** : "In order for video to play inline, not only does this +property need to be set to true, but the video element in the HTML +document must also include the webkit-playsinline attribute." + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + +Go forward one page in the webview's history. + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + +Go back one page in the webview's history. + + + +--- + +### `reload()` + +```javascript +reload() +``` + +Reloads the current page. + + + +--- + +### `stopLoading()` + +```javascript +stopLoading() +``` + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + +Returns the native webview node. + + + diff --git a/website/versioned_docs/version-0.27/drawerlayoutandroid.md b/website/versioned_docs/version-0.27/drawerlayoutandroid.md new file mode 100644 index 00000000000..0b7501eb501 --- /dev/null +++ b/website/versioned_docs/version-0.27/drawerlayoutandroid.md @@ -0,0 +1,255 @@ +--- +id: version-0.27-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) +- [`drawerBackgroundColor`](drawerlayoutandroid.md#drawerbackgroundcolor) +- [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| function | Yes | + + + + +--- + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `drawerLockMode` + +Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. +- locked-closed, meaning that the drawer will stay closed and not respond to gestures. +- locked-open, meaning that the drawer will stay opened and not respond to gestures. +The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + +| Type | Required | +| - | - | +| enum('unlocked', 'locked-closed', 'locked-open') | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing its closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `drawerBackgroundColor` + +Specifies the background color of the drawer. The default value is white. +If you want to set the opacity of the drawer, use rgba. Example: + +``` +return ( + + +); +``` + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `statusBarBackgroundColor` + +Make the drawer take the entire screen and draw the background of the +status bar to allow it to open over the status bar. It will only have an +effect on API 21+. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + +Opens the drawer. + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + +Closes the drawer. + + + diff --git a/website/versioned_docs/version-0.27/image-style-props.md b/website/versioned_docs/version-0.27/image-style-props.md new file mode 100644 index 00000000000..6cbf3a2849e --- /dev/null +++ b/website/versioned_docs/version-0.27/image-style-props.md @@ -0,0 +1,229 @@ +--- +id: version-0.27-image-style-props +title: Image Style Props +original_id: image-style-props +--- +### Props + +- [`borderTopRightRadius`](image-style-props.md#bordertoprightradius) +- [`backfaceVisibility`](image-style-props.md#backfacevisibility) +- [`borderBottomLeftRadius`](image-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](image-style-props.md#borderbottomrightradius) +- [`borderColor`](image-style-props.md#bordercolor) +- [`borderRadius`](image-style-props.md#borderradius) +- [`borderTopLeftRadius`](image-style-props.md#bordertopleftradius) +- [`backgroundColor`](image-style-props.md#backgroundcolor) +- [`borderWidth`](image-style-props.md#borderwidth) +- [`opacity`](image-style-props.md#opacity) +- [`overflow`](image-style-props.md#overflow) +- [`resizeMode`](image-style-props.md#resizemode) +- [`tintColor`](image-style-props.md#tintcolor) +- [`overlayColor`](image-style-props.md#overlaycolor) + + + + + + +--- + +# Reference + +## Props + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| enum('visible', 'hidden') | No | + + + + +--- + +### `resizeMode` + + + +| Type | Required | +| - | - | +| Object.keys(ImageResizeMode) | No | + + + + +--- + +### `tintColor` + +Changes the color of all the non-transparent pixels to the tintColor. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `overlayColor` + +When the image has rounded corners, specifying an overlayColor will +cause the remaining space in the corners to be filled with a solid color. +This is useful in cases which are not supported by the Android +implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + +A typical way to use this prop is with images displayed on a solid +background and setting the `overlayColor` to the same color +as the background. + +For details of how this works under the hood, see +http://frescolib.org/rounded-corners-and-circles.md + + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.27/image.md b/website/versioned_docs/version-0.27/image.md new file mode 100644 index 00000000000..3bfc200052f --- /dev/null +++ b/website/versioned_docs/version-0.27/image.md @@ -0,0 +1,371 @@ +--- +id: version-0.27-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +`uri` is 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 `require('./path/to/image.png')` function). + +| Type | Required | +| - | - | +| object: {uri: string}, ,number | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: number + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderTopLeftRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function) +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string) +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + + + diff --git a/website/versioned_docs/version-0.27/navigatorios.md b/website/versioned_docs/version-0.27/navigatorios.md new file mode 100644 index 00000000000..f0d032c249b --- /dev/null +++ b/website/versioned_docs/version-0.27/navigatorios.md @@ -0,0 +1,361 @@ +--- +id: version-0.27-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +NavigatorIOS wraps UIKit navigation and allows you to add back-swipe +functionality across your app. + +> **NOTE**: This Component is not maintained by Facebook +> +> This component is under community responsibility. +> If a pure JavaScript solution fits your needs you may try the `Navigator` +> component instead. + +#### 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 ( + + ); +}, +``` + +Now MyView will be rendered by the navigator. It will receive 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. + +#### 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); + }, + ... +}); +``` + +Navigator functions are also available on the NavigatorIOS component: + +``` +var MyView = React.createClass({ + _handleNavigationRequest: function() { + this.refs.nav.push(otherRoute); + }, + render: () => ( + + ), +}); +``` + +Props passed to the NavigatorIOS component will set the default configuration +for the navigation bar. Props passed as properties to a route object will set +the configuration for that route's navigation bar, overriding any props +passed to the NavigatorIOS component. + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +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: + +| Type | Required | +| - | - | +| object: {component: function,title: string,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | + + + + +--- + +### `barTintColor` + +The default background color of the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `interactivePopGestureEnabled` + +A Boolean value that indicates whether the interactive pop gesture is enabled. Useful +for enabling/disabling the back swipe navigation gesture. If this prop is not provided, +the default behavior is for the back swipe gesture to be enabled when the navigation bar +is shown and disabled when the navigation bar is hidden. Once you've provided +the interactivePopGestureEnabled prop, you can never restore the default behavior. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the backgroundColor for every page + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +A Boolean value that indicates whether the navigation bar is hidden by default + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +A Boolean value that indicates whether to hide the 1px hairline shadow by default + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The default color used for buttons in the navigation bar + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The default text color of the navigation bar title + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the navigation bar is translucent by default + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + +Navigate forward to a new route + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + +Go back N pages at once. When N=1, behavior matches `pop()` + + + +--- + +### `pop()` + +```javascript +pop() +``` + +Go back one page + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +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. + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replace the route for the current page and immediately +load the view for the new route. + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the route/view for the previous page. + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + +Go back to the top item + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + +Go back to the item for a particular route object + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + +Replaces the previous route/view and transitions back to it. + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + +Replaces the top item and popToTop + + + diff --git a/website/versioned_docs/version-0.27/netinfo.md b/website/versioned_docs/version-0.27/netinfo.md new file mode 100644 index 00000000000..780162466ba --- /dev/null +++ b/website/versioned_docs/version-0.27/netinfo.md @@ -0,0 +1,176 @@ +--- +id: version-0.27-netinfo +title: NetInfo +original_id: netinfo +--- + +NetInfo exposes info about online/offline status + +``` +NetInfo.fetch().done((reach) => { + console.log('Initial: ' + reach); +}); +function handleFirstConnectivityChange(reach) { + console.log('First change: ' + reach); + NetInfo.removeEventListener( + 'change', + handleFirstConnectivityChange + ); +} +NetInfo.addEventListener( + 'change', + handleFirstConnectivityChange +); +``` + +### IOS + +Asynchronously determine if the device is online and on a cellular network. + +- `none` - device is offline +- `wifi` - device is online and connected via wifi, or is the iOS simulator +- `cell` - device is connected via Edge, 3G, WiMax, or LTE +- `unknown` - error case and the network status is unknown + +### Android + +To request network info, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` +Asynchronously determine if the device is connected and details about that connection. + +Android Connectivity Types. + +- `NONE` - device is offline +- `BLUETOOTH` - The Bluetooth data connection. +- `DUMMY` - Dummy data connection. +- `ETHERNET` - The Ethernet data connection. +- `MOBILE` - The Mobile data connection. +- `MOBILE_DUN` - A DUN-specific Mobile data connection. +- `MOBILE_HIPRI` - A High Priority Mobile data connection. +- `MOBILE_MMS` - An MMS-specific Mobile data connection. +- `MOBILE_SUPL` - A SUPL-specific Mobile data connection. +- `VPN` - A virtual network using one or more native bearers. Requires API Level 21 +- `WIFI` - The WIFI data connection. +- `WIMAX` - The WiMAX data connection. +- `UNKNOWN` - Unknown data connection. + +The rest ConnectivityStates are hidden by the Android API, but can be used if necessary. + +### isConnectionExpensive + +Available on Android. Detect if the current active connection is metered or not. A network is +classified as metered when the user is sensitive to heavy data usage on that connection due to +monetary costs, data limitations or battery/performance issues. + +``` +NetInfo.isConnectionExpensive() +.then(isConnectionExpensive => { + console.log('Connection is ' + (isConnectionExpensive ? 'Expensive' : 'Not Expensive')); +}) +.catch(error => { + console.error(error); +}); +``` + +### isConnected + +Available on all platforms. Asynchronously fetch a boolean to determine +internet connectivity. + +``` +NetInfo.isConnected.fetch().then(isConnected => { + console.log('First, is ' + (isConnected ? 'online' : 'offline')); +}); +function handleFirstConnectivityChange(isConnected) { + console.log('Then, is ' + (isConnected ? 'online' : 'offline')); + NetInfo.isConnected.removeEventListener( + 'change', + handleFirstConnectivityChange + ); +} +NetInfo.isConnected.addEventListener( + 'change', + handleFirstConnectivityChange +); +``` + + +### Methods + +- [`addEventListener`](netinfo.md#addeventlistener) +- [`removeEventListener`](netinfo.md#removeeventlistener) +- [`fetch`](netinfo.md#fetch) +- [`isConnectionExpensive`](netinfo.md#isconnectionexpensive) + + +### Properties + +- [`isConnected`](netinfo.md#isconnected) + + + + +--- + +# Reference + +## Methods + +### `addEventListener()` + +```javascript +static addEventListener(eventName, handler) +``` + + +Invokes the listener whenever network status changes. +The listener receives one of the connectivity types listed above. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(eventName, handler) +``` + + +Removes the listener for network status changes. + + + + +--- + +### `fetch()` + +```javascript +static fetch() +``` + + +Returns a promise that resolves with one of the connectivity types listed +above. + + + + +--- + +### `isConnectionExpensive()` + +```javascript +static isConnectionExpensive() +``` + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.27/refreshcontrol.md b/website/versioned_docs/version-0.27/refreshcontrol.md new file mode 100644 index 00000000000..a0816a8d287 --- /dev/null +++ b/website/versioned_docs/version-0.27/refreshcontrol.md @@ -0,0 +1,212 @@ +--- +id: version-0.27-refreshcontrol +title: RefreshControl +original_id: refreshcontrol +--- +This component is used inside a ScrollView or ListView to add pull to refresh +functionality. When the ScrollView is at `scrollY: 0`, swiping down +triggers an `onRefresh` event. + +### Usage example + +``` js +class RefreshableList extends Component { + constructor(props) { + super(props); + this.state = { + refreshing: false, + }; + } + + _onRefresh() { + this.setState({refreshing: true}); + fetchData().then(() => { + this.setState({refreshing: false}); + }); + } + + render() { + return ( + + } + ... + > + ... + + ); + } + ... +} +``` + +__Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true +in the `onRefresh` function otherwise the refresh indicator will stop immediatly. + +### Props + +* [View props...](view.md#props) +- [`refreshing`](refreshcontrol.md#refreshing) +- [`onRefresh`](refreshcontrol.md#onrefresh) +- [`colors`](refreshcontrol.md#colors) +- [`enabled`](refreshcontrol.md#enabled) +- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) +- [`progressViewOffset`](refreshcontrol.md#progressviewoffset) +- [`size`](refreshcontrol.md#size) +- [`tintColor`](refreshcontrol.md#tintcolor) +- [`title`](refreshcontrol.md#title) +- [`titleColor`](refreshcontrol.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| - | - | +| bool | Yes | + + + + +--- + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| array of [color](colors.md) | No | Android | + + + + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `progressViewOffset` + +Progress view top offset + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + + +| Type | Required | Platform | +| - | - | - | +| enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android | + + + + +--- + +### `tintColor` + +The color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `title` + +The title displayed under the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `titleColor` + +Title color. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.27/scrollview.md b/website/versioned_docs/version-0.27/scrollview.md new file mode 100644 index 00000000000..e38585fc176 --- /dev/null +++ b/website/versioned_docs/version-0.27/scrollview.md @@ -0,0 +1,788 @@ +--- +id: version-0.27-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`scrollPerfTag`](scrollview.md#scrollperftag) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`bounces`](scrollview.md#bounces) +- [`horizontal`](scrollview.md#horizontal) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`zoomScale`](scrollview.md#zoomscale) +- [`onRefreshStart`](scrollview.md#onrefreshstart) + + + + +### Methods + +- [`endRefreshing`](scrollview.md#endrefreshing) +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + const styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pagingEnabled` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `scrollPerfTag` + +Tag used to log scroll performance on this scroll view. Will force +momentum events to be turned on (see sendMomentumEvents). This doesn't do +anything out of the box and you need to implement a custom native +FpsListener for it to be useful. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onRefreshStart` + +**Deprecated.** Use the `refreshControl` prop instead. + + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `endRefreshing()` + +```javascript +endRefreshing() +``` + +Deprecated. Use `RefreshControl` instead. + + + +--- + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.27/statusbarios.md b/website/versioned_docs/version-0.27/statusbarios.md new file mode 100644 index 00000000000..a97a0582c36 --- /dev/null +++ b/website/versioned_docs/version-0.27/statusbarios.md @@ -0,0 +1,52 @@ +--- +id: version-0.27-statusbarios +title: StatusBarIOS +original_id: statusbarios +--- + +Deprecated. Use `StatusBar` instead. + + +### Methods + +- [`setStyle`](statusbarios.md#setstyle) +- [`setHidden`](statusbarios.md#sethidden) +- [`setNetworkActivityIndicatorVisible`](statusbarios.md#setnetworkactivityindicatorvisible) + + + + +--- + +# Reference + +## Methods + +### `setStyle()` + +```javascript +setStyle(style, animated?) +``` + + + +--- + +### `setHidden()` + +```javascript +setHidden(hidden, animation?) +``` + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +setNetworkActivityIndicatorVisible(visible) +``` + + + diff --git a/website/versioned_docs/version-0.27/textinput.md b/website/versioned_docs/version-0.27/textinput.md new file mode 100644 index 00000000000..3c80c2c2377 --- /dev/null +++ b/website/versioned_docs/version-0.27/textinput.md @@ -0,0 +1,622 @@ +--- +id: version-0.27-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +``` + this.setState({text})} + value={this.state.text} + /> +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +``` + + + +``` + +### Props + +* [View props...](view.md#props) +- [`placeholder`](textinput.md#placeholder) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholder` + +The string that will be rendered before text input has been entered + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell TextInput to automatically capitalize certain characters. + +- characters: all characters, +- words: first letter of each word +- sentences: first letter of each sentence (default) +- none: don't auto capitalize anything + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If true, focuses the input on componentDidMount. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `blurOnSubmit` + +If true, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting blurOnSubmit +to true means that pressing return will blur the field and trigger the +onSubmitEditing event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you don't want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If false, text is not editable. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- default +- numeric +- email-address + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If true, the text input can be multiple lines. +The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if multiline={true} is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If false, disables auto-correct. The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +The following values work across platforms: + +- done +- go +- next +- search +- send + +The following values work on Android only: + +- none +- previous + +The following values work on iOS only: + +- default +- emergency-call +- google +- join +- route +- yahoo + +| Type | Required | +| - | - | +| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') | No | + + + + +--- + +### `secureTextEntry` + +If true, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectTextOnFocus` + +If true, all text will automatically be selected on focus + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on ios) color of the text input + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +Styles + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. TextInput is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a TextInput. Use it with multiline set to +true to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the textInput underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If true, clears the text field automatically when editing begins + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If true, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before onChange callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `selectionState` + +See DocumentSelectionState.js, some state that is responsible for +maintaining selection information for a document + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns if the input is currently focused. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the input. + + + diff --git a/website/versioned_docs/version-0.27/viewpagerandroid.md b/website/versioned_docs/version-0.27/viewpagerandroid.md new file mode 100644 index 00000000000..c7420377fc3 --- /dev/null +++ b/website/versioned_docs/version-0.27/viewpagerandroid.md @@ -0,0 +1,231 @@ +--- +id: version-0.27-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) +- [`pageMargin`](viewpagerandroid.md#pagemargin) +- [`scrollEnabled`](viewpagerandroid.md#scrollenabled) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + +### Type Definitions + +- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| enum('none', 'on-drag') | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageScrollStateChanged` + +Function called when the page scrolling state has changed. +The page scrolling state can be in 3 states: +- idle, meaning there is no interaction with the page scroller happening at the time +- dragging, meaning there is currently an interaction with the page scroller +- settling, meaning that there was an interaction with the page scroller, and the + page scroller is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pageMargin` + +Blank space to show between pages. This is only visible while scrolling, pages are still +edge-to-edge. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will *not* be animated. + + + +## Type Definitions + +### ViewPagerScrollState + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| idle | | +| dragging | | +| settling | | + + + + diff --git a/website/versioned_docs/version-0.28/actionsheetios.md b/website/versioned_docs/version-0.28/actionsheetios.md new file mode 100644 index 00000000000..12883897ce7 --- /dev/null +++ b/website/versioned_docs/version-0.28/actionsheetios.md @@ -0,0 +1,66 @@ +--- +id: version-0.28-actionsheetios +title: ActionSheetIOS +original_id: actionsheetios +--- + + + +### Methods + +- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) +- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) + + + + +--- + +# Reference + +## Methods + +### `showActionSheetWithOptions()` + +```javascript +static showActionSheetWithOptions(options, callback) +``` + + +Display an iOS action sheet. The `options` object must contain one or more +of: + +- `options` (array of strings) - a list of button titles (required) +- `cancelButtonIndex` (int) - index of cancel button in `options` +- `destructiveButtonIndex` (int) - index of destructive button in `options` +- `title` (string) - a title to show above the action sheet +- `message` (string) - a message to show below the title + + + + +--- + +### `showShareActionSheetWithOptions()` + +```javascript +static showShareActionSheetWithOptions(options, failureCallback, successCallback) +``` + + +Display the iOS share sheet. The `options` object should contain +one or both of `message` and `url` and can additionally have +a `subject` or `excludedActivityTypes`: + +- `url` (string) - a URL to share +- `message` (string) - a message to share +- `subject` (string) - a subject for the message +- `excludedActivityTypes` (array) - the activites to exclude from the ActionSheet + +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. + + + + diff --git a/website/versioned_docs/version-0.28/activityindicator.md b/website/versioned_docs/version-0.28/activityindicator.md new file mode 100644 index 00000000000..bf8a566499f --- /dev/null +++ b/website/versioned_docs/version-0.28/activityindicator.md @@ -0,0 +1,81 @@ +--- +id: version-0.28-activityindicator +title: ActivityIndicator +original_id: activityindicator +--- +Displays a circular loading indicator. + +### Props + +* [View props...](view.md#props) +- [`animating`](activityindicator.md#animating) +- [`color`](activityindicator.md#color) +- [`size`](activityindicator.md#size) +- [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) + + + + + + +--- + +# Reference + +## Props + +### `animating` + +Whether to show the indicator (true, the default) or hide it (false). + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `color` + +The foreground color of the spinner (default is gray). + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `size` + +Size of the indicator. Small has a height of 20, large has a height of 36. +Other sizes can be obtained using a scale transform. + +| Type | Required | +| - | - | +| enum('small', 'large') | No | + + + + +--- + +### `hidesWhenStopped` + +Whether the indicator should hide when not animating (true by default). + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.28/appstate.md b/website/versioned_docs/version-0.28/appstate.md new file mode 100644 index 00000000000..ede13ef7892 --- /dev/null +++ b/website/versioned_docs/version-0.28/appstate.md @@ -0,0 +1,115 @@ +--- +id: version-0.28-appstate +title: AppState +original_id: appstate +--- + +`AppState` can tell you if the app is in the foreground or background, +and notify you when the state changes. + +AppState is frequently used to determine the intent and proper behavior when +handling push notifications. + +### App States + + - `active` - The app is running in the foreground + - `background` - The app is running in the background. The user is either + in another app or on the home screen + - `inactive` - This is a state that occurs when transitioning between + foreground & background, and during periods of inactivity such as + entering the Multitasking view or in the event of an incoming call + +For more information, see +[Apple's documentation](https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html) + +### Basic Usage + +To see the current state, you can check `AppState.currentState`, which +will be kept up-to-date. However, `currentState` will be null at launch +while `AppState` retrieves it over the bridge. + +``` +getInitialState: function() { + return { + currentAppState: AppState.currentState, + }; +}, +componentDidMount: function() { + AppState.addEventListener('change', this._handleAppStateChange); +}, +componentWillUnmount: function() { + AppState.removeEventListener('change', this._handleAppStateChange); +}, +_handleAppStateChange: function(currentAppState) { + this.setState({ currentAppState, }); +}, +render: function() { + return ( + Current state is: {this.state.currentAppState} + ); +}, +``` + +This example will only ever appear to say "Current state is: active" because +the app is only visible to the user when in the `active` state, and the null +state will happen only momentarily. + + +### Methods + +- [`constructor`](appstate.md#constructor) +- [`addEventListener`](appstate.md#addeventlistener) +- [`removeEventListener`](appstate.md#removeeventlistener) + + + + +--- + +# Reference + +## Methods + +### `constructor()` + +```javascript +constructor() +``` + + + +--- + +### `addEventListener()` + +```javascript +addEventListener(type, handler) +``` + + +Add a handler to AppState changes by listening to the `change` event type +and providing the handler + +TODO: now that AppState is a subclass of NativeEventEmitter, we could deprecate +`addEventListener` and `removeEventListener` and just use `addListener` and +`listener.remove()` directly. That will be a breaking change though, as both +the method and event names are different (addListener events are currently +required to be globally unique). + + + + +--- + +### `removeEventListener()` + +```javascript +removeEventListener(type, handler) +``` + + +Remove a handler by passing the `change` event type and the handler + + + + diff --git a/website/versioned_docs/version-0.28/asyncstorage.md b/website/versioned_docs/version-0.28/asyncstorage.md new file mode 100644 index 00000000000..d6ef113ea4c --- /dev/null +++ b/website/versioned_docs/version-0.28/asyncstorage.md @@ -0,0 +1,311 @@ +--- +id: version-0.28-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- + +AsyncStorage is a simple, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of AsyncStorage instead +of AsyncStorage directly for anything more than light usage since it +operates globally. + +On iOS, AsyncStorage is backed by native code that stores small values in a serialized +dictionary and larger values in separate files. On Android, AsyncStorage will use either +RocksDB or SQLite based on what is available. This JS code is a simple facade that +provides a clear JS API, real Error objects, and simple non-multi functions. Each +method returns a `Promise` object. + + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + +### Properties + + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key, callback?) +``` + + +Fetches `key` and passes the result to `callback`, along with an `Error` if +there is any. Returns a `Promise` object. + + + + +--- + +### `setItem()` + +```javascript +static setItem(key, value, callback?) +``` + + +Sets `value` for `key` and calls `callback` on completion, along with an +`Error` if there is any. Returns a `Promise` object. + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key, callback?) +``` + + +Returns a `Promise` object. + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key, value, callback?) +``` + + +Merges existing value with input value, assuming they are stringified json. +Returns a `Promise` object. Not supported by all native implementations. + +Example: +```javascript +let UID123_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// need only define what will be added or updated +let UID123_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10} +}; + +AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => { + AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { + AsyncStorage.getItem('UID123', (err, result) => { + console.log(result); + // => {'name':'Chris','age':31,'traits':{'shoe_size':10,'hair':'brown','eyes':'blue'}} + }); + }); +}); +``` + + + + +--- + +### `clear()` + +```javascript +static clear(callback?) +``` + + +Erases *all* AsyncStorage for all clients, libraries, etc. You probably +don't want to call this - use removeItem or multiRemove to clear only your +own keys instead. Returns a `Promise` object. + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys(callback?) +``` + + +Gets *all* keys known to the app, for all callers, libraries, etc. Returns a `Promise` object. + +Example: see multiGet for example + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests() +``` + +Flushes any pending requests using a single multiget + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys, callback?) +``` + + +multiGet invokes callback with an array of key-value pair arrays that +matches the input format of multiSet. Returns a `Promise` object. + + multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) + +Example: +```javascript +AsyncStorage.getAllKeys((err, keys) => { + AsyncStorage.multiGet(keys, (err, stores) => { + stores.map((result, i, store) => { + // get at each store's key/value so you can work with it + let key = store[i][0]; + let value = store[i][1]; + }); + }); +}); +``` + + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs, callback?) +``` + + +multiSet and multiMerge take arrays of key-value array pairs that match +the output of multiGet, e.g. Returns a `Promise` object. + + multiSet([['k1', 'val1'], ['k2', 'val2']], cb); + +Example: see multiMerge for an example + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys, callback?) +``` + + +Delete all the keys in the `keys` array. Returns a `Promise` object. + +Example: +```javascript +let keys = ['k1', 'k2']; +AsyncStorage.multiRemove(keys, (err) => { + // keys k1 & k2 removed, if they existed + // do most stuff after removal (if you want) +}); +``` + + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs, callback?) +``` + + +Merges existing values with input values, assuming they are stringified +json. Returns a `Promise` object. + +Not supported by all native implementations. + +Example: +```javascript +// first user, initial values +let UID234_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// first user, delta values +let UID234_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10}, +}; + +// second user, initial values +let UID345_object = { + name: 'Marge', + age: 25, + traits: {hair: 'blonde', eyes: 'blue'}, +}; + +// second user, delta values +let UID345_delta = { + age: 26, + traits: {eyes: 'green', shoe_size: 6}, +}; + +let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]] +let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]] + +AsyncStorage.multiSet(multi_set_pairs, (err) => { + AsyncStorage.multiMerge(multi_merge_pairs, (err) => { + AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => { + stores.map( (result, i, store) => { + let key = store[i][0]; + let val = store[i][1]; + console.log(key, val); + // => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} + // => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} + }); + }); + }); +}); +``` + + + + +## Properties + + + diff --git a/website/versioned_docs/version-0.28/image.md b/website/versioned_docs/version-0.28/image.md new file mode 100644 index 00000000000..fd69c074bb8 --- /dev/null +++ b/website/versioned_docs/version-0.28/image.md @@ -0,0 +1,369 @@ +--- +id: version-0.28-image +title: Image +original_id: 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 ( + + + + + ); +}, +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +'cover': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +'contain': Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +'stretch': Scale width and height independently, This may change the +aspect ratio of the src. + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: number + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderTopLeftRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `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 on +[Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets) + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string,width: number,height: number,scale: number}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}` + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function) +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string) +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + + + diff --git a/website/versioned_docs/version-0.28/linking.md b/website/versioned_docs/version-0.28/linking.md new file mode 100644 index 00000000000..2d8c6f2eb28 --- /dev/null +++ b/website/versioned_docs/version-0.28/linking.md @@ -0,0 +1,215 @@ +--- +id: version-0.28-linking +title: Linking +original_id: linking +--- + +`Linking` gives you a general interface to interact with both incoming +and outgoing app links. + +### Basic Usage + +#### Handling deep links + +If your app was launched from an external url registered to your app you can +access and handle it from any component you want with + +``` +componentDidMount() { + var url = Linking.getInitialURL().then((url) => { + if (url) { + console.log('Initial url is: ' + url); + } + }).catch(err => console.error('An error occurred', err)); +} +``` + +NOTE: For instructions on how to add support for deep linking on Android, +refer to [Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links](http://developer.android.com/training/app-indexing/deep-linking.html#adding-filters). + +If you wish to receive the intent in an existing instance of MainActivity, +you may set the `launchMode` of MainActivity to `singleTask` in +`AndroidManifest.xml`. See [``](http://developer.android.com/guide/topics/manifest/activity-element.html) +documentation for more information. + +``` + +``` + +NOTE: On iOS you'll need to link `RCTLinking` to your project by following +the steps described [here](linking-libraries-ios.md#manual-linking). +In case you also want to listen to incoming app links during your app's +execution you'll need to add the following lines to you `*AppDelegate.m`: + +``` +#import "RCTLinkingManager.h" + +- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url + sourceApplication:(NSString *)sourceApplication annotation:(id)annotation +{ + return [RCTLinkingManager application:application openURL:url + sourceApplication:sourceApplication annotation:annotation]; +} + +// Only if your app is using [Universal Links](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html). +- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity + restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler +{ + return [RCTLinkingManager application:application + continueUserActivity:userActivity + restorationHandler:restorationHandler]; +} + +``` + +And then on your React component you'll be able to listen to the events on +`Linking` as follows + +``` +componentDidMount() { + Linking.addEventListener('url', this._handleOpenURL); +}, +componentWillUnmount() { + Linking.removeEventListener('url', this._handleOpenURL); +}, +_handleOpenURL(event) { + console.log(event.url); +} +``` +#### Opening external links + +To start the corresponding activity for a link (web URL, email, contact etc.), call + +``` +Linking.openURL(url).catch(err => console.error('An error occurred', err)); +``` + +If you want to check if any installed app can handle a given URL beforehand you can call +``` +Linking.canOpenURL(url).then(supported => { + if (!supported) { + console.log('Can\'t handle url: ' + url); + } else { + return Linking.openURL(url); + } +}).catch(err => console.error('An error occurred', err)); +``` + + +### Methods + +- [`constructor`](linking.md#constructor) +- [`addEventListener`](linking.md#addeventlistener) +- [`removeEventListener`](linking.md#removeeventlistener) +- [`openURL`](linking.md#openurl) +- [`canOpenURL`](linking.md#canopenurl) +- [`getInitialURL`](linking.md#getinitialurl) + + + + +--- + +# Reference + +## Methods + +### `constructor()` + +```javascript +constructor() +``` + + + +--- + +### `addEventListener()` + +```javascript +addEventListener(type, handler) +``` + + +Add a handler to Linking changes by listening to the `url` event type +and providing the handler + + + + +--- + +### `removeEventListener()` + +```javascript +removeEventListener(type, handler) +``` + + +Remove a handler by passing the `url` event type and the handler + + + + +--- + +### `openURL()` + +```javascript +openURL(url) +``` + + +Try to open the given `url` with any of the installed apps. + +You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, +or any other URL that can be opened with the installed apps. + +NOTE: This method will fail if the system doesn't know how to open the specified URL. +If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + + + + +--- + +### `canOpenURL()` + +```javascript +canOpenURL(url) +``` + + +Determine whether or not an installed app can handle a given URL. + +NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly! + +NOTE: As of iOS 9, your app needs to provide the `LSApplicationQueriesSchemes` key +inside `Info.plist` or canOpenURL will always return false. + +@param URL the URL to open + + + + +--- + +### `getInitialURL()` + +```javascript +getInitialURL() +``` + + +If the app launch was triggered by an app link, +it will give the link url, otherwise it will give `null` + +NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents + + + + diff --git a/website/versioned_docs/version-0.28/pushnotificationios.md b/website/versioned_docs/version-0.28/pushnotificationios.md new file mode 100644 index 00000000000..444bb40a6ee --- /dev/null +++ b/website/versioned_docs/version-0.28/pushnotificationios.md @@ -0,0 +1,411 @@ +--- +id: version-0.28-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Be sure to add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` +- Set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. The default value of this property is 0, which means that no badge is displayed. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. Setting the number to 0 removes the icon badge. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + +This method returns a promise that will resolve when the user accepts, +rejects, or if the permissions were previously rejected. The promise +resolves to the current state of the permission. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +DEPRECATED: An initial notification will be available if the app was +cold-launched from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `getInitialNotification()` + +```javascript +static getInitialNotification() +``` + + +If the app launch was triggered by a push notification, +it will give the notification object, otherwise it will give `null` + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.28/scrollview.md b/website/versioned_docs/version-0.28/scrollview.md new file mode 100644 index 00000000000..68e2ddffce5 --- /dev/null +++ b/website/versioned_docs/version-0.28/scrollview.md @@ -0,0 +1,759 @@ +--- +id: version-0.28-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`bounces`](scrollview.md#bounces) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`scrollPerfTag`](scrollview.md#scrollperftag) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`horizontal`](scrollview.md#horizontal) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + const styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pagingEnabled` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderBottomWidth`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: number + + - **`borderRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: number + + - **`borderStyle`**: enum('solid', 'dotted', 'dashed') + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: number + + - **`borderTopRightRadius`**: number + + - **`borderTopWidth`**: number + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`elevation`**: number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `scrollPerfTag` + +Tag used to log scroll performance on this scroll view. Will force +momentum events to be turned on (see sendMomentumEvents). This doesn't do +anything out of the box and you need to implement a custom native +FpsListener for it to be useful. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.28/tabbarios.md b/website/versioned_docs/version-0.28/tabbarios.md new file mode 100644 index 00000000000..3bbb6b75a39 --- /dev/null +++ b/website/versioned_docs/version-0.28/tabbarios.md @@ -0,0 +1,110 @@ +--- +id: version-0.28-tabbarios +title: TabBarIOS +original_id: tabbarios +--- +### Props + +* [View props...](view.md#props) +- [`barTintColor`](tabbarios.md#bartintcolor) +- [`itemPositioning`](tabbarios.md#itempositioning) +- [`style`](tabbarios.md#style) +- [`tintColor`](tabbarios.md#tintcolor) +- [`translucent`](tabbarios.md#translucent) +- [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) + + + + + + +--- + +# Reference + +## Props + +### `barTintColor` + +Background color of the tab bar + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `itemPositioning` + +Specifies tab bar item positioning. Available values are: +- fill - distributes items across the entire width of the tab bar +- center - centers item in the available tab bar space +- auto (default) - distributes items dynamically according to the +user interface idiom. In a horizontally compact environment (e.g. iPhone 5) +this value defaults to `fill`, in a horizontally regular one (e.g. iPad) +it defaults to center. + +| Type | Required | +| - | - | +| enum('fill', 'center', 'auto') | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `tintColor` + +Color of the currently selected tab icon + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the tab bar is translucent + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `unselectedTintColor` + +Color of text on unselected tabs + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.29/asyncstorage.md b/website/versioned_docs/version-0.29/asyncstorage.md new file mode 100644 index 00000000000..96be07b8626 --- /dev/null +++ b/website/versioned_docs/version-0.29/asyncstorage.md @@ -0,0 +1,416 @@ +--- +id: version-0.29-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- +`AsyncStorage` is a simple, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of `AsyncStorage` +instead of `AsyncStorage` directly for anything more than light usage since +it operates globally. + +On iOS, `AsyncStorage` is backed by native code that stores small values in a +serialized dictionary and larger values in separate files. On Android, +`AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite +based on what is available. + +The `AsyncStorage` JavaScript code is a simple facade that provides a clear +JavaScript API, real `Error` objects, and simple non-multi functions. Each +method in the API returns a `Promise` object. + +Persisting data: +``` +try { + await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.'); +} catch (error) { + // Error saving data +} +``` + +Fetching data: +``` +try { + const value = await AsyncStorage.getItem('@MySuperStore:key'); + if (value !== null){ + // We have data!! + console.log(value); + } +} catch (error) { + // Error retrieving data +} +``` + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void) +``` + +Fetches an item for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to fetch. | +| callback | ?(error: ?Error, result: ?string) => void | No | Function that will be called with a result if found or any error. | + + + + +--- + +### `setItem()` + +```javascript +static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) +``` + +Sets the value for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to set. | +| value | string | Yes | Value to set for the `key`. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key: string, [callback]: ?(error: ?Error) => void) +``` + +Removes an item for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to remove. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) +``` + +Merges an existing `key` value with an input value, assuming both values +are stringified JSON. Returns a `Promise` object. + +**NOTE:** This is not supported by all native implementations. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to modify. | +| value | string | Yes | New value to merge for the `key`. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +Example: + +```javascript + +let UID123_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; +// You only need to define what will be added or updated +let UID123_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10} +}; + +AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => { + AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { + AsyncStorage.getItem('UID123', (err, result) => { + console.log(result); + }); + }); +}); + +// Console log result: +// => {'name':'Chris','age':31,'traits': +// {'shoe_size':10,'hair':'brown','eyes':'blue'}} +``` + + + +--- + +### `clear()` + +```javascript +static clear([callback]: ?(error: ?Error) => void) +``` + +Erases *all* `AsyncStorage` for all clients, libraries, etc. You probably +don't want to call this; use `removeItem` or `multiRemove` to clear only +your app's keys. Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void) +``` + +Gets *all* keys known to your app; for all callers, libraries, etc. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | ?(error: ?Error, keys: ?Array) => void | No | Function that will be called the keys found and any error. | + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests(): [object Object] +``` + +Flushes any pending requests using a single batch call to get the data. + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) +``` + +This allows you to batch the fetching of items given an array of `key` +inputs. Your callback will be invoked with an array of corresponding +key-value pairs found: + +``` +multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) +``` + +The method returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keys | Array | Yes | Array of key for the items to get. | +| callback | ?(errors: ?Array, result: ?Array>) => void | No | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. | + + + + +Example: + +```javascript +AsyncStorage.getAllKeys((err, keys) => { + AsyncStorage.multiGet(keys, (err, stores) => { + stores.map((result, i, store) => { + // get at each store's key/value so you can work with it + let key = store[i][0]; + let value = store[i][1]; + }); + }); +}); +``` + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +``` + +Use this as a batch operation for storing multiple key-value pairs. When +the operation completes you'll get a single callback with any errors: + +``` +multiSet([['k1', 'val1'], ['k2', 'val2']], cb); +``` + +The method returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keyValuePairs | Array> | Yes | Array of key-value array for the items to set. | +| callback | ?(errors: ?Array) => void | No | Function that will be called with an array of any key-specific errors found. | + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void) +``` + +Call this to batch the deletion of all keys in the `keys` array. Returns +a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keys | Array | Yes | Array of key for the items to delete. | +| callback | ?(errors: ?Array) => void | No | Function that will be called an array of any key-specific errors found. | + + + + +Example: + +```javascript + +let keys = ['k1', 'k2']; +AsyncStorage.multiRemove(keys, (err) => { + // keys k1 & k2 removed, if they existed + // do most stuff after removal (if you want) +}); +``` + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +``` + +Batch operation to merge in existing and new values for a given set of +keys. This assumes that the values are stringified JSON. Returns a +`Promise` object. + +**NOTE**: This is not supported by all native implementations. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keyValuePairs | Array> | Yes | Array of key-value array for the items to merge. | +| callback | ?(errors: ?Array) => void | No | Function that will be called with an array of any key-specific errors found. | + + + + +Example: + +```javascript + +// first user, initial values +let UID234_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// first user, delta values +let UID234_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10}, +}; + +// second user, initial values +let UID345_object = { + name: 'Marge', + age: 25, + traits: {hair: 'blonde', eyes: 'blue'}, +}; + +// second user, delta values +let UID345_delta = { + age: 26, + traits: {eyes: 'green', shoe_size: 6}, +}; + +let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]] +let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]] + +AsyncStorage.multiSet(multi_set_pairs, (err) => { + AsyncStorage.multiMerge(multi_merge_pairs, (err) => { + AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => { + stores.map( (result, i, store) => { + let key = store[i][0]; + let val = store[i][1]; + console.log(key, val); + }); + }); + }); +}); + +// Console log results: +// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} +// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} +``` + + + diff --git a/website/versioned_docs/version-0.29/cameraroll.md b/website/versioned_docs/version-0.29/cameraroll.md new file mode 100644 index 00000000000..2acf664a3aa --- /dev/null +++ b/website/versioned_docs/version-0.29/cameraroll.md @@ -0,0 +1,76 @@ +--- +id: version-0.29-cameraroll +title: CameraRoll +original_id: cameraroll +--- + +`CameraRoll` provides access to the local camera roll / gallery. + + +### Methods + +- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) +- [`saveToCameraRoll`](cameraroll.md#savetocameraroll) +- [`getPhotos`](cameraroll.md#getphotos) + + + + +--- + +# Reference + +## Methods + +### `saveImageWithTag()` + +```javascript +static saveImageWithTag(tag) +``` + + + +--- + +### `saveToCameraRoll()` + +```javascript +static saveToCameraRoll(tag, type?) +``` + + +Saves the photo or video to the camera roll / gallery. + +On Android, the tag must be a local image or video URI, such as `"file:///sdcard/img.png"`. + +On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) +or a local video file URI (remote or data URIs are not supported for saving video at this time). + +If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise +it will be treated as a photo. To override the automatic choice, you can pass an optional +`type` parameter that must be one of 'photo' or 'video'. + +Returns a Promise which will resolve with the new URI. + + + + +--- + +### `getPhotos()` + +```javascript +static getPhotos(params) +``` + + +Returns a Promise with photo identifier objects from the local camera +roll of the device matching shape defined by `getPhotosReturnChecker`. + +@param {object} params See `getPhotosParamChecker`. + +Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`. + + + + diff --git a/website/versioned_docs/version-0.29/image.md b/website/versioned_docs/version-0.29/image.md new file mode 100644 index 00000000000..4829ff1d938 --- /dev/null +++ b/website/versioned_docs/version-0.29/image.md @@ -0,0 +1,443 @@ +--- +id: version-0.29-image +title: Image +original_id: 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. + +This exmaples shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| enum('cover', 'contain', 'stretch') | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: number + + - **`backfaceVisibility`**: enum('visible', 'hidden') + + - **`borderBottomLeftRadius`**: number + + - **`borderBottomRightRadius`**: number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: number + + - **`borderTopLeftRadius`**: number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: number + + - **`opacity`**: number + + - **`overflow`**: enum('visible', 'hidden') + + - **`resizeMode`**: Object.keys(ImageResizeMode) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| object: {uri: string,width: number,height: number,scale: number}, ,number | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.29/interactionmanager.md b/website/versioned_docs/version-0.29/interactionmanager.md new file mode 100644 index 00000000000..08a716e0bf4 --- /dev/null +++ b/website/versioned_docs/version-0.29/interactionmanager.md @@ -0,0 +1,142 @@ +--- +id: version-0.29-interactionmanager +title: InteractionManager +original_id: interactionmanager +--- + +InteractionManager allows long-running work to be scheduled after any +interactions/animations have completed. In particular, this allows JavaScript +animations to run smoothly. + +Applications can schedule tasks to run after interactions with the following: + +``` +InteractionManager.runAfterInteractions(() => { + // ...long-running synchronous task... +}); +``` + +Compare this to other scheduling alternatives: + +- requestAnimationFrame(): for code that animates a view over time. +- setImmediate/setTimeout(): run code later, note this may delay animations. +- runAfterInteractions(): run code later, without delaying active animations. + +The touch handling system considers one or more active touches to be an +'interaction' and will delay `runAfterInteractions()` callbacks until all +touches have ended or been cancelled. + +InteractionManager also allows applications to register animations by +creating an interaction 'handle' on animation start, and clearing it upon +completion: + +``` +var handle = InteractionManager.createInteractionHandle(); +// run animation... (`runAfterInteractions` tasks are queued) +// later, on animation completion: +InteractionManager.clearInteractionHandle(handle); +// queued tasks run if all handles were cleared +``` + +`runAfterInteractions` takes either a plain callback function, or a +`PromiseTask` object with a `gen` method that returns a `Promise`. If a +`PromiseTask` is supplied, then it is fully resolved (including asynchronous +dependencies that also schedule more tasks via `runAfterInteractions`) before +starting on the next task that might have been queued up synchronously +earlier. + +By default, queued tasks are executed together in a loop in one +`setImmediate` batch. If `setDeadline` is called with a positive number, then +tasks will only be executed until the deadline (in terms of js event loop run +time) approaches, at which point execution will yield via setTimeout, +allowing events such as touches to start interactions and block queued tasks +from executing, making apps more responsive. + + +### Methods + +- [`runAfterInteractions`](interactionmanager.md#runafterinteractions) +- [`createInteractionHandle`](interactionmanager.md#createinteractionhandle) +- [`clearInteractionHandle`](interactionmanager.md#clearinteractionhandle) +- [`setDeadline`](interactionmanager.md#setdeadline) + + +### Properties + +- [`Events`](interactionmanager.md#events) +- [`addListener`](interactionmanager.md#addlistener) + + + + +--- + +# Reference + +## Methods + +### `runAfterInteractions()` + +```javascript +static runAfterInteractions(task) +``` + + +Schedule a function to run after all interactions have completed. Returns a cancellable +"promise". + + + + +--- + +### `createInteractionHandle()` + +```javascript +static createInteractionHandle() +``` + + +Notify manager that an interaction has started. + + + + +--- + +### `clearInteractionHandle()` + +```javascript +static clearInteractionHandle(handle) +``` + + +Notify manager that an interaction has completed. + + + + +--- + +### `setDeadline()` + +```javascript +static setDeadline(deadline) +``` + + +A positive number will use setTimeout to schedule any tasks after the +eventLoopRunningTime hits the deadline value, otherwise all tasks will be +executed in one setImmediate batch (default). + + + + +## Properties + + + +--- + + + diff --git a/website/versioned_docs/version-0.29/keyboardavoidingview.md b/website/versioned_docs/version-0.29/keyboardavoidingview.md new file mode 100644 index 00000000000..d0b077e9bda --- /dev/null +++ b/website/versioned_docs/version-0.29/keyboardavoidingview.md @@ -0,0 +1,86 @@ +--- +id: version-0.29-keyboardavoidingview +title: KeyboardAvoidingView +original_id: keyboardavoidingview +--- +### Props + +* [View props...](view.md#props) +- [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) +- [`behavior`](keyboardavoidingview.md#behavior) + + + + +### Methods + +- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) +- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) +- [`onLayout`](keyboardavoidingview.md#onlayout) + + + + +--- + +# Reference + +## Props + +### `keyboardVerticalOffset` + +This is the distance between the top of the user screen and the react native view, +may be non-zero in some use cases. + +| Type | Required | +| - | - | +| number | Yes | + + + + +--- + +### `behavior` + + + +| Type | Required | +| - | - | +| enum('height', 'position', 'padding') | No | + + + + + + +## Methods + +### `relativeKeyboardHeight()` + +```javascript +relativeKeyboardHeight(keyboardFrame: object): +``` + + + +--- + +### `onKeyboardChange()` + +```javascript +onKeyboardChange(event: object) +``` + + + +--- + +### `onLayout()` + +```javascript +onLayout(event: object) +``` + + + diff --git a/website/versioned_docs/version-0.29/layout-props.md b/website/versioned_docs/version-0.29/layout-props.md new file mode 100644 index 00000000000..72b7ce4619f --- /dev/null +++ b/website/versioned_docs/version-0.29/layout-props.md @@ -0,0 +1,695 @@ +--- +id: version-0.29-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginRight`](layout-props.md#marginright) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`marginLeft`](layout-props.md#marginleft) +- [`alignSelf`](layout-props.md#alignself) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) +- [`zIndex`](layout-props.md#zindex) + + + + + + +--- + +# Reference + +## Props + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. + See http://www.w3schools.com/cssref/pr_margin-right.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. + For example, if children are flowing vertically, `alignItems` + controls how they align horizontally. + It works like `align-items` in CSS, except the default value + is `stretch` instead of `flex-start`. See + https://css-tricks.com/almanac/properties/a/align-items/ + for more detail. + +| Type | Required | +| - | - | +| enum('flex-start', 'flex-end', 'center', 'stretch') | No | + + + + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-bottom_width.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-bottom_width.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-right_width.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-top_width.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-width.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of + this component. + + It works similarly to `bottom` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. + `flex` is a number rather than a string, and it works + according to the `css-layout` library + at https://github.com/facebook/css-layout . + + When `flex` is a positive number, it makes the component flexible + and it will be sized proportional to its flex value. So a + component with `flex` set to 2 will take twice the space as a + component with `flex` set to 1. + + When `flex` is 0, the component is sized according to `width` + and `height` and it is inflexible. + + When `flex` is -1, the component is normally sized according + `width` and `height`. However, if there's not enough space, + the component will shrink to its `minWidth` and `minHeight`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. + `row` goes left to right, `column` goes top to bottom, and you may + be able to guess what the other two do. It works like `flex-direction` + in CSS, except the default is `column`. See + https://css-tricks.com/almanac/properties/f/flex-direction/ + for more detail. + +| Type | Required | +| - | - | +| enum('row', 'row-reverse', 'column', 'column-reverse') | No | + + + + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they + hit the end of a flex container. + It works like `flex-wrap` in CSS. See + https://css-tricks.com/almanac/properties/f/flex-wrap/ + for more detail. + +| Type | Required | +| - | - | +| enum('wrap', 'nowrap') | No | + + + + +--- + +### `height` + +`height` sets the height of this component. + + It works similarly to `height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. + For example, if children are flowing vertically, `justifyContent` + controls how they align vertically. + It works like `justify-content` in CSS. See + https://css-tricks.com/almanac/properties/j/justify-content/ + for more detail. + +| Type | Required | +| - | - | +| enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') | No | + + + + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of + this component. + + It works similarly to `left` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/left + for more details of how `left` affects layout. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of + `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. + See http://www.w3schools.com/cssref/pr_margin-bottom.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting + both `marginLeft` and `marginRight`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. + See http://www.w3schools.com/cssref/pr_margin-left.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, + overriding the `alignItems` of the parent. It works like `align-self` + in CSS. See + https://css-tricks.com/almanac/properties/a/align-self/ + for more detail. + +| Type | Required | +| - | - | +| enum('auto', 'flex-start', 'flex-end', 'center', 'stretch') | No | + + + + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. + See http://www.w3schools.com/cssref/pr_margin-top.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both + `marginTop` and `marginBottom`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + + It works similarly to `max-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_max-height.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + + It works similarly to `max-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_max-width.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + + It works similarly to `min-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_min-height.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + + It works similarly to `min-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_min-width.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `padding` + +`padding` works like `padding` in CSS. + It's like setting each of `paddingTop`, `paddingBottom`, + `paddingLeft`, and `paddingRight` to the same thing. + See http://www.w3schools.com/css/css_padding.asp + for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. +See http://www.w3schools.com/cssref/pr_padding-bottom.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of + `paddingLeft` and `paddingRight`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. +See http://www.w3schools.com/cssref/pr_padding-left.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. +See http://www.w3schools.com/cssref/pr_padding-right.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. +See http://www.w3schools.com/cssref/pr_padding-top.asp +for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of + `paddingTop` and `paddingBottom`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but + everything is set to `relative` by default, so `absolute` + positioning is always just relative to the parent. + + If you want to position a child using specific numbers of logical + pixels relative to its parent, set the child to have `absolute` + position. + + If you want to position a child relative to something + that is not its parent, just don't use styles for that. Use the + component tree. + + See https://github.com/facebook/css-layout + for more details on how `position` differs between React Native + and CSS. + +| Type | Required | +| - | - | +| enum('absolute', 'relative') | No | + + + + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of + this component. + + It works similarly to `right` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/right + for more details of how `right` affects layout. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of + this component. + + It works similarly to `top` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/top + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `width` + +`width` sets the width of this component. + + It works similarly to `width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. + Normally, you don't use `zIndex`. Components render according to + their order in the document tree, so later components draw over + earlier ones. `zIndex` may be useful if you have animations or custom + modal interfaces where you don't want this behavior. + + It works like the CSS `z-index` property - components with a larger + `zIndex` will render on top. Think of the z-direction like it's + pointing from the phone into your eyeball. See + https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for + more detail. + +| Type | Required | +| - | - | +| number | No | + + + + + + diff --git a/website/versioned_docs/version-0.29/modal.md b/website/versioned_docs/version-0.29/modal.md new file mode 100644 index 00000000000..21361a61ac6 --- /dev/null +++ b/website/versioned_docs/version-0.29/modal.md @@ -0,0 +1,166 @@ +--- +id: version-0.29-modal +title: Modal +original_id: modal +--- +The Modal component is a simple way to present content above an enclosing view. + +_Note: If you need more control over how to present modals over the rest of your app, +then consider using a top-level Navigator. Go [here](/react-native/navigator-comparison.md) to compare navigation options._ + +```javascript +import React, { Component } from 'react'; +import { Modal, Text, TouchableHighlight, View } from 'react-native'; + +class ModalExample extends Component { + + constructor(props) { + super(props); + this.state = {modalVisible: false}; + } + + setModalVisible(visible) { + this.setState({modalVisible: visible}); + } + + render() { + return ( + + {alert("Modal has been closed.")}} + > + + + Hello World! + + { + this.setModalVisible(!this.state.modalVisible) + }}> + Hide Modal + + + + + + + { + this.setModalVisible(true) + }}> + Show Modal + + + + ); + } +} +``` + +### Props + +- [`animationType`](modal.md#animationtype) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) +- [`animated`](modal.md#animated) + + + + + + +--- + +# Reference + +## Props + +### `animationType` + +The `animationType` prop controls how the modal animates. + +- `slide` slides in from the bottom +- `fade` fades into view +- `none` appears without an animation + +| Type | Required | +| - | - | +| enum('none', 'slide', 'fade') | No | + + + + +--- + +### `onRequestClose` + +The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. + +_On the Android platform, this is a required function._ + +| Type | Required | +| - | - | +| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | + + + + +--- + +### `onShow` + +The `onShow` prop allows passing a function that will be called once the modal has been shown. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `transparent` + +The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `visible` + +The `visible` prop determines whether your modal is visible. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `animated` + +**Deprecated.** Use the `animationType` prop instead. + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.29/navigatorios.md b/website/versioned_docs/version-0.29/navigatorios.md new file mode 100644 index 00000000000..96ecae4fc46 --- /dev/null +++ b/website/versioned_docs/version-0.29/navigatorios.md @@ -0,0 +1,535 @@ +--- +id: version-0.29-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +`NavigatorIOS` is a wrapper around +[`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), +enabling you to implement a navigation stack. It works exactly the same as it +would on a native app using `UINavigationController`, providing the same +animations and behavior from UIKIt. + +As the name implies, it is only available on iOS. Take a look at +[`Navigator`](/navigator.md) for a similar solution for your +cross-platform needs, or check out +[react-native-navigation](https://github.com/wix/react-native-navigation), a +component that aims to provide native navigation on both iOS and Android. + +To set up the navigator, provide the `initialRoute` prop with a route +object. A route object is used to describe each scene that your app +navigates to. `initialRoute` represents the first route in your navigator. + +``` +import React, { Component } from 'react'; +import { NavigatorIOS, Text } from 'react-native'; + +export default class NavigatorIOSApp extends Component { + render() { + return ( + + ); + } +} + +class MyScene extends Component { + static propTypes = { + title: PropTypes.string.isRequired, + navigator: PropTypes.object.isRequired, + } + + constructor(props, context) { + super(props, context); + this._onForward = this._onForward.bind(this); + this._onBack = this._onBack.bind(this); + } + + _onForward() { + this.props.navigator.push({ + title: 'Scene ' + nextIndex, + }); + } + + render() { + return ( + + Current Scene: { this.props.title } + + Tap me to load the next scene + + + ) + } +} +``` + +In this code, the navigator renders the component specified in initialRoute, +which in this case is `MyScene`. This component will receive a `route` prop +and a `navigator` prop representing the navigator. The navigator's navigation +bar will render the title for the current scene, "My Initial Scene". + +You can optionally pass in a `passProps` property to your `initialRoute`. +`NavigatorIOS` passes this in as props to the rendered component: + +``` +initialRoute={{ + component: MyScene, + title: 'My Initial Scene', + passProps: { myProp: 'foo' } +}} +``` + +You can then access the props passed in via `{this.props.myProp}`. + +#### Handling Navigation + +To trigger navigation functionality such as pushing or popping a view, you +have access to a `navigator` object. The object is passed in as a prop to any +component that is rendered by `NavigatorIOS`. You can then call the +relevant methods to perform the navigation action you need: + +``` +class MyView extends Component { + _handleBackPress() { + this.props.navigator.pop(); + } + + _handleNextPress(nextRoute) { + this.props.navigator.push(nextRoute); + } + + render() { + const nextRoute = { + component: MyView, + title: 'Bar That', + passProps: { myProp: 'bar' } + }; + return( + this._handleNextPress(nextRoute)}> + + See you on the other nav {this.props.myProp}! + + + ); + } +} +``` + +You can also trigger navigator functionality from the `NavigatorIOS` +component: + +``` +class NavvyIOS extends Component { + _handleNavigationRequest() { + this.refs.nav.push({ + component: MyView, + title: 'Genius', + passProps: { myProp: 'genius' }, + }); + } + + render() { + return ( + this._handleNavigationRequest(), + }} + style={{flex: 1}} + /> + ); + } +} +``` + +The code above adds a `_handleNavigationRequest` private method that is +invoked from the `NavigatorIOS` component when the right navigation bar item +is pressed. To get access to the navigator functionality, a reference to it +is saved in the `ref` prop and later referenced to push a new scene into the +navigation stack. + +#### Navigation Bar Configuration + +Props passed to `NavigatorIOS` will set the default configuration +for the navigation bar. Props passed as properties to a route object will set +the configuration for that route's navigation bar, overriding any props +passed to the `NavigatorIOS` component. + +``` +_handleNavigationRequest() { + this.refs.nav.push({ + //... + passProps: { myProp: 'genius' }, + barTintColor: '#996699', + }); +} + +render() { + return ( + + ); +} +``` + +In the example above the navigation bar color is changed when the new route +is pushed. + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +NavigatorIOS uses `route` objects to identify child views, their props, +and navigation bar configuration. Navigation operations such as push +operations expect routes to look like this the `initialRoute`. + +| Type | Required | +| - | - | +| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | + + + + +--- + +### `barTintColor` + +The default background color of the navigation bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `interactivePopGestureEnabled` + +Boolean value that indicates whether the interactive pop gesture is +enabled. This is useful for enabling/disabling the back swipe navigation +gesture. + +If this prop is not provided, the default behavior is for the back swipe +gesture to be enabled when the navigation bar is shown and disabled when +the navigation bar is hidden. Once you've provided the +`interactivePopGestureEnabled` prop, you can never restore the default +behavior. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the `backgroundColor` for every scene. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +Boolean value that indicates whether the navigation bar is hidden +by default. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +Boolean value that indicates whether to hide the 1px hairline shadow +by default. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The default color used for the buttons in the navigation bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The default text color of the navigation bar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +Boolean value that indicates whether the navigation bar is +translucent by default + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + +Navigate forward to a new route. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + +Go back N scenes at once. When N=1, behavior matches `pop()`. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| n | number | Yes | The number of scenes to pop. | + + + + +--- + +### `pop()` + +```javascript +pop() +``` + +Pop back to the previous scene. + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +Replace a route in the navigation stack. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that will replace the specified one. | +| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | + + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replace the route for the current scene and immediately +load the view for the new route. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the route/view for the previous scene. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to will replace the previous scene. | + + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + +Go back to the topmost item in the navigation stack. + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + +Go back to the item for a particular route object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + +Replaces the previous route/view and transitions back to it. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that replaces the previous scene. | + + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + +Replaces the top item and pop to it. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that will replace the topmost item. | + + + + diff --git a/website/versioned_docs/version-0.29/pushnotificationios.md b/website/versioned_docs/version-0.29/pushnotificationios.md new file mode 100644 index 00000000000..61245b1b65c --- /dev/null +++ b/website/versioned_docs/version-0.29/pushnotificationios.md @@ -0,0 +1,431 @@ +--- +id: version-0.29-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` +- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` +- Add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error + { + NSLog(@"%@", error); + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`popInitialNotification`](pushnotificationios.md#popinitialnotification) +- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. The default value of this property is 0, which means that no badge is displayed. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app’s icon badge. Setting the number to 0 removes the icon badge. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `getScheduledLocalNotifications()` + +```javascript +static getScheduledLocalNotifications(callback) +``` + + +Gets the local notifications that are currently scheduled. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + +This method returns a promise that will resolve when the user accepts, +rejects, or if the permissions were previously rejected. The promise +resolves to the current state of the permission. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `popInitialNotification()` + +```javascript +static popInitialNotification() +``` + + +DEPRECATED: An initial notification will be available if the app was +cold-launched from a notification. + +The first caller of `popInitialNotification` will get the initial +notification object, or `null`. Subsequent invocations will return null. + + + + +--- + +### `getInitialNotification()` + +```javascript +static getInitialNotification() +``` + + +If the app launch was triggered by a push notification, +it will give the notification object, otherwise it will give `null` + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`popInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.29/refreshcontrol.md b/website/versioned_docs/version-0.29/refreshcontrol.md new file mode 100644 index 00000000000..38f0fb484be --- /dev/null +++ b/website/versioned_docs/version-0.29/refreshcontrol.md @@ -0,0 +1,212 @@ +--- +id: version-0.29-refreshcontrol +title: RefreshControl +original_id: refreshcontrol +--- +This component is used inside a ScrollView or ListView to add pull to refresh +functionality. When the ScrollView is at `scrollY: 0`, swiping down +triggers an `onRefresh` event. + +### Usage example + +``` js +class RefreshableList extends Component { + constructor(props) { + super(props); + this.state = { + refreshing: false, + }; + } + + _onRefresh() { + this.setState({refreshing: true}); + fetchData().then(() => { + this.setState({refreshing: false}); + }); + } + + render() { + return ( + + } + ... + > + ... + + ); + } + ... +} +``` + +__Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true +in the `onRefresh` function otherwise the refresh indicator will stop immediately. + +### Props + +* [View props...](view.md#props) +- [`refreshing`](refreshcontrol.md#refreshing) +- [`onRefresh`](refreshcontrol.md#onrefresh) +- [`colors`](refreshcontrol.md#colors) +- [`enabled`](refreshcontrol.md#enabled) +- [`progressBackgroundColor`](refreshcontrol.md#progressbackgroundcolor) +- [`progressViewOffset`](refreshcontrol.md#progressviewoffset) +- [`size`](refreshcontrol.md#size) +- [`tintColor`](refreshcontrol.md#tintcolor) +- [`title`](refreshcontrol.md#title) +- [`titleColor`](refreshcontrol.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `refreshing` + +Whether the view should be indicating an active refresh. + +| Type | Required | +| - | - | +| bool | Yes | + + + + +--- + +### `onRefresh` + +Called when the view starts refreshing. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `colors` + +The colors (at least one) that will be used to draw the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| array of [color](colors.md) | No | Android | + + + + +--- + +### `enabled` + +Whether the pull to refresh functionality is enabled. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `progressBackgroundColor` + +The background color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `progressViewOffset` + +Progress view top offset + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `size` + +Size of the refresh indicator, see RefreshControl.SIZE. + + +| Type | Required | Platform | +| - | - | - | +| enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) | No | Android | + + + + +--- + +### `tintColor` + +The color of the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `title` + +The title displayed under the refresh indicator. + + +| Type | Required | Platform | +| - | - | - | +| string | No | iOS | + + + + +--- + +### `titleColor` + +Title color. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.29/statusbar.md b/website/versioned_docs/version-0.29/statusbar.md new file mode 100644 index 00000000000..6b8bcd52d9f --- /dev/null +++ b/website/versioned_docs/version-0.29/statusbar.md @@ -0,0 +1,320 @@ +--- +id: version-0.29-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Imperative API + +For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the component for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render. + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + +### Methods + +- [`setHidden`](statusbar.md#sethidden) +- [`setBarStyle`](statusbar.md#setbarstyle) +- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) +- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) +- [`setTranslucent`](statusbar.md#settranslucent) + + +### Type Definitions + +- [`StatusBarStyle`](statusbar.md#statusbarstyle) +- [`StatusBarAnimation`](statusbar.md#statusbaranimation) + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light-content') | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| enum('fade', 'slide') | No | iOS | + + + + + + +## Methods + +### `setHidden()` + +```javascript +static setHidden(hidden: boolean, [animation]: StatusBarAnimation) +``` + +Show or hide the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| hidden | boolean | Yes | The dialog's title. | +| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | + + + + +--- + +### `setBarStyle()` + +```javascript +static setBarStyle(style: StatusBarStyle, [animated]: boolean) +``` + +Set the status bar style + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | +| animated | boolean | No | Animate the style change. | + + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible: boolean) +``` + +Control the visibility of the network activity indicator + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| visible | boolean | Yes | Show the indicator. | + + + + +--- + +### `setBackgroundColor()` + +```javascript +static setBackgroundColor(color: string, [animated]: boolean) +``` + +Set the background color for the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| color | string | Yes | Background color. | +| animated | boolean | No | Animate the style change. | + + + + +--- + +### `setTranslucent()` + +```javascript +static setTranslucent(translucent: boolean) +``` + +Control the translucency of the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| translucent | boolean | Yes | Set as translucent. | + + + + +## Type Definitions + +### StatusBarStyle + +Status bar style + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default status bar style | +| light-content | Dark background style | + + + + +--- + +### StatusBarAnimation + +Status bar animation + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| none | No animation | +| fade | Fade animation | +| slide | Slide animation | + + + + diff --git a/website/versioned_docs/version-0.29/statusbarios.md b/website/versioned_docs/version-0.29/statusbarios.md new file mode 100644 index 00000000000..ea66938e662 --- /dev/null +++ b/website/versioned_docs/version-0.29/statusbarios.md @@ -0,0 +1,15 @@ +--- +id: version-0.29-statusbarios +title: StatusBarIOS +original_id: statusbarios +--- + +Use `StatusBar` for mutating the status bar. + + + + +--- + +# Reference + diff --git a/website/versioned_docs/version-0.29/stylesheet.md b/website/versioned_docs/version-0.29/stylesheet.md new file mode 100644 index 00000000000..5cb92e72a3c --- /dev/null +++ b/website/versioned_docs/version-0.29/stylesheet.md @@ -0,0 +1,99 @@ +--- +id: version-0.29-stylesheet +title: StyleSheet +original_id: stylesheet +--- + +A StyleSheet is an abstraction similar to CSS StyleSheets + +Create a new StyleSheet: + +``` +var styles = StyleSheet.create({ + container: { + borderRadius: 4, + borderWidth: 0.5, + borderColor: '#d6d7da', + }, + title: { + fontSize: 19, + fontWeight: 'bold', + }, + activeTitle: { + color: 'red', + }, +}); +``` + +Use a StyleSheet: + +``` + + + +``` + +Code quality: + + - By moving styles away from the render function, you're making the code + easier to understand. + - Naming the styles is a good way to add meaning to the low level components + in the render function. + +Performance: + + - Making a stylesheet from a style object makes it possible to refer to it +by ID instead of creating a new style object every time. + - It also allows to send the style only once through the bridge. All +subsequent uses are going to refer an id (not implemented yet). + + +### Methods + +- [`create`](stylesheet.md#create) + + +### Properties + +- [`hairlineWidth`](stylesheet.md#hairlinewidth) +- [`absoluteFill`](stylesheet.md#absolutefill) +- [`absoluteFillObject`](stylesheet.md#absolutefillobject) +- [`flatten`](stylesheet.md#flatten) + + + + +--- + +# Reference + +## Methods + +### `create()` + +```javascript +static create(obj) +``` + + +Creates a StyleSheet style reference from the given object. + + + + +## Properties + + + +--- + + + +--- + + + +--- + + + diff --git a/website/versioned_docs/version-0.29/text.md b/website/versioned_docs/version-0.29/text.md new file mode 100644 index 00000000000..3f41f121674 --- /dev/null +++ b/website/versioned_docs/version-0.29/text.md @@ -0,0 +1,300 @@ +--- +id: version-0.29-text +title: Text +original_id: text +--- +A React component for displaying text. + +`Text` supports nesting, styling, and touch handling. + +In the following example, the nested title and body text will inherit the `fontFamily` from +`styles.baseText`, but the title provides its own additional styles. The title and body will +stack on top of each other on account of the literal newlines: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, Text, StyleSheet } from 'react-native'; + +class TextInANest extends Component { + constructor(props) { + super(props); + this.state = { + titleText: "Bird's Nest", + bodyText: 'This is not really a bird nest.' + }; + } + + render() { + return ( + + + {this.state.titleText}

+ + + {this.state.bodyText} + + + ); + } +} + +const styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}); + +// App registration and rendering +AppRegistry.registerComponent('TextInANest', () => TextInANest); +``` + +### Props + +- [`onPress`](text.md#onpress) +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onLongPress`](text.md#onlongpress) +- [`lineBreakMode`](text.md#linebreakmode) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`selectable`](text.md#selectable) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `onPress` + +This function is called on press. + +e.g., `onPress={() => console.log('1st')}`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessible` + +When set to `true`, indicates that the view is an accessibility element. The default value +for a `Text` element is `true`. + +See the +[Accessibility guide](/react-native/accessibility.md#accessible-ios-android) +for more information. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +This prop is commonly used with `lineBreakMode`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + +This function is called on long press. + +e.g., `onLongPress={this.increaseSize}>`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `lineBreakMode` + +Line Break mode. This can be one of the following values: + +- `head` - The line is displayed so that the end fits in the container and the missing text +at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" +- `middle` - The line is displayed so that the beginning and end fit in the container and the +missing text in the middle is indicated by an ellipsis glyph. "ab...yz" +- `tail` - The line is displayed so that the beginning fits in the container and the +missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." +- `clip` - Lines are not drawn past the edge of the text container. + +The default is `tail`. + +`numberOfLines` must be set in conjunction with this prop. + +> `clip` is working only for iOS + +| Type | Required | +| - | - | +| enum('head', 'middle', 'tail', 'clip') | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: number + + - **`fontStyle`**: enum('normal', 'italic') + + - **`fontWeight`**: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: number + + - **`textAlign`**: enum('auto', 'left', 'right', 'center', 'justify') + + Specifies text alignment. The value 'justify' is only supported on iOS and + fallbacks to `left` on Android. + + - **`textDecorationLine`**: enum('none', 'underline', 'line-through', 'underline line-through') + + - **`fontFamily`**: string + + - **`textShadowOffset`**: object: {width: number,height: number} + + - **`textShadowRadius`**: number + + - **`textAlignVertical`**: enum('auto', 'top', 'bottom', 'center') (_Android_) + + - **`letterSpacing`**: number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: enum('solid', 'double', 'dotted', 'dashed') (_iOS_) + + - **`writingDirection`**: enum('auto', 'ltr', 'rtl') (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `selectable` + +Lets the user select text, to use the native copy and paste functionality. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowFontScaling` + +Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The +default is `true`. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When `true`, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.29/textinput.md b/website/versioned_docs/version-0.29/textinput.md new file mode 100644 index 00000000000..0e58277777c --- /dev/null +++ b/website/versioned_docs/version-0.29/textinput.md @@ -0,0 +1,707 @@ +--- +id: version-0.29-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + constructor(props) { + super(props); + this.state = { text: 'Useless Placeholder' }; + } + + render() { + return ( + this.setState({text})} + value={this.state.text} + /> + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + render() { + return ( + + ); + } +} + +class UselessTextInputMultiline extends Component { + constructor(props) { + super(props); + this.state = { + text: 'Useless Multiline Placeholder', + }; + } + + // If you type something in the text box that is a color, the background will change to that + // color. + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'AwesomeProject', + () => UselessTextInputMultiline +); +``` + +`TextInput` has by default a border at the bottom of its view. This border +has its padding set by the background image provided by the system, and it +cannot be changed. Solutions to avoid this is to either not set height +explicitly, case in which the system will take care of displaying the border +in the correct position, or to not display the border by setting +`underlineColorAndroid` to transparent. + +### Props + +* [View props...](view.md#props) +- [`placeholder`](textinput.md#placeholder) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholder` + +The string that will be rendered before text input has been entered. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `autoCapitalize` + +Can tell `TextInput` to automatically capitalize certain characters. + +- `characters`: all characters. +- `words`: first letter of each word. +- `sentences`: first letter of each sentence (*default*). +- `none`: don't auto capitalize anything. + +| Type | Required | +| - | - | +| enum('none', 'sentences', 'words', 'characters') | No | + + + + +--- + +### `autoFocus` + +If `true`, focuses the input on `componentDidMount`. +The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `blurOnSubmit` + +If `true`, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting `blurOnSubmit` +to `true` means that pressing return will blur the field and trigger the +`onSubmitEditing` event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you do not want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `editable` + +If `false`, text is not editable. The default value is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- `default` +- `numeric` +- `email-address` + +| Type | Required | +| - | - | +| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `multiline` + +If `true`, the text input can be multiple lines. +The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if `multiline={true}` is specified. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `autoCorrect` + +If `false`, disables auto-correct. The default value is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +*Cross platform* + +The following values work across platforms: + +- `done` +- `go` +- `next` +- `search` +- `send` + +*Android Only* + +The following values work on Android only: + +- `none` +- `previous` + +*iOS Only* + +The following values work on iOS only: + +- `default` +- `emergency-call` +- `google` +- `join` +- `route` +- `yahoo` + +| Type | Required | +| - | - | +| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') | No | + + + + +--- + +### `secureTextEntry` + +If `true`, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectTextOnFocus` + +If `true`, all text will automatically be selected on focus. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on iOS) color of the text input. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `style` + +[Styles](/react-native/style.md) + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. `TextInput` is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses, this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a `TextInput`. Use it with multiline set to +`true` to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the `TextInput` underline. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view. + + +| Type | Required | Platform | +| - | - | - | +| enum('never', 'while-editing', 'unless-editing', 'always') | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If `true`, clears the text field automatically when editing begins. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If `true`, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is `false`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'light', 'dark') | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before `onChange` callbacks. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `selectionState` + +An instance of `DocumentSelectionState`, this is some state that is responsible for +maintaining selection information for a document. + +Some functionality that can be performed with this instance is: + +- `blur()` +- `focus()` +- `update()` + +> You can reference `DocumentSelectionState` in +> [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) + + + +| Type | Required | Platform | +| - | - | - | +| DocumentSelectionState | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns `true` if the input is currently focused; `false` otherwise. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the `TextInput`. + + + diff --git a/website/versioned_docs/version-0.29/webview.md b/website/versioned_docs/version-0.29/webview.md new file mode 100644 index 00000000000..c13643cd4aa --- /dev/null +++ b/website/versioned_docs/version-0.29/webview.md @@ -0,0 +1,498 @@ +--- +id: version-0.29-webview +title: WebView +original_id: webview +--- +`WebView` renders web content in a native view. + +``` +import React, { Component } from 'react'; +import { WebView } from 'react-native'; + +class MyWeb extends Component { + render() { + return ( + + ); + } +} +``` + +You can use this component to navigate back and forth in the web view's +history and configure various properties for the web content. + +### Props + +* [View props...](view.md#props) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`contentInset`](webview.md#contentinset) +- [`source`](webview.md#source) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`userAgent`](webview.md#useragent) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`stopLoading`](webview.md#stoploading) +- [`getWebViewHandle`](webview.md#getwebviewhandle) + + + + +--- + +# Reference + +## Props + +### `scalesPageToFit` + +Boolean that controls whether the web content is scaled to fit +the view and enables the user to change the scale. The default value +is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether to adjust the content inset for web views that are +placed behind a navigation bar, tab bar, or toolbar. The default value +is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Function that allows custom handling of any web view requests. Return +`true` from the function to continue loading the request and `false` +to stop loading. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Set this to provide JavaScript that will be injected into the web page +when the view loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `mediaPlaybackRequiresUserAction` + +Boolean that determines whether HTML5 audio and video requires the user +to tap them before they start playing. The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onError` + +Function that is invoked when the `WebView` load fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Function that is invoked when the `WebView` has finished loading. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Function that is invoked when the `WebView` load succeeds or fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Function that is invoked when the `WebView` starts loading. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + +Function that is invoked when the `WebView` loading starts or ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `contentInset` + +The amount by which the web view content is inset from the edges of +the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `startInLoadingState` + +Boolean value that forces the `WebView` to show the loading view +on the first load. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +The style to apply to the `WebView`. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use the +string shortcuts `"normal"` and `"fast"` which match the underlying iOS +settings for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively: + + - normal: 0.998 + - fast: 0.99 (the default for iOS web view) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Boolean value to control whether DOM Storage is enabled. Used only in +Android. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Boolean value to enable JavaScript in the `WebView`. Used on Android only +as JavaScript is enabled by default on iOS. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `userAgent` + +Sets the user-agent for the `WebView`. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Boolean that determines whether HTML5 videos play inline or use the +native full-screen controller. The default value is `false`. + +**NOTE** : In order for video to play inline, not only does this +property need to be set to `true`, but the video element in the HTML +document must also include the `webkit-playsinline` attribute. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +Boolean value that determines whether the web view bounces +when it reaches the edge of the content. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `scrollEnabled` + +Boolean value that determines whether scrolling is enabled in the +`WebView`. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + +Go forward one page in the web view's history. + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + +Go back one page in the web view's history. + + + +--- + +### `reload()` + +```javascript +reload() +``` + +Reloads the current page. + + + +--- + +### `stopLoading()` + +```javascript +stopLoading() +``` + +Stop loading the current page. + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + +Returns the native `WebView` node. + + + diff --git a/website/versioned_docs/version-0.30/activityindicator.md b/website/versioned_docs/version-0.30/activityindicator.md new file mode 100644 index 00000000000..893d9784150 --- /dev/null +++ b/website/versioned_docs/version-0.30/activityindicator.md @@ -0,0 +1,84 @@ +--- +id: version-0.30-activityindicator +title: ActivityIndicator +original_id: activityindicator +--- +Displays a circular loading indicator. + +### Props + +* [View props...](view.md#props) +- [`animating`](activityindicator.md#animating) +- [`color`](activityindicator.md#color) +- [`size`](activityindicator.md#size) +- [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) + + + + + + +--- + +# Reference + +## Props + +### `animating` + +Whether to show the indicator (true, the default) or hide it (false). + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `color` + +The foreground color of the spinner (default is gray). + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `size` + +Size of the indicator. Small has a height of 20, large has a height of 36. +Other sizes can be obtained using a scale transform. + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + 'small', + 'large', +]) | No | + + + + +--- + +### `hidesWhenStopped` + +Whether the indicator should hide when not animating (true by default). + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.30/datepickerios.md b/website/versioned_docs/version-0.30/datepickerios.md new file mode 100644 index 00000000000..c29a959bdd5 --- /dev/null +++ b/website/versioned_docs/version-0.30/datepickerios.md @@ -0,0 +1,136 @@ +--- +id: version-0.30-datepickerios +title: DatePickerIOS +original_id: datepickerios +--- +Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is +a controlled component, so you must hook in to the `onDateChange` callback +and update the `date` prop in order for the component to update, otherwise +the user's change will be reverted immediately to reflect `props.date` as the +source of truth. + +### Props + +* [View props...](view.md#props) +- [`date`](datepickerios.md#date) +- [`maximumDate`](datepickerios.md#maximumdate) +- [`minimumDate`](datepickerios.md#minimumdate) +- [`minuteInterval`](datepickerios.md#minuteinterval) +- [`mode`](datepickerios.md#mode) +- [`onDateChange`](datepickerios.md#ondatechange) +- [`timeZoneOffsetInMinutes`](datepickerios.md#timezoneoffsetinminutes) + + + + + + +--- + +# Reference + +## Props + +### `date` + +The currently selected date. + +| Type | Required | +| - | - | +| PropTypes.instanceOf(Date).isRequired | No | + + + + +--- + +### `maximumDate` + +Maximum date. + +Restricts the range of possible date/time values. + +| Type | Required | +| - | - | +| PropTypes.instanceOf(Date) | No | + + + + +--- + +### `minimumDate` + +Minimum date. + +Restricts the range of possible date/time values. + +| Type | Required | +| - | - | +| PropTypes.instanceOf(Date) | No | + + + + +--- + +### `minuteInterval` + +The interval at which minutes can be selected. + +| Type | Required | +| - | - | +| PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]) | No | + + + + +--- + +### `mode` + +The date picker mode. + +| Type | Required | +| - | - | +| PropTypes.oneOf(['date', 'time', 'datetime']) | No | + + + + +--- + +### `onDateChange` + +Date change handler. + +This is called when the user changes the date or time in the UI. +The first and only argument is a Date object representing the new +date and time. + +| Type | Required | +| - | - | +| PropTypes.func.isRequired | No | + + + + +--- + +### `timeZoneOffsetInMinutes` + +Timezone offset in minutes. + +By default, the date picker will use the device's timezone. With this +parameter, it is possible to force a certain timezone offset. For +instance, to show times in Pacific Standard Time, pass -7 * 60. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/drawerlayoutandroid.md b/website/versioned_docs/version-0.30/drawerlayoutandroid.md new file mode 100644 index 00000000000..cae69812987 --- /dev/null +++ b/website/versioned_docs/version-0.30/drawerlayoutandroid.md @@ -0,0 +1,265 @@ +--- +id: version-0.30-drawerlayoutandroid +title: DrawerLayoutAndroid +original_id: drawerlayoutandroid +--- +React component that wraps the platform `DrawerLayout` (Android only). The +Drawer (typically used for navigation) is rendered with `renderNavigationView` +and direct children are the main view (where your content goes). The navigation +view is initially not visible on the screen, but can be pulled in from the +side of the window specified by the `drawerPosition` prop and its width can +be set by the `drawerWidth` prop. + +Example: + +``` +render: function() { + var navigationView = ( + + I'm in the Drawer! + + ); + return ( + navigationView}> + + Hello + World! + + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`onDrawerClose`](drawerlayoutandroid.md#ondrawerclose) +- [`drawerBackgroundColor`](drawerlayoutandroid.md#drawerbackgroundcolor) +- [`drawerPosition`](drawerlayoutandroid.md#drawerposition) +- [`drawerWidth`](drawerlayoutandroid.md#drawerwidth) +- [`keyboardDismissMode`](drawerlayoutandroid.md#keyboarddismissmode) +- [`drawerLockMode`](drawerlayoutandroid.md#drawerlockmode) +- [`onDrawerOpen`](drawerlayoutandroid.md#ondraweropen) +- [`onDrawerSlide`](drawerlayoutandroid.md#ondrawerslide) +- [`onDrawerStateChanged`](drawerlayoutandroid.md#ondrawerstatechanged) +- [`renderNavigationView`](drawerlayoutandroid.md#rendernavigationview) +- [`statusBarBackgroundColor`](drawerlayoutandroid.md#statusbarbackgroundcolor) + + + + +### Methods + +- [`openDrawer`](drawerlayoutandroid.md#opendrawer) +- [`closeDrawer`](drawerlayoutandroid.md#closedrawer) + + + + +--- + +# Reference + +## Props + +### `onDrawerClose` + +Function called whenever the navigation view has been closed. + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `drawerBackgroundColor` + +Specifies the background color of the drawer. The default value is white. +If you want to set the opacity of the drawer, use rgba. Example: + +``` +return ( + + +); +``` + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `drawerPosition` + +Specifies the side of the screen from which the drawer will slide in. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + DrawerConsts.DrawerPosition.Left, + DrawerConsts.DrawerPosition.Right +]) | No | + + + + +--- + +### `drawerWidth` + +Specifies the width of the drawer, more precisely the width of the view that be pulled in +from the edge of the window. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'none', // default + 'on-drag', +]) | No | + + + + +--- + +### `drawerLockMode` + +Specifies the lock mode of the drawer. The drawer can be locked in 3 states: +- unlocked (default), meaning that the drawer will respond (open/close) to touch gestures. +- locked-closed, meaning that the drawer will stay closed and not respond to gestures. +- locked-open, meaning that the drawer will stay opened and not respond to gestures. +The drawer may still be opened and closed programmatically (`openDrawer`/`closeDrawer`). + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'unlocked', + 'locked-closed', + 'locked-open' +]) | No | + + + + +--- + +### `onDrawerOpen` + +Function called whenever the navigation view has been opened. + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `onDrawerSlide` + +Function called whenever there is an interaction with the navigation view. + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `onDrawerStateChanged` + +Function called when the drawer state has changed. The drawer can be in 3 states: +- idle, meaning there is no interaction with the navigation view happening at the time +- dragging, meaning there is currently an interaction with the navigation view +- settling, meaning that there was an interaction with the navigation view, and the +navigation view is now finishing its closing or opening animation + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `renderNavigationView` + +The navigation view that will be rendered to the side of the screen and can be pulled in. + +| Type | Required | +| - | - | +| ReactPropTypes.func.isRequired | No | + + + + +--- + +### `statusBarBackgroundColor` + +Make the drawer take the entire screen and draw the background of the +status bar to allow it to open over the status bar. It will only have an +effect on API 21+. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + +## Methods + +### `openDrawer()` + +```javascript +openDrawer() +``` + +Opens the drawer. + + + +--- + +### `closeDrawer()` + +```javascript +closeDrawer() +``` + +Closes the drawer. + + + diff --git a/website/versioned_docs/version-0.30/image-style-props.md b/website/versioned_docs/version-0.30/image-style-props.md new file mode 100644 index 00000000000..aa0395251c5 --- /dev/null +++ b/website/versioned_docs/version-0.30/image-style-props.md @@ -0,0 +1,229 @@ +--- +id: version-0.30-image-style-props +title: Image Style Props +original_id: image-style-props +--- +### Props + +- [`borderTopRightRadius`](image-style-props.md#bordertoprightradius) +- [`backfaceVisibility`](image-style-props.md#backfacevisibility) +- [`borderBottomLeftRadius`](image-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](image-style-props.md#borderbottomrightradius) +- [`borderColor`](image-style-props.md#bordercolor) +- [`borderRadius`](image-style-props.md#borderradius) +- [`borderTopLeftRadius`](image-style-props.md#bordertopleftradius) +- [`backgroundColor`](image-style-props.md#backgroundcolor) +- [`borderWidth`](image-style-props.md#borderwidth) +- [`opacity`](image-style-props.md#opacity) +- [`overflow`](image-style-props.md#overflow) +- [`resizeMode`](image-style-props.md#resizemode) +- [`tintColor`](image-style-props.md#tintcolor) +- [`overlayColor`](image-style-props.md#overlaycolor) + + + + + + +--- + +# Reference + +## Props + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['visible', 'hidden']) | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['visible', 'hidden']) | No | + + + + +--- + +### `resizeMode` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) | No | + + + + +--- + +### `tintColor` + +Changes the color of all the non-transparent pixels to the tintColor. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `overlayColor` + +When the image has rounded corners, specifying an overlayColor will +cause the remaining space in the corners to be filled with a solid color. +This is useful in cases which are not supported by the Android +implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + +A typical way to use this prop is with images displayed on a solid +background and setting the `overlayColor` to the same color +as the background. + +For details of how this works under the hood, see +http://frescolib.org/rounded-corners-and-circles.md + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.string | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.30/image.md b/website/versioned_docs/version-0.30/image.md new file mode 100644 index 00000000000..80b4b507435 --- /dev/null +++ b/website/versioned_docs/version-0.30/image.md @@ -0,0 +1,452 @@ +--- +id: version-0.30-image +title: Image +original_id: 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. + +This example shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat']) | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: ReactPropTypes.number + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: ReactPropTypes.string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + // TODO: Tooling to support documenting these directly and having them display in the docs. + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, +]) | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.30/keyboardavoidingview.md b/website/versioned_docs/version-0.30/keyboardavoidingview.md new file mode 100644 index 00000000000..37ae9578db1 --- /dev/null +++ b/website/versioned_docs/version-0.30/keyboardavoidingview.md @@ -0,0 +1,86 @@ +--- +id: version-0.30-keyboardavoidingview +title: KeyboardAvoidingView +original_id: keyboardavoidingview +--- +### Props + +* [View props...](view.md#props) +- [`behavior`](keyboardavoidingview.md#behavior) +- [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) + + + + +### Methods + +- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) +- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) +- [`onLayout`](keyboardavoidingview.md#onlayout) + + + + +--- + +# Reference + +## Props + +### `behavior` + + + +| Type | Required | +| - | - | +| PropTypes.oneOf(['height', 'position', 'padding']) | No | + + + + +--- + +### `keyboardVerticalOffset` + +This is the distance between the top of the user screen and the react native view, +may be non-zero in some use cases. + +| Type | Required | +| - | - | +| PropTypes.number.isRequired | No | + + + + + + +## Methods + +### `relativeKeyboardHeight()` + +```javascript +relativeKeyboardHeight(keyboardFrame: object): +``` + + + +--- + +### `onKeyboardChange()` + +```javascript +onKeyboardChange(event: object) +``` + + + +--- + +### `onLayout()` + +```javascript +onLayout(event: object) +``` + + + diff --git a/website/versioned_docs/version-0.30/layout-props.md b/website/versioned_docs/version-0.30/layout-props.md new file mode 100644 index 00000000000..2b4b63cd5ad --- /dev/null +++ b/website/versioned_docs/version-0.30/layout-props.md @@ -0,0 +1,723 @@ +--- +id: version-0.30-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginRight`](layout-props.md#marginright) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`marginLeft`](layout-props.md#marginleft) +- [`alignSelf`](layout-props.md#alignself) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) +- [`zIndex`](layout-props.md#zindex) + + + + + + +--- + +# Reference + +## Props + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. + See http://www.w3schools.com/cssref/pr_margin-right.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. + For example, if children are flowing vertically, `alignItems` + controls how they align horizontally. + It works like `align-items` in CSS, except the default value + is `stretch` instead of `flex-start`. See + https://css-tricks.com/almanac/properties/a/align-items/ + for more detail. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-bottom_width.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-bottom_width.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-right_width.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-top_width.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. +See http://www.w3schools.com/cssref/pr_border-width.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of + this component. + + It works similarly to `bottom` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. + `flex` is a number rather than a string, and it works + according to the `css-layout` library + at https://github.com/facebook/css-layout . + + When `flex` is a positive number, it makes the component flexible + and it will be sized proportional to its flex value. So a + component with `flex` set to 2 will take twice the space as a + component with `flex` set to 1. + + When `flex` is 0, the component is sized according to `width` + and `height` and it is inflexible. + + When `flex` is -1, the component is normally sized according + `width` and `height`. However, if there's not enough space, + the component will shrink to its `minWidth` and `minHeight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. + `row` goes left to right, `column` goes top to bottom, and you may + be able to guess what the other two do. It works like `flex-direction` + in CSS, except the default is `column`. See + https://css-tricks.com/almanac/properties/f/flex-direction/ + for more detail. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'row', + 'row-reverse', + 'column', + 'column-reverse' +]) | No | + + + + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they + hit the end of a flex container. + It works like `flex-wrap` in CSS. See + https://css-tricks.com/almanac/properties/f/flex-wrap/ + for more detail. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'wrap', + 'nowrap' +]) | No | + + + + +--- + +### `height` + +`height` sets the height of this component. + + It works similarly to `height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. + For example, if children are flowing vertically, `justifyContent` + controls how they align vertically. + It works like `justify-content` in CSS. See + https://css-tricks.com/almanac/properties/j/justify-content/ + for more detail. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'space-between', + 'space-around' +]) | No | + + + + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of + this component. + + It works similarly to `left` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/left + for more details of how `left` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of + `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. + See http://www.w3schools.com/cssref/pr_margin-bottom.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting + both `marginLeft` and `marginRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. + See http://www.w3schools.com/cssref/pr_margin-left.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, + overriding the `alignItems` of the parent. It works like `align-self` + in CSS. See + https://css-tricks.com/almanac/properties/a/align-self/ + for more detail. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'auto', + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. + See http://www.w3schools.com/cssref/pr_margin-top.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both + `marginTop` and `marginBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + + It works similarly to `max-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_max-height.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + + It works similarly to `max-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_max-width.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + + It works similarly to `min-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_min-height.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + + It works similarly to `min-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See http://www.w3schools.com/cssref/pr_dim_min-width.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `padding` + +`padding` works like `padding` in CSS. + It's like setting each of `paddingTop`, `paddingBottom`, + `paddingLeft`, and `paddingRight` to the same thing. + See http://www.w3schools.com/css/css_padding.asp + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. +See http://www.w3schools.com/cssref/pr_padding-bottom.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of + `paddingLeft` and `paddingRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. +See http://www.w3schools.com/cssref/pr_padding-left.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. +See http://www.w3schools.com/cssref/pr_padding-right.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. +See http://www.w3schools.com/cssref/pr_padding-top.asp +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of + `paddingTop` and `paddingBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but + everything is set to `relative` by default, so `absolute` + positioning is always just relative to the parent. + + If you want to position a child using specific numbers of logical + pixels relative to its parent, set the child to have `absolute` + position. + + If you want to position a child relative to something + that is not its parent, just don't use styles for that. Use the + component tree. + + See https://github.com/facebook/css-layout + for more details on how `position` differs between React Native + and CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'absolute', + 'relative' +]) | No | + + + + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of + this component. + + It works similarly to `right` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/right + for more details of how `right` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of + this component. + + It works similarly to `top` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/top + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `width` + +`width` sets the width of this component. + + It works similarly to `width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. + Normally, you don't use `zIndex`. Components render according to + their order in the document tree, so later components draw over + earlier ones. `zIndex` may be useful if you have animations or custom + modal interfaces where you don't want this behavior. + + It works like the CSS `z-index` property - components with a larger + `zIndex` will render on top. Think of the z-direction like it's + pointing from the phone into your eyeball. See + https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for + more detail. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/modal.md b/website/versioned_docs/version-0.30/modal.md new file mode 100644 index 00000000000..572c08cbfc2 --- /dev/null +++ b/website/versioned_docs/version-0.30/modal.md @@ -0,0 +1,166 @@ +--- +id: version-0.30-modal +title: Modal +original_id: modal +--- +The Modal component is a simple way to present content above an enclosing view. + +_Note: If you need more control over how to present modals over the rest of your app, +then consider using a top-level Navigator. Go [here](/react-native/navigator-comparison.md) to compare navigation options._ + +```javascript +import React, { Component } from 'react'; +import { Modal, Text, TouchableHighlight, View } from 'react-native'; + +class ModalExample extends Component { + + constructor(props) { + super(props); + this.state = {modalVisible: false}; + } + + setModalVisible(visible) { + this.setState({modalVisible: visible}); + } + + render() { + return ( + + {alert("Modal has been closed.")}} + > + + + Hello World! + + { + this.setModalVisible(!this.state.modalVisible) + }}> + Hide Modal + + + + + + + { + this.setModalVisible(true) + }}> + Show Modal + + + + ); + } +} +``` + +### Props + +- [`animationType`](modal.md#animationtype) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) +- [`animated`](modal.md#animated) + + + + + + +--- + +# Reference + +## Props + +### `animationType` + +The `animationType` prop controls how the modal animates. + +- `slide` slides in from the bottom +- `fade` fades into view +- `none` appears without an animation + +| Type | Required | +| - | - | +| PropTypes.oneOf(['none', 'slide', 'fade']) | No | + + + + +--- + +### `onRequestClose` + +The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. + +_On the Android platform, this is a required function._ + +| Type | Required | +| - | - | +| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | + + + + +--- + +### `onShow` + +The `onShow` prop allows passing a function that will be called once the modal has been shown. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `transparent` + +The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `visible` + +The `visible` prop determines whether your modal is visible. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `animated` + +**Deprecated.** Use the `animationType` prop instead. + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/progressbarandroid.md b/website/versioned_docs/version-0.30/progressbarandroid.md new file mode 100644 index 00000000000..a66ad0e8f29 --- /dev/null +++ b/website/versioned_docs/version-0.30/progressbarandroid.md @@ -0,0 +1,121 @@ +--- +id: version-0.30-progressbarandroid +title: ProgressBarAndroid +original_id: progressbarandroid +--- +React component that wraps the Android-only `ProgressBar`. This component is used to indicate +that the app is loading or there is some activity in the app. + +Example: + +``` +render: function() { + var progressBar = + + + ; + + return ( + + ); +}, +``` + +### Props + +* [View props...](view.md#props) +- [`color`](progressbarandroid.md#color) +- [`indeterminate`](progressbarandroid.md#indeterminate) +- [`progress`](progressbarandroid.md#progress) +- [`styleAttr`](progressbarandroid.md#styleattr) +- [`testID`](progressbarandroid.md#testid) + + + + + + +--- + +# Reference + +## Props + +### `color` + +Color of the progress bar. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `indeterminate` + +If the progress bar will show indeterminate progress. Note that this +can only be false if styleAttr is Horizontal. + +| Type | Required | +| - | - | +| indeterminateType | No | + + + + +--- + +### `progress` + +The progress value (between 0 and 1). + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `styleAttr` + +Style of the ProgressBar. One of: + +- Horizontal +- Normal (default) +- Small +- Large +- Inverse +- SmallInverse +- LargeInverse + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(STYLE_ATTRIBUTES) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/progressviewios.md b/website/versioned_docs/version-0.30/progressviewios.md new file mode 100644 index 00000000000..38e160714f6 --- /dev/null +++ b/website/versioned_docs/version-0.30/progressviewios.md @@ -0,0 +1,106 @@ +--- +id: version-0.30-progressviewios +title: ProgressViewIOS +original_id: progressviewios +--- +Use `ProgressViewIOS` to render a UIProgressView on iOS. + +### Props + +* [View props...](view.md#props) +- [`progress`](progressviewios.md#progress) +- [`progressImage`](progressviewios.md#progressimage) +- [`progressTintColor`](progressviewios.md#progresstintcolor) +- [`progressViewStyle`](progressviewios.md#progressviewstyle) +- [`trackImage`](progressviewios.md#trackimage) +- [`trackTintColor`](progressviewios.md#tracktintcolor) + + + + + + +--- + +# Reference + +## Props + +### `progress` + +The progress value (between 0 and 1). + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `progressImage` + +A stretchable image to display as the progress bar. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `progressTintColor` + +The tint color of the progress bar itself. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `progressViewStyle` + +The progress bar style. + +| Type | Required | +| - | - | +| PropTypes.oneOf(['default', 'bar']) | No | + + + + +--- + +### `trackImage` + +A stretchable image to display behind the progress bar. + +| Type | Required | +| - | - | +| Image.propTypes.source | No | + + + + +--- + +### `trackTintColor` + +The tint color of the progress bar track. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/scrollview.md b/website/versioned_docs/version-0.30/scrollview.md new file mode 100644 index 00000000000..8d1cc41665b --- /dev/null +++ b/website/versioned_docs/version-0.30/scrollview.md @@ -0,0 +1,759 @@ +--- +id: version-0.30-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`bounces`](scrollview.md#bounces) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`scrollPerfTag`](scrollview.md#scrollperftag) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`horizontal`](scrollview.md#horizontal) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + const styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pagingEnabled` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderBottomWidth`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: ReactPropTypes.number + + - **`borderRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: ReactPropTypes.number + + - **`borderStyle`**: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`borderTopWidth`**: ReactPropTypes.number + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`elevation`**: ReactPropTypes.number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `scrollPerfTag` + +Tag used to log scroll performance on this scroll view. Will force +momentum events to be turned on (see sendMomentumEvents). This doesn't do +anything out of the box and you need to implement a custom native +FpsListener for it to be useful. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.30/segmentedcontrolios.md b/website/versioned_docs/version-0.30/segmentedcontrolios.md new file mode 100644 index 00000000000..957da3ec02a --- /dev/null +++ b/website/versioned_docs/version-0.30/segmentedcontrolios.md @@ -0,0 +1,141 @@ +--- +id: version-0.30-segmentedcontrolios +title: SegmentedControlIOS +original_id: segmentedcontrolios +--- +Use `SegmentedControlIOS` to render a UISegmentedControl iOS. + +#### Programmatically changing selected index + +The selected index can be changed on the fly by assigning the +selectIndex prop to a state variable, then changing that variable. +Note that the state variable would need to be updated as the user +selects a value and changes the index, as shown in the example below. + +```` + { + this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); + }} +/> +```` + +### Props + +* [View props...](view.md#props) +- [`enabled`](segmentedcontrolios.md#enabled) +- [`momentary`](segmentedcontrolios.md#momentary) +- [`onChange`](segmentedcontrolios.md#onchange) +- [`onValueChange`](segmentedcontrolios.md#onvaluechange) +- [`selectedIndex`](segmentedcontrolios.md#selectedindex) +- [`tintColor`](segmentedcontrolios.md#tintcolor) +- [`values`](segmentedcontrolios.md#values) + + + + + + +--- + +# Reference + +## Props + +### `enabled` + +If false the user won't be able to interact with the control. +Default value is true. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `momentary` + +If true, then selecting a segment won't persist visually. +The `onValueChange` callback will still work as expected. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onChange` + +Callback that is called when the user taps a segment; +passes the event as an argument + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onValueChange` + +Callback that is called when the user taps a segment; +passes the segment's value as an argument + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `selectedIndex` + +The index in `props.values` of the segment to be (pre)selected. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `tintColor` + +Accent color of the control. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `values` + +The labels for the control's segment buttons, in order. + +| Type | Required | +| - | - | +| PropTypes.arrayOf(PropTypes.string) | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/shadow-props.md b/website/versioned_docs/version-0.30/shadow-props.md new file mode 100644 index 00000000000..d44d2f56250 --- /dev/null +++ b/website/versioned_docs/version-0.30/shadow-props.md @@ -0,0 +1,81 @@ +--- +id: version-0.30-shadow-props +title: Shadow Props +original_id: shadow-props +--- +### Props + +- [`shadowColor`](shadow-props.md#shadowcolor) +- [`shadowOffset`](shadow-props.md#shadowoffset) +- [`shadowOpacity`](shadow-props.md#shadowopacity) +- [`shadowRadius`](shadow-props.md#shadowradius) + + + + + + +--- + +# Reference + +## Props + +### `shadowColor` + +Sets the drop shadow color + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `shadowOffset` + +Sets the drop shadow offset + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) | No | iOS | + + + + +--- + +### `shadowOpacity` + +Sets the drop shadow opacity (multiplied by the color's alpha component) + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | iOS | + + + + +--- + +### `shadowRadius` + +Sets the drop shadow blur radius + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.30/slider.md b/website/versioned_docs/version-0.30/slider.md new file mode 100644 index 00000000000..86c7dde051e --- /dev/null +++ b/website/versioned_docs/version-0.30/slider.md @@ -0,0 +1,253 @@ +--- +id: version-0.30-slider +title: Slider +original_id: slider +--- +A component used to select a single value from a range of values. + +### Props + +* [View props...](view.md#props) +- [`testID`](slider.md#testid) +- [`disabled`](slider.md#disabled) +- [`minimumValue`](slider.md#minimumvalue) +- [`onSlidingComplete`](slider.md#onslidingcomplete) +- [`onValueChange`](slider.md#onvaluechange) +- [`step`](slider.md#step) +- [`style`](slider.md#style) +- [`maximumValue`](slider.md#maximumvalue) +- [`value`](slider.md#value) +- [`maximumTrackImage`](slider.md#maximumtrackimage) +- [`maximumTrackTintColor`](slider.md#maximumtracktintcolor) +- [`minimumTrackImage`](slider.md#minimumtrackimage) +- [`minimumTrackTintColor`](slider.md#minimumtracktintcolor) +- [`thumbImage`](slider.md#thumbimage) +- [`trackImage`](slider.md#trackimage) + + + + + + +--- + +# Reference + +## Props + +### `testID` + +Used to locate this view in UI automation tests. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `disabled` + +If true the user won't be able to move the slider. +Default value is false. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `minimumValue` + +Initial minimum value of the slider. Default value is 0. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `onSlidingComplete` + +Callback called when the user finishes changing the value (e.g. when +the slider is released). + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onValueChange` + +Callback continuously called while the user is dragging the slider. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `step` + +Step value of the slider. The value should be +between 0 and (maximumValue - minimumValue). +Default value is 0. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `style` + +Used to style and layout the `Slider`. See `StyleSheet.js` and +`ViewStylePropTypes.js` for more info. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `maximumValue` + +Initial maximum value of the slider. Default value is 1. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `value` + +Initial value of the slider. The value should be between minimumValue +and maximumValue, which default to 0 and 1 respectively. +Default value is 0. + +*This is not a controlled component*, you don't need to update the +value during dragging. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `maximumTrackImage` + +Assigns a maximum track image. Only static images are supported. The +leftmost pixel of the image will be stretched to fill the track. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + +--- + +### `maximumTrackTintColor` + +The color used for the track to the right of the button. Overrides the +default blue gradient image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `minimumTrackImage` + +Assigns a minimum track image. Only static images are supported. The +rightmost pixel of the image will be stretched to fill the track. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + +--- + +### `minimumTrackTintColor` + +The color used for the track to the left of the button. Overrides the +default blue gradient image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `thumbImage` + +Sets an image for the thumb. Only static images are supported. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + +--- + +### `trackImage` + +Assigns a single image for the track. Only static images are supported. +The center pixel of the image will be stretched to fill the track. + + +| Type | Required | Platform | +| - | - | - | +| Image.propTypes.source | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.30/text-style-props.md b/website/versioned_docs/version-0.30/text-style-props.md new file mode 100644 index 00000000000..5df1dc27001 --- /dev/null +++ b/website/versioned_docs/version-0.30/text-style-props.md @@ -0,0 +1,261 @@ +--- +id: version-0.30-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`textAlignVertical`](text-style-props.md#textalignvertical) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['normal', 'italic']) | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS and +fallbacks to `left` on Android. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) | No | + + + + +--- + +### `textDecorationLine` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + +--- + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `textAlignVertical` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) | No | Android | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.30/text.md b/website/versioned_docs/version-0.30/text.md new file mode 100644 index 00000000000..c3ffd501fc8 --- /dev/null +++ b/website/versioned_docs/version-0.30/text.md @@ -0,0 +1,315 @@ +--- +id: version-0.30-text +title: Text +original_id: text +--- +A React component for displaying text. + +`Text` supports nesting, styling, and touch handling. + +In the following example, the nested title and body text will inherit the `fontFamily` from +`styles.baseText`, but the title provides its own additional styles. The title and body will +stack on top of each other on account of the literal newlines: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, Text, StyleSheet } from 'react-native'; + +class TextInANest extends Component { + constructor(props) { + super(props); + this.state = { + titleText: "Bird's Nest", + bodyText: 'This is not really a bird nest.' + }; + } + + render() { + return ( + + + {this.state.titleText}

+ + + {this.state.bodyText} + + + ); + } +} + +const styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}); + +// App registration and rendering +AppRegistry.registerComponent('TextInANest', () => TextInANest); +``` + +### Props + +- [`onPress`](text.md#onpress) +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onLongPress`](text.md#onlongpress) +- [`lineBreakMode`](text.md#linebreakmode) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`selectable`](text.md#selectable) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `onPress` + +This function is called on press. + +e.g., `onPress={() => console.log('1st')}`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessible` + +When set to `true`, indicates that the view is an accessibility element. The default value +for a `Text` element is `true`. + +See the +[Accessibility guide](/react-native/accessibility.md#accessible-ios-android) +for more information. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +This prop is commonly used with `lineBreakMode`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + +This function is called on long press. + +e.g., `onLongPress={this.increaseSize}>`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `lineBreakMode` + +Line Break mode. This can be one of the following values: + +- `head` - The line is displayed so that the end fits in the container and the missing text +at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" +- `middle` - The line is displayed so that the beginning and end fit in the container and the +missing text in the middle is indicated by an ellipsis glyph. "ab...yz" +- `tail` - The line is displayed so that the beginning fits in the container and the +missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." +- `clip` - Lines are not drawn past the edge of the text container. + +The default is `tail`. + +`numberOfLines` must be set in conjunction with this prop. + +> `clip` is working only for iOS + +| Type | Required | +| - | - | +| enum('head', 'middle', 'tail', 'clip') | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: ReactPropTypes.number + + - **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) + + - **`fontWeight`**: ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: ReactPropTypes.number + + - **`textAlign`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) + + Specifies text alignment. The value 'justify' is only supported on iOS and + fallbacks to `left` on Android. + + - **`textDecorationLine`**: ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) + + - **`fontFamily`**: ReactPropTypes.string + + - **`textShadowOffset`**: ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) + + - **`textShadowRadius`**: ReactPropTypes.number + + - **`textAlignVertical`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) (_Android_) + + - **`letterSpacing`**: ReactPropTypes.number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) (_iOS_) + + - **`writingDirection`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `selectable` + +Lets the user select text, to use the native copy and paste functionality. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowFontScaling` + +Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The +default is `true`. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When `true`, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.30/textinput.md b/website/versioned_docs/version-0.30/textinput.md new file mode 100644 index 00000000000..aba55817a09 --- /dev/null +++ b/website/versioned_docs/version-0.30/textinput.md @@ -0,0 +1,784 @@ +--- +id: version-0.30-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + constructor(props) { + super(props); + this.state = { text: 'Useless Placeholder' }; + } + + render() { + return ( + this.setState({text})} + value={this.state.text} + /> + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + render() { + return ( + + ); + } +} + +class UselessTextInputMultiline extends Component { + constructor(props) { + super(props); + this.state = { + text: 'Useless Multiline Placeholder', + }; + } + + // If you type something in the text box that is a color, the background will change to that + // color. + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'AwesomeProject', + () => UselessTextInputMultiline +); +``` + +`TextInput` has by default a border at the bottom of its view. This border +has its padding set by the background image provided by the system, and it +cannot be changed. Solutions to avoid this is to either not set height +explicitly, case in which the system will take care of displaying the border +in the correct position, or to not display the border by setting +`underlineColorAndroid` to transparent. + +### Props + +* [View props...](view.md#props) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`inlineImageLeft`](textinput.md#inlineimageleft) +- [`inlineImagePadding`](textinput.md#inlineimagepadding) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `autoCapitalize` + +Can tell `TextInput` to automatically capitalize certain characters. + +- `characters`: all characters. +- `words`: first letter of each word. +- `sentences`: first letter of each sentence (*default*). +- `none`: don't auto capitalize anything. + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + 'none', + 'sentences', + 'words', + 'characters', +]) | No | + + + + +--- + +### `autoFocus` + +If `true`, focuses the input on `componentDidMount`. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `blurOnSubmit` + +If `true`, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting `blurOnSubmit` +to `true` means that pressing return will blur the field and trigger the +`onSubmitEditing` event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you do not want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `editable` + +If `false`, text is not editable. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- `default` +- `numeric` +- `email-address` +- `phone-pad` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'default', + 'email-address', + 'numeric', + 'phone-pad', + // iOS-only + 'ascii-capable', + 'numbers-and-punctuation', + 'url', + 'number-pad', + 'name-phone-pad', + 'decimal-pad', + 'twitter', + 'web-search', +]) | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `multiline` + +If `true`, the text input can be multiple lines. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if `multiline={true}` is specified. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `autoCorrect` + +If `false`, disables auto-correct. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +*Cross platform* + +The following values work across platforms: + +- `done` +- `go` +- `next` +- `search` +- `send` + +*Android Only* + +The following values work on Android only: + +- `none` +- `previous` + +*iOS Only* + +The following values work on iOS only: + +- `default` +- `emergency-call` +- `google` +- `join` +- `route` +- `yahoo` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'done', + 'go', + 'next', + 'search', + 'send', + // Android-only + 'none', + 'previous', + // iOS-only + 'default', + 'emergency-call', + 'google', + 'join', + 'route', + 'yahoo', +]) | No | + + + + +--- + +### `secureTextEntry` + +If `true`, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectTextOnFocus` + +If `true`, all text will automatically be selected on focus. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on iOS) color of the text input. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + +[Styles](/react-native/style.md) + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. `TextInput` is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses, this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `inlineImageLeft` + +If defined, the provided image resource will be rendered on the left. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `inlineImagePadding` + +Padding between the inline image, if any, and the text input itself. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a `TextInput`. Use it with multiline set to +`true` to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the `TextInput` underline. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'never', + 'while-editing', + 'unless-editing', + 'always', +]) | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If `true`, clears the text field automatically when editing begins. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If `true`, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is `false`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'default', + 'light', + 'dark', +]) | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before `onChange` callbacks. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `selectionState` + +An instance of `DocumentSelectionState`, this is some state that is responsible for +maintaining selection information for a document. + +Some functionality that can be performed with this instance is: + +- `blur()` +- `focus()` +- `update()` + +> You can reference `DocumentSelectionState` in +> [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns `true` if the input is currently focused; `false` otherwise. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the `TextInput`. + + + diff --git a/website/versioned_docs/version-0.30/toolbarandroid.md b/website/versioned_docs/version-0.30/toolbarandroid.md new file mode 100644 index 00000000000..13cf4cb4c3d --- /dev/null +++ b/website/versioned_docs/version-0.30/toolbarandroid.md @@ -0,0 +1,283 @@ +--- +id: version-0.30-toolbarandroid +title: ToolbarAndroid +original_id: toolbarandroid +--- +React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo, +navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and +subtitle are expanded so the logo and navigation icons are displayed on the left, title and +subtitle in the middle and the actions on the right. + +If the toolbar has an only child, it will be displayed between the title and actions. + +Although the Toolbar supports remote images for the logo, navigation and action icons, this +should only be used in DEV mode where `require('./some_icon.png')` translates into a packager +URL. In release mode you should always use a drawable resource for these icons. Using +`require('./some_icon.png')` will do this automatically for you, so as long as you don't +explicitly use e.g. `{uri: 'http://...'}`, you will be good. + +Example: + +``` +render: function() { + return ( + + ) +}, +onActionSelected: function(position) { + if (position === 0) { // index of 'Settings' + showSettings(); + } +} +``` + +[0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html + +### Props + +* [View props...](view.md#props) +- [`overflowIcon`](toolbarandroid.md#overflowicon) +- [`actions`](toolbarandroid.md#actions) +- [`contentInsetStart`](toolbarandroid.md#contentinsetstart) +- [`logo`](toolbarandroid.md#logo) +- [`navIcon`](toolbarandroid.md#navicon) +- [`onActionSelected`](toolbarandroid.md#onactionselected) +- [`onIconClicked`](toolbarandroid.md#oniconclicked) +- [`contentInsetEnd`](toolbarandroid.md#contentinsetend) +- [`rtl`](toolbarandroid.md#rtl) +- [`subtitle`](toolbarandroid.md#subtitle) +- [`subtitleColor`](toolbarandroid.md#subtitlecolor) +- [`testID`](toolbarandroid.md#testid) +- [`title`](toolbarandroid.md#title) +- [`titleColor`](toolbarandroid.md#titlecolor) + + + + + + +--- + +# Reference + +## Props + +### `overflowIcon` + +Sets the overflow icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `actions` + +Sets possible actions on the toolbar as part of the action menu. These are displayed as icons +or text on the right side of the widget. If they don't fit they are placed in an 'overflow' +menu. + +This property takes an array of objects, where each object has the following keys: + +* `title`: **required**, the title of this action +* `icon`: the icon for this action, e.g. `require('./some_icon.png')` +* `show`: when to show this action as an icon or hide it in the overflow menu: `always`, +`ifRoom` or `never` +* `showWithText`: boolean, whether to show text alongside the icon or not + +| Type | Required | +| - | - | +| ReactPropTypes.arrayOf(ReactPropTypes.shape({ + title: ReactPropTypes.string.isRequired, + icon: optionalImageSource, + show: ReactPropTypes.oneOf(['always', 'ifRoom', 'never']), + showWithText: ReactPropTypes.bool +})) | No | + + + + +--- + +### `contentInsetStart` + +Sets the content inset for the toolbar starting edge. + +The content inset affects the valid area for Toolbar content other than +the navigation button and menu. Insets define the minimum margin for +these components and can be used to effectively align Toolbar content +along well-known gridlines. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `logo` + +Sets the toolbar logo. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `navIcon` + +Sets the navigation icon. + +| Type | Required | +| - | - | +| optionalImageSource | No | + + + + +--- + +### `onActionSelected` + +Callback that is called when an action is selected. The only argument that is passed to the +callback is the position of the action in the actions array. + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `onIconClicked` + +Callback called when the icon is selected. + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `contentInsetEnd` + +Sets the content inset for the toolbar ending edge. + +The content inset affects the valid area for Toolbar content other than +the navigation button and menu. Insets define the minimum margin for +these components and can be used to effectively align Toolbar content +along well-known gridlines. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `rtl` + +Used to set the toolbar direction to RTL. +In addition to this property you need to add + + android:supportsRtl="true" + +to your application AndroidManifest.xml and then call +`setLayoutDirection(LayoutDirection.RTL)` in your MainActivity +`onCreate` method. + +| Type | Required | +| - | - | +| ReactPropTypes.bool | No | + + + + +--- + +### `subtitle` + +Sets the toolbar subtitle. + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + +--- + +### `subtitleColor` + +Sets the toolbar subtitle color. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + +--- + +### `title` + +Sets the toolbar title. + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + +--- + +### `titleColor` + +Sets the toolbar title color. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/transforms.md b/website/versioned_docs/version-0.30/transforms.md new file mode 100644 index 00000000000..242d8824c25 --- /dev/null +++ b/website/versioned_docs/version-0.30/transforms.md @@ -0,0 +1,146 @@ +--- +id: version-0.30-transforms +title: Transforms +original_id: transforms +--- +### Props + +- [`decomposedMatrix`](transforms.md#decomposedmatrix) +- [`rotation`](transforms.md#rotation) +- [`scaleX`](transforms.md#scalex) +- [`scaleY`](transforms.md#scaley) +- [`transform`](transforms.md#transform) +- [`transformMatrix`](transforms.md#transformmatrix) +- [`translateX`](transforms.md#translatex) +- [`translateY`](transforms.md#translatey) + + + + + + +--- + +# Reference + +## Props + +### `decomposedMatrix` + + + +| Type | Required | +| - | - | +| DecomposedMatrixPropType | No | + + + + +--- + +### `rotation` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `scaleX` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `scaleY` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `transform` + + + +| Type | Required | +| - | - | +| ReactPropTypes.arrayOf( + ReactPropTypes.oneOfType([ + ReactPropTypes.shape({perspective: ReactPropTypes.number}), + ReactPropTypes.shape({rotate: ReactPropTypes.string}), + ReactPropTypes.shape({rotateX: ReactPropTypes.string}), + ReactPropTypes.shape({rotateY: ReactPropTypes.string}), + ReactPropTypes.shape({rotateZ: ReactPropTypes.string}), + ReactPropTypes.shape({scale: ReactPropTypes.number}), + ReactPropTypes.shape({scaleX: ReactPropTypes.number}), + ReactPropTypes.shape({scaleY: ReactPropTypes.number}), + ReactPropTypes.shape({translateX: ReactPropTypes.number}), + ReactPropTypes.shape({translateY: ReactPropTypes.number}), + ReactPropTypes.shape({skewX: ReactPropTypes.string}), + ReactPropTypes.shape({skewY: ReactPropTypes.string}) + ]) +) | No | + + + + +--- + +### `transformMatrix` + + + +| Type | Required | +| - | - | +| TransformMatrixPropType | No | + + + + +--- + +### `translateX` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + +--- + +### `translateY` + + + +| Type | Required | +| - | - | +| deprecatedPropType(ReactPropTypes.number, 'Use the transform prop instead.') | No | + + + + + + diff --git a/website/versioned_docs/version-0.30/view-style-props.md b/website/versioned_docs/version-0.30/view-style-props.md new file mode 100644 index 00000000000..e169854df76 --- /dev/null +++ b/website/versioned_docs/version-0.30/view-style-props.md @@ -0,0 +1,317 @@ +--- +id: version-0.30-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`borderStyle`](view-style-props.md#borderstyle) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`overflow`](view-style-props.md#overflow) +- [`elevation`](view-style-props.md#elevation) + + + + + + +--- + +# Reference + +## Props + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['visible', 'hidden']) | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderStyle` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `overflow` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['visible', 'hidden']) | No | + + + + +--- + +### `elevation` + +(Android-only) Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +This adds a drop shadow to the item and affects z-order for overlapping views. +Only supported on Android 5.0+, has no effect on earlier versions. + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.30/viewpagerandroid.md b/website/versioned_docs/version-0.30/viewpagerandroid.md new file mode 100644 index 00000000000..91ae9e44144 --- /dev/null +++ b/website/versioned_docs/version-0.30/viewpagerandroid.md @@ -0,0 +1,234 @@ +--- +id: version-0.30-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) +- [`pageMargin`](viewpagerandroid.md#pagemargin) +- [`scrollEnabled`](viewpagerandroid.md#scrollenabled) + + + + +### Methods + +- [`setPage`](viewpagerandroid.md#setpage) +- [`setPageWithoutAnimation`](viewpagerandroid.md#setpagewithoutanimation) + + +### Type Definitions + +- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'none', // default + 'on-drag', +]) | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `onPageScrollStateChanged` + +Function called when the page scrolling state has changed. +The page scrolling state can be in 3 states: +- idle, meaning there is no interaction with the page scroller happening at the time +- dragging, meaning there is currently an interaction with the page scroller +- settling, meaning that there was an interaction with the page scroller, and the + page scroller is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| ReactPropTypes.func | No | + + + + +--- + +### `pageMargin` + +Blank space to show between pages. This is only visible while scrolling, pages are still +edge-to-edge. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| ReactPropTypes.bool | No | + + + + + + +## Methods + +### `setPage()` + +```javascript +setPage(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will be animated. + + + +--- + +### `setPageWithoutAnimation()` + +```javascript +setPageWithoutAnimation(selectedPage: number) +``` + +A helper function to scroll to a specific page in the ViewPager. +The transition between pages will *not* be animated. + + + +## Type Definitions + +### ViewPagerScrollState + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| idle | | +| dragging | | +| settling | | + + + + diff --git a/website/versioned_docs/version-0.31/asyncstorage.md b/website/versioned_docs/version-0.31/asyncstorage.md new file mode 100644 index 00000000000..bae55f36f05 --- /dev/null +++ b/website/versioned_docs/version-0.31/asyncstorage.md @@ -0,0 +1,416 @@ +--- +id: version-0.31-asyncstorage +title: AsyncStorage +original_id: asyncstorage +--- +`AsyncStorage` is a simple, unencrypted, asynchronous, persistent, key-value storage +system that is global to the app. It should be used instead of LocalStorage. + +It is recommended that you use an abstraction on top of `AsyncStorage` +instead of `AsyncStorage` directly for anything more than light usage since +it operates globally. + +On iOS, `AsyncStorage` is backed by native code that stores small values in a +serialized dictionary and larger values in separate files. On Android, +`AsyncStorage` will use either [RocksDB](http://rocksdb.org/) or SQLite +based on what is available. + +The `AsyncStorage` JavaScript code is a simple facade that provides a clear +JavaScript API, real `Error` objects, and simple non-multi functions. Each +method in the API returns a `Promise` object. + +Persisting data: +``` +try { + await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.'); +} catch (error) { + // Error saving data +} +``` + +Fetching data: +``` +try { + const value = await AsyncStorage.getItem('@MySuperStore:key'); + if (value !== null){ + // We have data!! + console.log(value); + } +} catch (error) { + // Error retrieving data +} +``` + +### Methods + +- [`getItem`](asyncstorage.md#getitem) +- [`setItem`](asyncstorage.md#setitem) +- [`removeItem`](asyncstorage.md#removeitem) +- [`mergeItem`](asyncstorage.md#mergeitem) +- [`clear`](asyncstorage.md#clear) +- [`getAllKeys`](asyncstorage.md#getallkeys) +- [`flushGetRequests`](asyncstorage.md#flushgetrequests) +- [`multiGet`](asyncstorage.md#multiget) +- [`multiSet`](asyncstorage.md#multiset) +- [`multiRemove`](asyncstorage.md#multiremove) +- [`multiMerge`](asyncstorage.md#multimerge) + + + + +--- + +# Reference + +## Methods + +### `getItem()` + +```javascript +static getItem(key: string, [callback]: ?(error: ?Error, result: ?string) => void) +``` + +Fetches an item for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to fetch. | +| callback | ?(error: ?Error, result: ?string) => void | No | Function that will be called with a result if found or any error. | + + + + +--- + +### `setItem()` + +```javascript +static setItem(key: string, value: string, [callback]: ?(error: ?Error) => void) +``` + +Sets the value for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to set. | +| value | string | Yes | Value to set for the `key`. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `removeItem()` + +```javascript +static removeItem(key: string, [callback]: ?(error: ?Error) => void) +``` + +Removes an item for a `key` and invokes a callback upon completion. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to remove. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `mergeItem()` + +```javascript +static mergeItem(key: string, value: string, [callback]: ?(error: ?Error) => void) +``` + +Merges an existing `key` value with an input value, assuming both values +are stringified JSON. Returns a `Promise` object. + +**NOTE:** This is not supported by all native implementations. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| key | string | Yes | Key of the item to modify. | +| value | string | Yes | New value to merge for the `key`. | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +Example: + +```javascript + +let UID123_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; +// You only need to define what will be added or updated +let UID123_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10} +}; + +AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => { + AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => { + AsyncStorage.getItem('UID123', (err, result) => { + console.log(result); + }); + }); +}); + +// Console log result: +// => {'name':'Chris','age':31,'traits': +// {'shoe_size':10,'hair':'brown','eyes':'blue'}} +``` + + + +--- + +### `clear()` + +```javascript +static clear([callback]: ?(error: ?Error) => void) +``` + +Erases *all* `AsyncStorage` for all clients, libraries, etc. You probably +don't want to call this; use `removeItem` or `multiRemove` to clear only +your app's keys. Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | ?(error: ?Error) => void | No | Function that will be called with any error. | + + + + +--- + +### `getAllKeys()` + +```javascript +static getAllKeys([callback]: ?(error: ?Error, keys: ?Array) => void) +``` + +Gets *all* keys known to your app; for all callers, libraries, etc. +Returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| callback | ?(error: ?Error, keys: ?Array) => void | No | Function that will be called the keys found and any error. | + + + + +--- + +### `flushGetRequests()` + +```javascript +static flushGetRequests(): [object Object] +``` + +Flushes any pending requests using a single batch call to get the data. + + + +--- + +### `multiGet()` + +```javascript +static multiGet(keys: Array, [callback]: ?(errors: ?Array, result: ?Array>) => void) +``` + +This allows you to batch the fetching of items given an array of `key` +inputs. Your callback will be invoked with an array of corresponding +key-value pairs found: + +``` +multiGet(['k1', 'k2'], cb) -> cb([['k1', 'val1'], ['k2', 'val2']]) +``` + +The method returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keys | Array | Yes | Array of key for the items to get. | +| callback | ?(errors: ?Array, result: ?Array>) => void | No | Function that will be called with a key-value array of the results, plus an array of any key-specific errors found. | + + + + +Example: + +```javascript +AsyncStorage.getAllKeys((err, keys) => { + AsyncStorage.multiGet(keys, (err, stores) => { + stores.map((result, i, store) => { + // get at each store's key/value so you can work with it + let key = store[i][0]; + let value = store[i][1]; + }); + }); +}); +``` + + + +--- + +### `multiSet()` + +```javascript +static multiSet(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +``` + +Use this as a batch operation for storing multiple key-value pairs. When +the operation completes you'll get a single callback with any errors: + +``` +multiSet([['k1', 'val1'], ['k2', 'val2']], cb); +``` + +The method returns a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keyValuePairs | Array> | Yes | Array of key-value array for the items to set. | +| callback | ?(errors: ?Array) => void | No | Function that will be called with an array of any key-specific errors found. | + + + + +--- + +### `multiRemove()` + +```javascript +static multiRemove(keys: Array, [callback]: ?(errors: ?Array) => void) +``` + +Call this to batch the deletion of all keys in the `keys` array. Returns +a `Promise` object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keys | Array | Yes | Array of key for the items to delete. | +| callback | ?(errors: ?Array) => void | No | Function that will be called an array of any key-specific errors found. | + + + + +Example: + +```javascript + +let keys = ['k1', 'k2']; +AsyncStorage.multiRemove(keys, (err) => { + // keys k1 & k2 removed, if they existed + // do most stuff after removal (if you want) +}); +``` + + + +--- + +### `multiMerge()` + +```javascript +static multiMerge(keyValuePairs: Array>, [callback]: ?(errors: ?Array) => void) +``` + +Batch operation to merge in existing and new values for a given set of +keys. This assumes that the values are stringified JSON. Returns a +`Promise` object. + +**NOTE**: This is not supported by all native implementations. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| keyValuePairs | Array> | Yes | Array of key-value array for the items to merge. | +| callback | ?(errors: ?Array) => void | No | Function that will be called with an array of any key-specific errors found. | + + + + +Example: + +```javascript + +// first user, initial values +let UID234_object = { + name: 'Chris', + age: 30, + traits: {hair: 'brown', eyes: 'brown'}, +}; + +// first user, delta values +let UID234_delta = { + age: 31, + traits: {eyes: 'blue', shoe_size: 10}, +}; + +// second user, initial values +let UID345_object = { + name: 'Marge', + age: 25, + traits: {hair: 'blonde', eyes: 'blue'}, +}; + +// second user, delta values +let UID345_delta = { + age: 26, + traits: {eyes: 'green', shoe_size: 6}, +}; + +let multi_set_pairs = [['UID234', JSON.stringify(UID234_object)], ['UID345', JSON.stringify(UID345_object)]] +let multi_merge_pairs = [['UID234', JSON.stringify(UID234_delta)], ['UID345', JSON.stringify(UID345_delta)]] + +AsyncStorage.multiSet(multi_set_pairs, (err) => { + AsyncStorage.multiMerge(multi_merge_pairs, (err) => { + AsyncStorage.multiGet(['UID234','UID345'], (err, stores) => { + stores.map( (result, i, store) => { + let key = store[i][0]; + let val = store[i][1]; + console.log(key, val); + }); + }); + }); +}); + +// Console log results: +// => UID234 {"name":"Chris","age":31,"traits":{"shoe_size":10,"hair":"brown","eyes":"blue"}} +// => UID345 {"name":"Marge","age":26,"traits":{"shoe_size":6,"hair":"blonde","eyes":"green"}} +``` + + + diff --git a/website/versioned_docs/version-0.31/image.md b/website/versioned_docs/version-0.31/image.md new file mode 100644 index 00000000000..0e3fba4e1a6 --- /dev/null +++ b/website/versioned_docs/version-0.31/image.md @@ -0,0 +1,452 @@ +--- +id: version-0.31-image +title: Image +original_id: 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. + +This exmaples shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: ReactPropTypes.number + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: ReactPropTypes.string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + // TODO: Tooling to support documenting these directly and having them display in the docs. + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, +]) | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.31/panresponder.md b/website/versioned_docs/version-0.31/panresponder.md new file mode 100644 index 00000000000..6e122011506 --- /dev/null +++ b/website/versioned_docs/version-0.31/panresponder.md @@ -0,0 +1,157 @@ +--- +id: version-0.31-panresponder +title: PanResponder +original_id: panresponder +--- + +`PanResponder` reconciles several touches into a single gesture. It makes +single-touch gestures resilient to extra touches, and can be used to +recognize simple multi-touch gestures. + +By default, `PanResponder` holds an `InteractionManager handle to block +long-running JS events from interrupting active gestures. + +It provides a predictable wrapper of the responder handlers provided by the +[gesture responder system](gesture-responder-system.md). +For each handler, it provides a new `gestureState` object alongside the +native event object: + +``` +onPanResponderMove: (event, gestureState) => {} +``` + +A native event is a synthetic touch event with the following form: + + - `nativeEvent` + + `changedTouches` - Array of all touch events that have changed since the last event + + `identifier` - The ID of the touch + + `locationX` - The X position of the touch, relative to the element + + `locationY` - The Y position of the touch, relative to the element + + `pageX` - The X position of the touch, relative to the root element + + `pageY` - The Y position of the touch, relative to the root element + + `target` - The node id of the element receiving the touch event + + `timestamp` - A time identifier for the touch, useful for velocity calculation + + `touches` - Array of all current touches on the screen + +A `gestureState` object has the following: + + - `stateID` - ID of the gestureState- persisted as long as there at least + one touch on screen + - `moveX` - the latest screen coordinates of the recently-moved touch + - `moveY` - the latest screen coordinates of the recently-moved touch + - `x0` - the screen coordinates of the responder grant + - `y0` - the screen coordinates of the responder grant + - `dx` - accumulated distance of the gesture since the touch started + - `dy` - accumulated distance of the gesture since the touch started + - `vx` - current velocity of the gesture + - `vy` - current velocity of the gesture + - `numberActiveTouches` - Number of touches currently on screen + +### Basic Usage + +``` + componentWillMount: function() { + this._panResponder = PanResponder.create({ + // Ask to be the responder: + onStartShouldSetPanResponder: (evt, gestureState) => true, + onStartShouldSetPanResponderCapture: (evt, gestureState) => true, + onMoveShouldSetPanResponder: (evt, gestureState) => true, + onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, + + onPanResponderGrant: (evt, gestureState) => { + // The guesture has started. Show visual feedback so the user knows + // what is happening! + + // gestureState.{x,y}0 will be set to zero now + }, + onPanResponderMove: (evt, gestureState) => { + // The most recent move distance is gestureState.move{X,Y} + + // The accumulated gesture distance since becoming responder is + // gestureState.d{x,y} + }, + onPanResponderTerminationRequest: (evt, gestureState) => true, + onPanResponderRelease: (evt, gestureState) => { + // The user has released all touches while this view is the + // responder. This typically means a gesture has succeeded + }, + onPanResponderTerminate: (evt, gestureState) => { + // Another component has become the responder, so this gesture + // should be cancelled + }, + onShouldBlockNativeResponder: (evt, gestureState) => { + // Returns whether this component should block native components from becoming the JS + // responder. Returns true by default. Is currently only supported on android. + return true; + }, + }); + }, + + render: function() { + return ( + + ); + }, + +``` + +### Working Example + +To see it in action, try the +[PanResponder example in UIExplorer](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/PanResponderExample.js) + + +### Methods + +- [`create`](panresponder.md#create) + + + + +--- + +# Reference + +## Methods + +### `create()` + +```javascript +static create(config) +``` + + +@param {object} config Enhanced versions of all of the responder callbacks +that provide not only the typical `ResponderSyntheticEvent`, but also the +`PanResponder` gesture state. Simply replace the word `Responder` with +`PanResponder` in each of the typical `onResponder*` callbacks. For +example, the `config` object would look like: + + - `onMoveShouldSetPanResponder: (e, gestureState) => {...}` + - `onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}` + - `onStartShouldSetPanResponder: (e, gestureState) => {...}` + - `onStartShouldSetPanResponderCapture: (e, gestureState) => {...}` + - `onPanResponderReject: (e, gestureState) => {...}` + - `onPanResponderGrant: (e, gestureState) => {...}` + - `onPanResponderStart: (e, gestureState) => {...}` + - `onPanResponderEnd: (e, gestureState) => {...}` + - `onPanResponderRelease: (e, gestureState) => {...}` + - `onPanResponderMove: (e, gestureState) => {...}` + - `onPanResponderTerminate: (e, gestureState) => {...}` + - `onPanResponderTerminationRequest: (e, gestureState) => {...}` + - `onShouldBlockNativeResponder: (e, gestureState) => {...}` + + In general, for events that have capture equivalents, we update the + gestureState once in the capture phase and can use it in the bubble phase + as well. + + Be careful with onStartShould* callbacks. They only reflect updated + `gestureState` for start/end events that bubble/capture to the Node. + Once the node is the responder, you can rely on every start/end event + being processed by the gesture and `gestureState` being updated + accordingly. (numberActiveTouches) may not be totally accurate unless you + are the responder. + + + + diff --git a/website/versioned_docs/version-0.31/pushnotificationios.md b/website/versioned_docs/version-0.31/pushnotificationios.md new file mode 100644 index 00000000000..25c4e0e9327 --- /dev/null +++ b/website/versioned_docs/version-0.31/pushnotificationios.md @@ -0,0 +1,412 @@ +--- +id: version-0.31-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` +- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` +- Add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error + { + NSLog(@"%@", error); + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `getScheduledLocalNotifications()` + +```javascript +static getScheduledLocalNotifications(callback) +``` + + +Gets the local notifications that are currently scheduled. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + +This method returns a promise that will resolve when the user accepts, +rejects, or if the permissions were previously rejected. The promise +resolves to the current state of the permission. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `getInitialNotification()` + +```javascript +static getInitialNotification() +``` + + +If the app launch was triggered by a push notification, +it will give the notification object, otherwise it will give `null` + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`getInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.31/text.md b/website/versioned_docs/version-0.31/text.md new file mode 100644 index 00000000000..c736b548c84 --- /dev/null +++ b/website/versioned_docs/version-0.31/text.md @@ -0,0 +1,315 @@ +--- +id: version-0.31-text +title: Text +original_id: text +--- +A React component for displaying text. + +`Text` supports nesting, styling, and touch handling. + +In the following example, the nested title and body text will inherit the `fontFamily` from +`styles.baseText`, but the title provides its own additional styles. The title and body will +stack on top of each other on account of the literal newlines: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, Text, StyleSheet } from 'react-native'; + +class TextInANest extends Component { + constructor(props) { + super(props); + this.state = { + titleText: "Bird's Nest", + bodyText: 'This is not really a bird nest.' + }; + } + + render() { + return ( + + + {this.state.titleText}

+ + + {this.state.bodyText} + + + ); + } +} + +const styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}); + +// App registration and rendering +AppRegistry.registerComponent('TextInANest', () => TextInANest); +``` + +### Props + +- [`onPress`](text.md#onpress) +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onLongPress`](text.md#onlongpress) +- [`ellipsizeMode`](text.md#ellipsizemode) +- [`style`](text.md#style) +- [`testID`](text.md#testid) +- [`selectable`](text.md#selectable) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `onPress` + +This function is called on press. + +e.g., `onPress={() => console.log('1st')}`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `accessible` + +When set to `true`, indicates that the view is an accessibility element. The default value +for a `Text` element is `true`. + +See the +[Accessibility guide](/react-native/accessibility.md#accessible-ios-android) +for more information. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +This prop is commonly used with `ellipsizeMode`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + +This function is called on long press. + +e.g., `onLongPress={this.increaseSize}>`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `ellipsizeMode` + +This can be one of the following values: + +- `head` - The line is displayed so that the end fits in the container and the missing text +at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" +- `middle` - The line is displayed so that the beginning and end fit in the container and the +missing text in the middle is indicated by an ellipsis glyph. "ab...yz" +- `tail` - The line is displayed so that the beginning fits in the container and the +missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." +- `clip` - Lines are not drawn past the edge of the text container. + +The default is `tail`. + +`numberOfLines` must be set in conjunction with this prop. + +> `clip` is working only for iOS + +| Type | Required | +| - | - | +| enum('head', 'middle', 'tail', 'clip') | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: ReactPropTypes.number + + - **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) + + - **`fontWeight`**: ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: ReactPropTypes.number + + - **`textAlign`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) + + Specifies text alignment. The value 'justify' is only supported on iOS and + fallbacks to `left` on Android. + + - **`textDecorationLine`**: ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) + + - **`fontFamily`**: ReactPropTypes.string + + - **`textShadowOffset`**: ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) + + - **`textShadowRadius`**: ReactPropTypes.number + + - **`textAlignVertical`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) (_Android_) + + - **`letterSpacing`**: ReactPropTypes.number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) (_iOS_) + + - **`writingDirection`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) (_iOS_) + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `selectable` + +Lets the user select text, to use the native copy and paste functionality. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `allowFontScaling` + +Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The +default is `true`. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When `true`, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.31/textinput.md b/website/versioned_docs/version-0.31/textinput.md new file mode 100644 index 00000000000..f77948a53e8 --- /dev/null +++ b/website/versioned_docs/version-0.31/textinput.md @@ -0,0 +1,802 @@ +--- +id: version-0.31-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + constructor(props) { + super(props); + this.state = { text: 'Useless Placeholder' }; + } + + render() { + return ( + this.setState({text})} + value={this.state.text} + /> + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + render() { + return ( + + ); + } +} + +class UselessTextInputMultiline extends Component { + constructor(props) { + super(props); + this.state = { + text: 'Useless Multiline Placeholder', + }; + } + + // If you type something in the text box that is a color, the background will change to that + // color. + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'AwesomeProject', + () => UselessTextInputMultiline +); +``` + +`TextInput` has by default a border at the bottom of its view. This border +has its padding set by the background image provided by the system, and it +cannot be changed. Solutions to avoid this is to either not set height +explicitly, case in which the system will take care of displaying the border +in the correct position, or to not display the border by setting +`underlineColorAndroid` to transparent. + +### Props + +* [View props...](view.md#props) +- [`placeholder`](textinput.md#placeholder) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onContentSizeChange`](textinput.md#oncontentsizechange) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`autoCorrect`](textinput.md#autocorrect) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`inlineImageLeft`](textinput.md#inlineimageleft) +- [`inlineImagePadding`](textinput.md#inlineimagepadding) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholder` + +The string that will be rendered before text input has been entered. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `autoCapitalize` + +Can tell `TextInput` to automatically capitalize certain characters. + +- `characters`: all characters. +- `words`: first letter of each word. +- `sentences`: first letter of each sentence (*default*). +- `none`: don't auto capitalize anything. + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + 'none', + 'sentences', + 'words', + 'characters', +]) | No | + + + + +--- + +### `autoFocus` + +If `true`, focuses the input on `componentDidMount`. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `blurOnSubmit` + +If `true`, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting `blurOnSubmit` +to `true` means that pressing return will blur the field and trigger the +`onSubmitEditing` event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you do not want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `editable` + +If `false`, text is not editable. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- `default` +- `numeric` +- `email-address` +- `phone-pad` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'default', + 'email-address', + 'numeric', + 'phone-pad', + // iOS-only + 'ascii-capable', + 'numbers-and-punctuation', + 'url', + 'number-pad', + 'name-phone-pad', + 'decimal-pad', + 'twitter', + 'web-search', +]) | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `multiline` + +If `true`, the text input can be multiple lines. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onContentSizeChange` + +Callback that is called when the text input's content size changes. +This will be called with +`{ nativeEvent: { contentSize: { width, height } } }`. + +Only called for multiline text inputs. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if `multiline={true}` is specified. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `autoCorrect` + +If `false`, disables auto-correct. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `placeholderTextColor` + +The text color of the placeholder string. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +*Cross platform* + +The following values work across platforms: + +- `done` +- `go` +- `next` +- `search` +- `send` + +*Android Only* + +The following values work on Android only: + +- `none` +- `previous` + +*iOS Only* + +The following values work on iOS only: + +- `default` +- `emergency-call` +- `google` +- `join` +- `route` +- `yahoo` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'done', + 'go', + 'next', + 'search', + 'send', + // Android-only + 'none', + 'previous', + // iOS-only + 'default', + 'emergency-call', + 'google', + 'join', + 'route', + 'yahoo', +]) | No | + + + + +--- + +### `secureTextEntry` + +If `true`, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectTextOnFocus` + +If `true`, all text will automatically be selected on focus. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on iOS) color of the text input. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + +[Styles](/react-native/style.md) + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. `TextInput` is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses, this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `inlineImageLeft` + +If defined, the provided image resource will be rendered on the left. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `inlineImagePadding` + +Padding between the inline image, if any, and the text input itself. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a `TextInput`. Use it with multiline set to +`true` to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the `TextInput` underline. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'never', + 'while-editing', + 'unless-editing', + 'always', +]) | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If `true`, clears the text field automatically when editing begins. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If `true`, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is `false`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'default', + 'light', + 'dark', +]) | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before `onChange` callbacks. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `selectionState` + +An instance of `DocumentSelectionState`, this is some state that is responsible for +maintaining selection information for a document. + +Some functionality that can be performed with this instance is: + +- `blur()` +- `focus()` +- `update()` + +> You can reference `DocumentSelectionState` in +> [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns `true` if the input is currently focused; `false` otherwise. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the `TextInput`. + + + diff --git a/website/versioned_docs/version-0.31/toastandroid.md b/website/versioned_docs/version-0.31/toastandroid.md new file mode 100644 index 00000000000..ddd62616478 --- /dev/null +++ b/website/versioned_docs/version-0.31/toastandroid.md @@ -0,0 +1,77 @@ +--- +id: version-0.31-toastandroid +title: ToastAndroid +original_id: toastandroid +--- + +This exposes the native ToastAndroid module as a JS module. This has a function 'show' +which takes the following parameters: + +1. String message: A string with the text to toast +2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG + +There is also a function `showWithGravity` to specify the layout gravity. May be +ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER + + +### Methods + +- [`show`](toastandroid.md#show) +- [`showWithGravity`](toastandroid.md#showwithgravity) + + +### Properties + +- [`SHORT`](toastandroid.md#short) +- [`LONG`](toastandroid.md#long) +- [`TOP`](toastandroid.md#top) +- [`BOTTOM`](toastandroid.md#bottom) +- [`CENTER`](toastandroid.md#center) + + + + +--- + +# Reference + +## Methods + +### `show()` + +```javascript +static show(message, duration) +``` + + + +--- + +### `showWithGravity()` + +```javascript +static showWithGravity(message, duration, gravity) +``` + + + +## Properties + + + +--- + + + +--- + + + +--- + + + +--- + + + diff --git a/website/versioned_docs/version-0.31/touchablehighlight.md b/website/versioned_docs/version-0.31/touchablehighlight.md new file mode 100644 index 00000000000..785f92b5950 --- /dev/null +++ b/website/versioned_docs/version-0.31/touchablehighlight.md @@ -0,0 +1,117 @@ +--- +id: version-0.31-touchablehighlight +title: TouchableHighlight +original_id: touchablehighlight +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, which allows +the underlay color to show through, darkening or tinting the view. The +underlay comes from adding a view to the view hierarchy, which can sometimes +cause unwanted visual artifacts if not used correctly, for example if the +backgroundColor of the wrapped view isn't explicitly set to an opaque color. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` +> **NOTE**: TouchableHighlight supports only one child +> +> If you wish to have several child components, wrap them in a View. + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchablehighlight.md#activeopacity) +- [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) +- [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) +- [`style`](touchablehighlight.md#style) +- [`underlayColor`](touchablehighlight.md#underlaycolor) + + + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onHideUnderlay` + +Called immediately after the underlay is hidden + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShowUnderlay` + +Called immediately after the underlay is shown + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `underlayColor` + +The color of the underlay that will show through when the touch is +active. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.31/touchableopacity.md b/website/versioned_docs/version-0.31/touchableopacity.md new file mode 100644 index 00000000000..f211595ca84 --- /dev/null +++ b/website/versioned_docs/version-0.31/touchableopacity.md @@ -0,0 +1,72 @@ +--- +id: version-0.31-touchableopacity +title: TouchableOpacity +original_id: touchableopacity +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, dimming it. +This is done without actually changing the view hierarchy, and in general is +easy to add to an app without weird side-effects. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchableopacity.md#activeopacity) + + + + +### Methods + +- [`setOpacityTo`](touchableopacity.md#setopacityto) + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. Defaults to 0.2. + +| Type | Required | +| - | - | +| number | No | + + + + + + +## Methods + +### `setOpacityTo()` + +```javascript +setOpacityTo(value: number) +``` + +Animate the touchable to a new opacity. + + + diff --git a/website/versioned_docs/version-0.31/webview.md b/website/versioned_docs/version-0.31/webview.md new file mode 100644 index 00000000000..0c91dc3fad6 --- /dev/null +++ b/website/versioned_docs/version-0.31/webview.md @@ -0,0 +1,526 @@ +--- +id: version-0.31-webview +title: WebView +original_id: webview +--- +`WebView` renders web content in a native view. + +``` +import React, { Component } from 'react'; +import { WebView } from 'react-native'; + +class MyWeb extends Component { + render() { + return ( + + ); + } +} +``` + +You can use this component to navigate back and forth in the web view's +history and configure various properties for the web content. + +### Props + +* [View props...](view.md#props) +- [`source`](webview.md#source) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`contentInset`](webview.md#contentinset) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`userAgent`](webview.md#useragent) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`dataDetectorTypes`](webview.md#datadetectortypes) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + +### Methods + +- [`goForward`](webview.md#goforward) +- [`goBack`](webview.md#goback) +- [`reload`](webview.md#reload) +- [`stopLoading`](webview.md#stoploading) +- [`getWebViewHandle`](webview.md#getwebviewhandle) + + + + +--- + +# Reference + +## Props + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether to adjust the content inset for web views that are +placed behind a navigation bar, tab bar, or toolbar. The default value +is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Function that allows custom handling of any web view requests. Return +`true` from the function to continue loading the request and `false` +to stop loading. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Set this to provide JavaScript that will be injected into the web page +when the view loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `mediaPlaybackRequiresUserAction` + +Boolean that determines whether HTML5 audio and video requires the user +to tap them before they start playing. The default value is `false`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onError` + +Function that is invoked when the `WebView` load fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Function that is invoked when the `WebView` has finished loading. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Function that is invoked when the `WebView` load succeeds or fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Function that is invoked when the `WebView` starts loading. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + +Function that is invoked when the `WebView` loading starts or ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `scalesPageToFit` + +Boolean that controls whether the web content is scaled to fit +the view and enables the user to change the scale. The default value +is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + +The amount by which the web view content is inset from the edges of +the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `startInLoadingState` + +Boolean value that forces the `WebView` to show the loading view +on the first load. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +The style to apply to the `WebView`. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use the +string shortcuts `"normal"` and `"fast"` which match the underlying iOS +settings for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively: + + - normal: 0.998 + - fast: 0.99 (the default for iOS web view) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Boolean value to control whether DOM Storage is enabled. Used only in +Android. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Boolean value to enable JavaScript in the `WebView`. Used on Android only +as JavaScript is enabled by default on iOS. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `userAgent` + +Sets the user-agent for the `WebView`. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Boolean that determines whether HTML5 videos play inline or use the +native full-screen controller. The default value is `false`. + +**NOTE** : In order for video to play inline, not only does this +property need to be set to `true`, but the video element in the HTML +document must also include the `webkit-playsinline` attribute. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +Boolean value that determines whether the web view bounces +when it reaches the edge of the content. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `dataDetectorTypes` + +Determines the types of data converted to clickable URLs in the web view’s content. +By default only phone numbers are detected. + +You can provide one type or an array of many types. + +Possible values for `dataDetectorTypes` are: + +- `'phoneNumber'` +- `'link'` +- `'address'` +- `'calendarEvent'` +- `'none'` +- `'all'` + + + +| Type | Required | Platform | +| - | - | - | +| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS | + + + + +--- + +### `scrollEnabled` + +Boolean value that determines whether scrolling is enabled in the +`WebView`. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + +## Methods + +### `goForward()` + +```javascript +goForward() +``` + +Go forward one page in the web view's history. + + + +--- + +### `goBack()` + +```javascript +goBack() +``` + +Go back one page in the web view's history. + + + +--- + +### `reload()` + +```javascript +reload() +``` + +Reloads the current page. + + + +--- + +### `stopLoading()` + +```javascript +stopLoading() +``` + +Stop loading the current page. + + + +--- + +### `getWebViewHandle()` + +```javascript +getWebViewHandle(): +``` + +Returns the native `WebView` node. + + + diff --git a/website/versioned_docs/version-0.32/activityindicator.md b/website/versioned_docs/version-0.32/activityindicator.md new file mode 100644 index 00000000000..4458ad8bbc5 --- /dev/null +++ b/website/versioned_docs/version-0.32/activityindicator.md @@ -0,0 +1,84 @@ +--- +id: version-0.32-activityindicator +title: ActivityIndicator +original_id: activityindicator +--- +Displays a circular loading indicator. + +### Props + +* [View props...](view.md#props) +- [`animating`](activityindicator.md#animating) +- [`color`](activityindicator.md#color) +- [`size`](activityindicator.md#size) +- [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) + + + + + + +--- + +# Reference + +## Props + +### `animating` + +Whether to show the indicator (true, the default) or hide it (false). + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `color` + +The foreground color of the spinner (default is gray). + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `size` + +Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android. + +| Type | Required | +| - | - | +| PropTypes.oneOfType([ + PropTypes.oneOf([ 'small', 'large' ]), + PropTypes.number, +]) | No | + + + + +--- + +### `hidesWhenStopped` + +Whether the indicator should hide when not animating (true by default). + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.32/image.md b/website/versioned_docs/version-0.32/image.md new file mode 100644 index 00000000000..0a35e568199 --- /dev/null +++ b/website/versioned_docs/version-0.32/image.md @@ -0,0 +1,487 @@ +--- +id: version-0.32-image +title: Image +original_id: 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. + +This example shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### GIF and WebP support on Android + +By default, GIF and WebP are not supported on Android. + +You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. + +``` +dependencies { + // If your app supports Android versions before Ice Cream Sandwich (API level 14) + compile 'com.facebook.fresco:animated-base-support:0.11.0' + + // For animated GIF support + compile 'com.facebook.fresco:animated-gif:0.11.0' + + // For WebP support, including animated WebP + compile 'com.facebook.fresco:animated-webp:0.11.0' + compile 'com.facebook.fresco:webpsupport:0.11.0' + + // For WebP support, without animations + compile 'com.facebook.fresco:webpsupport:0.11.0' +} +``` + +Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : +``` +-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { + public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); +} +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +This prop can also contain several remote URLs, specified together with +their width and height and potentially with scale/other URI arguments. +The native side will then choose the best `uri` to display based on the +measured size of the image container. + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: ReactPropTypes.number + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: ReactPropTypes.string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + // TODO: Tooling to support documenting these directly and having them display in the docs. + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, +]) | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.32/keyboardavoidingview.md b/website/versioned_docs/version-0.32/keyboardavoidingview.md new file mode 100644 index 00000000000..9bdbbe6db48 --- /dev/null +++ b/website/versioned_docs/version-0.32/keyboardavoidingview.md @@ -0,0 +1,100 @@ +--- +id: version-0.32-keyboardavoidingview +title: KeyboardAvoidingView +original_id: keyboardavoidingview +--- +### Props + +* [View props...](view.md#props) +- [`behavior`](keyboardavoidingview.md#behavior) +- [`contentContainerStyle`](keyboardavoidingview.md#contentcontainerstyle) +- [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) + + + + +### Methods + +- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) +- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) +- [`onLayout`](keyboardavoidingview.md#onlayout) + + + + +--- + +# Reference + +## Props + +### `behavior` + + + +| Type | Required | +| - | - | +| PropTypes.oneOf(['height', 'position', 'padding']) | No | + + + + +--- + +### `contentContainerStyle` + +The style of the content container(View) when behavior is 'position'. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `keyboardVerticalOffset` + +This is the distance between the top of the user screen and the react native view, +may be non-zero in some use cases. + +| Type | Required | +| - | - | +| PropTypes.number.isRequired | No | + + + + + + +## Methods + +### `relativeKeyboardHeight()` + +```javascript +relativeKeyboardHeight(keyboardFrame: object): +``` + + + +--- + +### `onKeyboardChange()` + +```javascript +onKeyboardChange(event: object) +``` + + + +--- + +### `onLayout()` + +```javascript +onLayout(event: object) +``` + + + diff --git a/website/versioned_docs/version-0.32/layout-props.md b/website/versioned_docs/version-0.32/layout-props.md new file mode 100644 index 00000000000..e2ba4a4578a --- /dev/null +++ b/website/versioned_docs/version-0.32/layout-props.md @@ -0,0 +1,724 @@ +--- +id: version-0.32-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginRight`](layout-props.md#marginright) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`marginLeft`](layout-props.md#marginleft) +- [`alignSelf`](layout-props.md#alignself) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) +- [`zIndex`](layout-props.md#zindex) + + + + + + +--- + +# Reference + +## Props + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. + For example, if children are flowing vertically, `alignItems` + controls how they align horizontally. + It works like `align-items` in CSS, except the default value + is `stretch` instead of `flex-start`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of + this component. + + It works similarly to `bottom` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. + `flex` is a number rather than a string, and it works + according to the `css-layout` library + at https://github.com/facebook/css-layout. + + When `flex` is a positive number, it makes the component flexible + and it will be sized proportional to its flex value. So a + component with `flex` set to 2 will take twice the space as a + component with `flex` set to 1. + + When `flex` is 0, the component is sized according to `width` + and `height` and it is inflexible. + + When `flex` is -1, the component is normally sized according + `width` and `height`. However, if there's not enough space, + the component will shrink to its `minWidth` and `minHeight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. + `row` goes left to right, `column` goes top to bottom, and you may + be able to guess what the other two do. It works like `flex-direction` + in CSS, except the default is `column`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'row', + 'row-reverse', + 'column', + 'column-reverse' +]) | No | + + + + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they + hit the end of a flex container. + It works like `flex-wrap` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'wrap', + 'nowrap' +]) | No | + + + + +--- + +### `height` + +`height` sets the height of this component. + + It works similarly to `height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. + For example, if children are flowing vertically, `justifyContent` + controls how they align vertically. + It works like `justify-content` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'space-between', + 'space-around' +]) | No | + + + + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of + this component. + + It works similarly to `left` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/left + for more details of how `left` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of + `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting + both `marginLeft` and `marginRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, + overriding the `alignItems` of the parent. It works like `align-self` + in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'auto', + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both + `marginTop` and `marginBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + + It works similarly to `max-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + + It works similarly to `max-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + + It works similarly to `min-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + + It works similarly to `min-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `padding` + +Setting `padding` has the same effect as setting each of + `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/padding + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of + `paddingLeft` and `paddingRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of + `paddingTop` and `paddingBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but + everything is set to `relative` by default, so `absolute` + positioning is always just relative to the parent. + + If you want to position a child using specific numbers of logical + pixels relative to its parent, set the child to have `absolute` + position. + + If you want to position a child relative to something + that is not its parent, just don't use styles for that. Use the + component tree. + + See https://github.com/facebook/css-layout + for more details on how `position` differs between React Native + and CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'absolute', + 'relative' +]) | No | + + + + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of + this component. + + It works similarly to `right` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/right + for more details of how `right` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of + this component. + + It works similarly to `top` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/top + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `width` + +`width` sets the width of this component. + + It works similarly to `width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. + Normally, you don't use `zIndex`. Components render according to + their order in the document tree, so later components draw over + earlier ones. `zIndex` may be useful if you have animations or custom + modal interfaces where you don't want this behavior. + + It works like the CSS `z-index` property - components with a larger + `zIndex` will render on top. Think of the z-direction like it's + pointing from the phone into your eyeball. + See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for + more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + + + diff --git a/website/versioned_docs/version-0.32/navigatorios.md b/website/versioned_docs/version-0.32/navigatorios.md new file mode 100644 index 00000000000..b92eae39115 --- /dev/null +++ b/website/versioned_docs/version-0.32/navigatorios.md @@ -0,0 +1,535 @@ +--- +id: version-0.32-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +`NavigatorIOS` is a wrapper around +[`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), +enabling you to implement a navigation stack. It works exactly the same as it +would on a native app using `UINavigationController`, providing the same +animations and behavior from UIKIt. + +As the name implies, it is only available on iOS. Take a look at +[`Navigator`](/react-native/navigator.md) for a similar solution for your +cross-platform needs, or check out +[react-native-navigation](https://github.com/wix/react-native-navigation), a +component that aims to provide native navigation on both iOS and Android. + +To set up the navigator, provide the `initialRoute` prop with a route +object. A route object is used to describe each scene that your app +navigates to. `initialRoute` represents the first route in your navigator. + +``` +import React, { Component, PropTypes } from 'react'; +import { NavigatorIOS, Text } from 'react-native'; + +export default class NavigatorIOSApp extends Component { + render() { + return ( + + ); + } +} + +class MyScene extends Component { + static propTypes = { + title: PropTypes.string.isRequired, + navigator: PropTypes.object.isRequired, + } + + constructor(props, context) { + super(props, context); + this._onForward = this._onForward.bind(this); + this._onBack = this._onBack.bind(this); + } + + _onForward() { + this.props.navigator.push({ + title: 'Scene ' + nextIndex, + }); + } + + render() { + return ( + + Current Scene: { this.props.title } + + Tap me to load the next scene + + + ) + } +} +``` + +In this code, the navigator renders the component specified in initialRoute, +which in this case is `MyScene`. This component will receive a `route` prop +and a `navigator` prop representing the navigator. The navigator's navigation +bar will render the title for the current scene, "My Initial Scene". + +You can optionally pass in a `passProps` property to your `initialRoute`. +`NavigatorIOS` passes this in as props to the rendered component: + +``` +initialRoute={{ + component: MyScene, + title: 'My Initial Scene', + passProps: { myProp: 'foo' } +}} +``` + +You can then access the props passed in via `{this.props.myProp}`. + +#### Handling Navigation + +To trigger navigation functionality such as pushing or popping a view, you +have access to a `navigator` object. The object is passed in as a prop to any +component that is rendered by `NavigatorIOS`. You can then call the +relevant methods to perform the navigation action you need: + +``` +class MyView extends Component { + _handleBackPress() { + this.props.navigator.pop(); + } + + _handleNextPress(nextRoute) { + this.props.navigator.push(nextRoute); + } + + render() { + const nextRoute = { + component: MyView, + title: 'Bar That', + passProps: { myProp: 'bar' } + }; + return( + this._handleNextPress(nextRoute)}> + + See you on the other nav {this.props.myProp}! + + + ); + } +} +``` + +You can also trigger navigator functionality from the `NavigatorIOS` +component: + +``` +class NavvyIOS extends Component { + _handleNavigationRequest() { + this.refs.nav.push({ + component: MyView, + title: 'Genius', + passProps: { myProp: 'genius' }, + }); + } + + render() { + return ( + this._handleNavigationRequest(), + }} + style={{flex: 1}} + /> + ); + } +} +``` + +The code above adds a `_handleNavigationRequest` private method that is +invoked from the `NavigatorIOS` component when the right navigation bar item +is pressed. To get access to the navigator functionality, a reference to it +is saved in the `ref` prop and later referenced to push a new scene into the +navigation stack. + +#### Navigation Bar Configuration + +Props passed to `NavigatorIOS` will set the default configuration +for the navigation bar. Props passed as properties to a route object will set +the configuration for that route's navigation bar, overriding any props +passed to the `NavigatorIOS` component. + +``` +_handleNavigationRequest() { + this.refs.nav.push({ + //... + passProps: { myProp: 'genius' }, + barTintColor: '#996699', + }); +} + +render() { + return ( + + ); +} +``` + +In the example above the navigation bar color is changed when the new route +is pushed. + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +NavigatorIOS uses `route` objects to identify child views, their props, +and navigation bar configuration. Navigation operations such as push +operations expect routes to look like this the `initialRoute`. + +| Type | Required | +| - | - | +| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | + + + + +--- + +### `barTintColor` + +The default background color of the navigation bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `interactivePopGestureEnabled` + +Boolean value that indicates whether the interactive pop gesture is +enabled. This is useful for enabling/disabling the back swipe navigation +gesture. + +If this prop is not provided, the default behavior is for the back swipe +gesture to be enabled when the navigation bar is shown and disabled when +the navigation bar is hidden. Once you've provided the +`interactivePopGestureEnabled` prop, you can never restore the default +behavior. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the `backgroundColor` for every scene. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +Boolean value that indicates whether the navigation bar is hidden +by default. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +Boolean value that indicates whether to hide the 1px hairline shadow +by default. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The default color used for the buttons in the navigation bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The default text color of the navigation bar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +Boolean value that indicates whether the navigation bar is +translucent by default + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + +Navigate forward to a new route. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + +Go back N scenes at once. When N=1, behavior matches `pop()`. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| n | number | Yes | The number of scenes to pop. | + + + + +--- + +### `pop()` + +```javascript +pop() +``` + +Pop back to the previous scene. + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +Replace a route in the navigation stack. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that will replace the specified one. | +| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | + + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replace the route for the current scene and immediately +load the view for the new route. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the route/view for the previous scene. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to will replace the previous scene. | + + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + +Go back to the topmost item in the navigation stack. + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + +Go back to the item for a particular route object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + +Replaces the previous route/view and transitions back to it. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that replaces the previous scene. | + + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + +Replaces the top item and pop to it. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that will replace the topmost item. | + + + + diff --git a/website/versioned_docs/version-0.32/picker.md b/website/versioned_docs/version-0.32/picker.md new file mode 100644 index 00000000000..0413ec390f4 --- /dev/null +++ b/website/versioned_docs/version-0.32/picker.md @@ -0,0 +1,152 @@ +--- +id: version-0.32-picker +title: Picker +original_id: picker +--- +Renders the native picker component on iOS and Android. Example: + + this.setState({language: lang})}> + + + + +### Props + +* [View props...](view.md#props) +- [`onValueChange`](picker.md#onvaluechange) +- [`selectedValue`](picker.md#selectedvalue) +- [`style`](picker.md#style) +- [`testID`](picker.md#testid) +- [`enabled`](picker.md#enabled) +- [`mode`](picker.md#mode) +- [`prompt`](picker.md#prompt) +- [`itemStyle`](picker.md#itemstyle) + + + + + + +--- + +# Reference + +## Props + +### `onValueChange` + +Callback for when an item is selected. This is called with the following parameters: + - `itemValue`: the `value` prop of the item that was selected + - `itemPosition`: the index of the selected item in this picker + +| Type | Required | +| - | - | +| Function | No | + + + + +--- + +### `selectedValue` + +Value matching value of one of the items. Can be a string or an integer. + +| Type | Required | +| - | - | +| any | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| $FlowFixMe | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `enabled` + +If set to false, the picker will be disabled, i.e. the user will not be able to make a +selection. + + +| Type | Required | Platform | +| - | - | - | +| boolean | No | Android | + + + + +--- + +### `mode` + +On Android, specifies how to display the selection items when the user taps on the picker: + + - 'dialog': Show a modal dialog. This is the default. + - 'dropdown': Shows a dropdown anchored to the picker view + + + +| Type | Required | Platform | +| - | - | - | +| literal ‖ ,literal | No | Android | + + + + +--- + +### `prompt` + +Prompt string for this picker, used on Android in dialog mode as the title of the dialog. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `itemStyle` + +Style to apply to each of the item labels. + + +| Type | Required | Platform | +| - | - | - | +| $FlowFixMe | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.32/pushnotificationios.md b/website/versioned_docs/version-0.32/pushnotificationios.md new file mode 100644 index 00000000000..d0a57a2f020 --- /dev/null +++ b/website/versioned_docs/version-0.32/pushnotificationios.md @@ -0,0 +1,412 @@ +--- +id: version-0.32-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` +- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` +- Add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error + { + NSLog(@"%@", error); + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `getScheduledLocalNotifications()` + +```javascript +static getScheduledLocalNotifications(callback) +``` + + +Gets the local notifications that are currently scheduled. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + +This method returns a promise that will resolve when the user accepts, +rejects, or if the permissions were previously rejected. The promise +resolves to the current state of the permission. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `getInitialNotification()` + +```javascript +static getInitialNotification() +``` + + +This method returns a promise that resolves to either the notification +object if the app was launched by a push notification, or `null` otherwise. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`getInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.32/scrollview.md b/website/versioned_docs/version-0.32/scrollview.md new file mode 100644 index 00000000000..055ab904639 --- /dev/null +++ b/website/versioned_docs/version-0.32/scrollview.md @@ -0,0 +1,759 @@ +--- +id: version-0.32-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`bounces`](scrollview.md#bounces) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`scrollPerfTag`](scrollview.md#scrollperftag) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`horizontal`](scrollview.md#horizontal) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + const styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +When false, tapping outside of the focused text input when the keyboard +is up dismisses the keyboard. When true, the keyboard will not dismiss +automatically, and the scroll view will not catch taps, but children of +the scroll view can catch taps. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pagingEnabled` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderBottomWidth`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: ReactPropTypes.number + + - **`borderRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: ReactPropTypes.number + + - **`borderStyle`**: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`borderTopWidth`**: ReactPropTypes.number + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`elevation`**: ReactPropTypes.number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `scrollPerfTag` + +Tag used to log scroll performance on this scroll view. Will force +momentum events to be turned on (see sendMomentumEvents). This doesn't do +anything out of the box and you need to implement a custom native +FpsListener for it to be useful. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.32/share.md b/website/versioned_docs/version-0.32/share.md new file mode 100644 index 00000000000..d1ee9f16806 --- /dev/null +++ b/website/versioned_docs/version-0.32/share.md @@ -0,0 +1,93 @@ +--- +id: version-0.32-share +title: Share +original_id: share +--- + + + +### Methods + +- [`share`](share.md#share) +- [`sharedAction`](share.md#sharedaction) +- [`dismissedAction`](share.md#dismissedaction) + + + + +--- + +# Reference + +## Methods + +### `share()` + +```javascript +static share(content, options) +``` + + +Open a dialog to share text content. + +In iOS, Returns a Promise which will be invoked an object containing `action`, `activityType`. +If the user dismissed the dialog, the Promise will still be resolved with action being `Share.dismissedAction` +and all the other keys being undefined. + +In Android, Returns a Promise which always be resolved with action being `Share.sharedAction`. + +### Content + + - `message` - a message to share + - `title` - title of the message + +#### iOS + + - `url` - an URL to share + +At least one of URL and message is required. + +### Options + +#### iOS + +- `excludedActivityTypes` +- `tintColor` + +#### Android + +- `dialogTitle` + + + + + +--- + +### `sharedAction()` + +```javascript +static sharedAction() +``` + + +The content was successfully shared. + + + + +--- + +### `dismissedAction()` + +```javascript +static dismissedAction() +``` + + +The dialog has been dismissed. +@platform ios + + + + diff --git a/website/versioned_docs/version-0.32/snapshotviewios.md b/website/versioned_docs/version-0.32/snapshotviewios.md new file mode 100644 index 00000000000..ceec21be65d --- /dev/null +++ b/website/versioned_docs/version-0.32/snapshotviewios.md @@ -0,0 +1,48 @@ +--- +id: version-0.32-snapshotviewios +title: SnapshotViewIOS +original_id: snapshotviewios +--- +### Props + +* [View props...](view.md#props) +- [`onSnapshotReady`](snapshotviewios.md#onsnapshotready) +- [`testIdentifier`](snapshotviewios.md#testidentifier) + + + + + + +--- + +# Reference + +## Props + +### `onSnapshotReady` + + + +| Type | Required | +| - | - | +| Function | No | + + + + +--- + +### `testIdentifier` + + + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.32/statusbar.md b/website/versioned_docs/version-0.32/statusbar.md new file mode 100644 index 00000000000..53080bba2b2 --- /dev/null +++ b/website/versioned_docs/version-0.32/statusbar.md @@ -0,0 +1,320 @@ +--- +id: version-0.32-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Imperative API + +For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the component for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render. + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + +### Methods + +- [`setHidden`](statusbar.md#sethidden) +- [`setBarStyle`](statusbar.md#setbarstyle) +- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) +- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) +- [`setTranslucent`](statusbar.md#settranslucent) + + +### Type Definitions + +- [`StatusBarStyle`](statusbar.md#statusbarstyle) +- [`StatusBarAnimation`](statusbar.md#statusbaranimation) + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| boolean | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| boolean | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| $FlowFixMe | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| boolean | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| literal ‖ ,literal | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| boolean | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| literal ‖ ,literal | No | iOS | + + + + + + +## Methods + +### `setHidden()` + +```javascript +static setHidden(hidden: boolean, [animation]: StatusBarAnimation) +``` + +Show or hide the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| hidden | boolean | Yes | The dialog's title. | +| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | + + + + +--- + +### `setBarStyle()` + +```javascript +static setBarStyle(style: StatusBarStyle, [animated]: boolean) +``` + +Set the status bar style + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | +| animated | boolean | No | Animate the style change. | + + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible: boolean) +``` + +Control the visibility of the network activity indicator + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| visible | boolean | Yes | Show the indicator. | + + + + +--- + +### `setBackgroundColor()` + +```javascript +static setBackgroundColor(color: string, [animated]: boolean) +``` + +Set the background color for the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| color | string | Yes | Background color. | +| animated | boolean | No | Animate the style change. | + + + + +--- + +### `setTranslucent()` + +```javascript +static setTranslucent(translucent: boolean) +``` + +Control the translucency of the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| translucent | boolean | Yes | Set as translucent. | + + + + +## Type Definitions + +### StatusBarStyle + +Status bar style + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default status bar style | +| light-content | Dark background style | + + + + +--- + +### StatusBarAnimation + +Status bar animation + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| none | No animation | +| fade | Fade animation | +| slide | Slide animation | + + + + diff --git a/website/versioned_docs/version-0.32/tabbarios.md b/website/versioned_docs/version-0.32/tabbarios.md new file mode 100644 index 00000000000..a4164bdbd1f --- /dev/null +++ b/website/versioned_docs/version-0.32/tabbarios.md @@ -0,0 +1,110 @@ +--- +id: version-0.32-tabbarios +title: TabBarIOS +original_id: tabbarios +--- +### Props + +* [View props...](view.md#props) +- [`barTintColor`](tabbarios.md#bartintcolor) +- [`itemPositioning`](tabbarios.md#itempositioning) +- [`style`](tabbarios.md#style) +- [`tintColor`](tabbarios.md#tintcolor) +- [`translucent`](tabbarios.md#translucent) +- [`unselectedTintColor`](tabbarios.md#unselectedtintcolor) + + + + + + +--- + +# Reference + +## Props + +### `barTintColor` + +Background color of the tab bar + +| Type | Required | +| - | - | +| $FlowFixMe | No | + + + + +--- + +### `itemPositioning` + +Specifies tab bar item positioning. Available values are: +- fill - distributes items across the entire width of the tab bar +- center - centers item in the available tab bar space +- auto (default) - distributes items dynamically according to the +user interface idiom. In a horizontally compact environment (e.g. iPhone 5) +this value defaults to `fill`, in a horizontally regular one (e.g. iPad) +it defaults to center. + +| Type | Required | +| - | - | +| literal ‖ ,literal ‖ ,literal | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| $FlowFixMe | No | + + + + +--- + +### `tintColor` + +Color of the currently selected tab icon + +| Type | Required | +| - | - | +| $FlowFixMe | No | + + + + +--- + +### `translucent` + +A Boolean value that indicates whether the tab bar is translucent + +| Type | Required | +| - | - | +| boolean | No | + + + + +--- + +### `unselectedTintColor` + +Color of text on unselected tabs + +| Type | Required | +| - | - | +| $FlowFixMe | No | + + + + + + diff --git a/website/versioned_docs/version-0.32/textinput.md b/website/versioned_docs/version-0.32/textinput.md new file mode 100644 index 00000000000..3935ce773a4 --- /dev/null +++ b/website/versioned_docs/version-0.32/textinput.md @@ -0,0 +1,834 @@ +--- +id: version-0.32-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + constructor(props) { + super(props); + this.state = { text: 'Useless Placeholder' }; + } + + render() { + return ( + this.setState({text})} + value={this.state.text} + /> + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + render() { + return ( + + ); + } +} + +class UselessTextInputMultiline extends Component { + constructor(props) { + super(props); + this.state = { + text: 'Useless Multiline Placeholder', + }; + } + + // If you type something in the text box that is a color, the background will change to that + // color. + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'AwesomeProject', + () => UselessTextInputMultiline +); +``` + +`TextInput` has by default a border at the bottom of its view. This border +has its padding set by the background image provided by the system, and it +cannot be changed. Solutions to avoid this is to either not set height +explicitly, case in which the system will take care of displaying the border +in the correct position, or to not display the border by setting +`underlineColorAndroid` to transparent. + +### Props + +* [View props...](view.md#props) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onContentSizeChange`](textinput.md#oncontentsizechange) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`inlineImageLeft`](textinput.md#inlineimageleft) +- [`inlineImagePadding`](textinput.md#inlineimagepadding) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`dataDetectorTypes`](textinput.md#datadetectortypes) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `autoCapitalize` + +Can tell `TextInput` to automatically capitalize certain characters. + +- `characters`: all characters. +- `words`: first letter of each word. +- `sentences`: first letter of each sentence (*default*). +- `none`: don't auto capitalize anything. + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + 'none', + 'sentences', + 'words', + 'characters', +]) | No | + + + + +--- + +### `autoFocus` + +If `true`, focuses the input on `componentDidMount`. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `blurOnSubmit` + +If `true`, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting `blurOnSubmit` +to `true` means that pressing return will blur the field and trigger the +`onSubmitEditing` event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you do not want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `editable` + +If `false`, text is not editable. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- `default` +- `numeric` +- `email-address` +- `phone-pad` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'default', + 'email-address', + 'numeric', + 'phone-pad', + // iOS-only + 'ascii-capable', + 'numbers-and-punctuation', + 'url', + 'number-pad', + 'name-phone-pad', + 'decimal-pad', + 'twitter', + 'web-search', +]) | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `multiline` + +If `true`, the text input can be multiple lines. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onContentSizeChange` + +Callback that is called when the text input's content size changes. +This will be called with +`{ nativeEvent: { contentSize: { width, height } } }`. + +Only called for multiline text inputs. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if `multiline={true}` is specified. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `autoCorrect` + +If `false`, disables auto-correct. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +*Cross platform* + +The following values work across platforms: + +- `done` +- `go` +- `next` +- `search` +- `send` + +*Android Only* + +The following values work on Android only: + +- `none` +- `previous` + +*iOS Only* + +The following values work on iOS only: + +- `default` +- `emergency-call` +- `google` +- `join` +- `route` +- `yahoo` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'done', + 'go', + 'next', + 'search', + 'send', + // Android-only + 'none', + 'previous', + // iOS-only + 'default', + 'emergency-call', + 'google', + 'join', + 'route', + 'yahoo', +]) | No | + + + + +--- + +### `secureTextEntry` + +If `true`, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectTextOnFocus` + +If `true`, all text will automatically be selected on focus. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on iOS) color of the text input. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + +[Styles](/react-native/style.md) + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. `TextInput` is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses, this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `inlineImageLeft` + +If defined, the provided image resource will be rendered on the left. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `inlineImagePadding` + +Padding between the inline image, if any, and the text input itself. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a `TextInput`. Use it with multiline set to +`true` to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the `TextInput` underline. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'never', + 'while-editing', + 'unless-editing', + 'always', +]) | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If `true`, clears the text field automatically when editing begins. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `dataDetectorTypes` + +Determines the types of data converted to clickable URLs in the text input. +Only valid if `multiline={true}` and `editable={false}`. +By default no data types are detected. + +You can provide one type or an array of many types. + +Possible values for `dataDetectorTypes` are: + +- `'phoneNumber'` +- `'link'` +- `'address'` +- `'calendarEvent'` +- `'none'` +- `'all'` + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + PropTypes.oneOf(DataDetectorTypes), + PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), +]) | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If `true`, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is `false`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'default', + 'light', + 'dark', +]) | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before `onChange` callbacks. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `selectionState` + +An instance of `DocumentSelectionState`, this is some state that is responsible for +maintaining selection information for a document. + +Some functionality that can be performed with this instance is: + +- `blur()` +- `focus()` +- `update()` + +> You can reference `DocumentSelectionState` in +> [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns `true` if the input is currently focused; `false` otherwise. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the `TextInput`. + + + diff --git a/website/versioned_docs/version-0.32/viewpagerandroid.md b/website/versioned_docs/version-0.32/viewpagerandroid.md new file mode 100644 index 00000000000..0ff8152ca2d --- /dev/null +++ b/website/versioned_docs/version-0.32/viewpagerandroid.md @@ -0,0 +1,199 @@ +--- +id: version-0.32-viewpagerandroid +title: ViewPagerAndroid +original_id: viewpagerandroid +--- +Container that allows to flip left and right between child views. Each +child view of the `ViewPagerAndroid` will be treated as a separate page +and will be stretched to fill the `ViewPagerAndroid`. + +It is important all children are ``s and not composite components. +You can set style properties like `padding` or `backgroundColor` for each +child. + +Example: + +``` +render: function() { + return ( + + + First page + + + Second page + + + ); +} + +... + +var styles = { + ... + pageStyle: { + alignItems: 'center', + padding: 20, + } +} +``` + +### Props + +* [View props...](view.md#props) +- [`initialPage`](viewpagerandroid.md#initialpage) +- [`keyboardDismissMode`](viewpagerandroid.md#keyboarddismissmode) +- [`onPageScroll`](viewpagerandroid.md#onpagescroll) +- [`onPageScrollStateChanged`](viewpagerandroid.md#onpagescrollstatechanged) +- [`onPageSelected`](viewpagerandroid.md#onpageselected) +- [`pageMargin`](viewpagerandroid.md#pagemargin) +- [`scrollEnabled`](viewpagerandroid.md#scrollenabled) + + + + +### Type Definitions + +- [`ViewPagerScrollState`](viewpagerandroid.md#viewpagerscrollstate) + + + + +--- + +# Reference + +## Props + +### `initialPage` + +Index of initial page that should be selected. Use `setPage` method to +update the page, and `onPageSelected` to monitor page changes + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + +| Type | Required | +| - | - | +| literal ‖ ,literal | No | + + + + +--- + +### `onPageScroll` + +Executed when transitioning between pages (ether because of animation for +the requested page change or when user is swiping/dragging between pages) +The `event.nativeEvent` object for this callback will carry following data: + - position - index of first page from the left that is currently visible + - offset - value from range [0,1) describing stage between page transitions. + Value x means that (1 - x) fraction of the page at "position" index is + visible, and x fraction of the next page is visible. + +| Type | Required | +| - | - | +| Function | No | + + + + +--- + +### `onPageScrollStateChanged` + +Function called when the page scrolling state has changed. +The page scrolling state can be in 3 states: +- idle, meaning there is no interaction with the page scroller happening at the time +- dragging, meaning there is currently an interaction with the page scroller +- settling, meaning that there was an interaction with the page scroller, and the + page scroller is now finishing it's closing or opening animation + +| Type | Required | +| - | - | +| Function | No | + + + + +--- + +### `onPageSelected` + +This callback will be called once ViewPager finish navigating to selected page +(when user swipes between pages). The `event.nativeEvent` object passed to this +callback will have following fields: + - position - index of page that has been selected + +| Type | Required | +| - | - | +| Function | No | + + + + +--- + +### `pageMargin` + +Blank space to show between pages. This is only visible while scrolling, pages are still +edge-to-edge. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| boolean | No | + + + + + + +## Type Definitions + +### ViewPagerScrollState + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| idle | | +| dragging | | +| settling | | + + + + diff --git a/website/versioned_docs/version-0.32/webview.md b/website/versioned_docs/version-0.32/webview.md new file mode 100644 index 00000000000..9f1a6b36f5c --- /dev/null +++ b/website/versioned_docs/version-0.32/webview.md @@ -0,0 +1,457 @@ +--- +id: version-0.32-webview +title: WebView +original_id: webview +--- +`WebView` renders web content in a native view. + +``` +import React, { Component } from 'react'; +import { WebView } from 'react-native'; + +class MyWeb extends Component { + render() { + return ( + + ); + } +} +``` + +You can use this component to navigate back and forth in the web view's +history and configure various properties for the web content. + +### Props + +* [View props...](view.md#props) +- [`source`](webview.md#source) +- [`automaticallyAdjustContentInsets`](webview.md#automaticallyadjustcontentinsets) +- [`onShouldStartLoadWithRequest`](webview.md#onshouldstartloadwithrequest) +- [`injectedJavaScript`](webview.md#injectedjavascript) +- [`mediaPlaybackRequiresUserAction`](webview.md#mediaplaybackrequiresuseraction) +- [`onError`](webview.md#onerror) +- [`onLoad`](webview.md#onload) +- [`onLoadEnd`](webview.md#onloadend) +- [`onLoadStart`](webview.md#onloadstart) +- [`onNavigationStateChange`](webview.md#onnavigationstatechange) +- [`renderError`](webview.md#rendererror) +- [`renderLoading`](webview.md#renderloading) +- [`scalesPageToFit`](webview.md#scalespagetofit) +- [`contentInset`](webview.md#contentinset) +- [`startInLoadingState`](webview.md#startinloadingstate) +- [`style`](webview.md#style) +- [`decelerationRate`](webview.md#decelerationrate) +- [`domStorageEnabled`](webview.md#domstorageenabled) +- [`javaScriptEnabled`](webview.md#javascriptenabled) +- [`userAgent`](webview.md#useragent) +- [`allowsInlineMediaPlayback`](webview.md#allowsinlinemediaplayback) +- [`bounces`](webview.md#bounces) +- [`dataDetectorTypes`](webview.md#datadetectortypes) +- [`scrollEnabled`](webview.md#scrollenabled) +- [`url`](webview.md#url) +- [`html`](webview.md#html) + + + + + + +--- + +# Reference + +## Props + +### `source` + +Loads static html or a uri (with optional headers) in the WebView. + +| Type | Required | +| - | - | +| object: {uri: string,method: string,headers: object,body: string}, ,object: {html: string,baseUrl: string}, ,number | No | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether to adjust the content inset for web views that are +placed behind a navigation bar, tab bar, or toolbar. The default value +is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onShouldStartLoadWithRequest` + +Function that allows custom handling of any web view requests. Return +`true` from the function to continue loading the request and `false` +to stop loading. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `injectedJavaScript` + +Set this to provide JavaScript that will be injected into the web page +when the view loads. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `mediaPlaybackRequiresUserAction` + +Boolean that determines whether HTML5 audio and video requires the user +to tap them before they start playing. The default value is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onError` + +Function that is invoked when the `WebView` load fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoad` + +Function that is invoked when the `WebView` has finished loading. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadEnd` + +Function that is invoked when the `WebView` load succeeds or fails. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLoadStart` + +Function that is invoked when the `WebView` starts loading. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onNavigationStateChange` + +Function that is invoked when the `WebView` loading starts or ends. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderError` + +Function that returns a view to show if there's an error. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `renderLoading` + +Function that returns a loading indicator. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `scalesPageToFit` + +Boolean that controls whether the web content is scaled to fit +the view and enables the user to change the scale. The default value +is `true`. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `contentInset` + +The amount by which the web view content is inset from the edges of +the scroll view. Defaults to {top: 0, left: 0, bottom: 0, right: 0}. + +| Type | Required | +| - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | + + + + +--- + +### `startInLoadingState` + +Boolean value that forces the `WebView` to show the loading view +on the first load. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + +The style to apply to the `WebView`. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use the +string shortcuts `"normal"` and `"fast"` which match the underlying iOS +settings for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively: + + - normal: 0.998 + - fast: 0.99 (the default for iOS web view) + + +| Type | Required | Platform | +| - | - | - | +| ScrollView.propTypes.decelerationRate | No | iOS | + + + + +--- + +### `domStorageEnabled` + +Boolean value to control whether DOM Storage is enabled. Used only in +Android. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `javaScriptEnabled` + +Boolean value to enable JavaScript in the `WebView`. Used on Android only +as JavaScript is enabled by default on iOS. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `userAgent` + +Sets the user-agent for the `WebView`. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `allowsInlineMediaPlayback` + +Boolean that determines whether HTML5 videos play inline or use the +native full-screen controller. The default value is `false`. + +**NOTE** : In order for video to play inline, not only does this +property need to be set to `true`, but the video element in the HTML +document must also include the `webkit-playsinline` attribute. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `bounces` + +Boolean value that determines whether the web view bounces +when it reaches the edge of the content. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `dataDetectorTypes` + +Determines the types of data converted to clickable URLs in the web view’s content. +By default only phone numbers are detected. + +You can provide one type or an array of many types. + +Possible values for `dataDetectorTypes` are: + +- `'phoneNumber'` +- `'link'` +- `'address'` +- `'calendarEvent'` +- `'none'` +- `'all'` + + + +| Type | Required | Platform | +| - | - | - | +| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') | No | iOS | + + + + +--- + +### `scrollEnabled` + +Boolean value that determines whether scrolling is enabled in the +`WebView`. The default value is `true`. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `url` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `html` + +**Deprecated.** Use the `source` prop instead. + + + +| Type | Required | +| - | - | +| string | No | + + + + + + diff --git a/website/versioned_docs/version-0.33/image.md b/website/versioned_docs/version-0.33/image.md new file mode 100644 index 00000000000..607959430cc --- /dev/null +++ b/website/versioned_docs/version-0.33/image.md @@ -0,0 +1,488 @@ +--- +id: version-0.33-image +title: Image +original_id: 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. + +This example shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### GIF and WebP support on Android + +By default, GIF and WebP are not supported on Android. + +You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. + +``` +dependencies { + // If your app supports Android versions before Ice Cream Sandwich (API level 14) + compile 'com.facebook.fresco:animated-base-support:0.11.0' + + // For animated GIF support + compile 'com.facebook.fresco:animated-gif:0.11.0' + + // For WebP support, including animated WebP + compile 'com.facebook.fresco:animated-webp:0.11.0' + compile 'com.facebook.fresco:webpsupport:0.11.0' + + // For WebP support, without animations + compile 'com.facebook.fresco:webpsupport:0.11.0' +} +``` + +Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : +``` +-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { + public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); +} +``` + +### Props + +- [`testID`](image.md#testid) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +This prop can also contain several remote URLs, specified together with +their width and height and potentially with scale/other URI arguments. +The native side will then choose the best `uri` to display based on the +measured size of the image container. + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: ReactPropTypes.number + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: ReactPropTypes.string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + // TODO: Tooling to support documenting these directly and having them display in the docs. + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, +]) | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.33/layout-props.md b/website/versioned_docs/version-0.33/layout-props.md new file mode 100644 index 00000000000..e2495dc0dc2 --- /dev/null +++ b/website/versioned_docs/version-0.33/layout-props.md @@ -0,0 +1,723 @@ +--- +id: version-0.33-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginRight`](layout-props.md#marginright) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`marginLeft`](layout-props.md#marginleft) +- [`alignSelf`](layout-props.md#alignself) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) +- [`zIndex`](layout-props.md#zindex) + + + + + + +--- + +# Reference + +## Props + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. + For example, if children are flowing vertically, `alignItems` + controls how they align horizontally. + It works like `align-items` in CSS (default: stretch). + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of + this component. + + It works similarly to `bottom` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. + `flex` is a number rather than a string, and it works + according to the `css-layout` library + at https://github.com/facebook/css-layout. + + When `flex` is a positive number, it makes the component flexible + and it will be sized proportional to its flex value. So a + component with `flex` set to 2 will take twice the space as a + component with `flex` set to 1. + + When `flex` is 0, the component is sized according to `width` + and `height` and it is inflexible. + + When `flex` is -1, the component is normally sized according + `width` and `height`. However, if there's not enough space, + the component will shrink to its `minWidth` and `minHeight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. + `row` goes left to right, `column` goes top to bottom, and you may + be able to guess what the other two do. It works like `flex-direction` + in CSS, except the default is `column`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'row', + 'row-reverse', + 'column', + 'column-reverse' +]) | No | + + + + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they + hit the end of a flex container. + It works like `flex-wrap` in CSS (default: nowrap). + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'wrap', + 'nowrap' +]) | No | + + + + +--- + +### `height` + +`height` sets the height of this component. + + It works similarly to `height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. + For example, if children are flowing vertically, `justifyContent` + controls how they align vertically. + It works like `justify-content` in CSS (default: flex-start). + See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'space-between', + 'space-around' +]) | No | + + + + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of + this component. + + It works similarly to `left` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/left + for more details of how `left` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of + `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting + both `marginLeft` and `marginRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, + overriding the `alignItems` of the parent. It works like `align-self` + in CSS (default: auto). + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'auto', + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both + `marginTop` and `marginBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + + It works similarly to `max-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + + It works similarly to `max-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + + It works similarly to `min-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + + It works similarly to `min-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `padding` + +Setting `padding` has the same effect as setting each of + `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/padding + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of + `paddingLeft` and `paddingRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of + `paddingTop` and `paddingBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but + everything is set to `relative` by default, so `absolute` + positioning is always just relative to the parent. + + If you want to position a child using specific numbers of logical + pixels relative to its parent, set the child to have `absolute` + position. + + If you want to position a child relative to something + that is not its parent, just don't use styles for that. Use the + component tree. + + See https://github.com/facebook/css-layout + for more details on how `position` differs between React Native + and CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'absolute', + 'relative' +]) | No | + + + + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of + this component. + + It works similarly to `right` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/right + for more details of how `right` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of + this component. + + It works similarly to `top` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/top + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `width` + +`width` sets the width of this component. + + It works similarly to `width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. + Normally, you don't use `zIndex`. Components render according to + their order in the document tree, so later components draw over + earlier ones. `zIndex` may be useful if you have animations or custom + modal interfaces where you don't want this behavior. + + It works like the CSS `z-index` property - components with a larger + `zIndex` will render on top. Think of the z-direction like it's + pointing from the phone into your eyeball. + See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for + more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + + + diff --git a/website/versioned_docs/version-0.33/permissionsandroid.md b/website/versioned_docs/version-0.33/permissionsandroid.md new file mode 100644 index 00000000000..1ce92ddb8bc --- /dev/null +++ b/website/versioned_docs/version-0.33/permissionsandroid.md @@ -0,0 +1,104 @@ +--- +id: version-0.33-permissionsandroid +title: PermissionsAndroid +original_id: permissionsandroid +--- + +`PermissionsAndroid` provides access to Android M's new permissions model. +Some permissions are granted by default when the application is installed +so long as they appear in `AndroidManifest.xml`. However, "dangerous" +permissions require a dialog prompt. You should use this module for those +permissions. + +On devices before SDK version 23, the permissions are automatically granted +if they appear in the manifest, so `checkPermission` and `requestPermission` +should always be true. + +If a user has previously turned off a permission that you prompt for, the OS +will advise your app to show a rationale for needing the permission. The +optional `rationale` argument will show a dialog prompt only if +necessary - otherwise the normal permission prompt will appear. + +### Example +``` +async function requestCameraPermission() { + try { + const granted = await AndroidPermissions.requestPermission( + AndroidPermissions.PERMISSIONS.CAMERA, + { + 'title': 'Cool Photo App Camera Permission', + 'message': 'Cool Photo App needs access to your camera ' + + 'so you can take awesome pictures.' + } + ) + if (granted) { + console.log("You can use the camera") + } else { + console.log("Camera permission denied") + } + } catch (err) { + console.warn(err) + } +} +``` + + +### Methods + +- [`constructor`](permissionsandroid.md#constructor) +- [`checkPermission`](permissionsandroid.md#checkpermission) +- [`requestPermission`](permissionsandroid.md#requestpermission) + + + + +--- + +# Reference + +## Methods + +### `constructor()` + +```javascript +constructor() +``` + + + +--- + +### `checkPermission()` + +```javascript +checkPermission(permission) +``` + + +Returns a promise resolving to a boolean value as to whether the specified +permissions has been granted + + + + +--- + +### `requestPermission()` + +```javascript +requestPermission(permission, rationale?) +``` + + +Prompts the user to enable a permission and returns a promise resolving to a +boolean value indicating whether the user allowed or denied the request + +If the optional rationale argument is included (which is an object with a +`title` and `message`), this function checks with the OS whether it is +necessary to show a dialog explaining why the permission is needed +(https://developer.android.com/training/permissions/requesting.html#explain) +and then shows the system permission dialog + + + + diff --git a/website/versioned_docs/version-0.33/text-style-props.md b/website/versioned_docs/version-0.33/text-style-props.md new file mode 100644 index 00000000000..7df80622095 --- /dev/null +++ b/website/versioned_docs/version-0.33/text-style-props.md @@ -0,0 +1,283 @@ +--- +id: version-0.33-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontVariant`](text-style-props.md#fontvariant) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`textAlignVertical`](text-style-props.md#textalignvertical) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textDecorationLine` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['normal', 'italic']) | No | + + + + +--- + +### `fontVariant` + + + +| Type | Required | +| - | - | +| ReactPropTypes.arrayOf( + ReactPropTypes.oneOf([ + 'small-caps', + 'oldstyle-nums', + 'lining-nums', + 'tabular-nums', + 'proportional-nums', + ]) + ) | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS and +fallbacks to `left` on Android. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + +--- + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `textAlignVertical` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) | No | Android | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.33/text.md b/website/versioned_docs/version-0.33/text.md new file mode 100644 index 00000000000..b8dd57cc011 --- /dev/null +++ b/website/versioned_docs/version-0.33/text.md @@ -0,0 +1,355 @@ +--- +id: version-0.33-text +title: Text +original_id: text +--- +A React component for displaying text. + +`Text` supports nesting, styling, and touch handling. + +In the following example, the nested title and body text will inherit the `fontFamily` from +`styles.baseText`, but the title provides its own additional styles. The title and body will +stack on top of each other on account of the literal newlines: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, Text, StyleSheet } from 'react-native'; + +class TextInANest extends Component { + constructor(props) { + super(props); + this.state = { + titleText: "Bird's Nest", + bodyText: 'This is not really a bird nest.' + }; + } + + render() { + return ( + + + {this.state.titleText}

+ + + {this.state.bodyText} + + + ); + } +} + +const styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}); + +// App registration and rendering +AppRegistry.registerComponent('TextInANest', () => TextInANest); +``` + +### Props + +- [`style`](text.md#style) +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onLongPress`](text.md#onlongpress) +- [`onPress`](text.md#onpress) +- [`ellipsizeMode`](text.md#ellipsizemode) +- [`testID`](text.md#testid) +- [`selectable`](text.md#selectable) +- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`minimumFontScale`](text.md#minimumfontscale) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textDecorationLine`**: ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: ReactPropTypes.number + + - **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) + + - **`fontVariant`**: ReactPropTypes.arrayOf( + ReactPropTypes.oneOf([ + 'small-caps', + 'oldstyle-nums', + 'lining-nums', + 'tabular-nums', + 'proportional-nums', + ]) + ) + + - **`fontWeight`**: ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: ReactPropTypes.number + + - **`textAlign`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) + + Specifies text alignment. The value 'justify' is only supported on iOS and + fallbacks to `left` on Android. + + - **`fontFamily`**: ReactPropTypes.string + + - **`textShadowColor`**: [color](colors.md) + + - **`textShadowOffset`**: ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) + + - **`textShadowRadius`**: ReactPropTypes.number + + - **`textAlignVertical`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) (_Android_) + + - **`letterSpacing`**: ReactPropTypes.number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) (_iOS_) + + - **`writingDirection`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) (_iOS_) + + + +--- + +### `accessible` + +When set to `true`, indicates that the view is an accessibility element. The default value +for a `Text` element is `true`. + +See the +[Accessibility guide](/react-native/accessibility.md#accessible-ios-android) +for more information. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +This prop is commonly used with `ellipsizeMode`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + +This function is called on long press. + +e.g., `onLongPress={this.increaseSize}>`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +e.g., `onPress={() => console.log('1st')}`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `ellipsizeMode` + +This can be one of the following values: + +- `head` - The line is displayed so that the end fits in the container and the missing text +at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" +- `middle` - The line is displayed so that the beginning and end fit in the container and the +missing text in the middle is indicated by an ellipsis glyph. "ab...yz" +- `tail` - The line is displayed so that the beginning fits in the container and the +missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." +- `clip` - Lines are not drawn past the edge of the text container. + +The default is `tail`. + +`numberOfLines` must be set in conjunction with this prop. + +> `clip` is working only for iOS + +| Type | Required | +| - | - | +| enum('head', 'middle', 'tail', 'clip') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `selectable` + +Lets the user select text, to use the native copy and paste functionality. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `adjustsFontSizeToFit` + +Specifies whether font should be scaled down automatically to fit given style constraints. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `allowFontScaling` + +Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The +default is `true`. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `minimumFontScale` + +Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When `true`, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.34/actionsheetios.md b/website/versioned_docs/version-0.34/actionsheetios.md new file mode 100644 index 00000000000..f9889e37f6e --- /dev/null +++ b/website/versioned_docs/version-0.34/actionsheetios.md @@ -0,0 +1,66 @@ +--- +id: version-0.34-actionsheetios +title: ActionSheetIOS +original_id: actionsheetios +--- + + + +### Methods + +- [`showActionSheetWithOptions`](actionsheetios.md#showactionsheetwithoptions) +- [`showShareActionSheetWithOptions`](actionsheetios.md#showshareactionsheetwithoptions) + + + + +--- + +# Reference + +## Methods + +### `showActionSheetWithOptions()` + +```javascript +static showActionSheetWithOptions(options, callback) +``` + + +Display an iOS action sheet. The `options` object must contain one or more +of: + +- `options` (array of strings) - a list of button titles (required) +- `cancelButtonIndex` (int) - index of cancel button in `options` +- `destructiveButtonIndex` (int) - index of destructive button in `options` +- `title` (string) - a title to show above the action sheet +- `message` (string) - a message to show below the title + + + + +--- + +### `showShareActionSheetWithOptions()` + +```javascript +static showShareActionSheetWithOptions(options, failureCallback, successCallback) +``` + + +Display the iOS share sheet. The `options` object should contain +one or both of `message` and `url` and can additionally have +a `subject` or `excludedActivityTypes`: + +- `url` (string) - a URL to share +- `message` (string) - a message to share +- `subject` (string) - a subject for the message +- `excludedActivityTypes` (array) - the activities to exclude from the ActionSheet + +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. + + + + diff --git a/website/versioned_docs/version-0.34/animated.md b/website/versioned_docs/version-0.34/animated.md new file mode 100644 index 00000000000..60ff122c378 --- /dev/null +++ b/website/versioned_docs/version-0.34/animated.md @@ -0,0 +1,675 @@ +--- +id: version-0.34-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scrolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1} // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targeted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performance way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`multiply`](animated.md#multiply) +- [`modulo`](animated.md#modulo) +- [`diffClamp`](animated.md#diffclamp) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `modulo()` + +```javascript +static modulo(a, modulus) +``` + + +Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value + + + + +--- + +### `diffClamp()` + +```javascript +static diffClamp(a, min, max) +``` + + +Create a new Animated value that is limited between 2 values. It uses the +difference between the last value so even if the value is far from the bounds +it will start changing when the value starts getting closer again. +(`value = clamp(value + diff, min, max)`). + +This is useful with scroll events, for example, to show the navbar when +scrolling up and to hide it when scrolling down. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations. This is useful because there is no way to +synchronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.34/cameraroll.md b/website/versioned_docs/version-0.34/cameraroll.md new file mode 100644 index 00000000000..619a5885d0b --- /dev/null +++ b/website/versioned_docs/version-0.34/cameraroll.md @@ -0,0 +1,78 @@ +--- +id: version-0.34-cameraroll +title: CameraRoll +original_id: cameraroll +--- + +`CameraRoll` provides access to the local camera roll / gallery. +Before using this you must link the `RCTCameraRoll` library. +You can refer to (Linking)[https://facebook.github.io/react-native/linking-libraries-ios.md] for help. + + +### Methods + +- [`saveImageWithTag`](cameraroll.md#saveimagewithtag) +- [`saveToCameraRoll`](cameraroll.md#savetocameraroll) +- [`getPhotos`](cameraroll.md#getphotos) + + + + +--- + +# Reference + +## Methods + +### `saveImageWithTag()` + +```javascript +static saveImageWithTag(tag) +``` + + + +--- + +### `saveToCameraRoll()` + +```javascript +static saveToCameraRoll(tag, type?) +``` + + +Saves the photo or video to the camera roll / gallery. + +On Android, the tag must be a local image or video URI, such as `"file:///sdcard/img.png"`. + +On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) +or a local video file URI (remote or data URIs are not supported for saving video at this time). + +If the tag has a file extension of .mov or .mp4, it will be inferred as a video. Otherwise +it will be treated as a photo. To override the automatic choice, you can pass an optional +`type` parameter that must be one of 'photo' or 'video'. + +Returns a Promise which will resolve with the new URI. + + + + +--- + +### `getPhotos()` + +```javascript +static getPhotos(params) +``` + + +Returns a Promise with photo identifier objects from the local camera +roll of the device matching shape defined by `getPhotosReturnChecker`. + +@param {object} params See `getPhotosParamChecker`. + +Returns a Promise which when resolved will be of shape `getPhotosReturnChecker`. + + + + diff --git a/website/versioned_docs/version-0.34/geolocation.md b/website/versioned_docs/version-0.34/geolocation.md new file mode 100644 index 00000000000..17d66bcf330 --- /dev/null +++ b/website/versioned_docs/version-0.34/geolocation.md @@ -0,0 +1,91 @@ +--- +id: version-0.34-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API follows the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +As a browser polyfill, this API is available through the `navigator.geolocation` +global - you do not need to `import` it. + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) +On Android, this can return almost immediately if the location is cached or +request an update, which might take a while. + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.34/image.md b/website/versioned_docs/version-0.34/image.md new file mode 100644 index 00000000000..1cddfa753b8 --- /dev/null +++ b/website/versioned_docs/version-0.34/image.md @@ -0,0 +1,518 @@ +--- +id: version-0.34-image +title: Image +original_id: 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. + +This example shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### GIF and WebP support on Android + +By default, GIF and WebP are not supported on Android. + +You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. + +``` +dependencies { + // If your app supports Android versions before Ice Cream Sandwich (API level 14) + compile 'com.facebook.fresco:animated-base-support:0.11.0' + + // For animated GIF support + compile 'com.facebook.fresco:animated-gif:0.11.0' + + // For WebP support, including animated WebP + compile 'com.facebook.fresco:animated-webp:0.11.0' + compile 'com.facebook.fresco:webpsupport:0.11.0' + + // For WebP support, without animations + compile 'com.facebook.fresco:webpsupport:0.11.0' +} +``` + +Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : +``` +-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { + public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); +} +``` + +### Props + +- [`resizeMethod`](image.md#resizemethod) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`testID`](image.md#testid) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `resizeMethod` + +The mechanism that should be used to resize the image when the image's dimensions +differ from the image view's dimensions. Defaults to `auto`. + +- `auto`: Use heuristics to pick between `resize` and `scale`. + +- `resize`: A software operation which changes the encoded image in memory before it +gets decoded. This should be used instead of `scale` when the image is much larger +than the view. + +- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is +faster (usually hardware accelerated) and produces higher quality images. This +should be used if the image is smaller than the view. It should also be used if the +image is slightly bigger than the view. + +More details about `resize` and `scale` can be found at http://frescolib.org/resizing-rotating.md. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf(['auto', 'resize', 'scale']) | No | Android | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +This prop can also contain several remote URLs, specified together with +their width and height and potentially with scale/other URI arguments. +The native side will then choose the best `uri` to display based on the +measured size of the image container. + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: ReactPropTypes.number + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: ReactPropTypes.string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + // TODO: Tooling to support documenting these directly and having them display in the docs. + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, +]) | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.34/keyboardavoidingview.md b/website/versioned_docs/version-0.34/keyboardavoidingview.md new file mode 100644 index 00000000000..3bdf3f0d542 --- /dev/null +++ b/website/versioned_docs/version-0.34/keyboardavoidingview.md @@ -0,0 +1,103 @@ +--- +id: version-0.34-keyboardavoidingview +title: KeyboardAvoidingView +original_id: keyboardavoidingview +--- +It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. +It can automatically adjust either its position or bottom padding based on the position of the keyboard. + +### Props + +* [View props...](view.md#props) +- [`behavior`](keyboardavoidingview.md#behavior) +- [`contentContainerStyle`](keyboardavoidingview.md#contentcontainerstyle) +- [`keyboardVerticalOffset`](keyboardavoidingview.md#keyboardverticaloffset) + + + + +### Methods + +- [`relativeKeyboardHeight`](keyboardavoidingview.md#relativekeyboardheight) +- [`onKeyboardChange`](keyboardavoidingview.md#onkeyboardchange) +- [`onLayout`](keyboardavoidingview.md#onlayout) + + + + +--- + +# Reference + +## Props + +### `behavior` + + + +| Type | Required | +| - | - | +| PropTypes.oneOf(['height', 'position', 'padding']) | No | + + + + +--- + +### `contentContainerStyle` + +The style of the content container(View) when behavior is 'position'. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `keyboardVerticalOffset` + +This is the distance between the top of the user screen and the react native view, +may be non-zero in some use cases. + +| Type | Required | +| - | - | +| PropTypes.number.isRequired | No | + + + + + + +## Methods + +### `relativeKeyboardHeight()` + +```javascript +relativeKeyboardHeight(keyboardFrame: object): +``` + + + +--- + +### `onKeyboardChange()` + +```javascript +onKeyboardChange(event: object) +``` + + + +--- + +### `onLayout()` + +```javascript +onLayout(event: object) +``` + + + diff --git a/website/versioned_docs/version-0.34/layout-props.md b/website/versioned_docs/version-0.34/layout-props.md new file mode 100644 index 00000000000..8a7f5de802d --- /dev/null +++ b/website/versioned_docs/version-0.34/layout-props.md @@ -0,0 +1,767 @@ +--- +id: version-0.34-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginLeft`](layout-props.md#marginleft) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexBasis`](layout-props.md#flexbasis) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexGrow`](layout-props.md#flexgrow) +- [`flexShrink`](layout-props.md#flexshrink) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`alignSelf`](layout-props.md#alignself) +- [`marginRight`](layout-props.md#marginright) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) +- [`zIndex`](layout-props.md#zindex) + + + + + + +--- + +# Reference + +## Props + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. + For example, if children are flowing vertically, `alignItems` + controls how they align horizontally. + It works like `align-items` in CSS (default: stretch). + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of + this component. + + It works similarly to `bottom` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. + `flex` is a number rather than a string, and it works + according to the `css-layout` library + at https://github.com/facebook/css-layout. + + When `flex` is a positive number, it makes the component flexible + and it will be sized proportional to its flex value. So a + component with `flex` set to 2 will take twice the space as a + component with `flex` set to 1. + + When `flex` is 0, the component is sized according to `width` + and `height` and it is inflexible. + + When `flex` is -1, the component is normally sized according + `width` and `height`. However, if there's not enough space, + the component will shrink to its `minWidth` and `minHeight`. + +flexGrow, flexShrink, and flexBasis work the same as in CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexBasis` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. + `row` goes left to right, `column` goes top to bottom, and you may + be able to guess what the other two do. It works like `flex-direction` + in CSS, except the default is `column`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'row', + 'row-reverse', + 'column', + 'column-reverse' +]) | No | + + + + +--- + +### `flexGrow` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexShrink` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they + hit the end of a flex container. + It works like `flex-wrap` in CSS (default: nowrap). + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'wrap', + 'nowrap' +]) | No | + + + + +--- + +### `height` + +`height` sets the height of this component. + + It works similarly to `height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. + For example, if children are flowing vertically, `justifyContent` + controls how they align vertically. + It works like `justify-content` in CSS (default: flex-start). + See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'space-between', + 'space-around' +]) | No | + + + + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of + this component. + + It works similarly to `left` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/left + for more details of how `left` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of + `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting + both `marginLeft` and `marginRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, + overriding the `alignItems` of the parent. It works like `align-self` + in CSS (default: auto). + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'auto', + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both + `marginTop` and `marginBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + + It works similarly to `max-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + + It works similarly to `max-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + + It works similarly to `min-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + + It works similarly to `min-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `padding` + +Setting `padding` has the same effect as setting each of + `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/padding + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of + `paddingLeft` and `paddingRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of + `paddingTop` and `paddingBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but + everything is set to `relative` by default, so `absolute` + positioning is always just relative to the parent. + + If you want to position a child using specific numbers of logical + pixels relative to its parent, set the child to have `absolute` + position. + + If you want to position a child relative to something + that is not its parent, just don't use styles for that. Use the + component tree. + + See https://github.com/facebook/css-layout + for more details on how `position` differs between React Native + and CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'absolute', + 'relative' +]) | No | + + + + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of + this component. + + It works similarly to `right` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/right + for more details of how `right` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of + this component. + + It works similarly to `top` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/top + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `width` + +`width` sets the width of this component. + + It works similarly to `width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. + Normally, you don't use `zIndex`. Components render according to + their order in the document tree, so later components draw over + earlier ones. `zIndex` may be useful if you have animations or custom + modal interfaces where you don't want this behavior. + + It works like the CSS `z-index` property - components with a larger + `zIndex` will render on top. Think of the z-direction like it's + pointing from the phone into your eyeball. + See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for + more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + + + diff --git a/website/versioned_docs/version-0.34/modal.md b/website/versioned_docs/version-0.34/modal.md new file mode 100644 index 00000000000..9838e72a5ef --- /dev/null +++ b/website/versioned_docs/version-0.34/modal.md @@ -0,0 +1,198 @@ +--- +id: version-0.34-modal +title: Modal +original_id: modal +--- +The Modal component is a simple way to present content above an enclosing view. + +_Note: If you need more control over how to present modals over the rest of your app, +then consider using a top-level Navigator. Go [here](/react-native/navigator-comparison.md) to compare navigation options._ + +```javascript +import React, { Component } from 'react'; +import { Modal, Text, TouchableHighlight, View } from 'react-native'; + +class ModalExample extends Component { + + constructor(props) { + super(props); + this.state = {modalVisible: false}; + } + + setModalVisible(visible) { + this.setState({modalVisible: visible}); + } + + render() { + return ( + + {alert("Modal has been closed.")}} + > + + + Hello World! + + { + this.setModalVisible(!this.state.modalVisible) + }}> + Hide Modal + + + + + + + { + this.setModalVisible(true) + }}> + Show Modal + + + + ); + } +} +``` + +### Props + +- [`animationType`](modal.md#animationtype) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) +- [`onOrientationChange`](modal.md#onorientationchange) +- [`supportedOrientations`](modal.md#supportedorientations) +- [`animated`](modal.md#animated) + + + + + + +--- + +# Reference + +## Props + +### `animationType` + +The `animationType` prop controls how the modal animates. + +- `slide` slides in from the bottom +- `fade` fades into view +- `none` appears without an animation + +| Type | Required | +| - | - | +| PropTypes.oneOf(['none', 'slide', 'fade']) | No | + + + + +--- + +### `onRequestClose` + +The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. + +_On the Android platform, this is a required function._ + +| Type | Required | +| - | - | +| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | + + + + +--- + +### `onShow` + +The `onShow` prop allows passing a function that will be called once the modal has been shown. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `transparent` + +The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `visible` + +The `visible` prop determines whether your modal is visible. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onOrientationChange` + +The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. +The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `supportedOrientations` + +The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. +On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])) | No | iOS | + + + + +--- + +### `animated` + +**Deprecated.** Use the `animationType` prop instead. + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.34/navigatorios.md b/website/versioned_docs/version-0.34/navigatorios.md new file mode 100644 index 00000000000..8acd3faddb1 --- /dev/null +++ b/website/versioned_docs/version-0.34/navigatorios.md @@ -0,0 +1,535 @@ +--- +id: version-0.34-navigatorios +title: NavigatorIOS +original_id: navigatorios +--- +`NavigatorIOS` is a wrapper around +[`UINavigationController`](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UINavigationController_Class/), +enabling you to implement a navigation stack. It works exactly the same as it +would on a native app using `UINavigationController`, providing the same +animations and behavior from UIKIt. + +As the name implies, it is only available on iOS. Take a look at +[`Navigator`](/react-native/navigator.md) for a similar solution for your +cross-platform needs, or check out +[react-native-navigation](https://github.com/wix/react-native-navigation), a +component that aims to provide native navigation on both iOS and Android. + +To set up the navigator, provide the `initialRoute` prop with a route +object. A route object is used to describe each scene that your app +navigates to. `initialRoute` represents the first route in your navigator. + +``` +import React, { Component, PropTypes } from 'react'; +import { NavigatorIOS, Text } from 'react-native'; + +export default class NavigatorIOSApp extends Component { + render() { + return ( + + ); + } +} + +class MyScene extends Component { + static propTypes = { + title: PropTypes.string.isRequired, + navigator: PropTypes.object.isRequired, + } + + constructor(props, context) { + super(props, context); + this._onForward = this._onForward.bind(this); + this._onBack = this._onBack.bind(this); + } + + _onForward() { + this.props.navigator.push({ + title: 'Scene ' + nextIndex, + }); + } + + render() { + return ( + + Current Scene: { this.props.title } + + Tap me to load the next scene + + + ) + } +} +``` + +In this code, the navigator renders the component specified in initialRoute, +which in this case is `MyScene`. This component will receive a `route` prop +and a `navigator` prop representing the navigator. The navigator's navigation +bar will render the title for the current scene, "My Initial Scene". + +You can optionally pass in a `passProps` property to your `initialRoute`. +`NavigatorIOS` passes this in as props to the rendered component: + +``` +initialRoute={{ + component: MyScene, + title: 'My Initial Scene', + passProps: { myProp: 'foo' } +}} +``` + +You can then access the props passed in via `{this.props.myProp}`. + +#### Handling Navigation + +To trigger navigation functionality such as pushing or popping a view, you +have access to a `navigator` object. The object is passed in as a prop to any +component that is rendered by `NavigatorIOS`. You can then call the +relevant methods to perform the navigation action you need: + +``` +class MyView extends Component { + _handleBackPress() { + this.props.navigator.pop(); + } + + _handleNextPress(nextRoute) { + this.props.navigator.push(nextRoute); + } + + render() { + const nextRoute = { + component: MyView, + title: 'Bar That', + passProps: { myProp: 'bar' } + }; + return( + this._handleNextPress(nextRoute)}> + + See you on the other nav {this.props.myProp}! + + + ); + } +} +``` + +You can also trigger navigator functionality from the `NavigatorIOS` +component: + +``` +class NavvyIOS extends Component { + _handleNavigationRequest() { + this.refs.nav.push({ + component: MyView, + title: 'Genius', + passProps: { myProp: 'genius' }, + }); + } + + render() { + return ( + this._handleNavigationRequest(), + }} + style={{flex: 1}} + /> + ); + } +} +``` + +The code above adds a `_handleNavigationRequest` private method that is +invoked from the `NavigatorIOS` component when the right navigation bar item +is pressed. To get access to the navigator functionality, a reference to it +is saved in the `ref` prop and later referenced to push a new scene into the +navigation stack. + +#### Navigation Bar Configuration + +Props passed to `NavigatorIOS` will set the default configuration +for the navigation bar. Props passed as properties to a route object will set +the configuration for that route's navigation bar, overriding any props +passed to the `NavigatorIOS` component. + +``` +_handleNavigationRequest() { + this.refs.nav.push({ + //... + passProps: { myProp: 'genius' }, + barTintColor: '#996699', + }); +} + +render() { + return ( + + ); +} +``` + +In the example above the navigation bar color is changed when the new route +is pushed. + +### Props + +- [`initialRoute`](navigatorios.md#initialroute) +- [`barTintColor`](navigatorios.md#bartintcolor) +- [`interactivePopGestureEnabled`](navigatorios.md#interactivepopgestureenabled) +- [`itemWrapperStyle`](navigatorios.md#itemwrapperstyle) +- [`navigationBarHidden`](navigatorios.md#navigationbarhidden) +- [`shadowHidden`](navigatorios.md#shadowhidden) +- [`tintColor`](navigatorios.md#tintcolor) +- [`titleTextColor`](navigatorios.md#titletextcolor) +- [`translucent`](navigatorios.md#translucent) + + + + +### Methods + +- [`push`](navigatorios.md#push) +- [`popN`](navigatorios.md#popn) +- [`pop`](navigatorios.md#pop) +- [`replaceAtIndex`](navigatorios.md#replaceatindex) +- [`replace`](navigatorios.md#replace) +- [`replacePrevious`](navigatorios.md#replaceprevious) +- [`popToTop`](navigatorios.md#poptotop) +- [`popToRoute`](navigatorios.md#poptoroute) +- [`replacePreviousAndPop`](navigatorios.md#replacepreviousandpop) +- [`resetTo`](navigatorios.md#resetto) + + + + +--- + +# Reference + +## Props + +### `initialRoute` + +NavigatorIOS uses `route` objects to identify child views, their props, +and navigation bar configuration. Navigation operations such as push +operations expect routes to look like this the `initialRoute`. + +| Type | Required | +| - | - | +| object: {component: function,title: string,titleImage: Image.propTypes.source,passProps: object,backButtonIcon: Image.propTypes.source,backButtonTitle: string,leftButtonIcon: Image.propTypes.source,leftButtonTitle: string,leftButtonSystemIcon: Object.keys(SystemIcons),onLeftButtonPress: function,rightButtonIcon: Image.propTypes.source,rightButtonTitle: string,rightButtonSystemIcon: Object.keys(SystemIcons),onRightButtonPress: function,wrapperStyle: [View](view.md#style),navigationBarHidden: bool,shadowHidden: bool,tintColor: string,barTintColor: string,titleTextColor: string,translucent: bool} | Yes | + + + + +--- + +### `barTintColor` + +The default background color of the navigation bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `interactivePopGestureEnabled` + +Boolean value that indicates whether the interactive pop gesture is +enabled. This is useful for enabling/disabling the back swipe navigation +gesture. + +If this prop is not provided, the default behavior is for the back swipe +gesture to be enabled when the navigation bar is shown and disabled when +the navigation bar is hidden. Once you've provided the +`interactivePopGestureEnabled` prop, you can never restore the default +behavior. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `itemWrapperStyle` + +The default wrapper style for components in the navigator. +A common use case is to set the `backgroundColor` for every scene. + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `navigationBarHidden` + +Boolean value that indicates whether the navigation bar is hidden +by default. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `shadowHidden` + +Boolean value that indicates whether to hide the 1px hairline shadow +by default. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `tintColor` + +The default color used for the buttons in the navigation bar. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `titleTextColor` + +The default text color of the navigation bar title. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `translucent` + +Boolean value that indicates whether the navigation bar is +translucent by default + +| Type | Required | +| - | - | +| bool | No | + + + + + + +## Methods + +### `push()` + +```javascript +push(route: object) +``` + +Navigate forward to a new route. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `popN()` + +```javascript +popN(n: number) +``` + +Go back N scenes at once. When N=1, behavior matches `pop()`. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| n | number | Yes | The number of scenes to pop. | + + + + +--- + +### `pop()` + +```javascript +pop() +``` + +Pop back to the previous scene. + + + +--- + +### `replaceAtIndex()` + +```javascript +replaceAtIndex(route: object, index: number) +``` + +Replace a route in the navigation stack. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that will replace the specified one. | +| index | number | Yes | The route into the stack that should be replaced. If it is negative, it counts from the back of the stack. | + + + + +--- + +### `replace()` + +```javascript +replace(route: object) +``` + +Replace the route for the current scene and immediately +load the view for the new route. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `replacePrevious()` + +```javascript +replacePrevious(route: object) +``` + +Replace the route/view for the previous scene. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to will replace the previous scene. | + + + + +--- + +### `popToTop()` + +```javascript +popToTop() +``` + +Go back to the topmost item in the navigation stack. + + + +--- + +### `popToRoute()` + +```javascript +popToRoute(route: object) +``` + +Go back to the item for a particular route object. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route to navigate to. | + + + + +--- + +### `replacePreviousAndPop()` + +```javascript +replacePreviousAndPop(route: object) +``` + +Replaces the previous route/view and transitions back to it. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that replaces the previous scene. | + + + + +--- + +### `resetTo()` + +```javascript +resetTo(route: object) +``` + +Replaces the top item and pop to it. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| route | object | Yes | The new route that will replace the topmost item. | + + + + diff --git a/website/versioned_docs/version-0.34/pushnotificationios.md b/website/versioned_docs/version-0.34/pushnotificationios.md new file mode 100644 index 00000000000..22b144d98ae --- /dev/null +++ b/website/versioned_docs/version-0.34/pushnotificationios.md @@ -0,0 +1,417 @@ +--- +id: version-0.34-pushnotificationios +title: PushNotificationIOS +original_id: pushnotificationios +--- + +Handle push notifications for your app, including permission handling and +icon badge number. + +To get up and running, [configure your notifications with Apple](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/AddingCapabilities/AddingCapabilities.html#//apple_ref/doc/uid/TP40012582-CH26-SW6) +and your server-side system. To get an idea, [this is the Parse guide](https://parse.com/tutorials/ios-push-notifications). + +[Manually link](linking-libraries-ios.md#manual-linking) the PushNotificationIOS library + +- Add the following to your Project: `node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj` +- Add the following to `Link Binary With Libraries`: `libRCTPushNotification.a` +- Add the following to your `Header Search Paths`: +`$(SRCROOT)/../node_modules/react-native/Libraries/PushNotificationIOS` and set the search to `recursive` + +Finally, to enable support for `notification` and `register` events you need to augment your AppDelegate. + +At the top of your `AppDelegate.m`: + + `#import "RCTPushNotificationManager.h"` + +And then in your AppDelegate implementation add the following: + + ``` + // Required to register for notifications + - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings + { + [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings]; + } + // Required for the register event. + - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken + { + [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken]; + } + // Required for the registrationError event. + - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error + { + [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error]; + } + // Required for the notification event. + - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)notification + { + [RCTPushNotificationManager didReceiveRemoteNotification:notification]; + } + // Required for the localNotification event. + - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification + { + [RCTPushNotificationManager didReceiveLocalNotification:notification]; + } + ``` + + +### Methods + +- [`presentLocalNotification`](pushnotificationios.md#presentlocalnotification) +- [`scheduleLocalNotification`](pushnotificationios.md#schedulelocalnotification) +- [`cancelAllLocalNotifications`](pushnotificationios.md#cancelalllocalnotifications) +- [`setApplicationIconBadgeNumber`](pushnotificationios.md#setapplicationiconbadgenumber) +- [`getApplicationIconBadgeNumber`](pushnotificationios.md#getapplicationiconbadgenumber) +- [`cancelLocalNotifications`](pushnotificationios.md#cancellocalnotifications) +- [`getScheduledLocalNotifications`](pushnotificationios.md#getscheduledlocalnotifications) +- [`addEventListener`](pushnotificationios.md#addeventlistener) +- [`removeEventListener`](pushnotificationios.md#removeeventlistener) +- [`requestPermissions`](pushnotificationios.md#requestpermissions) +- [`abandonPermissions`](pushnotificationios.md#abandonpermissions) +- [`checkPermissions`](pushnotificationios.md#checkpermissions) +- [`getInitialNotification`](pushnotificationios.md#getinitialnotification) +- [`constructor`](pushnotificationios.md#constructor) +- [`getMessage`](pushnotificationios.md#getmessage) +- [`getSound`](pushnotificationios.md#getsound) +- [`getAlert`](pushnotificationios.md#getalert) +- [`getBadgeCount`](pushnotificationios.md#getbadgecount) +- [`getData`](pushnotificationios.md#getdata) + + + + +--- + +# Reference + +## Methods + +### `presentLocalNotification()` + +```javascript +static presentLocalNotification(details) +``` + + +Schedules the localNotification for immediate presentation. + +details is an object containing: + +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. The default value of this property is 0, which means that no badge is displayed. + + + + +--- + +### `scheduleLocalNotification()` + +```javascript +static scheduleLocalNotification(details) +``` + + +Schedules the localNotification for future presentation. + +details is an object containing: + +- `fireDate` : The date and time when the system should deliver the notification. +- `alertBody` : The message displayed in the notification alert. +- `alertAction` : The "action" displayed beneath an actionable notification. Defaults to "view"; +- `soundName` : The sound played when the notification is fired (optional). +- `category` : The category of this notification, required for actionable notifications (optional). +- `userInfo` : An optional object containing additional notification data. +- `applicationIconBadgeNumber` (optional) : The number to display as the app's icon badge. Setting the number to 0 removes the icon badge. + + + + +--- + +### `cancelAllLocalNotifications()` + +```javascript +static cancelAllLocalNotifications() +``` + + +Cancels all scheduled localNotifications + + + + +--- + +### `setApplicationIconBadgeNumber()` + +```javascript +static setApplicationIconBadgeNumber(number) +``` + + +Sets the badge number for the app icon on the home screen + + + + +--- + +### `getApplicationIconBadgeNumber()` + +```javascript +static getApplicationIconBadgeNumber(callback) +``` + + +Gets the current badge number for the app icon on the home screen + + + + +--- + +### `cancelLocalNotifications()` + +```javascript +static cancelLocalNotifications(userInfo) +``` + + +Cancel local notifications. + +Optionally restricts the set of canceled notifications to those +notifications whose `userInfo` fields match the corresponding fields +in the `userInfo` argument. + + + + +--- + +### `getScheduledLocalNotifications()` + +```javascript +static getScheduledLocalNotifications(callback) +``` + + +Gets the local notifications that are currently scheduled. + + + + +--- + +### `addEventListener()` + +```javascript +static addEventListener(type, handler) +``` + + +Attaches a listener to remote or local notification events while the app is running +in the foreground or the background. + +Valid events are: + +- `notification` : Fired when a remote notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `localNotification` : Fired when a local notification is received. The + handler will be invoked with an instance of `PushNotificationIOS`. +- `register`: Fired when the user registers for remote notifications. The + handler will be invoked with a hex string representing the deviceToken. +- `registrationError`: Fired when the user fails to register for remote + notifications. Typically occurs when APNS is having issues, or the device + is a simulator. The handler will be invoked with + {message: string, code: number, details: any}. + + + + +--- + +### `removeEventListener()` + +```javascript +static removeEventListener(type, handler) +``` + + +Removes the event listener. Do this in `componentWillUnmount` to prevent +memory leaks + + + + +--- + +### `requestPermissions()` + +```javascript +static requestPermissions(permissions?) +``` + + +Requests notification permissions from iOS, prompting the user's +dialog box. By default, it will request all notification permissions, but +a subset of these can be requested by passing a map of requested +permissions. +The following permissions are supported: + + - `alert` + - `badge` + - `sound` + +If a map is provided to the method, only the permissions with truthy values +will be requested. + +This method returns a promise that will resolve when the user accepts, +rejects, or if the permissions were previously rejected. The promise +resolves to the current state of the permission. + + + + +--- + +### `abandonPermissions()` + +```javascript +static abandonPermissions() +``` + + +Unregister for all remote notifications received via Apple Push Notification service. + +You should call this method in rare circumstances only, such as when a new version of +the app removes support for all types of remote notifications. Users can temporarily +prevent apps from receiving remote notifications through the Notifications section of +the Settings app. Apps unregistered through this method can always re-register. + + + + +--- + +### `checkPermissions()` + +```javascript +static checkPermissions(callback) +``` + + +See what push permissions are currently enabled. `callback` will be +invoked with a `permissions` object: + + - `alert` :boolean + - `badge` :boolean + - `sound` :boolean + + + + +--- + +### `getInitialNotification()` + +```javascript +static getInitialNotification() +``` + + +This method returns a promise that resolves to either the notification +object if the app was launched by a push notification, or `null` otherwise. + + + + +--- + +### `constructor()` + +```javascript +constructor(nativeNotif) +``` + + +You will never need to instantiate `PushNotificationIOS` yourself. +Listening to the `notification` event and invoking +`getInitialNotification` is sufficient + + + + +--- + +### `getMessage()` + +```javascript +getMessage() +``` + + +An alias for `getAlert` to get the notification's main message string + + + + +--- + +### `getSound()` + +```javascript +getSound() +``` + + +Gets the sound string from the `aps` object + + + + +--- + +### `getAlert()` + +```javascript +getAlert() +``` + + +Gets the notification's main message from the `aps` object + + + + +--- + +### `getBadgeCount()` + +```javascript +getBadgeCount() +``` + + +Gets the badge count number from the `aps` object + + + + +--- + +### `getData()` + +```javascript +getData() +``` + + +Gets the data object on the notif + + + + diff --git a/website/versioned_docs/version-0.34/switch.md b/website/versioned_docs/version-0.34/switch.md new file mode 100644 index 00000000000..ff69203957b --- /dev/null +++ b/website/versioned_docs/version-0.34/switch.md @@ -0,0 +1,133 @@ +--- +id: version-0.34-switch +title: Switch +original_id: switch +--- +Renders a boolean input. + +This is a controlled component that requires an `onValueChange` callback that +updates the `value` prop in order for the component to reflect user actions. +If the `value` prop is not updated, the component will continue to render +the supplied `value` prop instead of the expected result of any user actions. + +@keyword checkbox +@keyword toggle + +### Props + +* [View props...](view.md#props) +- [`disabled`](switch.md#disabled) +- [`onValueChange`](switch.md#onvaluechange) +- [`testID`](switch.md#testid) +- [`value`](switch.md#value) +- [`onTintColor`](switch.md#ontintcolor) +- [`thumbTintColor`](switch.md#thumbtintcolor) +- [`tintColor`](switch.md#tintcolor) + + + + + + +--- + +# Reference + +## Props + +### `disabled` + +If true the user won't be able to toggle the switch. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onValueChange` + +Invoked with the new value when the value changes. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `value` + +The value of the switch. If true the switch will be turned on. +Default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onTintColor` + +Background color when the switch is turned on. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `thumbTintColor` + +Color of the foreground switch grip. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `tintColor` + +Border color when the switch is turned off. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.34/text-style-props.md b/website/versioned_docs/version-0.34/text-style-props.md new file mode 100644 index 00000000000..845c57b0c4a --- /dev/null +++ b/website/versioned_docs/version-0.34/text-style-props.md @@ -0,0 +1,283 @@ +--- +id: version-0.34-text-style-props +title: Text Style Props +original_id: text-style-props +--- +### Props + +- [`textShadowColor`](text-style-props.md#textshadowcolor) +- [`color`](text-style-props.md#color) +- [`fontSize`](text-style-props.md#fontsize) +- [`fontStyle`](text-style-props.md#fontstyle) +- [`fontWeight`](text-style-props.md#fontweight) +- [`lineHeight`](text-style-props.md#lineheight) +- [`textAlign`](text-style-props.md#textalign) +- [`textDecorationLine`](text-style-props.md#textdecorationline) +- [`fontFamily`](text-style-props.md#fontfamily) +- [`textShadowOffset`](text-style-props.md#textshadowoffset) +- [`textShadowRadius`](text-style-props.md#textshadowradius) +- [`textAlignVertical`](text-style-props.md#textalignvertical) +- [`fontVariant`](text-style-props.md#fontvariant) +- [`letterSpacing`](text-style-props.md#letterspacing) +- [`textDecorationColor`](text-style-props.md#textdecorationcolor) +- [`textDecorationStyle`](text-style-props.md#textdecorationstyle) +- [`writingDirection`](text-style-props.md#writingdirection) + + + + + + +--- + +# Reference + +## Props + +### `textShadowColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `color` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `fontSize` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `fontStyle` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['normal', 'italic']) | No | + + + + +--- + +### `fontWeight` + +Specifies font weight. The values 'normal' and 'bold' are supported for +most fonts. Not all fonts have a variant for each of the numeric values, +in that case the closest one is chosen. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) | No | + + + + +--- + +### `lineHeight` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `textAlign` + +Specifies text alignment. The value 'justify' is only supported on iOS and +fallbacks to `left` on Android. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) | No | + + + + +--- + +### `textDecorationLine` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) | No | + + + + +--- + +### `fontFamily` + + + +| Type | Required | +| - | - | +| ReactPropTypes.string | No | + + + + +--- + +### `textShadowOffset` + + + +| Type | Required | +| - | - | +| ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) | No | + + + + +--- + +### `textShadowRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `textAlignVertical` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) | No | Android | + + + + +--- + +### `fontVariant` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.arrayOf( + ReactPropTypes.oneOf([ + 'small-caps', + 'oldstyle-nums', + 'lining-nums', + 'tabular-nums', + 'proportional-nums', + ]) +) | No | iOS | + + + + +--- + +### `letterSpacing` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | iOS | + + + + +--- + +### `textDecorationColor` + + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | iOS | + + + + +--- + +### `textDecorationStyle` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) | No | iOS | + + + + +--- + +### `writingDirection` + + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.34/text.md b/website/versioned_docs/version-0.34/text.md new file mode 100644 index 00000000000..1cfb0e4827b --- /dev/null +++ b/website/versioned_docs/version-0.34/text.md @@ -0,0 +1,355 @@ +--- +id: version-0.34-text +title: Text +original_id: text +--- +A React component for displaying text. + +`Text` supports nesting, styling, and touch handling. + +In the following example, the nested title and body text will inherit the `fontFamily` from +`styles.baseText`, but the title provides its own additional styles. The title and body will +stack on top of each other on account of the literal newlines: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, Text, StyleSheet } from 'react-native'; + +class TextInANest extends Component { + constructor(props) { + super(props); + this.state = { + titleText: "Bird's Nest", + bodyText: 'This is not really a bird nest.' + }; + } + + render() { + return ( + + + {this.state.titleText}

+ + + {this.state.bodyText} + + + ); + } +} + +const styles = StyleSheet.create({ + baseText: { + fontFamily: 'Cochin', + }, + titleText: { + fontSize: 20, + fontWeight: 'bold', + }, +}); + +// App registration and rendering +AppRegistry.registerComponent('TextInANest', () => TextInANest); +``` + +### Props + +- [`style`](text.md#style) +- [`accessible`](text.md#accessible) +- [`numberOfLines`](text.md#numberoflines) +- [`onLayout`](text.md#onlayout) +- [`onLongPress`](text.md#onlongpress) +- [`onPress`](text.md#onpress) +- [`ellipsizeMode`](text.md#ellipsizemode) +- [`testID`](text.md#testid) +- [`selectable`](text.md#selectable) +- [`adjustsFontSizeToFit`](text.md#adjustsfontsizetofit) +- [`allowFontScaling`](text.md#allowfontscaling) +- [`minimumFontScale`](text.md#minimumfontscale) +- [`suppressHighlighting`](text.md#suppresshighlighting) + + + + + + +--- + +# Reference + +## Props + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [View Style Props...](view-style-props.md#style) + + - **`textShadowColor`**: [color](colors.md) + + - **`color`**: [color](colors.md) + + - **`fontSize`**: ReactPropTypes.number + + - **`fontStyle`**: ReactPropTypes.oneOf(['normal', 'italic']) + + - **`fontWeight`**: ReactPropTypes.oneOf( + ['normal' /*default*/, 'bold', + '100', '200', '300', '400', '500', '600', '700', '800', '900'] +) + + Specifies font weight. The values 'normal' and 'bold' are supported for + most fonts. Not all fonts have a variant for each of the numeric values, + in that case the closest one is chosen. + + - **`lineHeight`**: ReactPropTypes.number + + - **`textAlign`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'left', 'right', 'center', 'justify'] +) + + Specifies text alignment. The value 'justify' is only supported on iOS and + fallbacks to `left` on Android. + + - **`textDecorationLine`**: ReactPropTypes.oneOf( + ['none' /*default*/, 'underline', 'line-through', 'underline line-through'] +) + + - **`fontFamily`**: ReactPropTypes.string + + - **`textShadowOffset`**: ReactPropTypes.shape( + {width: ReactPropTypes.number, height: ReactPropTypes.number} +) + + - **`textShadowRadius`**: ReactPropTypes.number + + - **`textAlignVertical`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'top', 'bottom', 'center'] +) (_Android_) + + - **`fontVariant`**: ReactPropTypes.arrayOf( + ReactPropTypes.oneOf([ + 'small-caps', + 'oldstyle-nums', + 'lining-nums', + 'tabular-nums', + 'proportional-nums', + ]) +) (_iOS_) + + - **`letterSpacing`**: ReactPropTypes.number (_iOS_) + + - **`textDecorationColor`**: [color](colors.md) (_iOS_) + + - **`textDecorationStyle`**: ReactPropTypes.oneOf( + ['solid' /*default*/, 'double', 'dotted','dashed'] +) (_iOS_) + + - **`writingDirection`**: ReactPropTypes.oneOf( + ['auto' /*default*/, 'ltr', 'rtl'] +) (_iOS_) + + + +--- + +### `accessible` + +When set to `true`, indicates that the view is an accessibility element. The default value +for a `Text` element is `true`. + +See the +[Accessibility guide](/react-native/accessibility.md#accessible-ios-android) +for more information. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `numberOfLines` + +Used to truncate the text with an ellipsis after computing the text +layout, including line wrapping, such that the total number of lines +does not exceed this number. + +This prop is commonly used with `ellipsizeMode`. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with + + `{nativeEvent: {layout: {x, y, width, height}}}` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onLongPress` + +This function is called on long press. + +e.g., `onLongPress={this.increaseSize}>`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onPress` + +This function is called on press. + +e.g., `onPress={() => console.log('1st')}`` + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `ellipsizeMode` + +This can be one of the following values: + +- `head` - The line is displayed so that the end fits in the container and the missing text +at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz" +- `middle` - The line is displayed so that the beginning and end fit in the container and the +missing text in the middle is indicated by an ellipsis glyph. "ab...yz" +- `tail` - The line is displayed so that the beginning fits in the container and the +missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..." +- `clip` - Lines are not drawn past the edge of the text container. + +The default is `tail`. + +`numberOfLines` must be set in conjunction with this prop. + +> `clip` is working only for iOS + +| Type | Required | +| - | - | +| enum('head', 'middle', 'tail', 'clip') | No | + + + + +--- + +### `testID` + +Used to locate this view in end-to-end tests. + +| Type | Required | +| - | - | +| string | No | + + + + +--- + +### `selectable` + +Lets the user select text, to use the native copy and paste functionality. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | Android | + + + + +--- + +### `adjustsFontSizeToFit` + +Specifies whether font should be scaled down automatically to fit given style constraints. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `allowFontScaling` + +Specifies whether fonts should scale to respect Text Size accessibility setting on iOS. The +default is `true`. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `minimumFontScale` + +Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `suppressHighlighting` + +When `true`, no visual change is made when text is pressed down. By +default, a gray oval highlights the text on press down. + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.34/textinput.md b/website/versioned_docs/version-0.34/textinput.md new file mode 100644 index 00000000000..d25361e4af1 --- /dev/null +++ b/website/versioned_docs/version-0.34/textinput.md @@ -0,0 +1,852 @@ +--- +id: version-0.34-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + constructor(props) { + super(props); + this.state = { text: 'Useless Placeholder' }; + } + + render() { + return ( + this.setState({text})} + value={this.state.text} + /> + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + render() { + return ( + + ); + } +} + +class UselessTextInputMultiline extends Component { + constructor(props) { + super(props); + this.state = { + text: 'Useless Multiline Placeholder', + }; + } + + // If you type something in the text box that is a color, the background will change to that + // color. + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'AwesomeProject', + () => UselessTextInputMultiline +); +``` + +`TextInput` has by default a border at the bottom of its view. This border +has its padding set by the background image provided by the system, and it +cannot be changed. Solutions to avoid this is to either not set height +explicitly, case in which the system will take care of displaying the border +in the correct position, or to not display the border by setting +`underlineColorAndroid` to transparent. + +### Props + +* [View props...](view.md#props) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onContentSizeChange`](textinput.md#oncontentsizechange) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selection`](textinput.md#selection) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`inlineImageLeft`](textinput.md#inlineimageleft) +- [`inlineImagePadding`](textinput.md#inlineimagepadding) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`dataDetectorTypes`](textinput.md#datadetectortypes) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `autoCapitalize` + +Can tell `TextInput` to automatically capitalize certain characters. + +- `characters`: all characters. +- `words`: first letter of each word. +- `sentences`: first letter of each sentence (*default*). +- `none`: don't auto capitalize anything. + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + 'none', + 'sentences', + 'words', + 'characters', +]) | No | + + + + +--- + +### `autoFocus` + +If `true`, focuses the input on `componentDidMount`. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `blurOnSubmit` + +If `true`, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting `blurOnSubmit` +to `true` means that pressing return will blur the field and trigger the +`onSubmitEditing` event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you do not want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `editable` + +If `false`, text is not editable. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- `default` +- `numeric` +- `email-address` +- `phone-pad` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'default', + 'email-address', + 'numeric', + 'phone-pad', + // iOS-only + 'ascii-capable', + 'numbers-and-punctuation', + 'url', + 'number-pad', + 'name-phone-pad', + 'decimal-pad', + 'twitter', + 'web-search', +]) | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `multiline` + +If `true`, the text input can be multiple lines. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onContentSizeChange` + +Callback that is called when the text input's content size changes. +This will be called with +`{ nativeEvent: { contentSize: { width, height } } }`. + +Only called for multiline text inputs. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if `multiline={true}` is specified. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `autoCorrect` + +If `false`, disables auto-correct. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +*Cross platform* + +The following values work across platforms: + +- `done` +- `go` +- `next` +- `search` +- `send` + +*Android Only* + +The following values work on Android only: + +- `none` +- `previous` + +*iOS Only* + +The following values work on iOS only: + +- `default` +- `emergency-call` +- `google` +- `join` +- `route` +- `yahoo` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'done', + 'go', + 'next', + 'search', + 'send', + // Android-only + 'none', + 'previous', + // iOS-only + 'default', + 'emergency-call', + 'google', + 'join', + 'route', + 'yahoo', +]) | No | + + + + +--- + +### `secureTextEntry` + +If `true`, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectTextOnFocus` + +If `true`, all text will automatically be selected on focus. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selection` + +The start and end of the text input's selection. Set start and end to +the same value to position the cursor. + +| Type | Required | +| - | - | +| PropTypes.shape({ + start: PropTypes.number.isRequired, + end: PropTypes.number, +}) | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on iOS) color of the text input. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + +[Styles](/react-native/style.md) + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. `TextInput` is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses, this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `inlineImageLeft` + +If defined, the provided image resource will be rendered on the left. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `inlineImagePadding` + +Padding between the inline image, if any, and the text input itself. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a `TextInput`. Use it with multiline set to +`true` to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the `TextInput` underline. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'never', + 'while-editing', + 'unless-editing', + 'always', +]) | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If `true`, clears the text field automatically when editing begins. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `dataDetectorTypes` + +Determines the types of data converted to clickable URLs in the text input. +Only valid if `multiline={true}` and `editable={false}`. +By default no data types are detected. + +You can provide one type or an array of many types. + +Possible values for `dataDetectorTypes` are: + +- `'phoneNumber'` +- `'link'` +- `'address'` +- `'calendarEvent'` +- `'none'` +- `'all'` + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + PropTypes.oneOf(DataDetectorTypes), + PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), +]) | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If `true`, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is `false`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'default', + 'light', + 'dark', +]) | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before `onChange` callbacks. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `selectionState` + +An instance of `DocumentSelectionState`, this is some state that is responsible for +maintaining selection information for a document. + +Some functionality that can be performed with this instance is: + +- `blur()` +- `focus()` +- `update()` + +> You can reference `DocumentSelectionState` in +> [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns `true` if the input is currently focused; `false` otherwise. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the `TextInput`. + + + diff --git a/website/versioned_docs/version-0.34/vibration.md b/website/versioned_docs/version-0.34/vibration.md new file mode 100644 index 00000000000..8314d1876c4 --- /dev/null +++ b/website/versioned_docs/version-0.34/vibration.md @@ -0,0 +1,44 @@ +--- +id: version-0.34-vibration +title: Vibration +original_id: vibration +--- + + + +### Methods + +- [`vibrate`](vibration.md#vibrate) +- [`cancel`](vibration.md#cancel) + + + + +--- + +# Reference + +## Methods + +### `vibrate()` + +```javascript +static vibrate(pattern, repeat) +``` + + + +--- + +### `cancel()` + +```javascript +static cancel() +``` + + +Stop vibration + + + + diff --git a/website/versioned_docs/version-0.35/geolocation.md b/website/versioned_docs/version-0.35/geolocation.md new file mode 100644 index 00000000000..0dcc3d8da54 --- /dev/null +++ b/website/versioned_docs/version-0.35/geolocation.md @@ -0,0 +1,94 @@ +--- +id: version-0.35-geolocation +title: Geolocation +original_id: geolocation +--- + +The Geolocation API extends the web spec: +https://developer.mozilla.org/en-US/docs/Web/API/Geolocation + +As a browser polyfill, this API is available through the `navigator.geolocation` +global - you do not need to `import` it. + +### iOS +You need to include the `NSLocationWhenInUseUsageDescription` key +in Info.plist to enable geolocation. Geolocation is enabled by default +when you create a project with `react-native init`. + +### Android +To request access to location, you need to add the following line to your +app's `AndroidManifest.xml`: + +`` + +Android API >= 18 Positions will also contain a `mocked` boolean to indicate if position +was created from a mock provider. + + + +### Methods + +- [`getCurrentPosition`](geolocation.md#getcurrentposition) +- [`watchPosition`](geolocation.md#watchposition) +- [`clearWatch`](geolocation.md#clearwatch) +- [`stopObserving`](geolocation.md#stopobserving) + + + + +--- + +# Reference + +## Methods + +### `getCurrentPosition()` + +```javascript +static getCurrentPosition(geo_success, geo_error?, geo_options?) +``` + + +Invokes the success callback once with the latest location info. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool) +On Android, this can return almost immediately if the location is cached or +request an update, which might take a while. + + + + +--- + +### `watchPosition()` + +```javascript +static watchPosition(success, error?, options?) +``` + + +Invokes the success callback whenever the location changes. Supported +options: timeout (ms), maximumAge (ms), enableHighAccuracy (bool), distanceFilter(m) + + + + +--- + +### `clearWatch()` + +```javascript +static clearWatch(watchID) +``` + + + +--- + +### `stopObserving()` + +```javascript +static stopObserving() +``` + + + diff --git a/website/versioned_docs/version-0.35/image.md b/website/versioned_docs/version-0.35/image.md new file mode 100644 index 00000000000..915a1fd19bc --- /dev/null +++ b/website/versioned_docs/version-0.35/image.md @@ -0,0 +1,535 @@ +--- +id: version-0.35-image +title: Image +original_id: 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. + +This example shows both fetching and displaying an image from local storage as well as on from +network. + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image } from 'react-native'; + +class DisplayAnImage extends Component { + render() { + return ( + + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage); +``` + +You can also add `style` to an image: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, Image, StyleSheet} from 'react-native'; + +const styles = StyleSheet.create({ + stretch: { + width: 50, + height: 200 + } +}); + +class DisplayAnImageWithStyle extends Component { + render() { + return ( + + + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'DisplayAnImageWithStyle', + () => DisplayAnImageWithStyle +); +``` + +### GIF and WebP support on Android + +By default, GIF and WebP are not supported on Android. + +You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app. + +``` +dependencies { + // If your app supports Android versions before Ice Cream Sandwich (API level 14) + compile 'com.facebook.fresco:animated-base-support:0.11.0' + + // For animated GIF support + compile 'com.facebook.fresco:animated-gif:0.11.0' + + // For WebP support, including animated WebP + compile 'com.facebook.fresco:animated-webp:0.11.0' + compile 'com.facebook.fresco:webpsupport:0.11.0' + + // For WebP support, without animations + compile 'com.facebook.fresco:webpsupport:0.11.0' +} +``` + +Also, if you use GIF with ProGuard, you will need to add this rule in `proguard-rules.pro` : +``` +-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { + public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); +} +``` + +### Props + +- [`resizeMethod`](image.md#resizemethod) +- [`onLayout`](image.md#onlayout) +- [`onLoadEnd`](image.md#onloadend) +- [`onLoadStart`](image.md#onloadstart) +- [`resizeMode`](image.md#resizemode) +- [`source`](image.md#source) +- [`style`](image.md#style) +- [`testID`](image.md#testid) +- [`onLoad`](image.md#onload) +- [`accessibilityLabel`](image.md#accessibilitylabel) +- [`accessible`](image.md#accessible) +- [`blurRadius`](image.md#blurradius) +- [`capInsets`](image.md#capinsets) +- [`defaultSource`](image.md#defaultsource) +- [`onError`](image.md#onerror) +- [`onPartialLoad`](image.md#onpartialload) +- [`onProgress`](image.md#onprogress) + + + + +### Methods + +- [`getSize`](image.md#getsize) +- [`prefetch`](image.md#prefetch) + + + + +--- + +# Reference + +## Props + +### `resizeMethod` + +The mechanism that should be used to resize the image when the image's dimensions +differ from the image view's dimensions. Defaults to `auto`. + +- `auto`: Use heuristics to pick between `resize` and `scale`. + +- `resize`: A software operation which changes the encoded image in memory before it +gets decoded. This should be used instead of `scale` when the image is much larger +than the view. + +- `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is +faster (usually hardware accelerated) and produces higher quality images. This +should be used if the image is smaller than the view. It should also be used if the +image is slightly bigger than the view. + +More details about `resize` and `scale` can be found at http://frescolib.org/resizing-rotating.md. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf(['auto', 'resize', 'scale']) | No | Android | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with +`{nativeEvent: {layout: {x, y, width, height}}}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadEnd` + +Invoked when load either succeeds or fails. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLoadStart` + +Invoked on load start. + +e.g., `onLoadStart={(e) => this.setState({loading: true})}` + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `resizeMode` + +Determines how to resize the image when the frame doesn't match the raw +image dimensions. + +- `cover`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal +to or larger than the corresponding dimension of the view (minus padding). + +- `contain`: Scale the image uniformly (maintain the image's aspect ratio) +so that both dimensions (width and height) of the image will be equal to +or less than the corresponding dimension of the view (minus padding). + +- `stretch`: Scale width and height independently, This may change the +aspect ratio of the src. + +- `repeat`: Repeat the image to cover the frame of the view. The +image will keep it's size and aspect ratio. (iOS only) + +| Type | Required | +| - | - | +| PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']) | No | + + + + +--- + +### `source` + +The image source (either a remote URL or a local file resource). + +This prop can also contain several remote URLs, specified together with +their width and height and potentially with scale/other URI arguments. +The native side will then choose the best `uri` to display based on the +measured size of the image container. + +| Type | Required | +| - | - | +| ImageSourcePropType | No | + + + + +--- + +### `style` + +> `ImageResizeMode` is an `Enum` for different image resizing modes, set via the +> `resizeMode` style property on `Image` components. The values are `contain`, `cover`, +> `stretch`, `center`, `repeat`. + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderRadius`**: ReactPropTypes.number + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`overflow`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`resizeMode`**: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)) + + - **`tintColor`**: [color](colors.md) + + Changes the color of all the non-transparent pixels to the tintColor. + + - **`overlayColor`**: ReactPropTypes.string (_Android_) + + When the image has rounded corners, specifying an overlayColor will + cause the remaining space in the corners to be filled with a solid color. + This is useful in cases which are not supported by the Android + implementation of rounded corners: + - Certain resize modes, such as 'contain' + - Animated GIFs + + A typical way to use this prop is with images displayed on a solid + background and setting the `overlayColor` to the same color + as the background. + + For details of how this works under the hood, see + http://frescolib.org/rounded-corners-and-circles.md + + + + + +--- + +### `testID` + +A unique identifier for this element to be used in UI Automation +testing scripts. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `onLoad` + +Invoked when load completes successfully. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `accessibilityLabel` + +The text that's read by the screen reader when the user interacts with +the image. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | iOS | + + + + +--- + +### `accessible` + +When true, indicates the image is an accessibility element. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `blurRadius` + +blurRadius: the blur radius of the blur filter added to the image + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | iOS | + + + + +--- + +### `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 in the +[official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets). + + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `defaultSource` + +A static image to display while loading the image source. + +- `uri` - a string representing the resource identifier for the image, which +should be either a local file path or the name of a static image resource +(which should be wrapped in the `require('./path/to/image.png')` function). +- `width`, `height` - can be specified if known at build time, in which case +these will be used to set the default `` component dimensions. +- `scale` - used to indicate the scale factor of the image. Defaults to 1.0 if +unspecified, meaning that one image pixel equates to one display point / DIP. +- `number` - Opaque type returned by something like `require('./image.jpg')`. + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + // TODO: Tooling to support documenting these directly and having them display in the docs. + PropTypes.shape({ + uri: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + scale: PropTypes.number, + }), + PropTypes.number, +]) | No | iOS | + + + + +--- + +### `onError` + +Invoked on load error with `{nativeEvent: {error}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onPartialLoad` + +Invoked when a partial load of the image is complete. The definition of +what constitutes a "partial load" is loader specific though this is meant +for progressive JPEG loads. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `onProgress` + +Invoked on download progress with `{nativeEvent: {loaded, total}}`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + + + +## Methods + +### `getSize()` + +```javascript +static getSize(uri: string, success: function, failure: function): +``` + +Retrieve the width and height (in pixels) of an image prior to displaying it. +This method can fail if the image cannot be found, or fails to download. + +In order to retrieve the image dimensions, the image may first need to be +loaded or downloaded, after which it will be cached. This means that in +principle you could use this method to preload images, however it is not +optimized for that purpose, and may in future be implemented in a way that +does not fully load/download the image data. A proper, supported way to +preload images will be provided as a separate API. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| uri | string | Yes | The location of the image. | +| success | function | Yes | The function that will be called if the image was sucessfully found and widthand height retrieved. | +| failure | function | Yes | The function that will be called if there was an error, such as failing toto retrieve the image. | + + + + +--- + +### `prefetch()` + +```javascript +static prefetch(url: string): +``` + +Prefetches a remote image for later use by downloading it to the disk +cache + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| url | string | Yes | The remote location of the image. | + + + + diff --git a/website/versioned_docs/version-0.35/permissionsandroid.md b/website/versioned_docs/version-0.35/permissionsandroid.md new file mode 100644 index 00000000000..3ab120162b1 --- /dev/null +++ b/website/versioned_docs/version-0.35/permissionsandroid.md @@ -0,0 +1,104 @@ +--- +id: version-0.35-permissionsandroid +title: PermissionsAndroid +original_id: permissionsandroid +--- + +`PermissionsAndroid` provides access to Android M's new permissions model. +Some permissions are granted by default when the application is installed +so long as they appear in `AndroidManifest.xml`. However, "dangerous" +permissions require a dialog prompt. You should use this module for those +permissions. + +On devices before SDK version 23, the permissions are automatically granted +if they appear in the manifest, so `checkPermission` and `requestPermission` +should always be true. + +If a user has previously turned off a permission that you prompt for, the OS +will advise your app to show a rationale for needing the permission. The +optional `rationale` argument will show a dialog prompt only if +necessary - otherwise the normal permission prompt will appear. + +### Example +``` +async function requestCameraPermission() { + try { + const granted = await PermissionsAndroid.requestPermission( + PermissionsAndroid.PERMISSIONS.CAMERA, + { + 'title': 'Cool Photo App Camera Permission', + 'message': 'Cool Photo App needs access to your camera ' + + 'so you can take awesome pictures.' + } + ) + if (granted) { + console.log("You can use the camera") + } else { + console.log("Camera permission denied") + } + } catch (err) { + console.warn(err) + } +} +``` + + +### Methods + +- [`constructor`](permissionsandroid.md#constructor) +- [`checkPermission`](permissionsandroid.md#checkpermission) +- [`requestPermission`](permissionsandroid.md#requestpermission) + + + + +--- + +# Reference + +## Methods + +### `constructor()` + +```javascript +constructor() +``` + + + +--- + +### `checkPermission()` + +```javascript +checkPermission(permission) +``` + + +Returns a promise resolving to a boolean value as to whether the specified +permissions has been granted + + + + +--- + +### `requestPermission()` + +```javascript +requestPermission(permission, rationale?) +``` + + +Prompts the user to enable a permission and returns a promise resolving to a +boolean value indicating whether the user allowed or denied the request + +If the optional rationale argument is included (which is an object with a +`title` and `message`), this function checks with the OS whether it is +necessary to show a dialog explaining why the permission is needed +(https://developer.android.com/training/permissions/requesting.html#explain) +and then shows the system permission dialog + + + + diff --git a/website/versioned_docs/version-0.35/toastandroid.md b/website/versioned_docs/version-0.35/toastandroid.md new file mode 100644 index 00000000000..113b290af16 --- /dev/null +++ b/website/versioned_docs/version-0.35/toastandroid.md @@ -0,0 +1,83 @@ +--- +id: version-0.35-toastandroid +title: ToastAndroid +original_id: toastandroid +--- + +This exposes the native ToastAndroid module as a JS module. This has a function 'show' +which takes the following parameters: + +1. String message: A string with the text to toast +2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG + +There is also a function `showWithGravity` to specify the layout gravity. May be +ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER. + +Basic usage: +```javascript +ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT); +ToastAndroid.showWithGravity('All Your Base Are Belong To Us', ToastAndroid.SHORT, ToastAndroid.CENTER); +``` + + +### Methods + +- [`show`](toastandroid.md#show) +- [`showWithGravity`](toastandroid.md#showwithgravity) + + +### Properties + +- [`SHORT`](toastandroid.md#short) +- [`LONG`](toastandroid.md#long) +- [`TOP`](toastandroid.md#top) +- [`BOTTOM`](toastandroid.md#bottom) +- [`CENTER`](toastandroid.md#center) + + + + +--- + +# Reference + +## Methods + +### `show()` + +```javascript +static show(message, duration) +``` + + + +--- + +### `showWithGravity()` + +```javascript +static showWithGravity(message, duration, gravity) +``` + + + +## Properties + + + +--- + + + +--- + + + +--- + + + +--- + + + diff --git a/website/versioned_docs/version-0.36/animated.md b/website/versioned_docs/version-0.36/animated.md new file mode 100644 index 00000000000..264e419b837 --- /dev/null +++ b/website/versioned_docs/version-0.36/animated.md @@ -0,0 +1,691 @@ +--- +id: version-0.36-animated +title: Animated +original_id: animated +--- + +Animations are an important part of modern UX, and the `Animated` +library is designed to make them fluid, powerful, and easy to build and +maintain. + +The simplest workflow is to create an `Animated.Value`, hook it up to one or +more style attributes of an animated component, and then drive updates either +via animations, such as `Animated.timing`, or by hooking into gestures like +panning or scrolling via `Animated.event`. `Animated.Value` can also bind to +props other than style, and can be interpolated as well. Here is a basic +example of a container view that will fade in when it's mounted: + +```javascript + class FadeInView extends React.Component { + constructor(props) { + super(props); + this.state = { + fadeAnim: new Animated.Value(0), // init opacity 0 + }; + } + componentDidMount() { + Animated.timing( // Uses easing functions + this.state.fadeAnim, // The value to drive + {toValue: 1} // Configuration + ).start(); // Don't forget start! + } + render() { + return ( + // Binds + {this.props.children} + + ); + } + } +``` + +Note that only animatable components can be animated. `View`, `Text`, and +`Image` are already provided, and you can create custom ones with +`createAnimatedComponent`. These special components do the magic of binding +the animated values to the properties, and do targeted native updates to +avoid the cost of the react render and reconciliation process on every frame. +They also handle cleanup on unmount so they are safe by default. + +Animations are heavily configurable. Custom and pre-defined easing +functions, delays, durations, decay factors, spring constants, and more can +all be tweaked depending on the type of animation. + +A single `Animated.Value` can drive any number of properties, and each +property can be run through an interpolation first. An interpolation maps +input ranges to output ranges, typically using a linear interpolation but +also supports easing functions. By default, it will extrapolate the curve +beyond the ranges given, but you can also have it clamp the output value. + +For example, you may want to think about your `Animated.Value` as going from +0 to 1, but animate the position from 150px to 0px and the opacity from 0 to +1. This can easily be done by modifying `style` in the example above like so: + +```javascript + style={{ + opacity: this.state.fadeAnim, // Binds directly + transform: [{ + translateY: this.state.fadeAnim.interpolate({ + inputRange: [0, 1], + outputRange: [150, 0] // 0 : 150, 0.5 : 75, 1 : 0 + }), + }], + }}> +``` + +Animations can also be combined in complex ways using composition functions +such as `sequence` and `parallel`, and can also be chained together simply +by setting the `toValue` of one animation to be another `Animated.Value`. + +`Animated.ValueXY` is handy for 2D animations, like panning, and there are +other helpful additions like `setOffset` and `getLayout` to aid with typical +interaction patterns, like drag-and-drop. + +You can see more example usage in `AnimationExample.js`, the Gratuitous +Animation App, and [Animations documentation guide](animations.md). + +Note that `Animated` is designed to be fully serializable so that animations +can be run in a high performance way, independent of the normal JavaScript +event loop. This does influence the API, so keep that in mind when it seems a +little trickier to do something compared to a fully synchronous system. +Checkout `Animated.Value.addListener` as a way to work around some of these +limitations, but use it sparingly since it might have performance +implications in the future. + + +### Methods + +- [`decay`](animated.md#decay) +- [`timing`](animated.md#timing) +- [`spring`](animated.md#spring) +- [`add`](animated.md#add) +- [`divide`](animated.md#divide) +- [`multiply`](animated.md#multiply) +- [`modulo`](animated.md#modulo) +- [`diffClamp`](animated.md#diffclamp) +- [`delay`](animated.md#delay) +- [`sequence`](animated.md#sequence) +- [`parallel`](animated.md#parallel) +- [`stagger`](animated.md#stagger) +- [`event`](animated.md#event) +- [`createAnimatedComponent`](animated.md#createanimatedcomponent) + + +### Properties + +- [`Value`](animated.md#value) +- [`ValueXY`](animated.md#valuexy) + + +### Classes + +- [`AnimatedValue`](animated.md#animatedvalue) +- [`AnimatedValueXY`](animated.md#animatedvaluexy) +- [`AnimatedProps`](animated.md#animatedprops) + + + + +--- + +# Reference + +## Methods + +### `decay()` + +```javascript +static decay(value, config) +``` + + +Animates a value from an initial velocity to zero based on a decay +coefficient. + + + + +--- + +### `timing()` + +```javascript +static timing(value, config) +``` + + +Animates a value along a timed easing curve. The `Easing` module has tons +of pre-defined curves, or you can use your own function. + + + + +--- + +### `spring()` + +```javascript +static spring(value, config) +``` + + +Spring animation based on Rebound and Origami. Tracks velocity state to +create fluid motions as the `toValue` updates, and can be chained together. + + + + +--- + +### `add()` + +```javascript +static add(a, b) +``` + + +Creates a new Animated value composed from two Animated values added +together. + + + + +--- + +### `divide()` + +```javascript +static divide(a, b) +``` + + +Creates a new Animated value composed by dividing the first Animated value +by the second Animated value. + + + + +--- + +### `multiply()` + +```javascript +static multiply(a, b) +``` + + +Creates a new Animated value composed from two Animated values multiplied +together. + + + + +--- + +### `modulo()` + +```javascript +static modulo(a, modulus) +``` + + +Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value + + + + +--- + +### `diffClamp()` + +```javascript +static diffClamp(a, min, max) +``` + + +Create a new Animated value that is limited between 2 values. It uses the +difference between the last value so even if the value is far from the bounds +it will start changing when the value starts getting closer again. +(`value = clamp(value + diff, min, max)`). + +This is useful with scroll events, for example, to show the navbar when +scrolling up and to hide it when scrolling down. + + + + +--- + +### `delay()` + +```javascript +static delay(time) +``` + + +Starts an animation after the given delay. + + + + +--- + +### `sequence()` + +```javascript +static sequence(animations) +``` + + +Starts an array of animations in order, waiting for each to complete +before starting the next. If the current running animation is stopped, no +following animations will be started. + + + + +--- + +### `parallel()` + +```javascript +static parallel(animations, config?) +``` + + +Starts an array of animations all at the same time. By default, if one +of the animations is stopped, they will all be stopped. You can override +this with the `stopTogether` flag. + + + + +--- + +### `stagger()` + +```javascript +static stagger(time, animations) +``` + + +Array of animations may run in parallel (overlap), but are started in +sequence with successive delays. Nice for doing trailing effects. + + + + +--- + +### `event()` + +```javascript +static event(argMapping, config?) +``` + + + Takes an array of mappings and extracts values from each arg accordingly, + then calls `setValue` on the mapped outputs. e.g. + +```javascript + onScroll={Animated.event( + [{nativeEvent: {contentOffset: {x: this._scrollX}}}] + {listener}, // Optional async listener + ) + ... + onPanResponderMove: Animated.event([ + null, // raw event arg ignored + {dx: this._panX}, // gestureState arg + ]), +``` + + + + +--- + +### `createAnimatedComponent()` + +```javascript +static createAnimatedComponent(Component) +``` + + +Make any React component Animatable. Used to create `Animated.View`, etc. + + + + +## Properties + + + +--- + + + +## Classes + +## class AnimatedValue +Standard value for driving animations. One `Animated.Value` can drive +multiple properties in a synchronized fashion, but can only be driven by one +mechanism at a time. Using a new mechanism (e.g. starting a new animation, +or calling `setValue`) will stop any previous ones. + + +### Methods + +### `constructor()` + +```javascript +constructor(value) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + +Directly set the value. This will stop any animations running on the value +and update all the bound properties. + + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + +Sets an offset that is applied on top of whatever value is set, whether via +`setValue`, an animation, or `Animated.event`. Useful for compensating +things like the start of a pan gesture. + + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + +Merges the offset value into the base value and resets the offset to zero. +The final output of the value is unchanged. + + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + +Adds an asynchronous listener to the value so you can observe updates from +animations. This is useful because there is no way to +synchronously read the value because it might be driven natively. + + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `removeAllListeners()` + +```javascript +removeAllListeners() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + +Stops any running animation or tracking. `callback` is invoked with the +final value after stopping the animation, which is useful for updating +state to match the animation position with layout. + + + + +--- + +### `interpolate()` + +```javascript +interpolate(config) +``` + + +Interpolates the value before updating the property, e.g. mapping 0-1 to +0-10. + + + + +--- + +### `animate()` + +```javascript +animate(animation, callback) +``` + + +Typically only used internally, but could be used by a custom Animation +class. + + + + +--- + +### `stopTracking()` + +```javascript +stopTracking() +``` + + +Typically only used internally. + + + + +--- + +### `track()` + +```javascript +track(tracking) +``` + + +Typically only used internally. + + + + +--- + +## class AnimatedValueXY +2D Value for driving 2D animations, such as pan gestures. Almost identical +API to normal `Animated.Value`, but multiplexed. Contains two regular +`Animated.Value`s under the hood. Example: + +```javascript + class DraggableView extends React.Component { + constructor(props) { + super(props); + this.state = { + pan: new Animated.ValueXY(), // inits to zero + }; + this.state.panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderMove: Animated.event([null, { + dx: this.state.pan.x, // x,y are Animated.Value + dy: this.state.pan.y, + }]), + onPanResponderRelease: () => { + Animated.spring( + this.state.pan, // Auto-multiplexed + {toValue: {x: 0, y: 0}} // Back to zero + ).start(); + }, + }); + } + render() { + return ( + + {this.props.children} + + ); + } + } +``` + + +### Methods + +### `constructor()` + +```javascript +constructor(valueIn?) +``` + + + +--- + +### `setValue()` + +```javascript +setValue(value) +``` + + + +--- + +### `setOffset()` + +```javascript +setOffset(offset) +``` + + + +--- + +### `flattenOffset()` + +```javascript +flattenOffset() +``` + + + +--- + +### `stopAnimation()` + +```javascript +stopAnimation(callback?) +``` + + + +--- + +### `addListener()` + +```javascript +addListener(callback) +``` + + + +--- + +### `removeListener()` + +```javascript +removeListener(id) +``` + + + +--- + +### `getLayout()` + +```javascript +getLayout() +``` + + +Converts `{x, y}` into `{left, top}` for use in style, e.g. + +```javascript + style={this.state.anim.getLayout()} +``` + + + + +--- + +### `getTranslateTransform()` + +```javascript +getTranslateTransform() +``` + + +Converts `{x, y}` into a useable translation transform, e.g. + +```javascript + style={{ + transform: this.state.anim.getTranslateTransform() + }} +``` + + + + diff --git a/website/versioned_docs/version-0.36/keyboard.md b/website/versioned_docs/version-0.36/keyboard.md new file mode 100644 index 00000000000..67bccb137f3 --- /dev/null +++ b/website/versioned_docs/version-0.36/keyboard.md @@ -0,0 +1,137 @@ +--- +id: version-0.36-keyboard +title: Keyboard +original_id: keyboard +--- + +`Keyboard` module to control keyboard events. + +### Usage + +The Keyboard module allows you to listen for native events and react to them, as +well as make changes to the keyboard, like dismissing it. + +``` +import React, { Component } from 'react'; +import { Keyboard, TextInput } from 'react-native'; + +class Example extends Component { + componentWillMount () { + this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); + this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide); + } + + componentWillUnmount () { + this.keyboardDidShowListener.remove(); + this.keyboardDidHideListener.remove(); + } + + _keyboardDidShow () { + alert('Keyboard Shown'); + } + + _keyboardDidHide () { + alert('Keyboard Hidden'); + } + + render() { + return ( + + ); + } +} +``` + + +### Methods + +- [`addListener`](keyboard.md#addlistener) +- [`removeListener`](keyboard.md#removelistener) +- [`removeAllListeners`](keyboard.md#removealllisteners) +- [`dismiss`](keyboard.md#dismiss) + + + + +--- + +# Reference + +## Methods + +### `addListener()` + +```javascript +static addListener(eventName, callback) +``` + + +The `addListener` function connects a JavaScript function to an identified native +keyboard notification event. + +This function then returns the reference to the listener. + +@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. This +can be any of the following: + +- `keyboardWillShow` +- `keyboardDidShow` +- `keyboardWillHide` +- `keyboardDidHide` +- `keyboardWillChangeFrame` +- `keyboardDidChangeFrame` + +@param {function} callback function to be called when the event fires. + + + + +--- + +### `removeListener()` + +```javascript +static removeListener(eventName, callback) +``` + + +Removes a specific listener. + +@param {string} eventName The `nativeEvent` is the string that identifies the event you're listening for. +@param {function} callback function to be called when the event fires. + + + + +--- + +### `removeAllListeners()` + +```javascript +static removeAllListeners(eventName) +``` + + +Removes all listeners for a specific event type. + +@param {string} eventType The native event string listeners are watching which will be removed. + + + + +--- + +### `dismiss()` + +```javascript +static dismiss() +``` + + +Dismisses the active keyboard and removes focus. + + + + diff --git a/website/versioned_docs/version-0.36/layout-props.md b/website/versioned_docs/version-0.36/layout-props.md new file mode 100644 index 00000000000..52f9c3c6faa --- /dev/null +++ b/website/versioned_docs/version-0.36/layout-props.md @@ -0,0 +1,790 @@ +--- +id: version-0.36-layout-props +title: Layout Props +original_id: layout-props +--- +### Props + +- [`marginLeft`](layout-props.md#marginleft) +- [`alignItems`](layout-props.md#alignitems) +- [`borderBottomWidth`](layout-props.md#borderbottomwidth) +- [`borderLeftWidth`](layout-props.md#borderleftwidth) +- [`borderRightWidth`](layout-props.md#borderrightwidth) +- [`borderTopWidth`](layout-props.md#bordertopwidth) +- [`borderWidth`](layout-props.md#borderwidth) +- [`bottom`](layout-props.md#bottom) +- [`flex`](layout-props.md#flex) +- [`flexBasis`](layout-props.md#flexbasis) +- [`flexDirection`](layout-props.md#flexdirection) +- [`flexGrow`](layout-props.md#flexgrow) +- [`flexShrink`](layout-props.md#flexshrink) +- [`flexWrap`](layout-props.md#flexwrap) +- [`height`](layout-props.md#height) +- [`justifyContent`](layout-props.md#justifycontent) +- [`left`](layout-props.md#left) +- [`margin`](layout-props.md#margin) +- [`marginBottom`](layout-props.md#marginbottom) +- [`marginHorizontal`](layout-props.md#marginhorizontal) +- [`alignSelf`](layout-props.md#alignself) +- [`marginRight`](layout-props.md#marginright) +- [`marginTop`](layout-props.md#margintop) +- [`marginVertical`](layout-props.md#marginvertical) +- [`maxHeight`](layout-props.md#maxheight) +- [`maxWidth`](layout-props.md#maxwidth) +- [`minHeight`](layout-props.md#minheight) +- [`minWidth`](layout-props.md#minwidth) +- [`overflow`](layout-props.md#overflow) +- [`padding`](layout-props.md#padding) +- [`paddingBottom`](layout-props.md#paddingbottom) +- [`paddingHorizontal`](layout-props.md#paddinghorizontal) +- [`paddingLeft`](layout-props.md#paddingleft) +- [`paddingRight`](layout-props.md#paddingright) +- [`paddingTop`](layout-props.md#paddingtop) +- [`paddingVertical`](layout-props.md#paddingvertical) +- [`position`](layout-props.md#position) +- [`right`](layout-props.md#right) +- [`top`](layout-props.md#top) +- [`width`](layout-props.md#width) +- [`zIndex`](layout-props.md#zindex) + + + + + + +--- + +# Reference + +## Props + +### `marginLeft` + +`marginLeft` works like `margin-left` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignItems` + +`alignItems` aligns children in the cross direction. + For example, if children are flowing vertically, `alignItems` + controls how they align horizontally. + It works like `align-items` in CSS (default: stretch). + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `borderBottomWidth` + +`borderBottomWidth` works like `border-bottom-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderLeftWidth` + +`borderLeftWidth` works like `border-left-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRightWidth` + +`borderRightWidth` works like `border-right-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + +`borderTopWidth` works like `border-top-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + +`borderWidth` works like `border-width` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `bottom` + +`bottom` is the number of logical pixels to offset the bottom edge of + this component. + + It works similarly to `bottom` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom + for more details of how `bottom` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flex` + +In React Native `flex` does not work the same way that it does in CSS. + `flex` is a number rather than a string, and it works + according to the `css-layout` library + at https://github.com/facebook/css-layout. + + When `flex` is a positive number, it makes the component flexible + and it will be sized proportional to its flex value. So a + component with `flex` set to 2 will take twice the space as a + component with `flex` set to 1. + + When `flex` is 0, the component is sized according to `width` + and `height` and it is inflexible. + + When `flex` is -1, the component is normally sized according + `width` and `height`. However, if there's not enough space, + the component will shrink to its `minWidth` and `minHeight`. + +flexGrow, flexShrink, and flexBasis work the same as in CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexBasis` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexDirection` + +`flexDirection` controls which directions children of a container go. + `row` goes left to right, `column` goes top to bottom, and you may + be able to guess what the other two do. It works like `flex-direction` + in CSS, except the default is `column`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'row', + 'row-reverse', + 'column', + 'column-reverse' +]) | No | + + + + +--- + +### `flexGrow` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexShrink` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `flexWrap` + +`flexWrap` controls whether children can wrap around after they + hit the end of a flex container. + It works like `flex-wrap` in CSS (default: nowrap). + See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'wrap', + 'nowrap' +]) | No | + + + + +--- + +### `height` + +`height` sets the height of this component. + + It works similarly to `height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/height for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `justifyContent` + +`justifyContent` aligns children in the main direction. + For example, if children are flowing vertically, `justifyContent` + controls how they align vertically. + It works like `justify-content` in CSS (default: flex-start). + See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'flex-start', + 'flex-end', + 'center', + 'space-between', + 'space-around' +]) | No | + + + + +--- + +### `left` + +`left` is the number of logical pixels to offset the left edge of + this component. + + It works similarly to `left` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/left + for more details of how `left` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `margin` + +Setting `margin` has the same effect as setting each of + `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginBottom` + +`marginBottom` works like `margin-bottom` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginHorizontal` + +Setting `marginHorizontal` has the same effect as setting + both `marginLeft` and `marginRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `alignSelf` + +`alignSelf` controls how a child aligns in the cross direction, + overriding the `alignItems` of the parent. It works like `align-self` + in CSS (default: auto). + See https://developer.mozilla.org/en-US/docs/Web/CSS/align-self + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'auto', + 'flex-start', + 'flex-end', + 'center', + 'stretch' +]) | No | + + + + +--- + +### `marginRight` + +`marginRight` works like `margin-right` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginTop` + +`marginTop` works like `margin-top` in CSS. + See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `marginVertical` + +Setting `marginVertical` has the same effect as setting both + `marginTop` and `marginBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxHeight` + +`maxHeight` is the maximum height for this component, in logical pixels. + + It works similarly to `max-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `maxWidth` + +`maxWidth` is the maximum width for this component, in logical pixels. + + It works similarly to `max-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/max-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minHeight` + +`minHeight` is the minimum height for this component, in logical pixels. + + It works similarly to `min-height` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-height + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `minWidth` + +`minWidth` is the minimum width for this component, in logical pixels. + + It works similarly to `min-width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/min-width + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `overflow` + +`overflow` controls how a children are measured and displayed. + `overflow: hidden` causes views to be clipped while `overflow: scroll` + causes views to be measured independently of their parents main axis.` + It works like `overflow` in CSS (default: visible). + See https://developer.mozilla.org/en/docs/Web/CSS/overflow + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'visible', + 'hidden', + 'scroll', +]) | No | + + + + +--- + +### `padding` + +Setting `padding` has the same effect as setting each of + `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight`. + See https://developer.mozilla.org/en-US/docs/Web/CSS/padding + for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingBottom` + +`paddingBottom` works like `padding-bottom` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingHorizontal` + +Setting `paddingHorizontal` is like setting both of + `paddingLeft` and `paddingRight`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingLeft` + +`paddingLeft` works like `padding-left` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingRight` + +`paddingRight` works like `padding-right` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingTop` + +`paddingTop` works like `padding-top` in CSS. +See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top +for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `paddingVertical` + +Setting `paddingVertical` is like setting both of + `paddingTop` and `paddingBottom`. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `position` + +`position` in React Native is similar to regular CSS, but + everything is set to `relative` by default, so `absolute` + positioning is always just relative to the parent. + + If you want to position a child using specific numbers of logical + pixels relative to its parent, set the child to have `absolute` + position. + + If you want to position a child relative to something + that is not its parent, just don't use styles for that. Use the + component tree. + + See https://github.com/facebook/css-layout + for more details on how `position` differs between React Native + and CSS. + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf([ + 'absolute', + 'relative' +]) | No | + + + + +--- + +### `right` + +`right` is the number of logical pixels to offset the right edge of + this component. + + It works similarly to `right` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/right + for more details of how `right` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `top` + +`top` is the number of logical pixels to offset the top edge of + this component. + + It works similarly to `top` in CSS, but in React Native you must + use logical pixel units, rather than percents, ems, or any of that. + + See https://developer.mozilla.org/en-US/docs/Web/CSS/top + for more details of how `top` affects layout. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `width` + +`width` sets the width of this component. + + It works similarly to `width` in CSS, but in React Native you + must use logical pixel units, rather than percents, ems, or any of that. + See https://developer.mozilla.org/en-US/docs/Web/CSS/width for more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `zIndex` + +`zIndex` controls which components display on top of others. + Normally, you don't use `zIndex`. Components render according to + their order in the document tree, so later components draw over + earlier ones. `zIndex` may be useful if you have animations or custom + modal interfaces where you don't want this behavior. + + It works like the CSS `z-index` property - components with a larger + `zIndex` will render on top. Think of the z-direction like it's + pointing from the phone into your eyeball. + See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for + more details. + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + + + diff --git a/website/versioned_docs/version-0.36/modal.md b/website/versioned_docs/version-0.36/modal.md new file mode 100644 index 00000000000..ffcba7e39db --- /dev/null +++ b/website/versioned_docs/version-0.36/modal.md @@ -0,0 +1,198 @@ +--- +id: version-0.36-modal +title: Modal +original_id: modal +--- +The Modal component is a simple way to present content above an enclosing view. + +_Note: If you need more control over how to present modals over the rest of your app, +then consider using a top-level Navigator._ + +```javascript +import React, { Component } from 'react'; +import { Modal, Text, TouchableHighlight, View } from 'react-native'; + +class ModalExample extends Component { + + constructor(props) { + super(props); + this.state = {modalVisible: false}; + } + + setModalVisible(visible) { + this.setState({modalVisible: visible}); + } + + render() { + return ( + + {alert("Modal has been closed.")}} + > + + + Hello World! + + { + this.setModalVisible(!this.state.modalVisible) + }}> + Hide Modal + + + + + + + { + this.setModalVisible(true) + }}> + Show Modal + + + + ); + } +} +``` + +### Props + +- [`animationType`](modal.md#animationtype) +- [`onRequestClose`](modal.md#onrequestclose) +- [`onShow`](modal.md#onshow) +- [`transparent`](modal.md#transparent) +- [`visible`](modal.md#visible) +- [`onOrientationChange`](modal.md#onorientationchange) +- [`supportedOrientations`](modal.md#supportedorientations) +- [`animated`](modal.md#animated) + + + + + + +--- + +# Reference + +## Props + +### `animationType` + +The `animationType` prop controls how the modal animates. + +- `slide` slides in from the bottom +- `fade` fades into view +- `none` appears without an animation + +| Type | Required | +| - | - | +| PropTypes.oneOf(['none', 'slide', 'fade']) | No | + + + + +--- + +### `onRequestClose` + +The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed. + +_On the Android platform, this is a required function._ + +| Type | Required | +| - | - | +| Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func | No | + + + + +--- + +### `onShow` + +The `onShow` prop allows passing a function that will be called once the modal has been shown. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `transparent` + +The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `visible` + +The `visible` prop determines whether your modal is visible. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onOrientationChange` + +The `onOrientationChange` callback is called when the orientation changes while the modal is being displayed. +The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `supportedOrientations` + +The `supportedOrientations` prop allows the modal to be rotated to any of the specified orientations. +On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'])) | No | iOS | + + + + +--- + +### `animated` + +**Deprecated.** Use the `animationType` prop instead. + + + +| Type | Required | +| - | - | +| bool | No | + + + + + + diff --git a/website/versioned_docs/version-0.36/scrollview.md b/website/versioned_docs/version-0.36/scrollview.md new file mode 100644 index 00000000000..1cd76a4b104 --- /dev/null +++ b/website/versioned_docs/version-0.36/scrollview.md @@ -0,0 +1,759 @@ +--- +id: version-0.36-scrollview +title: ScrollView +original_id: scrollview +--- +Component that wraps platform ScrollView while providing +integration with touch locking "responder" system. + +Keep in mind that ScrollViews must have a bounded height in order to work, +since they contain unbounded-height children into a bounded container (via +a scroll interaction). In order to bound the height of a ScrollView, either +set the height of the view directly (discouraged) or make sure all parent +views have bounded height. Forgetting to transfer `{flex: 1}` down the +view stack can lead to errors here, which the element inspector makes +easy to debug. + +Doesn't yet support other contained responders from blocking this scroll +view from becoming the responder. + +### Props + +* [View props...](view.md#props) +- [`bounces`](scrollview.md#bounces) +- [`contentContainerStyle`](scrollview.md#contentcontainerstyle) +- [`keyboardDismissMode`](scrollview.md#keyboarddismissmode) +- [`keyboardShouldPersistTaps`](scrollview.md#keyboardshouldpersisttaps) +- [`onContentSizeChange`](scrollview.md#oncontentsizechange) +- [`onScroll`](scrollview.md#onscroll) +- [`pagingEnabled`](scrollview.md#pagingenabled) +- [`refreshControl`](scrollview.md#refreshcontrol) +- [`removeClippedSubviews`](scrollview.md#removeclippedsubviews) +- [`scrollEnabled`](scrollview.md#scrollenabled) +- [`showsHorizontalScrollIndicator`](scrollview.md#showshorizontalscrollindicator) +- [`showsVerticalScrollIndicator`](scrollview.md#showsverticalscrollindicator) +- [`style`](scrollview.md#style) +- [`endFillColor`](scrollview.md#endfillcolor) +- [`scrollPerfTag`](scrollview.md#scrollperftag) +- [`alwaysBounceHorizontal`](scrollview.md#alwaysbouncehorizontal) +- [`alwaysBounceVertical`](scrollview.md#alwaysbouncevertical) +- [`automaticallyAdjustContentInsets`](scrollview.md#automaticallyadjustcontentinsets) +- [`horizontal`](scrollview.md#horizontal) +- [`bouncesZoom`](scrollview.md#bounceszoom) +- [`canCancelContentTouches`](scrollview.md#cancancelcontenttouches) +- [`centerContent`](scrollview.md#centercontent) +- [`contentInset`](scrollview.md#contentinset) +- [`contentOffset`](scrollview.md#contentoffset) +- [`decelerationRate`](scrollview.md#decelerationrate) +- [`directionalLockEnabled`](scrollview.md#directionallockenabled) +- [`indicatorStyle`](scrollview.md#indicatorstyle) +- [`maximumZoomScale`](scrollview.md#maximumzoomscale) +- [`minimumZoomScale`](scrollview.md#minimumzoomscale) +- [`onScrollAnimationEnd`](scrollview.md#onscrollanimationend) +- [`scrollEventThrottle`](scrollview.md#scrolleventthrottle) +- [`scrollIndicatorInsets`](scrollview.md#scrollindicatorinsets) +- [`scrollsToTop`](scrollview.md#scrollstotop) +- [`snapToAlignment`](scrollview.md#snaptoalignment) +- [`snapToInterval`](scrollview.md#snaptointerval) +- [`stickyHeaderIndices`](scrollview.md#stickyheaderindices) +- [`zoomScale`](scrollview.md#zoomscale) + + + + +### Methods + +- [`scrollTo`](scrollview.md#scrollto) +- [`scrollWithoutAnimationTo`](scrollview.md#scrollwithoutanimationto) + + + + +--- + +# Reference + +## Props + +### `bounces` + +When true, the scroll view bounces when it reaches the end of the +content if the content is larger then the scroll view along the axis of +the scroll direction. When false, it disables all bouncing even if +the `alwaysBounce*` props are true. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentContainerStyle` + +These styles will be applied to the scroll view content container which +wraps all of the child views. Example: + + return ( + + + ); + ... + const styles = StyleSheet.create({ + contentContainer: { + paddingVertical: 20 + } + }); + +| Type | Required | +| - | - | +| StyleSheetPropType(View Style props) | No | + + + + +--- + +### `keyboardDismissMode` + +Determines whether the keyboard gets dismissed in response to a drag. + - 'none' (the default), drags do not dismiss the keyboard. + - 'on-drag', the keyboard is dismissed when a drag begins. + - 'interactive', the keyboard is dismissed interactively with the drag and moves in + synchrony with the touch; dragging upwards cancels the dismissal. + On android this is not supported and it will have the same behavior as 'none'. + +| Type | Required | +| - | - | +| enum('none', 'interactive', 'on-drag') | No | + + + + +--- + +### `keyboardShouldPersistTaps` + +When false, tapping outside of the focused text input when the keyboard +is up dismisses the keyboard. When true, the keyboard will not dismiss +automatically, and the scroll view will not catch taps, but children of +the scroll view can catch taps. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `onContentSizeChange` + +Called when scrollable content view of the ScrollView changes. + +Handler function is passed the content width and content height as parameters: `(contentWidth, contentHeight)` + +It's implemented using onLayout handler attached to the content container +which this ScrollView renders. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onScroll` + +Fires at most once per frame during scrolling. The frequency of the +events can be controlled using the `scrollEventThrottle` prop. + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `pagingEnabled` + +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. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `refreshControl` + +A RefreshControl component, used to provide pull-to-refresh +functionality for the ScrollView. + +See [RefreshControl](refreshcontrol.md). + +| Type | Required | +| - | - | +| element | No | + + + + +--- + +### `removeClippedSubviews` + +Experimental: When true, offscreen child views (whose `overflow` value is +`hidden`) are removed from their native backing superview when offscreen. +This can improve scrolling performance on long lists. The default value is +true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `scrollEnabled` + +When false, the content does not scroll. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsHorizontalScrollIndicator` + +When true, shows a horizontal scroll indicator. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `showsVerticalScrollIndicator` + +When true, shows a vertical scroll indicator. +The default value is true. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| style | No | + + + - [Layout Props...](layout-props.md#props) + + - [Shadow Props...](shadow-props.md#props) + + - [Transforms...](transforms.md#props) + + - **`borderRightColor`**: [color](colors.md) + + - **`backfaceVisibility`**: ReactPropTypes.oneOf(['visible', 'hidden']) + + - **`borderBottomColor`**: [color](colors.md) + + - **`borderBottomLeftRadius`**: ReactPropTypes.number + + - **`borderBottomRightRadius`**: ReactPropTypes.number + + - **`borderBottomWidth`**: ReactPropTypes.number + + - **`borderColor`**: [color](colors.md) + + - **`borderLeftColor`**: [color](colors.md) + + - **`borderLeftWidth`**: ReactPropTypes.number + + - **`borderRadius`**: ReactPropTypes.number + + - **`backgroundColor`**: [color](colors.md) + + - **`borderRightWidth`**: ReactPropTypes.number + + - **`borderStyle`**: ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) + + - **`borderTopColor`**: [color](colors.md) + + - **`borderTopLeftRadius`**: ReactPropTypes.number + + - **`borderTopRightRadius`**: ReactPropTypes.number + + - **`borderTopWidth`**: ReactPropTypes.number + + - **`borderWidth`**: ReactPropTypes.number + + - **`opacity`**: ReactPropTypes.number + + - **`elevation`**: ReactPropTypes.number (_Android_) + + (Android-only) Sets the elevation of a view, using Android's underlying + [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). + This adds a drop shadow to the item and affects z-order for overlapping views. + Only supported on Android 5.0+, has no effect on earlier versions. + + + + +--- + +### `endFillColor` + +Sometimes a scrollview takes up more space than its content fills. When this is +the case, this prop will fill the rest of the scrollview with a color to avoid setting +a background and creating unnecessary overdraw. This is an advanced optimization +that is not needed in the general case. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `scrollPerfTag` + +Tag used to log scroll performance on this scroll view. Will force +momentum events to be turned on (see sendMomentumEvents). This doesn't do +anything out of the box and you need to implement a custom native +FpsListener for it to be useful. + + +| Type | Required | Platform | +| - | - | - | +| string | No | Android | + + + + +--- + +### `alwaysBounceHorizontal` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `alwaysBounceVertical` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `automaticallyAdjustContentInsets` + +Controls whether iOS should automatically adjust the content inset +for scroll views that are placed behind a navigation bar or +tab bar/ toolbar. The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `horizontal` + +When true, the scroll view's children are arranged horizontally in a row +instead of vertically in a column. The default value is false. + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `bouncesZoom` + +When true, gestures can drive zoom past min/max and the zoom will animate +to the min/max value at gesture end, otherwise the zoom will not exceed +the limits. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `canCancelContentTouches` + +When false, once tracking starts, won't try to drag if the touch moves. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `centerContent` + +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. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `contentInset` + +The amount by which the scroll view content is inset from the edges +of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `contentOffset` + +Used to manually set the starting scroll offset. +The default value is `{x: 0, y: 0}`. + + +| Type | Required | Platform | +| - | - | - | +| PointPropType | No | iOS | + + + + +--- + +### `decelerationRate` + +A floating-point number that determines how quickly the scroll view +decelerates after the user lifts their finger. You may also use string +shortcuts `"normal"` and `"fast"` which match the underlying iOS settings +for `UIScrollViewDecelerationRateNormal` and +`UIScrollViewDecelerationRateFast` respectively. + - normal: 0.998 (the default) + - fast: 0.99 + + +| Type | Required | Platform | +| - | - | - | +| enum('fast', 'normal'), ,number | No | iOS | + + + + +--- + +### `directionalLockEnabled` + +When true, the ScrollView will try to lock to only vertical or horizontal +scrolling while dragging. The default value is false. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `indicatorStyle` + +The style of the scroll indicators. + - `default` (the default), same as `black`. + - `black`, scroll indicator is black. This style is good against a white content background. + - `white`, scroll indicator is white. This style is good against a black content background. + + +| Type | Required | Platform | +| - | - | - | +| enum('default', 'black', 'white') | No | iOS | + + + + +--- + +### `maximumZoomScale` + +The maximum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `minimumZoomScale` + +The minimum allowed zoom scale. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `onScrollAnimationEnd` + +Called when a scrolling animation ends. + + +| Type | Required | Platform | +| - | - | - | +| function | No | iOS | + + + + +--- + +### `scrollEventThrottle` + +This controls how often the scroll event will be fired while scrolling +(as a time interval in ms). A lower number yields better accuracy for code +that is tracking the scroll position, but can lead to scroll performance +problems due to the volume of information being send over the bridge. +You will not notice a difference between values set between 1-16 as the +JS run loop is synced to the screen refresh rate. If you do not need precise +scroll position tracking, set this value higher to limit the information +being sent across the bridge. The default value is zero, which results in +the scroll event being sent only once each time the view is scrolled. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `scrollIndicatorInsets` + +The amount by which the scroll view indicators are inset from the edges +of the scroll view. This should normally be set to the same value as +the `contentInset`. Defaults to `{0, 0, 0, 0}`. + + +| Type | Required | Platform | +| - | - | - | +| object: {top: number, left: number, bottom: number, right: number} | No | iOS | + + + + +--- + +### `scrollsToTop` + +When true, the scroll view scrolls to top when the status bar is tapped. +The default value is true. + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + +--- + +### `snapToAlignment` + +When `snapToInterval` is set, `snapToAlignment` will define the relationship +of the snapping to the scroll view. + - `start` (the default) will align the snap at the left (horizontal) or top (vertical) + - `center` will align the snap in the center + - `end` will align the snap at the right (horizontal) or bottom (vertical) + + +| Type | Required | Platform | +| - | - | - | +| enum('start', 'center', 'end') | No | iOS | + + + + +--- + +### `snapToInterval` + +When set, causes the scroll view to stop at multiples of the value of +`snapToInterval`. This can be used for paginating through children +that have lengths smaller than the scroll view. Used in combination +with `snapToAlignment`. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + +--- + +### `stickyHeaderIndices` + +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}`. + + +| Type | Required | Platform | +| - | - | - | +| array of number | No | iOS | + + + + +--- + +### `zoomScale` + +The current scale of the scroll view content. The default value is 1.0. + + +| Type | Required | Platform | +| - | - | - | +| number | No | iOS | + + + + + + +## Methods + +### `scrollTo()` + +```javascript +scrollTo([y]: number, object, [x]: number, [animated]: boolean) +``` + +Scrolls to a given x, y offset, either immediately or with a smooth animation. + +Syntax: + +`scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})` + +Note: The weird argument signature is due to the fact that, for historical reasons, +the function also accepts separate arguments as as alternative to the options object. +This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED. + + + +--- + +### `scrollWithoutAnimationTo()` + +```javascript +scrollWithoutAnimationTo(y, x) +``` + +Deprecated, do not use. + + + diff --git a/website/versioned_docs/version-0.36/statusbar.md b/website/versioned_docs/version-0.36/statusbar.md new file mode 100644 index 00000000000..d0db28b71f8 --- /dev/null +++ b/website/versioned_docs/version-0.36/statusbar.md @@ -0,0 +1,321 @@ +--- +id: version-0.36-statusbar +title: StatusBar +original_id: statusbar +--- +Component to control the app status bar. + +### Usage with Navigator + +It is possible to have multiple `StatusBar` components mounted at the same +time. The props will be merged in the order the `StatusBar` components were +mounted. One use case is to specify status bar styles per route using `Navigator`. + +``` + + + + + + } + /> + +``` + +### Imperative API + +For cases where using a component is not ideal, there is also an imperative +API exposed as static functions on the component. It is however not recommended +to use the static API and the component for the same prop because any value +set by the static API will get overriden by the one set by the component in +the next render. + +### Props + +- [`animated`](statusbar.md#animated) +- [`hidden`](statusbar.md#hidden) +- [`backgroundColor`](statusbar.md#backgroundcolor) +- [`translucent`](statusbar.md#translucent) +- [`barStyle`](statusbar.md#barstyle) +- [`networkActivityIndicatorVisible`](statusbar.md#networkactivityindicatorvisible) +- [`showHideTransition`](statusbar.md#showhidetransition) + + + + +### Methods + +- [`setHidden`](statusbar.md#sethidden) +- [`setBarStyle`](statusbar.md#setbarstyle) +- [`setNetworkActivityIndicatorVisible`](statusbar.md#setnetworkactivityindicatorvisible) +- [`setBackgroundColor`](statusbar.md#setbackgroundcolor) +- [`setTranslucent`](statusbar.md#settranslucent) + + +### Type Definitions + +- [`StatusBarStyle`](statusbar.md#statusbarstyle) +- [`StatusBarAnimation`](statusbar.md#statusbaranimation) + + + + +--- + +# Reference + +## Props + +### `animated` + +If the transition between status bar property changes should be animated. +Supported for backgroundColor, barStyle and hidden. + +| Type | Required | +| - | - | +| boolean | No | + + + + +--- + +### `hidden` + +If the status bar is hidden. + +| Type | Required | +| - | - | +| boolean | No | + + + + +--- + +### `backgroundColor` + +The background color of the status bar. + + +| Type | Required | Platform | +| - | - | - | +| $FlowFixMe | No | Android | + + + + +--- + +### `translucent` + +If the status bar is translucent. +When translucent is set to true, the app will draw under the status bar. +This is useful when using a semi transparent status bar color. + + + +| Type | Required | Platform | +| - | - | - | +| boolean | No | Android | + + + + +--- + +### `barStyle` + +Sets the color of the status bar text. + + + +| Type | Required | Platform | +| - | - | - | +| literal ‖ ,literal ‖ ,literal | No | iOS | + + + + +--- + +### `networkActivityIndicatorVisible` + +If the network activity indicator should be visible. + + + +| Type | Required | Platform | +| - | - | - | +| boolean | No | iOS | + + + + +--- + +### `showHideTransition` + +The transition effect when showing and hiding the status bar using the `hidden` +prop. Defaults to 'fade'. + + + +| Type | Required | Platform | +| - | - | - | +| literal ‖ ,literal | No | iOS | + + + + + + +## Methods + +### `setHidden()` + +```javascript +static setHidden(hidden: boolean, [animation]: StatusBarAnimation) +``` + +Show or hide the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| hidden | boolean | Yes | The dialog's title. | +| animation | [StatusBarAnimation](statusbar.md#statusbaranimation) | No | Optional animation when changing the status bar hidden property. | + + + + +--- + +### `setBarStyle()` + +```javascript +static setBarStyle(style: StatusBarStyle, [animated]: boolean) +``` + +Set the status bar style + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| style | [StatusBarStyle](statusbar.md#statusbarstyle) | Yes | Status bar style to set | +| animated | boolean | No | Animate the style change. | + + + + +--- + +### `setNetworkActivityIndicatorVisible()` + +```javascript +static setNetworkActivityIndicatorVisible(visible: boolean) +``` + +Control the visibility of the network activity indicator + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| visible | boolean | Yes | Show the indicator. | + + + + +--- + +### `setBackgroundColor()` + +```javascript +static setBackgroundColor(color: string, [animated]: boolean) +``` + +Set the background color for the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| color | string | Yes | Background color. | +| animated | boolean | No | Animate the style change. | + + + + +--- + +### `setTranslucent()` + +```javascript +static setTranslucent(translucent: boolean) +``` + +Control the translucency of the status bar + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| translucent | boolean | Yes | Set as translucent. | + + + + +## Type Definitions + +### StatusBarStyle + +Status bar style + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default status bar style (dark for iOS, light for Android) | +| light-content | Dark background, white texts and icons | +| dark-content | Light background, dark texts and icons | + + + + +--- + +### StatusBarAnimation + +Status bar animation + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| none | No animation | +| fade | Fade animation | +| slide | Slide animation | + + + + diff --git a/website/versioned_docs/version-0.36/textinput.md b/website/versioned_docs/version-0.36/textinput.md new file mode 100644 index 00000000000..883ad99dd33 --- /dev/null +++ b/website/versioned_docs/version-0.36/textinput.md @@ -0,0 +1,852 @@ +--- +id: version-0.36-textinput +title: TextInput +original_id: textinput +--- +A foundational component for inputting text into the app via a +keyboard. Props provide configurability for several features, such as +auto-correction, auto-capitalization, placeholder text, and different keyboard +types, such as a numeric keypad. + +The simplest use case is to plop down a `TextInput` and subscribe to the +`onChangeText` events to read the user input. There are also other events, +such as `onSubmitEditing` and `onFocus` that can be subscribed to. A simple +example: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + constructor(props) { + super(props); + this.state = { text: 'Useless Placeholder' }; + } + + render() { + return ( + this.setState({text})} + value={this.state.text} + /> + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput); +``` + +Note that some props are only available with `multiline={true/false}`. +Additionally, border styles that apply to only one side of the element +(e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if +`multiline=false`. To achieve the same effect, you can wrap your `TextInput` +in a `View`: + +```ReactNativeWebPlayer +import React, { Component } from 'react'; +import { AppRegistry, View, TextInput } from 'react-native'; + +class UselessTextInput extends Component { + render() { + return ( + + ); + } +} + +class UselessTextInputMultiline extends Component { + constructor(props) { + super(props); + this.state = { + text: 'Useless Multiline Placeholder', + }; + } + + // If you type something in the text box that is a color, the background will change to that + // color. + render() { + return ( + + this.setState({text})} + value={this.state.text} + /> + + ); + } +} + +// App registration and rendering +AppRegistry.registerComponent( + 'AwesomeProject', + () => UselessTextInputMultiline +); +``` + +`TextInput` has by default a border at the bottom of its view. This border +has its padding set by the background image provided by the system, and it +cannot be changed. Solutions to avoid this is to either not set height +explicitly, case in which the system will take care of displaying the border +in the correct position, or to not display the border by setting +`underlineColorAndroid` to transparent. + +### Props + +* [View props...](view.md#props) +- [`placeholderTextColor`](textinput.md#placeholdertextcolor) +- [`autoCapitalize`](textinput.md#autocapitalize) +- [`autoFocus`](textinput.md#autofocus) +- [`blurOnSubmit`](textinput.md#bluronsubmit) +- [`defaultValue`](textinput.md#defaultvalue) +- [`editable`](textinput.md#editable) +- [`keyboardType`](textinput.md#keyboardtype) +- [`maxLength`](textinput.md#maxlength) +- [`multiline`](textinput.md#multiline) +- [`onBlur`](textinput.md#onblur) +- [`onChange`](textinput.md#onchange) +- [`onChangeText`](textinput.md#onchangetext) +- [`onContentSizeChange`](textinput.md#oncontentsizechange) +- [`onEndEditing`](textinput.md#onendediting) +- [`onFocus`](textinput.md#onfocus) +- [`onLayout`](textinput.md#onlayout) +- [`onSelectionChange`](textinput.md#onselectionchange) +- [`onSubmitEditing`](textinput.md#onsubmitediting) +- [`placeholder`](textinput.md#placeholder) +- [`autoCorrect`](textinput.md#autocorrect) +- [`returnKeyType`](textinput.md#returnkeytype) +- [`secureTextEntry`](textinput.md#securetextentry) +- [`selectTextOnFocus`](textinput.md#selecttextonfocus) +- [`selection`](textinput.md#selection) +- [`selectionColor`](textinput.md#selectioncolor) +- [`style`](textinput.md#style) +- [`value`](textinput.md#value) +- [`inlineImageLeft`](textinput.md#inlineimageleft) +- [`inlineImagePadding`](textinput.md#inlineimagepadding) +- [`numberOfLines`](textinput.md#numberoflines) +- [`returnKeyLabel`](textinput.md#returnkeylabel) +- [`underlineColorAndroid`](textinput.md#underlinecolorandroid) +- [`clearButtonMode`](textinput.md#clearbuttonmode) +- [`clearTextOnFocus`](textinput.md#cleartextonfocus) +- [`dataDetectorTypes`](textinput.md#datadetectortypes) +- [`enablesReturnKeyAutomatically`](textinput.md#enablesreturnkeyautomatically) +- [`keyboardAppearance`](textinput.md#keyboardappearance) +- [`onKeyPress`](textinput.md#onkeypress) +- [`selectionState`](textinput.md#selectionstate) + + + + +### Methods + +- [`isFocused`](textinput.md#isfocused) +- [`clear`](textinput.md#clear) + + + + +--- + +# Reference + +## Props + +### `placeholderTextColor` + +The text color of the placeholder string. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `autoCapitalize` + +Can tell `TextInput` to automatically capitalize certain characters. + +- `characters`: all characters. +- `words`: first letter of each word. +- `sentences`: first letter of each sentence (*default*). +- `none`: don't auto capitalize anything. + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + 'none', + 'sentences', + 'words', + 'characters', +]) | No | + + + + +--- + +### `autoFocus` + +If `true`, focuses the input on `componentDidMount`. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `blurOnSubmit` + +If `true`, the text field will blur when submitted. +The default value is true for single-line fields and false for +multiline fields. Note that for multiline fields, setting `blurOnSubmit` +to `true` means that pressing return will blur the field and trigger the +`onSubmitEditing` event instead of inserting a newline into the field. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `defaultValue` + +Provides an initial value that will change when the user starts typing. +Useful for simple use-cases where you do not want to deal with listening +to events and updating the value prop to keep the controlled state in sync. + +| Type | Required | +| - | - | +| PropTypes.node | No | + + + + +--- + +### `editable` + +If `false`, text is not editable. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `keyboardType` + +Determines which keyboard to open, e.g.`numeric`. + +The following values work across platforms: + +- `default` +- `numeric` +- `email-address` +- `phone-pad` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'default', + 'email-address', + 'numeric', + 'phone-pad', + // iOS-only + 'ascii-capable', + 'numbers-and-punctuation', + 'url', + 'number-pad', + 'name-phone-pad', + 'decimal-pad', + 'twitter', + 'web-search', +]) | No | + + + + +--- + +### `maxLength` + +Limits the maximum number of characters that can be entered. Use this +instead of implementing the logic in JS to avoid flicker. + +| Type | Required | +| - | - | +| PropTypes.number | No | + + + + +--- + +### `multiline` + +If `true`, the text input can be multiple lines. +The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `onBlur` + +Callback that is called when the text input is blurred. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChange` + +Callback that is called when the text input's text changes. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onChangeText` + +Callback that is called when the text input's text changes. +Changed text is passed as an argument to the callback handler. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onContentSizeChange` + +Callback that is called when the text input's content size changes. +This will be called with +`{ nativeEvent: { contentSize: { width, height } } }`. + +Only called for multiline text inputs. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onEndEditing` + +Callback that is called when text input ends. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onFocus` + +Callback that is called when the text input is focused. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onLayout` + +Invoked on mount and layout changes with `{x, y, width, height}`. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSelectionChange` + +Callback that is called when the text input selection is changed. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `onSubmitEditing` + +Callback that is called when the text input's submit button is pressed. +Invalid if `multiline={true}` is specified. + +| Type | Required | +| - | - | +| PropTypes.func | No | + + + + +--- + +### `placeholder` + +The string that will be rendered before text input has been entered. + +| Type | Required | +| - | - | +| PropTypes.node | No | + + + + +--- + +### `autoCorrect` + +If `false`, disables auto-correct. The default value is `true`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `returnKeyType` + +Determines how the return key should look. On Android you can also use +`returnKeyLabel`. + +*Cross platform* + +The following values work across platforms: + +- `done` +- `go` +- `next` +- `search` +- `send` + +*Android Only* + +The following values work on Android only: + +- `none` +- `previous` + +*iOS Only* + +The following values work on iOS only: + +- `default` +- `emergency-call` +- `google` +- `join` +- `route` +- `yahoo` + +| Type | Required | +| - | - | +| PropTypes.oneOf([ + // Cross-platform + 'done', + 'go', + 'next', + 'search', + 'send', + // Android-only + 'none', + 'previous', + // iOS-only + 'default', + 'emergency-call', + 'google', + 'join', + 'route', + 'yahoo', +]) | No | + + + + +--- + +### `secureTextEntry` + +If `true`, the text input obscures the text entered so that sensitive text +like passwords stay secure. The default value is `false`. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selectTextOnFocus` + +If `true`, all text will automatically be selected on focus. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + +--- + +### `selection` + +The start and end of the text input's selection. Set start and end to +the same value to position the cursor. + +| Type | Required | +| - | - | +| PropTypes.shape({ + start: PropTypes.number.isRequired, + end: PropTypes.number, +}) | No | + + + + +--- + +### `selectionColor` + +The highlight (and cursor on iOS) color of the text input. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `style` + +[Styles](/react-native/style.md) + +| Type | Required | +| - | - | +| [Text](text.md#style) | No | + + + + +--- + +### `value` + +The value to show for the text input. `TextInput` is a controlled +component, which means the native value will be forced to match this +value prop if provided. For most uses, this works great, but in some +cases this may cause flickering - one common cause is preventing edits +by keeping value the same. In addition to simply setting the same value, +either set `editable={false}`, or set/update `maxLength` to prevent +unwanted edits without flicker. + +| Type | Required | +| - | - | +| PropTypes.string | No | + + + + +--- + +### `inlineImageLeft` + +If defined, the provided image resource will be rendered on the left. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `inlineImagePadding` + +Padding between the inline image, if any, and the text input itself. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `numberOfLines` + +Sets the number of lines for a `TextInput`. Use it with multiline set to +`true` to be able to fill the lines. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.number | No | Android | + + + + +--- + +### `returnKeyLabel` + +Sets the return key to the label. Use it instead of `returnKeyType`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.string | No | Android | + + + + +--- + +### `underlineColorAndroid` + +The color of the `TextInput` underline. + + +| Type | Required | Platform | +| - | - | - | +| [color](colors.md) | No | Android | + + + + +--- + +### `clearButtonMode` + +When the clear button should appear on the right side of the text view. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'never', + 'while-editing', + 'unless-editing', + 'always', +]) | No | iOS | + + + + +--- + +### `clearTextOnFocus` + +If `true`, clears the text field automatically when editing begins. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `dataDetectorTypes` + +Determines the types of data converted to clickable URLs in the text input. +Only valid if `multiline={true}` and `editable={false}`. +By default no data types are detected. + +You can provide one type or an array of many types. + +Possible values for `dataDetectorTypes` are: + +- `'phoneNumber'` +- `'link'` +- `'address'` +- `'calendarEvent'` +- `'none'` +- `'all'` + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOfType([ + PropTypes.oneOf(DataDetectorTypes), + PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), +]) | No | iOS | + + + + +--- + +### `enablesReturnKeyAutomatically` + +If `true`, the keyboard disables the return key when there is no text and +automatically enables it when there is text. The default value is `false`. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.bool | No | iOS | + + + + +--- + +### `keyboardAppearance` + +Determines the color of the keyboard. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.oneOf([ + 'default', + 'light', + 'dark', +]) | No | iOS | + + + + +--- + +### `onKeyPress` + +Callback that is called when a key is pressed. +Pressed key value is passed as an argument to the callback handler. +Fires before `onChange` callbacks. + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.func | No | iOS | + + + + +--- + +### `selectionState` + +An instance of `DocumentSelectionState`, this is some state that is responsible for +maintaining selection information for a document. + +Some functionality that can be performed with this instance is: + +- `blur()` +- `focus()` +- `update()` + +> You can reference `DocumentSelectionState` in +> [`vendor/document/selection/DocumentSelectionState.js`](https://github.com/facebook/react-native/blob/master/Libraries/vendor/document/selection/DocumentSelectionState.js) + + + +| Type | Required | Platform | +| - | - | - | +| PropTypes.instanceOf(DocumentSelectionState) | No | iOS | + + + + + + +## Methods + +### `isFocused()` + +```javascript +isFocused(): +``` + +Returns `true` if the input is currently focused; `false` otherwise. + + + +--- + +### `clear()` + +```javascript +clear() +``` + +Removes all text from the `TextInput`. + + + diff --git a/website/versioned_docs/version-0.36/touchablehighlight.md b/website/versioned_docs/version-0.36/touchablehighlight.md new file mode 100644 index 00000000000..40706327a68 --- /dev/null +++ b/website/versioned_docs/version-0.36/touchablehighlight.md @@ -0,0 +1,117 @@ +--- +id: version-0.36-touchablehighlight +title: TouchableHighlight +original_id: touchablehighlight +--- +A wrapper for making views respond properly to touches. +On press down, the opacity of the wrapped view is decreased, which allows +the underlay color to show through, darkening or tinting the view. The +underlay comes from adding a view to the view hierarchy, which can sometimes +cause unwanted visual artifacts if not used correctly, for example if the +backgroundColor of the wrapped view isn't explicitly set to an opaque color. + +Example: + +``` +renderButton: function() { + return ( + + + + ); +}, +``` +> **NOTE**: TouchableHighlight must have one child (not zero or more than one) +> +> If you wish to have several child components, wrap them in a View. + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`activeOpacity`](touchablehighlight.md#activeopacity) +- [`onHideUnderlay`](touchablehighlight.md#onhideunderlay) +- [`onShowUnderlay`](touchablehighlight.md#onshowunderlay) +- [`style`](touchablehighlight.md#style) +- [`underlayColor`](touchablehighlight.md#underlaycolor) + + + + + + +--- + +# Reference + +## Props + +### `activeOpacity` + +Determines what the opacity of the wrapped view should be when touch is +active. + +| Type | Required | +| - | - | +| number | No | + + + + +--- + +### `onHideUnderlay` + +Called immediately after the underlay is hidden + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `onShowUnderlay` + +Called immediately after the underlay is shown + +| Type | Required | +| - | - | +| function | No | + + + + +--- + +### `style` + + + +| Type | Required | +| - | - | +| [View](view.md#style) | No | + + + + +--- + +### `underlayColor` + +The color of the underlay that will show through when the touch is +active. + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + + + diff --git a/website/versioned_docs/version-0.36/touchablenativefeedback.md b/website/versioned_docs/version-0.36/touchablenativefeedback.md new file mode 100644 index 00000000000..c48077661a1 --- /dev/null +++ b/website/versioned_docs/version-0.36/touchablenativefeedback.md @@ -0,0 +1,151 @@ +--- +id: version-0.36-touchablenativefeedback +title: TouchableNativeFeedback +original_id: touchablenativefeedback +--- +A wrapper for making views respond properly to touches (Android only). +On Android this component uses native state drawable to display touch +feedback. At the moment it only supports having a single View instance as a +child node, as it's implemented by replacing that View with another instance +of RCTView node with some additional properties set. + +Background drawable of native feedback touchable can be customized with +`background` property. + +Example: + +``` +renderButton: function() { + return ( + + + Button + + + ); +}, +``` + +### Props + +* [TouchableWithoutFeedback props...](touchablewithoutfeedback.md#props) +- [`background`](touchablenativefeedback.md#background) +- [`useForeground`](touchablenativefeedback.md#useforeground) + + + + +### Methods + +- [`SelectableBackground`](touchablenativefeedback.md#selectablebackground) +- [`SelectableBackgroundBorderless`](touchablenativefeedback.md#selectablebackgroundborderless) +- [`Ripple`](touchablenativefeedback.md#ripple) +- [`canUseNativeForeground`](touchablenativefeedback.md#canusenativeforeground) + + + + +--- + +# Reference + +## Props + +### `background` + +Determines the type of background drawable that's going to be used to +display feedback. It takes an object with `type` property and extra data +depending on the `type`. It's recommended to use one of the static +methods to generate that dictionary. + +| Type | Required | +| - | - | +| backgroundPropType | No | + + + + +--- + +### `useForeground` + +Set to true to add the ripple effect to the foreground of the view, instead of the +background. This is useful if one of your child views has a background of its own, or you're +e.g. displaying images, and you don't want the ripple to be covered by them. + +Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on +Android 6.0 and above. If you try to use this on older versions you will get a warning and +fallback to background. + +| Type | Required | +| - | - | +| PropTypes.bool | No | + + + + + + +## Methods + +### `SelectableBackground()` + +```javascript +static SelectableBackground() +``` + +Creates an object that represents android theme's default background for +selectable elements (?android:attr/selectableItemBackground). + + + +--- + +### `SelectableBackgroundBorderless()` + +```javascript +static SelectableBackgroundBorderless() +``` + +Creates an object that represent android theme's default background for borderless +selectable elements (?android:attr/selectableItemBackgroundBorderless). +Available on android API level 21+. + + + +--- + +### `Ripple()` + +```javascript +static Ripple(color: string, borderless: boolean) +``` + +Creates an object that represents ripple drawable with specified color (as a +string). If property `borderless` evaluates to true the ripple will +render outside of the view bounds (see native actionbar buttons as an +example of that behavior). This background type is available on Android +API level 21+. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| color | string | Yes | The ripple color | +| borderless | boolean | Yes | If the ripple can render outside it's bounds | + + + + +--- + +### `canUseNativeForeground()` + +```javascript +static canUseNativeForeground() +``` + + + diff --git a/website/versioned_docs/version-0.36/view-style-props.md b/website/versioned_docs/version-0.36/view-style-props.md new file mode 100644 index 00000000000..8c4605f6ec5 --- /dev/null +++ b/website/versioned_docs/version-0.36/view-style-props.md @@ -0,0 +1,303 @@ +--- +id: version-0.36-view-style-props +title: View Style Props +original_id: view-style-props +--- +### Props + +- [`borderRightColor`](view-style-props.md#borderrightcolor) +- [`backfaceVisibility`](view-style-props.md#backfacevisibility) +- [`borderBottomColor`](view-style-props.md#borderbottomcolor) +- [`borderBottomLeftRadius`](view-style-props.md#borderbottomleftradius) +- [`borderBottomRightRadius`](view-style-props.md#borderbottomrightradius) +- [`borderBottomWidth`](view-style-props.md#borderbottomwidth) +- [`borderColor`](view-style-props.md#bordercolor) +- [`borderLeftColor`](view-style-props.md#borderleftcolor) +- [`borderLeftWidth`](view-style-props.md#borderleftwidth) +- [`borderRadius`](view-style-props.md#borderradius) +- [`backgroundColor`](view-style-props.md#backgroundcolor) +- [`borderRightWidth`](view-style-props.md#borderrightwidth) +- [`borderStyle`](view-style-props.md#borderstyle) +- [`borderTopColor`](view-style-props.md#bordertopcolor) +- [`borderTopLeftRadius`](view-style-props.md#bordertopleftradius) +- [`borderTopRightRadius`](view-style-props.md#bordertoprightradius) +- [`borderTopWidth`](view-style-props.md#bordertopwidth) +- [`borderWidth`](view-style-props.md#borderwidth) +- [`opacity`](view-style-props.md#opacity) +- [`elevation`](view-style-props.md#elevation) + + + + + + +--- + +# Reference + +## Props + +### `borderRightColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `backfaceVisibility` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['visible', 'hidden']) | No | + + + + +--- + +### `borderBottomColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderBottomLeftRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderBottomRightRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderBottomWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderLeftWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `backgroundColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderRightWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderStyle` + + + +| Type | Required | +| - | - | +| ReactPropTypes.oneOf(['solid', 'dotted', 'dashed']) | No | + + + + +--- + +### `borderTopColor` + + + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `borderTopLeftRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopRightRadius` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderTopWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `borderWidth` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `opacity` + + + +| Type | Required | +| - | - | +| ReactPropTypes.number | No | + + + + +--- + +### `elevation` + +(Android-only) Sets the elevation of a view, using Android's underlying +[elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). +This adds a drop shadow to the item and affects z-order for overlapping views. +Only supported on Android 5.0+, has no effect on earlier versions. + + +| Type | Required | Platform | +| - | - | - | +| ReactPropTypes.number | No | Android | + + + + + + diff --git a/website/versioned_docs/version-0.37/activityindicator.md b/website/versioned_docs/version-0.37/activityindicator.md new file mode 100644 index 00000000000..e2a2ecea2b2 --- /dev/null +++ b/website/versioned_docs/version-0.37/activityindicator.md @@ -0,0 +1,81 @@ +--- +id: version-0.37-activityindicator +title: ActivityIndicator +original_id: activityindicator +--- +Displays a circular loading indicator. + +### Props + +* [View props...](view.md#props) +- [`animating`](activityindicator.md#animating) +- [`color`](activityindicator.md#color) +- [`size`](activityindicator.md#size) +- [`hidesWhenStopped`](activityindicator.md#hideswhenstopped) + + + + + + +--- + +# Reference + +## Props + +### `animating` + +Whether to show the indicator (true, the default) or hide it (false). + +| Type | Required | +| - | - | +| bool | No | + + + + +--- + +### `color` + +The foreground color of the spinner (default is gray). + +| Type | Required | +| - | - | +| [color](colors.md) | No | + + + + +--- + +### `size` + +Size of the indicator (default is 'small'). +Passing a number to the size prop is only supported on Android. + +| Type | Required | +| - | - | +| enum('small', 'large'), ,number | No | + + + + +--- + +### `hidesWhenStopped` + +Whether the indicator should hide when not animating (true by default). + + + +| Type | Required | Platform | +| - | - | - | +| bool | No | iOS | + + + + + + diff --git a/website/versioned_docs/version-0.37/alert.md b/website/versioned_docs/version-0.37/alert.md new file mode 100644 index 00000000000..aea668cc6de --- /dev/null +++ b/website/versioned_docs/version-0.37/alert.md @@ -0,0 +1,65 @@ +--- +id: version-0.37-alert +title: Alert +original_id: alert +--- + +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, +see `AlertIOS`; entering text in an alert is common on iOS only. + +## iOS + +On iOS you can specify any number of buttons. Each button can optionally +specify a style, which is one of 'default', 'cancel' or 'destructive'. + +## Android + +On Android at most three buttons can be specified. Android has a concept +of a neutral, negative and a positive button: + + - If you specify one button, it will be the 'positive' one (such as 'OK') + - Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK') + - Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK') + +``` +// Works on both iOS and Android +Alert.alert( + 'Alert Title', + 'My Alert Msg', + [ + {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: () => console.log('OK Pressed')}, + ] +) +``` + + +### Methods + +- [`alert`](alert.md#alert) + + + + +--- + +# Reference + +## Methods + +### `alert()` + +```javascript +static alert(title, message?, buttons?, options?, type?) +``` + + + diff --git a/website/versioned_docs/version-0.37/alertios.md b/website/versioned_docs/version-0.37/alertios.md new file mode 100644 index 00000000000..fc8497ee07b --- /dev/null +++ b/website/versioned_docs/version-0.37/alertios.md @@ -0,0 +1,206 @@ +--- +id: version-0.37-alertios +title: AlertIOS +original_id: alertios +--- +`AlertIOS` provides functionality to create an iOS alert dialog with a +message or create a prompt for user input. + +Creating an iOS alert: + +``` +AlertIOS.alert( + 'Sync Complete', + 'All your data are belong to us.' +); +``` + +Creating an iOS prompt: + +``` +AlertIOS.prompt( + 'Enter a value', + null, + text => console.log("You entered "+text) +); +``` + +We recommend using the [`Alert.alert`](/alert.md) method for +cross-platform support if you don't need to create iOS-only prompts. + +### Methods + +- [`alert`](alertios.md#alert) +- [`prompt`](alertios.md#prompt) + + +### Type Definitions + +- [`AlertType`](alertios.md#alerttype) +- [`AlertButtonStyle`](alertios.md#alertbuttonstyle) +- [`ButtonsArray`](alertios.md#buttonsarray) + + + + +--- + +# Reference + +## Methods + +### `alert()` + +```javascript +static alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object] +``` + +Create and display a popup alert. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| title | string | Yes | The dialog's title. | +| message | string | No | An optional message that appears below the dialog's title. | +| callbackOrButtons | ?(() => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys. `style` should be one of 'default', 'cancel' or 'destructive'. | +| type | [AlertType](alertios.md#alerttype) | No | Deprecated, do not use. | + + + + +Example with custom buttons: + +```javascript +AlertIOS.alert( + 'Update available', + 'Keep your app up to date to enjoy the latest features', + [ + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'Install', onPress: () => console.log('Install Pressed')}, + ], +); +``` + + + +--- + +### `prompt()` + +```javascript +static prompt(title: string, [message]: string, [callbackOrButtons]: ?((text: string) => void), ButtonsArray, [type]: AlertType, [defaultValue]: string): [object Object] +``` + +Create and display a prompt to enter some text. + +**Parameters:** + +| Name | Type | Required | Description | +| - | - | - | - | +| title | string | Yes | The dialog's title. | +| message | string | No | An optional message that appears above the text input. | +| callbackOrButtons | ?((text: string) => void),[ButtonsArray](alertios.md#buttonsarray) | No | This optional argument should be either a single-argument function or an array of buttons. If passed a function, it will be called with the prompt's value when the user taps 'OK'. If passed an array of button configurations, each button should include a `text` key, as well as optional `onPress` and `style` keys (see example). `style` should be one of 'default', 'cancel' or 'destructive'. | +| type | [AlertType](alertios.md#alerttype) | No | This configures the text input. One of 'plain-text', 'secure-text' or 'login-password'. | +| defaultValue | string | No | The default text in text input. | + + + + +Example with custom buttons: + +```javascript +AlertIOS.prompt( + 'Enter password', + 'Enter your password to claim your $1.5B in lottery winnings', + [ + {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, + {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, + ], + 'secure-text' +); +``` + +, + +Example with the default button and a custom callback: + +```javascript +AlertIOS.prompt( + 'Update username', + null, + text => console.log("Your username is "+text), + null, + 'default' +); +``` + + + +## Type Definitions + +### AlertType + +An Alert button type + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default alert with no inputs | +| plain-text | Plain text input alert | +| secure-text | Secure text input alert | +| login-password | Login and password alert | + + + + +--- + +### AlertButtonStyle + +An Alert button style + +| Type | +| - | +| $Enum | + + +**Constants:** + +| Value | Description | +| - | - | +| default | Default button style | +| cancel | Cancel button style | +| destructive | Destructive button style | + + + + +--- + +### ButtonsArray + +Array or buttons + +| Type | +| - | +| Array | + + +**Properties:** + +| Name | Type | Description | +| - | - | - | +| [text] | string | Button label | +| [onPress] | function | Callback function when button pressed | +| [style] | [AlertButtonStyle](alertios.md#alertbuttonstyle) | Button style | + + + + diff --git a/website/versioned_docs/version-0.37/appregistry.md b/website/versioned_docs/version-0.37/appregistry.md new file mode 100644 index 00000000000..6b78a079b12 --- /dev/null +++ b/website/versioned_docs/version-0.37/appregistry.md @@ -0,0 +1,135 @@ +--- +id: version-0.37-appregistry +title: AppRegistry +original_id: appregistry +--- + +`AppRegistry` is the JS entry point to running all React Native apps. App +root components should register themselves with +`AppRegistry.registerComponent`, then the native system can load the bundle +for the app and then actually run the app when it's ready by invoking +`AppRegistry.runApplication`. + +To "stop" an application when a view should be destroyed, call +`AppRegistry.unmountApplicationComponentAtRootTag` with the tag that was +pass into `runApplication`. These should always be used as a pair. + +`AppRegistry` should be `require`d early in the `require` sequence to make +sure the JS execution environment is setup before other modules are +`require`d. + + +### Methods + +- [`registerConfig`](appregistry.md#registerconfig) +- [`registerComponent`](appregistry.md#registercomponent) +- [`registerRunnable`](appregistry.md#registerrunnable) +- [`getAppKeys`](appregistry.md#getappkeys) +- [`runApplication`](appregistry.md#runapplication) +- [`unmountApplicationComponentAtRootTag`](appregistry.md#unmountapplicationcomponentatroottag) +- [`registerHeadlessTask`](appregistry.md#registerheadlesstask) +- [`startHeadlessTask`](appregistry.md#startheadlesstask) + + + + +--- + +# Reference + +## Methods + +### `registerConfig()` + +```javascript +static registerConfig(config) +``` + + + +--- + +### `registerComponent()` + +```javascript +static registerComponent(appKey, getComponentFunc) +``` + + + +--- + +### `registerRunnable()` + +```javascript +static registerRunnable(appKey, func) +``` + + + +--- + +### `getAppKeys()` + +```javascript +static getAppKeys() +``` + + + +--- + +### `runApplication()` + +```javascript +static runApplication(appKey, appParameters) +``` + + + +--- + +### `unmountApplicationComponentAtRootTag()` + +```javascript +static unmountApplicationComponentAtRootTag(rootTag) +``` + + + +--- + +### `registerHeadlessTask()` + +```javascript +static registerHeadlessTask(taskKey, task) +``` + + +Register a headless task. A headless task is a bit of code that runs without a UI. +@param taskKey the key associated with this task +@param task a promise returning function that takes some data passed from the native side as + the only argument; when the promise is resolved or rejected the native side is + notified of this event and it may decide to destroy the JS context. + + + + +--- + +### `startHeadlessTask()` + +```javascript +static startHeadlessTask(taskId, taskKey, data) +``` + + +Only called from native code. Starts a headless task. + +@param taskId the native id for this task instance to keep track of its execution +@param taskKey the key for the task to start +@param data the data to pass to the task + + + + diff --git a/website/versioned_docs/version-0.37/button.md b/website/versioned_docs/version-0.37/button.md new file mode 100644 index 00000000000..3492686429e --- /dev/null +++ b/website/versioned_docs/version-0.37/button.md @@ -0,0 +1,93 @@ +--- +id: version-0.37-button +title: Button +original_id: button +--- + +A basic button component that should render nicely on any platform. Supports a +minimal level of customization. + +
+ +If this button doesn't look right for your app, you can build your own button +using +[TouchableOpacity](https://facebook.github.io/react-native/touchableopacity.md) +or +[TouchableNativeFeedback](https://facebook.github.io/react-native/touchablenativefeedback.md). +For inspiration, look at the +[source code for this button component](https://github.com/facebook/react-native/blob/master/Libraries/Components/Button.js). +Or, take a look at the +[wide variety of button components built by the community](https://js.coach/react-native?search=button). + +Example usage: + +``` +