From 5b2dd904ec3aed88f1008a4764ba692089afa2e3 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 27 Sep 2017 23:57:59 +0000 Subject: [PATCH] Updated docs for next --- blog/2017/09/21/react-native-monthly-4.html | 19 +++++++ blog/feed.xml | 14 ++++- blog/index.html | 2 +- blog/page2/index.html | 2 +- releases/next/docs/actionsheetios.html | 7 ++- releases/next/docs/activityindicator.html | 36 +++++++++++- releases/next/docs/animated.html | 3 +- releases/next/docs/button.html | 5 +- releases/next/docs/flatlist.html | 22 +++++--- releases/next/docs/headless-js-android.html | 4 +- releases/next/docs/modal.html | 48 +--------------- releases/next/docs/touchablehighlight.html | 62 ++++++++++++++++++++- releases/next/docs/touchableopacity.html | 26 ++++----- 13 files changed, 171 insertions(+), 79 deletions(-) create mode 100644 blog/2017/09/21/react-native-monthly-4.html diff --git a/blog/2017/09/21/react-native-monthly-4.html b/blog/2017/09/21/react-native-monthly-4.html new file mode 100644 index 00000000000..de0bfd4d96e --- /dev/null +++ b/blog/2017/09/21/react-native-monthly-4.html @@ -0,0 +1,19 @@ +React Native Monthly #4 - React Native
React Nativenext

Mike Grabowski —

React Native Monthly #4

The React Native monthly meeting continues! Here are the notes from each team:

Callstack #

  • React Native EU is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found on Youtube.
  • We are slowly getting back to our open source schedule after the conference. One thing worth mentioning is that we are working on a next release of react-native-opentok that fixes most of the existing issues.

GeekyAnts #

Trying to lower the entry barrier for the developers embracing React Native with the following things:

  • Announced BuilderX.io at React Native EU. BuilderX is a design tool that directly works with JavaScript files (only React Native is supported at the moment) to generate beautiful, readable, and editable code.
  • Launched ReactNativeSeed.com which provides a set of boilerplates for your next React Native project. It comes with a variety of options that include TypeScript & Flow for data-types, MobX, Redux, and mobx-state-tree for state-management with CRNA and plain React-Native as the stack.

Expo #

  • Will release SDK 21 shortly, which adds support for react-native 0.48.3 and a bunch of bugfixes/reliability improvements/new features in the Expo SDK, including video recording, a new splash screen API, support for react-native-gesture-handler, and improved error handling.
  • Re: react-native-gesture-handler, Krzysztof Magiera of Software Mansion continues pushing this forward and we've been helping him with testing it and funding part of his development time. Having this integrated in Expo in SDK21 will allow people to play with it easily in Snack, so we're excited to see what people come up with.
  • Re: improved error logging / handling - see this gist of an internal Expo PR for details on logging, (in particular, "Problem 2"), and this commit for a change that handles failed attempts to import npm standard library modules. There is plenty of opportunity to improve error messages upstream in React Native in this way and we will work on follow up upstream PRs. It would be great for the community to get involved too.
  • native.directory continues to grow, you can add your projects from the Github repo.
  • Visit hackathons around North America, including PennApps, Hack The North, HackMIT, and soon MHacks.

Facebook #

  • Working on improving <Text> and <TextInput> components on Android. (Native auto-growing for <TextInput>; deeply nested <Text> components layout issues; better code structure; performance optimizations).
  • We're still looking for additional contributors who would like to help triage issues and pull requests.

Microsoft #

  • Released Code Signing feature for CodePush. React Native developers are now able to sign their application bundles in CodePush. The announcement can be found here
  • Working on completing integration of CodePush to Mobile Center. Considering test/crash integration as well.

Next session #

The next session is scheduled for Wednesday 10, October 2017. As this was only our fourth meeting, we'd like to know how do these notes benefit the React Native community. 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 bb548a738dd..c588de40329 100644 --- a/blog/feed.xml +++ b/blog/feed.xml @@ -2,12 +2,24 @@ https://facebook.github.io/react-native/blog/ React Native Blog - 2017-08-30T00:00:00Z + 2017-09-21T00: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 #4]]> + https://facebook.github.io/react-native/blog/2017/09/21/react-native-monthly-4.html + + + 2017-09-21T00:00:00Z + + + Mike Grabowski + https://github.com/grabbou + + <![CDATA[React Native Monthly #3]]> https://facebook.github.io/react-native/blog/2017/08/30/react-native-monthly-3.html diff --git a/blog/index.html b/blog/index.html index e546df04592..7352f5bc32e 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.

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.

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.

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

ActionSheetIOS #

Methods #

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

static showShareActionSheetWithOptions(options, failureCallback, successCallback) #

Display the iOS share sheet. The options object should contain +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.

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.

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.

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'). +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, + StyleSheet, + Text, + View, +} from 'react-native' + +class App extends Component { + render() { + return ( + <View style={[styles.container, styles.horizontal]}> + <ActivityIndicator size="large" color="#0000ff" /> + <ActivityIndicator size="small" color="#00ff00" /> + <ActivityIndicator size="large" color="#0000ff" /> + <ActivityIndicator size="small" color="#00ff00" /> + </View> + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center' + }, + horizontal: { + flexDirection: 'row', + justifyContent: 'space-around', + padding: 10 + } +}) + +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

FlatList #

A performant interface for rendering simple, flat lists, supporting the most handy features:

  • Fully cross-platform.
  • Optional horizontal mode.
  • Configurable viewability callbacks.
  • Header support.
  • Footer support.
  • Separator support.
  • Pull to Refresh.
  • Scroll loading.
  • ScrollToIndex support.

If you need section support, use <SectionList>.

Minimal Example:

<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} -/>

More complex example demonstrating PureComponent usage for perf optimization and avoiding bugs.

  • By binding the onPressItem handler, the props will remain === and PureComponent will +/>

More complex, multi-select example demonstrating PureComponent usage for perf optimization and avoiding bugs.

  • By binding the onPressItem handler, the props will remain === and PureComponent will prevent wasteful re-renders unless the actual id, selected, or title props change, even -if the inner SomeOtherWidget has no such optimizations.
  • By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render +if the components rendered in MyListItem did not have such optimizations.
  • By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will -not show any changes.
  • keyExtractor tells the list to use the ids for the react keys.
class MyListItem extends React.PureComponent { +not show any changes.
  • keyExtractor tells the list to use the ids for the react keys instead of the default key property.
    • class MyListItem extends React.PureComponent { _onPress = () => { this.props.onPressItem(this.props.id); }; render() { + const textColor = this.props.selected ? "red" : "black"; return ( - <SomeOtherWidget - {...this.props} - onPress={this._onPress} - /> - ) + <TouchableOpacity onPress={this._onPress}> + <View> + <Text style={{ color: textColor }}> + {this.props.title} + </Text> + </View> + </TouchableOpacity> + ); } } -class MyList extends React.PureComponent { +class MultiSelectList extends React.PureComponent { state = {selected: (new Map(): Map<string, boolean>)}; _keyExtractor = (item, index) => item.id; diff --git a/releases/next/docs/headless-js-android.html b/releases/next/docs/headless-js-android.html index 0ee05ab9bdc..820ba02521f 100644 --- a/releases/next/docs/headless-js-android.html +++ b/releases/next/docs/headless-js-android.html @@ -9,7 +9,9 @@ return new HeadlessJsTaskConfig( "SomeTaskName", Arguments.fromBundle(extras), - 5000); + 5000, // timeout for the task + false // optional: defines whether or not the task is allowed in foreground. Default is false + ); } return null; } diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index f5ba2846cb3..2df8bf9a09b 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -1,50 +1,4 @@ -Modal - React Native
    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

    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.

    import React, { Component } from 'react'; -import { Modal, Text, TouchableHighlight, View } from 'react-native'; - -class ModalExample extends Component { - - state = { - modalVisible: false, - } - - setModalVisible(visible) { - this.setState({modalVisible: visible}); - } - - render() { - return ( - <View style={{marginTop: 22}}> - <Modal - animationType="slide" - transparent={false} - visible={this.state.modalVisible} - onRequestClose={() => {alert("Modal has been closed.")}} - > - <View style={{marginTop: 22}}> - <View> - <Text>Hello World!</Text> - - <TouchableHighlight onPress={() => { - this.setModalVisible(!this.state.modalVisible) - }}> - <Text>Hide Modal</Text> - </TouchableHighlight> - - </View> - </View> - </Modal> - - <TouchableHighlight onPress={() => { - this.setModalVisible(true) - }}> - <Text>Show Modal</Text> - </TouchableHighlight> - - </View> - ); - } -}

    Props #

    animated?: bool #

    Deprecated

    Use the animationType prop instead.

    animationType?: enum('none', 'slide', 'fade') #

    The animationType prop controls how the modal animates.

    • slide slides in from the bottom
    • fade fades into view
    • none appears without an animation

    Default is set to none.

    onRequestClose?: (Platform.isTVOS || Platform.OS === 'android') ? PropTypes.func.isRequired : PropTypes.func #

    The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.

    onShow?: function #

    The onShow prop allows passing a function that will be called once the modal has been shown.

    transparent?: bool #

    The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

    visible?: bool #

    The visible prop determines whether your modal is visible.

    androidhardwareAccelerated?: bool #

    The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.

    iosonOrientationChange?: function #

    The onOrientationChange callback is called when the orientation changes while the modal is being displayed. +Modal - React Native

    React Nativenext

    The Basics

    Guides

    Guides (iOS)

    Guides (Android)

    Contributing

    components

    APIs

    Modal #

    Props #

    animated?: bool #

    Deprecated

    Use the animationType prop instead.

    animationType?: enum('none', 'slide', 'fade') #

    The animationType prop controls how the modal animates.

    • slide slides in from the bottom
    • fade fades into view
    • none appears without an animation

    Default is set to none.

    onRequestClose?: (Platform.isTVOS || Platform.OS === 'android') ? PropTypes.func.isRequired : PropTypes.func #

    The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV.

    onShow?: function #

    The onShow prop allows passing a function that will be called once the modal has been shown.

    transparent?: bool #

    The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

    visible?: bool #

    The visible prop determines whether your modal is visible.

    androidhardwareAccelerated?: bool #

    The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.

    iosonDismiss?: function #

    The onDismiss prop allows passing a function that will be called once the modal has been dismissed.

    iosonOrientationChange?: function #

    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.

    iospresentationStyle?: enum('fullScreen', 'pageSheet', 'formSheet', 'overFullScreen') #

    The presentationStyle prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.

    • fullScreen covers the screen completely
    • pageSheet covers portrait-width view centered (only on larger devices)
    • formSheet covers narrow-width view centered (only on larger devices)
    • overFullScreen covers the screen completely, but allows transparency

    Default is set to overFullScreen or fullScreen depending on transparent property.

    iossupportedOrientations?: [enum('portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right')] #

    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. diff --git a/releases/next/docs/touchablehighlight.html b/releases/next/docs/touchablehighlight.html index dac54a61330..2865150b8fe 100644 --- a/releases/next/docs/touchablehighlight.html +++ b/releases/next/docs/touchablehighlight.html @@ -13,7 +13,67 @@ If you wish to have several child components, wrap them in a View.

    Example /> </TouchableHighlight> ); -},

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity?: number #

    Determines what the opacity of the wrapped view should be when touch is +},

    Example #

    import React, { Component } from 'react' +import { + AppRegistry, + StyleSheet, + TouchableHighlight, + Text, + View, +} from 'react-native' + +class App extends Component { + constructor(props) { + super(props) + this.state = { count: 0 } + } + + onPress = () => { + this.setState({ + count: this.state.count+1 + }) + } + + render() { + return ( + <View style={styles.container}> + <TouchableHighlight + style={styles.button} + onPress={this.onPress} + > + <Text> Touch Here </Text> + </TouchableHighlight> + <View style={[styles.countContainer]}> + <Text style={[styles.countText]}> + { this.state.count !== 0 ? this.state.count: null} + </Text> + </View> + </View> + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + paddingHorizontal: 10 + }, + button: { + alignItems: 'center', + backgroundColor: '#DDDDDD', + padding: 10 + }, + countContainer: { + alignItems: 'center', + padding: 10 + }, + countText: { + color: '#FF00FF' + } +}) + +AppRegistry.registerComponent('App', () => App)

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity?: number #

    Determines what the opacity of the wrapped view should be when touch is active.

    onHideUnderlay?: function #

    Called immediately after the underlay is hidden

    onShowUnderlay?: function #

    Called immediately after the underlay is shown

    style?: ViewPropTypes.style #

    underlayColor?: color #

    The color of the underlay that will show through when the touch is active.

    ioshasTVPreferredFocus?: bool #

    (Apple TV only) TV preferred focus (see documentation for the View component).

    iostvParallaxProperties?: object #

    (Apple TV only) Object with properties to control Apple TV parallax effects.

    enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. diff --git a/releases/next/docs/touchableopacity.html b/releases/next/docs/touchableopacity.html index d2030e7c32e..f500bdf4015 100644 --- a/releases/next/docs/touchableopacity.html +++ b/releases/next/docs/touchableopacity.html @@ -19,21 +19,21 @@ added to the view hiearchy. Be aware that this can affect layout.

    Example } from 'react-native' class App extends Component { -constructor(props) { - super(props) - this.state = { count: 0 } -} + constructor(props) { + super(props) + this.state = { count: 0 } + } -onPress = () => { - this.setState({ - count: this.state.count+1 - }) -} + onPress = () => { + this.setState({ + count: this.state.count+1 + }) + } render() { - return ( - <View style={styles.container}> - <TouchableOpacity + return ( + <View style={styles.container}> + <TouchableOpacity style={styles.button} onPress={this.onPress} > @@ -69,7 +69,7 @@ onPress = (< } }) -AppRegistry.registerComponent('App', () => App)

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity?: number #

    Determines what the opacity of the wrapped view should be when touch is +AppRegistry.registerComponent('App', () => App)

    Props #

    TouchableWithoutFeedback props... #

    activeOpacity?: number #

    Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.

    tvParallaxProperties?: object #

    Apple TV parallax effects

    Methods #

    setOpacityTo(value: number, duration: number) #

    Animate the touchable to a new opacity.

    Improve this page by sending a pull request!

    ← PrevNext →