From bf3874dc5f02c853c7da5b0c03fc60a6ba217187 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Thu, 9 Nov 2017 21:30:29 +0000 Subject: [PATCH] Updated docs for next --- blog/2017/11/06/react-native-monthly-5.html | 19 +++ blog/feed.xml | 14 ++- blog/index.html | 2 +- blog/page2/index.html | 2 +- releases/next/css/react-native.css | 59 ++++++++- releases/next/docs/accessibility.html | 2 +- releases/next/docs/accessibilityinfo.html | 8 +- releases/next/docs/actionsheetios.html | 6 +- releases/next/docs/activityindicator.html | 6 +- releases/next/docs/alert.html | 4 +- releases/next/docs/alertios.html | 25 +--- .../docs/android-building-from-source.html | 4 +- releases/next/docs/animated.html | 34 +++--- releases/next/docs/animations.html | 4 +- releases/next/docs/app-extensions.html | 2 +- releases/next/docs/appregistry.html | 10 +- releases/next/docs/appstate.html | 19 +-- releases/next/docs/asyncstorage.html | 55 +++------ releases/next/docs/backandroid.html | 2 +- releases/next/docs/backhandler.html | 8 +- releases/next/docs/building-for-apple-tv.html | 4 +- releases/next/docs/button.html | 4 +- releases/next/docs/cameraroll.html | 8 +- releases/next/docs/checkbox.html | 8 +- releases/next/docs/clipboard.html | 6 +- releases/next/docs/colors.html | 2 +- releases/next/docs/communication-android.html | 4 +- releases/next/docs/communication-ios.html | 4 +- releases/next/docs/components-and-apis.html | 4 +- releases/next/docs/contributing.html | 2 +- .../next/docs/custom-webview-android.html | 6 +- releases/next/docs/custom-webview-ios.html | 4 +- releases/next/docs/datepickerandroid.html | 6 +- releases/next/docs/datepickerios.html | 8 +- releases/next/docs/debugging.html | 2 +- releases/next/docs/dimensions.html | 14 +-- releases/next/docs/direct-manipulation.html | 4 +- releases/next/docs/drawerlayoutandroid.html | 24 ++-- releases/next/docs/easing.html | 22 ++-- releases/next/docs/flatlist.html | 47 ++++--- releases/next/docs/flexbox.html | 4 +- releases/next/docs/geolocation.html | 14 ++- .../next/docs/gesture-responder-system.html | 2 +- releases/next/docs/getting-started.html | 10 +- releases/next/docs/handling-text-input.html | 4 +- releases/next/docs/handling-touches.html | 4 +- releases/next/docs/headless-js-android.html | 6 +- releases/next/docs/height-and-width.html | 4 +- releases/next/docs/image-style-props.html | 27 ++++ releases/next/docs/image.html | 46 +++---- releases/next/docs/imageeditor.html | 7 +- releases/next/docs/imagepickerios.html | 2 +- releases/next/docs/images.html | 2 +- releases/next/docs/imagestore.html | 10 +- releases/next/docs/imagestyleproptypes.html | 27 ---- releases/next/docs/improvingux.html | 8 +- .../docs/integration-with-existing-apps.html | 16 ++- releases/next/docs/interactionmanager.html | 8 +- .../next/docs/javascript-environment.html | 2 +- releases/next/docs/keyboard.html | 8 +- releases/next/docs/keyboardavoidingview.html | 6 +- releases/next/docs/layout-props.html | 102 +++++++++------- releases/next/docs/layoutanimation.html | 6 +- releases/next/docs/linking-libraries-ios.html | 10 +- releases/next/docs/linking.html | 13 +- releases/next/docs/listview.html | 56 ++++----- releases/next/docs/listviewdatasource.html | 14 +-- releases/next/docs/maintainers.html | 2 +- releases/next/docs/maskedviewios.html | 4 +- releases/next/docs/modal.html | 8 +- releases/next/docs/more-resources.html | 2 +- .../next/docs/native-components-android.html | 4 +- releases/next/docs/native-components-ios.html | 4 +- .../next/docs/native-modules-android.html | 4 +- releases/next/docs/native-modules-ios.html | 4 +- releases/next/docs/navigation.html | 2 +- releases/next/docs/navigatorios.html | 79 ++++++------ releases/next/docs/netinfo.html | 58 ++++----- releases/next/docs/network.html | 4 +- releases/next/docs/panresponder.html | 17 +-- releases/next/docs/performance.html | 2 +- releases/next/docs/permissionsandroid.html | 30 +---- releases/next/docs/picker-item.html | 19 +++ releases/next/docs/picker-style-props.html | 19 +++ releases/next/docs/picker.html | 8 +- releases/next/docs/pickerios.html | 2 +- releases/next/docs/pixelratio.html | 11 +- .../next/docs/platform-specific-code.html | 4 +- releases/next/docs/progressbarandroid.html | 6 +- releases/next/docs/progressviewios.html | 2 +- releases/next/docs/props.html | 2 +- releases/next/docs/pushnotificationios.html | 26 ++-- releases/next/docs/refreshcontrol.html | 4 +- releases/next/docs/running-on-device.html | 4 +- .../next/docs/running-on-simulator-ios.html | 2 +- releases/next/docs/scrollview.html | 86 ++++++------- releases/next/docs/sectionlist.html | 27 ++-- releases/next/docs/segmentedcontrolios.html | 12 +- releases/next/docs/settings.html | 2 +- releases/next/docs/shadow-props.html | 2 +- releases/next/docs/share.html | 5 +- releases/next/docs/signed-apk-android.html | 4 +- releases/next/docs/slider.html | 70 +++++++++-- releases/next/docs/snapshotviewios.html | 2 +- releases/next/docs/state.html | 2 +- releases/next/docs/statusbar.html | 15 +-- releases/next/docs/statusbarios.html | 2 +- releases/next/docs/style.html | 2 +- releases/next/docs/stylesheet.html | 47 +++---- releases/next/docs/switch.html | 11 +- releases/next/docs/systrace.html | 15 +-- releases/next/docs/tabbarios-item.html | 16 +-- releases/next/docs/tabbarios.html | 10 +- releases/next/docs/testing.html | 2 +- releases/next/docs/text-style-props.html | 24 ++++ releases/next/docs/text.html | 24 ++-- releases/next/docs/textinput.html | 58 ++++----- releases/next/docs/textstyleproptypes.html | 24 ---- releases/next/docs/timepickerandroid.html | 6 +- releases/next/docs/timers.html | 2 +- releases/next/docs/toastandroid.html | 4 +- releases/next/docs/toolbarandroid.html | 14 +-- releases/next/docs/touchablehighlight.html | 10 +- .../next/docs/touchablenativefeedback.html | 16 +-- releases/next/docs/touchableopacity.html | 6 +- .../next/docs/touchablewithoutfeedback.html | 16 +-- releases/next/docs/transforms.html | 4 +- releases/next/docs/troubleshooting.html | 2 +- releases/next/docs/tutorial.html | 2 +- releases/next/docs/understanding-cli.html | 4 +- releases/next/docs/upgrading.html | 2 +- releases/next/docs/using-a-listview.html | 4 +- releases/next/docs/using-a-scrollview.html | 4 +- releases/next/docs/vibration.html | 4 +- releases/next/docs/vibrationios.html | 6 +- releases/next/docs/view-props.html | 115 ++++++++++++++++++ releases/next/docs/view-style-props.html | 22 ++++ releases/next/docs/view.html | 66 +++++----- releases/next/docs/viewpagerandroid.html | 31 ++--- releases/next/docs/viewproptypes.html | 115 ------------------ releases/next/docs/viewstyleproptypes.html | 22 ---- releases/next/docs/virtualizedlist.html | 32 ++--- releases/next/docs/webview.html | 47 ++++--- releases/next/versions.html | 2 +- versions.html | 4 +- 145 files changed, 1114 insertions(+), 1129 deletions(-) create mode 100644 blog/2017/11/06/react-native-monthly-5.html create mode 100644 releases/next/docs/image-style-props.html delete mode 100644 releases/next/docs/imagestyleproptypes.html create mode 100644 releases/next/docs/picker-item.html create mode 100644 releases/next/docs/picker-style-props.html create mode 100644 releases/next/docs/text-style-props.html delete mode 100644 releases/next/docs/textstyleproptypes.html create mode 100644 releases/next/docs/view-props.html create mode 100644 releases/next/docs/view-style-props.html delete mode 100644 releases/next/docs/viewproptypes.html delete mode 100644 releases/next/docs/viewstyleproptypes.html diff --git a/blog/2017/11/06/react-native-monthly-5.html b/blog/2017/11/06/react-native-monthly-5.html new file mode 100644 index 00000000000..f19096638bb --- /dev/null +++ b/blog/2017/11/06/react-native-monthly-5.html @@ -0,0 +1,19 @@ +React Native Monthly #5 - React Native
React Nativenext

Tomislav Tenodi —

React Native Monthly #5

The React Native monthly meeting continues! Let's see what our teams are up to.

Callstack #

  • We’ve been working on React Native CI. Most importantly, we have migrated from Travis to Circle, leaving React Native with a single, unified CI pipeline.
  • We’ve organised Hacktoberfest - React Native edition where, together with attendees, we tried to submit many pull requests to open source projects.
  • We keep working on Haul. Last month, we have submitted two new releases, including Webpack 3 support. We plan to add CRNA and Expo support as well as work on better HMR. Our roadmap is public on the issue tracker. If you would like to suggest improvements or give feedback, let us know!

Expo #

  • Released Expo SDK 22 (using React Native 0.49) and updated CRNA for it.
    • Includes improved splash screen API, basic ARKit support, “DeviceMotion” API, SFAuthenticationSession support on iOS11, and more.
  • Your snacks can now have multiple JavaScript files and you can upload images and other assets by just dragging them into the editor.
  • Contribute to react-navigation to add support for iPhone X.
  • Focus our attention on rough edges when building large applications with Expo. For example:
    • First-class support for deploying to multiple environments: staging, production, and arbitrary channels. Channels will support rolling back and setting the active release for a given channel. Let us know if you want to be an early tester, @expo_io.
    • We are also working on improving our standalone app building infrastructure and adding support for bundling images and other non-code assets in standalone app builds while keeping the ability to update assets over the air.

Facebook #

  • Better RTL support:
    • We’re introducing a number of direction-aware styles.
      • Position:
        • (left|right) → (start|end)
      • Margin:
        • margin(Left|Right) → margin(Start|End)
      • Padding:
        • padding(Left|Right) → padding(Start|End)
      • Border:
        • borderTop(Left|Right)Radius → borderTop(Start|End)Radius
        • borderBottom(Left|Right)Radius → borderBottom(Start|End)Radius
        • border(Left|Right)Width → border(Start|End)Width
        • border(Left|Right)Color → border(Start|End)Color
    • The meaning of “left” and “right” were swapped in RTL for position, margin, padding, and border styles. Within a few months, we’re going to remove this behaviour and make “left” always mean “left,” and “right” always mean “right”. The breaking changes are hidden under a flag. Use I18nManager.swapLeftAndRightInRTL(false) in your React Native components to opt into them.
  • Working on Flow typing our internal native modules and using those to generate interfaces in Java and protocols in ObjC that the native implementations must implement. We hope this codegen becomes open source next year, at the earliest.

Infinite Red #

  • New OSS tool for helping React Native and other projects. More here.
  • Revamping Ignite for a new boilerplate release (Code name: Bowser)

Shoutem #

  • Improving the development flow on Shoutem. We want to streamline the process from creating an app to first custom screen and make it really easy, thus lowering the barrier for new React Native developers. Prepared a few workshops to test out new features. We also improved Shoutem CLI to support new flows.
  • Shoutem UI received a few component improvements and bugfixes. We also checked compatibility with latest React Native versions.
  • Shoutem platform received a few notable updates, new integrations are available as part of the open-source extensions project. We are really excited to see active development on Shoutem extensions from other developers. We actively contact and offer advice and guidance about their extensions.

Next session #

The next session is scheduled for Wednesday 6, December 2017. Feel free to ping me on Twitter if you have any suggestion on how we should improve the output of the meeting.

\ No newline at end of file diff --git a/blog/feed.xml b/blog/feed.xml index c588de40329..41af1fd7870 100644 --- a/blog/feed.xml +++ b/blog/feed.xml @@ -2,12 +2,24 @@ https://facebook.github.io/react-native/blog/ React Native Blog - 2017-09-21T00:00:00Z + 2017-11-06T00:00:00Z The best place to stay up-to-date with the latest React Native news and events. https://facebook.github.io/react-native/img/header_logo.png Copyright © 2017 Facebook Inc. Feed for Node.js + + <![CDATA[React Native Monthly #5]]> + https://facebook.github.io/react-native/blog/2017/11/06/react-native-monthly-5.html + + + 2017-11-06T00:00:00Z + + + Tomislav Tenodi + https://github.com/tenodi + + <![CDATA[React Native Monthly #4]]> https://facebook.github.io/react-native/blog/2017/09/21/react-native-monthly-4.html diff --git a/blog/index.html b/blog/index.html index 7352f5bc32e..2aaf374ec38 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,4 +1,4 @@ -React Native Blog - React Native
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Mike Grabowski —

React Native Monthly #3

The React Native monthly meeting continues! This month's meeting was a bit shorter as most of our teams were busy shipping. Next month, we are at React Native EU conference in Wroclaw, Poland. Make sure to grab a ticket and see you there in person! Meanwhile, let's see what our teams are up to.

Aaron Chiu —

React Native Performance in Marketplace

React Native is used in multiple places across multiple apps in the Facebook family including a top level tab in the main Facebook apps. Our focus for this post is a highly visible product, Marketplace. It is available in a dozen or so countries and enables users to discover products and services provided by other users.

Tomislav Tenodi —

React Native Monthly #2

The React Native monthly meeting continues! On this session, we were joined by Infinite Red, great minds behind Chain React, the React Native Conference. As most of the people here were presenting talks at Chain React, we pushed the meeting to a week later. Talks from the conference have been posted online and I encourage you to check them out. So, let's see what our teams are up to.

Tomislav Tenodi —

React Native Monthly #1

At Shoutem, we've been fortunate enough to work with React Native from its very beginnings. We decided we wanted to be part of the amazing community from day one. Soon enough, we realized it's almost impossible to keep up with the pace the community was growing and improving. That's why we decided to organize a monthly meeting where all major React Native contributors can briefly present what their efforts and plans are.

Adam Perry —

Introducing Create React Native App

Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).

Timothy Yung —

idx: The Existential Function

At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.

Spencer Ahrens —

Better List Views in React Native

Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:

Janic Duplessis —

Using Native Driver for Animated

For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.

Eric Vicenti —

A Monthly Release Cadence: Releasing December and January RC

Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.

Older posts →
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Mike Grabowski —

React Native Monthly #3

The React Native monthly meeting continues! This month's meeting was a bit shorter as most of our teams were busy shipping. Next month, we are at React Native EU conference in Wroclaw, Poland. Make sure to grab a ticket and see you there in person! Meanwhile, let's see what our teams are up to.

Aaron Chiu —

React Native Performance in Marketplace

React Native is used in multiple places across multiple apps in the Facebook family including a top level tab in the main Facebook apps. Our focus for this post is a highly visible product, Marketplace. It is available in a dozen or so countries and enables users to discover products and services provided by other users.

Tomislav Tenodi —

React Native Monthly #2

The React Native monthly meeting continues! On this session, we were joined by Infinite Red, great minds behind Chain React, the React Native Conference. As most of the people here were presenting talks at Chain React, we pushed the meeting to a week later. Talks from the conference have been posted online and I encourage you to check them out. So, let's see what our teams are up to.

Tomislav Tenodi —

React Native Monthly #1

At Shoutem, we've been fortunate enough to work with React Native from its very beginnings. We decided we wanted to be part of the amazing community from day one. Soon enough, we realized it's almost impossible to keep up with the pace the community was growing and improving. That's why we decided to organize a monthly meeting where all major React Native contributors can briefly present what their efforts and plans are.

Adam Perry —

Introducing Create React Native App

Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).

Timothy Yung —

idx: The Existential Function

At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.

Spencer Ahrens —

Better List Views in React Native

Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:

Janic Duplessis —

Using Native Driver for Animated

For the past year, we've been working on improving performance of animations that use the Animated library. Animations are very important to create a beautiful user experience but can also be hard to do right. We want to make it easy for developers to create performant animations without having to worry about some of their code causing it to lag.

Eric Vicenti —

A Monthly Release Cadence: Releasing December and January RC

Shortly after React Native was introduced, we started releasing every two weeks to help the community adopt new features, while keeping versions stable for production use. At Facebook we had to stabilize the codebase every two weeks for the release of our production iOS apps, so we decided to release the open source versions at the same pace. Now, many of the Facebook apps ship once per week, especially on Android. Because we ship from master weekly, we need to keep it quite stable. So the bi-weekly release cadence doesn't even benefit internal contributors anymore.

Older posts →
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Héctor Ramos —

San Francisco Meetup Recap

Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.

Kevin Lacker —

Toward Better Documentation

Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.

Martin Konicek —

React Native: A year in review

It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing React Native to the Windows ecosystem, giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, Samsung is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the Facebook SDK for React Native, which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.

Pieter De Baets —

Dive into React Native Performance

React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.

Martín Bigio —

Introducing Hot Reloading

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

Georgiy Kassabli —

Making React Native apps accessible

With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.

Tom Occhino —

React Native: Bringing modern web techniques to mobile

We introduced React to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.

← Newer posts
React Nativenext
React Native Blog
Stay up-to-date with the latest React Native news and events.

Héctor Ramos —

San Francisco Meetup Recap

Last week I had the opportunity to attend the React Native Meetup at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.

Kevin Lacker —

Toward Better Documentation

Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.

Martin Konicek —

React Native: A year in review

It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing React Native to the Windows ecosystem, giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, Samsung is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the Facebook SDK for React Native, which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.

Pieter De Baets —

Dive into React Native Performance

React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.

Martín Bigio —

Introducing Hot Reloading

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

Georgiy Kassabli —

Making React Native apps accessible

With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.

Tom Occhino —

React Native: Bringing modern web techniques to mobile

We introduced React to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.

← Newer posts
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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

<View accessible={true}> +Accessibility - React Native
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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

<View accessible={true}> <Text>text one</Text> <Text>text two</Text> </View>

In the above example, we can't get accessibility focus separately on 'text one' and 'text two'. Instead we get focus on a parent view with 'accessible' property.

accessibilityLabel (iOS, Android) #

When a view is marked as accessible, it is a good practice to set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected. VoiceOver will read this string when a user selects the associated element.

To use, set the accessibilityLabel property to a custom string on your View:

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}> diff --git a/releases/next/docs/accessibilityinfo.html b/releases/next/docs/accessibilityinfo.html index 3025b180a2f..5a976287bc8 100644 --- a/releases/next/docs/accessibilityinfo.html +++ b/releases/next/docs/accessibilityinfo.html @@ -1,4 +1,4 @@ -AccessibilityInfo - React Native
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

AccessibilityInfo #

Sometimes it's useful to know whether or not the device has a screen reader that is currently active. The +AccessibilityInfo - React Native

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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:

class ScreenReaderStatusExample extends React.Component { state = { @@ -39,13 +39,13 @@ screen reader as well as to register to be notified when the state of the screen </View> ); } -}

Methods #

static fetch() #

Query whether a screen reader is currently enabled. Returns a promise which +}

Methods #

Reference #

Methods #

fetch() #

AccessibilityInfo.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.

static addEventListener(eventName, handler) #

Add an event handler. Supported events:

  • change: Fires when the state of the screen reader changes. The argument +and false otherwise.

    addEventListener() #

    AccessibilityInfo.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.

static setAccessibilityFocus(reactTag) #

iOS-Only. Set accessibility focus to a react component.

static announceForAccessibility(announcement) #

iOS-Only. Post a string to be announced by the screen reader.

static removeEventListener(eventName, handler) #

Remove an event handler.

Improve this page by sending a pull request!

← PrevNext →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

ActionSheetIOS #

Methods #

static showActionSheetWithOptions(options, callback) #

Display an iOS action sheet. The options object must contain one or more +ActionSheetIOS - React Native

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

ActionSheetIOS #

Display action sheets and share sheets on iOS.

Methods #

Reference #

Methods #

showActionSheetWithOptions() #

ActionSheetIOS.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'], @@ -7,13 +7,13 @@ of the selected item.

Minimal example:

}, (buttonIndex) => { if (buttonIndex === 1) { // destructive action } -});

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

Display the iOS share sheet. The options object should contain +});

showShareActionSheetWithOptions() #

ActionSheetIOS.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

Improve this page by sending a pull request!

← PrevNext →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Example #

import React, { Component } from 'react' +ActivityIndicator - React Native
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

ActivityIndicator #

Displays a circular loading indicator.

Example #

import React, { Component } from 'react' import { ActivityIndicator, AppRegistry, @@ -32,8 +32,8 @@ } }) -AppRegistry.registerComponent('App', () => App)

Props #

ViewPropTypes props... #

animating?: bool #

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

color?: color #

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

size?: enum('small', 'large'), number #

Size of the indicator (default is 'small'). -Passing a number to the size prop is only supported on Android.

ioshidesWhenStopped?: bool #

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

Improve this page by sending a pull request!

Next →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

Alert #

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the +Alert - React Native

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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, @@ -18,7 +18,7 @@ i.e. { cancelable: false }

Example usage:

{text: 'OK', onPress: () => console.log('OK Pressed')}, ], { cancelable: false } -)

Methods #

static alert(title, message?, buttons?, options?, type?) #

Improve this page by sending a pull request!

← PrevNext →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

AlertIOS #

AlertIOS provides functionality to create an iOS alert dialog with a +AlertIOS - React Native

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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.' @@ -7,29 +7,14 @@ message or create a prompt for user input.

Creating an iOS alert:

null, text => console.log("You entered "+text) );

We recommend using the Alert.alert method for -cross-platform support if you don't need to create iOS-only prompts.

Methods #

static alert(title: string, message?: string, callbackOrButtons?: ?(() => void), ButtonsArray, type?: AlertType) #

Create and display a popup alert.

Parameters:
Name and TypeDescription
title

string

The dialog's title. Passing null or '' will hide the title.

[message]

string

An optional message that appears below - the dialog's title.

[callbackOrButtons]

?(() => void) | ButtonsArray

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]

Deprecated, do not use.


Example with custom buttons:
AlertIOS.alert( +cross-platform support if you don't need to create iOS-only prompts.

Methods #

Type Definitions #

Reference #

Methods #

alert() #

AlertIOS.alert(title: string, [message]: string, [callbackOrButtons]: ?(() => void), ButtonsArray, [type]: AlertType): [object Object]

Create and display a popup alert.

Parameters:

NameTypeRequiredDescription
titlestringYesThe dialog's title. Passing null or '' will hide the title.
messagestringNoAn optional message that appears below the dialog's title.
callbackOrButtons?(() => void),ButtonsArrayNoThis 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'.
typeAlertTypeNoDeprecated, do not use.

Example with custom buttons:

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')}, ], -);

static prompt(title: string, message?: string, callbackOrButtons?: ?((text: string) => void), ButtonsArray, type?: AlertType, defaultValue?: string, keyboardType?: string) #

Create and display a prompt to enter some text.

Parameters:
Name and TypeDescription
title

string

The dialog's title.

[message]

string

An optional message that appears above the text - input.

[callbackOrButtons]

?((text: string) => void) | ButtonsArray

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]

This configures the text input. One of 'plain-text', - 'secure-text' or 'login-password'.

[defaultValue]

string

The default text in text input.

[keyboardType]

string

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:
AlertIOS.prompt( +);

prompt() #

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

NameTypeRequiredDescription
titlestringYesThe dialog's title.
messagestringNoAn optional message that appears above the text input.
callbackOrButtons?((text: string) => void),ButtonsArrayNoThis 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'.
typeAlertTypeNoThis configures the text input. One of 'plain-text', 'secure-text' or 'login-password'.
defaultValuestringNoThe default text in text input.
keyboardTypestringNoThe 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:

AlertIOS.prompt( 'Enter password', 'Enter your password to claim your $1.5B in lottery winnings', [ @@ -37,13 +22,13 @@ cross-platform support if you don't need to create iOS-only prompts.

{text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}, ], 'secure-text' -);

Example with the default button and a custom callback:
AlertIOS.prompt( +);

,

Example with the default button and a custom callback:

AlertIOS.prompt( 'Update username', null, text => console.log("Your username is "+text), null, 'default' -);

Type Definitions #

AlertType #

An Alert button type

Type:
$Enum

Constants:
ValueDescription
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:
ValueDescription
default

Default button style

cancel

Cancel button style

destructive

Destructive button style

ButtonsArray #

Array or buttons

Type:
Array

Properties:
Name and TypeDescription
[text]

string

Button label

[onPress]

function

Callback function when button pressed

[style]

Button style


Constants:
ValueDescription
text

Button label

onPress

Callback function when button pressed

style

Button style

Improve this page by sending a pull request!

← PrevNext →
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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)
  2. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
  3. Android Support Repository >= 17 (for Android Support Library)
  4. Android NDK (download 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 +Building React Native from source - React Native
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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

Building the source #

1. Installing the fork #

First, you need to install react-native from your fork. For example, to install the master branch from the official repo, run the following:

npm install --save github:facebook/react-native#master

Alternatively, you can clone the repo to your node_modules directory and run npm install inside the cloned repo.

2. Adding gradle dependencies #

Add gradle-download-task as dependency in android/build.gradle:

... dependencies { @@ -28,7 +28,7 @@ dependencies { 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.

Troubleshooting #

Gradle build fails in ndk-build. See the section about local.properties file above.

← PreviousContinue Reading →

Improve this page by sending a pull request!

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

Animated #

The Animated library is designed to make animations fluid, powerful, and +Animated - React Native

React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

Contributing

components

APIs

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 @@ -63,13 +63,13 @@ the following in order to map event.nativeEvent.contentOffset.x to } } }] - )}

Methods #

static decay(value, config) #

Animates a value from an initial velocity to zero based on a decay + )}

Methods #

Properties #

Reference #

Methods #

decay() #

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.

static timing(value, config) #

Animates a value along a timed easing curve. The +InteractionManager. Default true.

  • useNativeDriver: Uses the native driver when true. Default false.

    • timing() #

    static timing(value, config)

    Animates a value along a timed easing curve. The Easing 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.

    static spring(value, config) #

    Animates a value according to an analytical spring model based on +InteractionManager. Default true.

  • useNativeDriver: Uses the native driver when true. Default false.

    • spring() #

    static spring(value, config)

    Animates a value according to an analytical spring model based on damped harmonic oscillation. 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 @@ -86,26 +86,26 @@ is at rest).

  • overshootClamping: Boolean indiciating whether 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.

    • static add(a, b) #

    Creates a new Animated value composed from two Animated values added -together.

    static divide(a, b) #

    Creates a new Animated value composed by dividing the first Animated value -by the second Animated value.

    static multiply(a, b) #

    Creates a new Animated value composed from two Animated values multiplied -together.

    static modulo(a, modulus) #

    Creates a new Animated value that is the (non-negative) modulo of the -provided Animated value

    static diffClamp(a, min, max) #

    Create a new Animated value that is limited between 2 values. It uses the +InteractionManager. Default true.

  • useNativeDriver: Uses the native driver when true. Default false.

    • add() #

    static add(a, b)

    Creates a new Animated value composed from two Animated values added +together.

    divide() #

    static divide(a, b)

    Creates a new Animated value composed by dividing the first Animated value +by the second Animated value.

    multiply() #

    static multiply(a, b)

    Creates a new Animated value composed from two Animated values multiplied +together.

    modulo() #

    static modulo(a, modulus)

    Creates a new Animated value that is the (non-negative) modulo of the +provided Animated value

    diffClamp() #

    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.

    static delay(time) #

    Starts an animation after the given delay.

    static sequence(animations) #

    Starts an array of animations in order, waiting for each to complete +scrolling up and to hide it when scrolling down.

    delay() #

    static delay(time)

    Starts an animation after the given delay.

    sequence() #

    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.

    static parallel(animations, config?) #

    Starts an array of animations all at the same time. By default, if one +following animations will be started.

    parallel() #

    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.

    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.

    static loop(animation) #

    Loops a given animation continuously, so that each time it reaches the +this with the stopTogether flag.

    stagger() #

    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() #

    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.

    static event(argMapping, config?) #

    Takes an array of mappings and extracts values from each arg accordingly, +child animation config to fix this.

    event() #

    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.

    onScroll={Animated.event( [{nativeEvent: {contentOffset: {x: this._scrollX}}}], {listener: (event) => console.log(event)}, // Optional async listener @@ -115,10 +115,8 @@ then calls setValue on the mapped outputs. e.g.

    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.

    static forkEvent(event, listener) #

    Advanced imperative API for snooping on animated events that are passed in through props. Use -values directly where possible.

    static unforkEvent(event, listener) #

    Properties #

    Value: CallExpression #

    Standard value class for driving animations. Typically initialized with -new Animated.Value(0);

    See also AnimatedValue.

    ValueXY: CallExpression #

    2D value class for driving 2D animations, such as pan gestures.

    See also AnimatedValueXY.

    Interpolation: CallExpression #

    exported to use the Interpolation type in flow

    See also AnimatedInterpolation.

    Node: CallExpression #

    Exported for ease of type checking. All animated values derive from this class.

    createAnimatedComponent: CallExpression #

    Make any React component Animatable. Used to create Animated.View, etc.

    attachNativeEvent: Identifier #

    Imperative API to attach an animated value to an event on a view. Prefer using -Animated.event with useNativeDrive: true if possible.

    Improve this page by sending a pull request!

    ← PrevNext →
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

    Animations #

    Animations are very important to create a great user experience. +Animations - React Native

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

    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: @@ -84,7 +84,7 @@ each of which simply take an array of animations to execute and automatically ca ]), ]).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 section of the Animated API reference.

    Combining animated values #

    You can combine two 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):

    const a = Animated.Value(1); +An example is inverting a scale (2x --> 0.5x):

    const a = new Animated.Value(1); const b = Animated.divide(1, a); Animated.spring(a, { diff --git a/releases/next/docs/app-extensions.html b/releases/next/docs/app-extensions.html index 50c0626d4a9..a23993b4988 100644 --- a/releases/next/docs/app-extensions.html +++ b/releases/next/docs/app-extensions.html @@ -1,4 +1,4 @@ -App Extensions - React Native
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

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

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

    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.

    ← PreviousContinue Reading →

    Improve this page by sending a pull request!

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

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

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

    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.

    ← PreviousContinue Reading →

    Improve this page by sending a pull request!

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

    AppRegistry #