diff --git a/releases/next/css/react-native.css b/releases/next/css/react-native.css index fe765b09d39..e2601c66d8c 100644 --- a/releases/next/css/react-native.css +++ b/releases/next/css/react-native.css @@ -1793,3 +1793,22 @@ article li { .btn:hover { text-decoration: none !important; } + +.video-container { + border-radius: 4px; + background-clip: padding-box; + margin: 0 0 18px; + height: 180px; + width: 100%; + background-size: cover; + background-position: center center; + position: relative; + height: 0; + overflow: hidden; +} + +@media (min-width: 760px) { + .video-container { + height: 345px; + } +} diff --git a/releases/next/docs/cameraroll.html b/releases/next/docs/cameraroll.html index a5bc716fa51..e0b867d22d5 100644 --- a/releases/next/docs/cameraroll.html +++ b/releases/next/docs/cameraroll.html @@ -19,25 +19,26 @@ const { TouchableOpacity } = ReactNative; +const invariant = require('invariant'); + const CameraRollView = require('./CameraRollView'); const AssetScaledImageExampleView = require('./AssetScaledImageExample'); -const CAMERA_ROLL_VIEW = 'camera_roll_view'; - class CameraRollExample extends React.Component { state = { groupTypes: 'SavedPhotos', sliderValue: 1, bigImages: true, }; - + _cameraRollView: ?CameraRollView; render() { return ( <View> <Switch onValueChange={this._onSwitchChange} - value={this.state.bigImages} /> + value={this.state.bigImages} + /> <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text> <Slider value={this.state.sliderValue} @@ -45,7 +46,7 @@ class CameraRollExample extends /> <Text>{'Group Type: ' + this.state.groupTypes}</Text> <CameraRollView - ref={CAMERA_ROLL_VIEW} + ref={(ref) => { this._cameraRollView = ref; }} batchSize={20} groupTypes={this.state.groupTypes} renderImage={this._renderImage} @@ -68,8 +69,8 @@ class CameraRollExample extends = (asset) => { const imageSize = this.state.bigImages ? 150 : 75; const imageStyle = [styles.image, {width: imageSize, height: imageSize}]; - const location = asset.node.location.longitude ? - JSON.stringify(asset.node.location) : 'Unknown location'; + const {location} = asset.node; + const locationStr = location ? JSON.stringify(location) : 'Unknown location'; return ( <TouchableOpacity key={asset} onPress={ this.loadAsset.bind( this, asset ) }> <View style={styles.row}> @@ -79,7 +80,7 @@ class CameraRollExample extends /> <View style={styles.info}> <Text style={styles.url}>{asset.node.image.uri}</Text> - <Text>{location}</Text> + <Text>{locationStr}</Text> <Text>{asset.node.group_name}</Text> <Text>{new Date(asset.node.timestamp).toString()}</Text> </View> @@ -98,7 +99,8 @@ class CameraRollExample extends }; _onSwitchChange = (value) => { - this.refs[CAMERA_ROLL_VIEW].rendererChanged(); + invariant(this._cameraRollView, 'ref should be set'); + this._cameraRollView.rendererChanged(); this.setState({ bigImages: value }); }; } diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index 6e72412a4e0..fa8bd190103 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -45,18 +45,23 @@ class ModalExample extends /View> ); } -}

Props #

animated bool #

Deprecated

Use the animationType prop instead.

animationType PropTypes.oneOf(['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

onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

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

On the Android platform, this is a required function.

onShow PropTypes.func #

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

transparent PropTypes.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 PropTypes.bool #

The visible prop determines whether your modal is visible.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; +}

Props #

animated bool #

Deprecated

Use the animationType prop instead.

animationType PropTypes.oneOf(['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

onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

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

On the Android platform, this is a required function.

onShow PropTypes.func #

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

transparent PropTypes.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 PropTypes.bool #

The visible prop determines whether your modal is visible.

iosonOrientationChange PropTypes.func #

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.

iossupportedOrientations PropTypes.arrayOf(PropTypes.oneOf(['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.

You can edit the content above on GitHub and send us a pull request!

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); var { Modal, + Picker, StyleSheet, Switch, Text, TouchableHighlight, View, -} = ReactNative; +} = ReactNative; +// $FlowFixMe Picker.Item not properly defined for flow. +const Item = Picker.Item; exports.displayName = (undefined: ?string); exports.framework = 'React'; @@ -93,11 +98,22 @@ class Button extends } } +const supportedOrientationsPickerValues = [ + ['portrait'], + ['landscape'], + ['landscape-left'], + ['portrait', 'landscape-right'], + ['portrait', 'landscape'], + [], +]; + class ModalExample extends React.Component { state = { animationType: 'none', modalVisible: false, transparent: false, + selectedSupportedOrientation: 0, + currentOrientation: 'unknown', }; _setModalVisible = (visible) => { @@ -129,11 +145,14 @@ class ModalExample extends ={this.state.animationType} transparent={this.state.transparent} visible={this.state.modalVisible} - onRequestClose={() => {this._setModalVisible(false)}} + onRequestClose={() => this._setModalVisible(false)} + supportedOrientations={supportedOrientationsPickerValues[this.state.selectedSupportedOrientation]} + onOrientationChange={evt => this.setState({currentOrientation: evt.nativeEvent.orientation})} > <View style={[styles.container, modalBackgroundStyle]}> <View style={[styles.innerContainer, innerContainerTransparentStyle]}> <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text> + <Text>It is currently displayed in {this.state.currentOrientation} mode.</Text> <Button onPress={this._setModalVisible.bind(this, false)} style={styles.modalButton}> @@ -160,6 +179,22 @@ class ModalExample extends ={this.state.transparent} onValueChange={this._toggleTransparent} /> </View> + <View> + <Text style={styles.rowTitle}>Supported orientations</Text> + <Picker + selectedValue={this.state.selectedSupportedOrientation} + onValueChange={(_, i) => this.setState({selectedSupportedOrientation: i})} + itemStyle={styles.pickerItem} + > + <Item label="Portrait" value={0} /> + <Item label="Landscape" value={1} /> + <Item label="Landscape left" value={2} /> + <Item label="Portrait and landscape right" value={3} /> + <Item label="Portrait and landscape" value={4} /> + <Item label="Default supportedOrientations" value={5} /> + </Picker> + </View> + <Button onPress={this._setModalVisible.bind(this, true)}> Present </Button> @@ -212,6 +247,9 @@ exports.examples : { marginTop: 10, }, + pickerItem: { + fontSize: 16, + }, });

Run this example

Run example in simulator

Powered by appetize.io

← PrevNext →
React Native0.32

React Native Versions

React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

masterDocs
0.33-rcDocsRelease Notes
(current) 0.32DocsRelease Notes
0.31DocsRelease Notes
0.30DocsRelease Notes
0.29DocsRelease Notes
0.28DocsRelease Notes
0.27DocsRelease Notes
0.26DocsRelease Notes
0.25DocsRelease Notes
0.24DocsRelease Notes
0.23DocsRelease Notes
0.22DocsRelease Notes
0.21DocsRelease Notes
0.20DocsRelease Notes
0.19DocsRelease Notes
0.18DocsRelease Notes
React Nativenext

React Native Versions

React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.

masterDocs
0.33-rcDocsRelease Notes
(current) 0.32DocsRelease Notes
0.31DocsRelease Notes
0.30DocsRelease Notes
0.29DocsRelease Notes
0.28DocsRelease Notes
0.27DocsRelease Notes
0.26DocsRelease Notes
0.25DocsRelease Notes
0.24DocsRelease Notes
0.23DocsRelease Notes
0.22DocsRelease Notes
0.21DocsRelease Notes
0.20DocsRelease Notes
0.19DocsRelease Notes
0.18DocsRelease Notes
\ No newline at end of file