- If you specify one butt
/**
* Simple alert examples.
*/
-var SimpleAlertExampleBlock = React.createClass({
-
- render: function() {
+class SimpleAlertExampleBlock extends React.Component {
+ render() {
return (
<View>
<TouchableHighlight style={styles.wrapper}
@@ -102,23 +101,23 @@ of a neutral, negative and a positive button:
- If you specify one butt
</TouchableHighlight>
</View>
);
- },
-});
+ }
+}
-var AlertExample = React.createClass({
- statics: {
- title: 'Alert',
- description: 'Alerts display a concise and informative message ' +
- 'and prompt the user to make a decision.',
- },
- render: function() {
+class AlertExample extends React.Component {
+ static title = 'Alert';
+
+ static description = 'Alerts display a concise and informative message ' +
+ 'and prompt the user to make a decision.';
+
+ render() {
return (
<UIExplorerBlock title={'Alert'}>
<SimpleAlertExampleBlock />
</UIExplorerBlock>
);
}
-});
+}
var styles = StyleSheet.create({
wrapper: {
diff --git a/releases/next/docs/appstate.html b/releases/next/docs/appstate.html
index fda32a0ea4a..59ee91fd137 100644
--- a/releases/next/docs/appstate.html
+++ b/releases/next/docs/appstate.html
@@ -41,33 +41,36 @@ const {
View
} = ReactNative;
-var AppStateSubscription = React.createClass({
- getInitialState() {
- return {
- appState: AppState.currentState,
- previousAppStates: [],
- memoryWarnings: 0,
- };
- },
- componentDidMount: function() {
+class AppStateSubscription extends React.Component {
+ state = {
+ appState: AppState.currentState,
+ previousAppStates: [],
+ memoryWarnings: 0,
+ };
+
+ componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
- },
- componentWillUnmount: function() {
+ }
+
+ componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
- },
- _handleMemoryWarning: function() {
+ }
+
+ _handleMemoryWarning = () => {
this.setState({memoryWarnings: this.state.memoryWarnings + 1});
- },
- _handleAppStateChange: function(appState) {
+ };
+
+ _handleAppStateChange = (appState) => {
var previousAppStates = this.state.previousAppStates.slice();
previousAppStates.push(this.state.appState);
this.setState({
appState,
previousAppStates,
});
- },
+ };
+
render() {
if (this.props.showMemoryWarnings) {
return (
@@ -89,7 +92,7 @@ const {
</View>
);
}
-});
+}
exports.title = 'AppState';
exports.description = 'app background status';
diff --git a/releases/next/docs/asyncstorage.html b/releases/next/docs/asyncstorage.html
index a6eb0561624..fd0f5fb8954 100644
--- a/releases/next/docs/asyncstorage.html
+++ b/releases/next/docs/asyncstorage.html
@@ -130,12 +130,17 @@ AsyncStorage.var STORAGE_KEY = '@AsyncStorageExample:key';
var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
-var BasicStorageExample = React.createClass({
+class BasicStorageExample extends React.Component {
+ state = {
+ selectedValue: COLORS[0],
+ messages: [],
+ };
+
componentDidMount() {
this._loadInitialState().done();
- },
+ }
- async _loadInitialState() {
+ _loadInitialState = async () => {
try {
var value = await AsyncStorage.getItem(STORAGE_KEY);
if (value !== null){
@@ -147,14 +152,7 @@ AsyncStorage.} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
- },
-
- getInitialState() {
- return {
- selectedValue: COLORS[0],
- messages: [],
- };
- },
+ };
render() {
var color = this.state.selectedValue;
@@ -186,9 +184,9 @@ AsyncStorage.{this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
</View>
);
- },
+ }
- async _onValueChange(selectedValue) {
+ _onValueChange = async (selectedValue) => {
this.setState({selectedValue});
try {
await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
@@ -196,21 +194,21 @@ AsyncStorage.} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
- },
+ };
- async _removeStorage() {
+ _removeStorage = async () => {
try {
await AsyncStorage.removeItem(STORAGE_KEY);
this._appendMessage('Selection removed from disk.');
} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
- },
+ };
- _appendMessage(message) {
+ _appendMessage = (message) => {
this.setState({messages: this.state.messages.concat(message)});
- },
-});
+ };
+}
exports.title = 'AsyncStorage';
exports.description = 'Asynchronous local disk storage.';
diff --git a/releases/next/docs/cameraroll.html b/releases/next/docs/cameraroll.html
index b021e187caa..4104fcefc33 100644
--- a/releases/next/docs/cameraroll.html
+++ b/releases/next/docs/cameraroll.html
@@ -23,15 +23,12 @@ const AssetScaledImageExampleView = = 'camera_roll_view';
-const CameraRollExample = React.createClass({
-
- getInitialState() {
- return {
- groupTypes: 'SavedPhotos',
- sliderValue: 1,
- bigImages: true,
- };
- },
+class CameraRollExample extends React.Component {
+ state = {
+ groupTypes: 'SavedPhotos',
+ sliderValue: 1,
+ bigImages: true,
+ };
render() {
return (
@@ -53,9 +50,9 @@ const CameraRollExample = React/>
</View>
);
- },
+ }
- loadAsset(asset){
+ loadAsset = (asset) => {
if (this.props.navigator) {
this.props.navigator.push({
title: 'Camera Roll Image',
@@ -64,9 +61,9 @@ const CameraRollExample = React: { asset: asset },
});
}
- },
+ };
- _renderImage(asset) {
+ _renderImage = (asset) => {
const imageSize = this.state.bigImages ? 150 : 75;
const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
const location = asset.node.location.longitude ?
@@ -87,22 +84,22 @@ const CameraRollExample = React/View>
</TouchableOpacity>
);
- },
+ };
- _onSliderChange(value) {
+ _onSliderChange = (value) => {
const options = CameraRoll.GroupTypesOptions;
const index = Math.floor(value * options.length * 0.99);
const groupTypes = options[index];
if (groupTypes !== this.state.groupTypes) {
this.setState({groupTypes: groupTypes});
}
- },
+ };
- _onSwitchChange(value) {
+ _onSwitchChange = (value) => {
this.refs[CAMERA_ROLL_VIEW].rendererChanged();
this.setState({ bigImages: value });
- }
-});
+ };
+}
const styles = StyleSheet.create({
row: {
diff --git a/releases/next/docs/clipboard.html b/releases/next/docs/clipboard.html
index fc9cd13d3a8..ed7f00d9f78 100644
--- a/releases/next/docs/clipboard.html
+++ b/releases/next/docs/clipboard.html
@@ -12,14 +12,12 @@
Text,
} = ReactNative;
-var ClipboardExample = React.createClass({
- getInitialState() {
- return {
- content: 'Content will appear here'
- };
- },
+class ClipboardExample extends React.Component {
+ state = {
+ content: 'Content will appear here'
+ };
- async _setClipboardContent(){
+ _setClipboardContent = async () => {
Clipboard.setString('Hello World');
try {
var content = await Clipboard.getString();
@@ -27,7 +25,7 @@
} catch (e) {
this.setState({content:e.message});
}
- },
+ };
render() {
return (
@@ -41,7 +39,7 @@
</View>
);
}
-});
+}
exports.title = 'Clipboard';
exports.description = 'Show Clipboard contents.';
diff --git a/releases/next/docs/datepickerandroid.html b/releases/next/docs/datepickerandroid.html
index f030290292a..25c73f9dc32 100644
--- a/releases/next/docs/datepickerandroid.html
+++ b/releases/next/docs/datepickerandroid.html
@@ -30,26 +30,21 @@ when using the
minDateandmaxDateoptions.< var UIExplorerBlock = require('./UIExplorerBlock'); var UIExplorerPage = require('./UIExplorerPage'); -var DatePickerAndroidExample = React.createClass({ +class DatePickerAndroidExample extends React.Component { + static title = 'DatePickerAndroid'; + static description = 'Standard Android date picker dialog'; - statics: { - title: 'DatePickerAndroid', - description: 'Standard Android date picker dialog', - }, + state = { + presetDate: new Date(2020, 4, 5), + allDate: new Date(2020, 4, 5), + simpleText: 'pick a date', + minText: 'pick a date, no earlier than today', + maxText: 'pick a date, no later than today', + presetText: 'pick a date, preset to 2020/5/5', + allText: 'pick a date between 2020/5/1 and 2020/5/10', + }; - getInitialState() { - return { - presetDate: new Date(2020, 4, 5), - allDate: new Date(2020, 4, 5), - simpleText: 'pick a date', - minText: 'pick a date, no earlier than today', - maxText: 'pick a date, no later than today', - presetText: 'pick a date, preset to 2020/5/5', - allText: 'pick a date between 2020/5/1 and 2020/5/10', - }; - }, - - async showPicker(stateKey, options) { + showPicker = async (stateKey, options) => { try { var newState = {}; const {action, year, month, day} = await DatePickerAndroid.open(options); @@ -64,7 +59,7 @@ when using theminDateandmaxDateoptions.< } catch ({code, message}) { console.warn(`Error in example '${stateKey}': `, message); } - }, + }; render() { return ( @@ -111,8 +106,8 @@ when using theminDateandmaxDateoptions.< </UIExplorerBlock> </UIExplorerPage> ); - }, -}); + } +} var styles = StyleSheet.create({ text: { diff --git a/releases/next/docs/datepickerios.html b/releases/next/docs/datepickerios.html index acc973820af..9d9eb808a24 100644 --- a/releases/next/docs/datepickerios.html +++ b/releases/next/docs/datepickerios.html @@ -18,34 +18,30 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.< View, } = ReactNative; -var DatePickerExample = React.createClass({ - getDefaultProps: function () { - return { - date: new Date(), - timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, - }; - }, +class DatePickerExample extends React.Component { + static defaultProps = { + date: new Date(), + timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60, + }; - getInitialState: function() { - return { - date: this.props.date, - timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, - }; - }, + state = { + date: this.props.date, + timeZoneOffsetInHours: this.props.timeZoneOffsetInHours, + }; - onDateChange: function(date) { + onDateChange = (date) => { this.setState({date: date}); - }, + }; - onTimezoneChange: function(event) { + onTimezoneChange = (event) => { var offset = parseInt(event.nativeEvent.text, 10); if (isNaN(offset)) { return; } this.setState({timeZoneOffsetInHours: offset}); - }, + }; - render: function() { + render() { // Ideally, the timezone input would be a picker rather than a // text input, but we don't have any pickers yet :( return ( @@ -89,11 +85,11 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.< /> </View> ); - }, -}); + } +} -var WithLabel = React.createClass({ - render: function() { +class WithLabel extends React.Component { + render() { return ( <View style={styles.labelContainer}> <View style={styles.labelView}> @@ -105,10 +101,10 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.< </View> ); } -}); +} -var Heading = React.createClass({ - render: function() { +class Heading extends React.Component { + render() { return ( <View style={styles.headingContainer}> <Text style={styles.heading}> @@ -117,7 +113,7 @@ instance, to show times in Pacific Standard Time, pass -7 * 60.< </View> ); } -}); +} exports.displayName = (undefined: ?string); exports.title = '<DatePickerIOS>'; diff --git a/releases/next/docs/geolocation.html b/releases/next/docs/geolocation.html index 6a151fcd53b..da798979e5f 100644 --- a/releases/next/docs/geolocation.html +++ b/releases/next/docs/geolocation.html @@ -31,17 +31,15 @@ exports.examples } ]; -var GeolocationExample = React.createClass({ - watchID: (null: ?number), +class GeolocationExample extends React.Component { + state = { + initialPosition: 'unknown', + lastPosition: 'unknown', + }; - getInitialState: function() { - return { - initialPosition: 'unknown', - lastPosition: 'unknown', - }; - }, + watchID: ?number = null; - componentDidMount: function() { + componentDidMount() { navigator.geolocation.getCurrentPosition( (position) => { var initialPosition = JSON.stringify(position); @@ -54,13 +52,13 @@ exports.examples var lastPosition = JSON.stringify(position); this.setState({lastPosition}); }); - }, + } - componentWillUnmount: function() { + componentWillUnmount() { navigator.geolocation.clearWatch(this.watchID); - }, + } - render: function() { + render() { return ( <View> <Text> @@ -74,7 +72,7 @@ exports.examples /View> ); } -}); +} var styles = StyleSheet.create({ title: { diff --git a/releases/next/docs/layoutanimation.html b/releases/next/docs/layoutanimation.html index 34a4f4e8799..4eb0bdd6d5c 100644 --- a/releases/next/docs/layoutanimation.html +++ b/releases/next/docs/layoutanimation.html @@ -15,25 +15,22 @@ const { TouchableOpacity, } = ReactNative; -const AddRemoveExample = React.createClass({ - - getInitialState() { - return { - views: [], - }; - }, +class AddRemoveExample extends React.Component { + state = { + views: [], + }; componentWillUpdate() { LayoutAnimation.easeInEaseOut(); - }, + } - _onPressAddView() { + _onPressAddView = () => { this.setState((state) => ({views: [...state.views, {}]})); - }, + }; - _onPressRemoveView() { + _onPressRemoveView = () => { this.setState((state) => ({views: state.views.slice(0, -1)})); - }, + }; render() { const views = this.state.views.map((view, i) => @@ -58,8 +55,8 @@ const AddRemoveExample = React/View> </View> ); - }, -}); + } +} const GreenSquare = () => <View style={styles.greenSquare}> @@ -71,18 +68,15 @@ const BlueSquare = >Blue square</Text> </View>; -const CrossFadeExample = React.createClass({ +class CrossFadeExample extends React.Component { + state = { + toggled: false, + }; - getInitialState() { - return { - toggled: false, - }; - }, - - _onPressToggle() { + _onPressToggle = () => { LayoutAnimation.easeInEaseOut(); this.setState((state) => ({toggled: !state.toggled})); - }, + }; render() { return ( @@ -101,8 +95,8 @@ const CrossFadeExample = React/View> </View> ); - }, -}); + } +} const styles = StyleSheet.create({ container: { diff --git a/releases/next/docs/linking.html b/releases/next/docs/linking.html index b77573e8f86..6581fc12b76 100644 --- a/releases/next/docs/linking.html +++ b/releases/next/docs/linking.html @@ -64,13 +64,12 @@ it will give the link url, otherwise it will givenullNOTE: } = ReactNative; var UIExplorerBlock = require('./UIExplorerBlock'); -var OpenURLButton = React.createClass({ - - propTypes: { +class OpenURLButton extends React.Component { + static propTypes = { url: React.PropTypes.string, - }, + }; - handleClick: function() { + handleClick = () => { Linking.canOpenURL(this.props.url).then(supported => { if (supported) { Linking.openURL(this.props.url); @@ -78,9 +77,9 @@ it will give the link url, otherwise it will give
nullNOTE: console.log('Don\'t know how to open URI: ' + this.props.url); } }); - }, + }; - render: function() { + render() { return ( <TouchableOpacity onPress={this.handleClick}> @@ -90,16 +89,13 @@ it will give the link url, otherwise it will give
nullNOTE: </TouchableOpacity> ); } -}); +} -var IntentAndroidExample = React.createClass({ +class IntentAndroidExample extends React.Component { + static title = 'Linking'; + static description = 'Shows how to use Linking to open URLs.'; - statics: { - title: 'Linking', - description: 'Shows how to use Linking to open URLs.', - }, - - render: function() { + render() { return ( <UIExplorerBlock title="Open external URLs"> <OpenURLButton url={'https://www.facebook.com'} /> @@ -110,8 +106,8 @@ it will give the link url, otherwise it will give
nullNOTE: <OpenURLButton url={'tel:9876543210'} /> </UIExplorerBlock> ); - }, -}); + } +} var styles = StyleSheet.create({ container: { diff --git a/releases/next/docs/mapview.html b/releases/next/docs/mapview.html index 5d334f0bbbc..91b45fb4aa6 100644 --- a/releases/next/docs/mapview.html +++ b/releases/next/docs/mapview.html @@ -182,16 +182,13 @@ Default value is
true.}); -var MapViewExample = React.createClass({ - - getInitialState() { - return { - isFirstLoad: true, - mapRegion: undefined, - mapRegionInput: undefined, - annotations: [], - }; - }, +class MapViewExample extends React.Component { + state = { + isFirstLoad: true, + mapRegion: undefined, + mapRegionInput: undefined, + annotations: [], + }; render() { return ( @@ -209,23 +206,23 @@ Default value is
true./> </View> ); - }, + } - _getAnnotations(region) { + _getAnnotations = (region) => { return [{ longitude: region.longitude, latitude: region.latitude, title: 'You Are Here', }]; - }, + }; - _onRegionChange(region) { + _onRegionChange = (region) => { this.setState({ mapRegionInput: region, }); - }, + }; - _onRegionChangeComplete(region) { + _onRegionChangeComplete = (region) => { if (this.state.isFirstLoad) { this.setState({ mapRegionInput: region, @@ -233,27 +230,23 @@ Default value is
true.: false, }); } - }, + }; - _onRegionInputChanged(region) { + _onRegionInputChanged = (region) => { this.setState({ mapRegion: region, mapRegionInput: region, annotations: this._getAnnotations(region), }); - }, + }; +} -}); - -var AnnotationExample = React.createClass({ - - getInitialState() { - return { - isFirstLoad: true, - annotations: [], - mapRegion: undefined, - }; - }, +class AnnotationExample extends React.Component { + state = { + isFirstLoad: true, + annotations: [], + mapRegion: undefined, + }; render() { if (this.state.isFirstLoad) { @@ -277,13 +270,17 @@ Default value is
true.={this.state.annotations} /> ); - }, + } +} -}); +class DraggableAnnotationExample extends React.Component { + state = { + isFirstLoad: true, + annotations: [], + mapRegion: undefined, + }; -var DraggableAnnotationExample = React.createClass({ - - createAnnotation(longitude, latitude) { + createAnnotation = (longitude, latitude) => { return { longitude, latitude, @@ -297,15 +294,7 @@ Default value is
true..log('Drag state: ' + event.state); }, }; - }, - - getInitialState() { - return { - isFirstLoad: true, - annotations: [], - mapRegion: undefined, - }; - }, + }; render() { if (this.state.isFirstLoad) { @@ -327,9 +316,8 @@ Default value is
true.={this.state.annotations} /> ); - }, - -}); + } +} var styles = StyleSheet.create({ map: { diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index 7f312ebc174..91d3e6e4282 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -63,20 +63,18 @@ exports.framework .title = '<Modal>'; exports.description = 'Component for presenting modal views.'; -var Button = React.createClass({ - getInitialState() { - return { - active: false, - }; - }, +class Button extends React.Component { + state = { + active: false, + }; - _onHighlight() { + _onHighlight = () => { this.setState({active: true}); - }, + }; - _onUnhighlight() { + _onUnhighlight = () => { this.setState({active: false}); - }, + }; render() { var colorStyle = { @@ -93,28 +91,26 @@ exports.description /TouchableHighlight> ); } -}); +} -var ModalExample = React.createClass({ - getInitialState() { - return { - animationType: 'none', - modalVisible: false, - transparent: false, - }; - }, +class ModalExample extends React.Component { + state = { + animationType: 'none', + modalVisible: false, + transparent: false, + }; - _setModalVisible(visible) { + _setModalVisible = (visible) => { this.setState({modalVisible: visible}); - }, + }; - _setAnimationType(type) { + _setAnimationType = (type) => { this.setState({animationType: type}); - }, + }; - _toggleTransparent() { + _toggleTransparent = () => { this.setState({transparent: !this.state.transparent}); - }, + }; render() { var modalBackgroundStyle = { @@ -169,8 +165,8 @@ exports.description /Button> </View> ); - }, -}); + } +} exports.examples = [ { diff --git a/releases/next/docs/navigatorios.html b/releases/next/docs/navigatorios.html index 9749c14dd03..3302eab13b9 100644 --- a/releases/next/docs/navigatorios.html +++ b/releases/next/docs/navigatorios.html @@ -166,8 +166,8 @@ const { View, } = ReactNative; -const EmptyPage = React.createClass({ - render: function() { +class EmptyPage extends React.Component { + render() { return ( <View style={styles.emptyPage}> <Text style={styles.emptyPageText}> @@ -175,11 +175,11 @@ const EmptyPage = React/Text> </View> ); - }, -}); + } +} -const NavigatorIOSExamplePage = React.createClass({ - render: function() { +class NavigatorIOSExamplePage extends React.Component { + render() { var recurseTitle = 'Recurse Navigation'; if (!this.props.depth || this.props.depth === 1) { recurseTitle += ' - more examples here'; @@ -258,9 +258,9 @@ const NavigatorIOSExamplePage = React={styles.line}/> </ScrollView> ); - }, + } - _renderReplace: function() { + _renderReplace = () => { if (!this.props.depth) { // this is to avoid replacing the top of the stack return null; @@ -278,9 +278,9 @@ const NavigatorIOSExamplePage = React} }); }); - }, + }; - _renderReplacePrevious: function() { + _renderReplacePrevious = () => { if (!this.props.depth || this.props.depth < 2) { // this is to avoid replacing the top of the stack return null; @@ -295,9 +295,9 @@ const NavigatorIOSExamplePage = React: styles.customWrapperStyle, }); }); - }, + }; - _renderReplacePreviousAndPop: function() { + _renderReplacePreviousAndPop = () => { if (!this.props.depth || this.props.depth < 2) { // this is to avoid replacing the top of the stack return null; @@ -312,9 +312,9 @@ const NavigatorIOSExamplePage = React: styles.customWrapperStyle, }); }); - }, + }; - _renderRow: function(title: string, onPress: Function) { + _renderRow = (title: string, onPress: Function) => { return ( <View> <TouchableHighlight onPress={onPress}> @@ -327,17 +327,15 @@ const NavigatorIOSExamplePage = React={styles.separator} /> </View> ); - }, -}); + }; +} -const NavigatorIOSExample = React.createClass({ - statics: { - title: '<NavigatorIOS>', - description: 'iOS navigation capabilities', - external: true, - }, +class NavigatorIOSExample extends React.Component { + static title = '<NavigatorIOS>'; + static description = 'iOS navigation capabilities'; + static external = true; - render: function() { + render() { const {onExampleExit} = this.props; return ( <NavigatorIOS @@ -350,8 +348,8 @@ const NavigatorIOSExample = React="#008888" /> ); - }, -}); + } +} const styles = StyleSheet.create({ container: { diff --git a/releases/next/docs/netinfo.html b/releases/next/docs/netinfo.html index c777469eea6..d4201643f05 100644 --- a/releases/next/docs/netinfo.html +++ b/releases/next/docs/netinfo.html @@ -51,31 +51,33 @@ const { TouchableWithoutFeedback, } = ReactNative; -const ConnectionInfoSubscription = React.createClass({ - getInitialState() { - return { - connectionInfoHistory: [], - }; - }, - componentDidMount: function() { +class ConnectionInfoSubscription extends React.Component { + state = { + connectionInfoHistory: [], + }; + + componentDidMount() { NetInfo.addEventListener( 'change', this._handleConnectionInfoChange ); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { NetInfo.removeEventListener( 'change', this._handleConnectionInfoChange ); - }, - _handleConnectionInfoChange: function(connectionInfo) { + } + + _handleConnectionInfoChange = (connectionInfo) => { const connectionInfoHistory = this.state.connectionInfoHistory.slice(); connectionInfoHistory.push(connectionInfo); this.setState({ connectionInfoHistory, }); - }, + }; + render() { return ( <View> @@ -83,15 +85,14 @@ const ConnectionInfoSubscription = React
/View> ); } -}); +} -const ConnectionInfoCurrent = React.createClass({ - getInitialState() { - return { - connectionInfo: null, - }; - }, - componentDidMount: function() { +class ConnectionInfoCurrent extends React.Component { + state = { + connectionInfo: null, + }; + + componentDidMount() { NetInfo.addEventListener( 'change', this._handleConnectionInfoChange @@ -99,18 +100,21 @@ const ConnectionInfoCurrent = React.fetch().done( (connectionInfo) => { this.setState({connectionInfo}); } ); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { NetInfo.removeEventListener( 'change', this._handleConnectionInfoChange ); - }, - _handleConnectionInfoChange: function(connectionInfo) { + } + + _handleConnectionInfoChange = (connectionInfo) => { this.setState({ connectionInfo, }); - }, + }; + render() { return ( <View> @@ -118,15 +122,14 @@ const ConnectionInfoCurrent = React/View> ); } -}); +} -const IsConnected = React.createClass({ - getInitialState() { - return { - isConnected: null, - }; - }, - componentDidMount: function() { +class IsConnected extends React.Component { + state = { + isConnected: null, + }; + + componentDidMount() { NetInfo.isConnected.addEventListener( 'change', this._handleConnectivityChange @@ -134,18 +137,21 @@ const IsConnected = React.isConnected.fetch().done( (isConnected) => { this.setState({isConnected}); } ); - }, - componentWillUnmount: function() { + } + + componentWillUnmount() { NetInfo.isConnected.removeEventListener( 'change', this._handleConnectivityChange ); - }, - _handleConnectivityChange: function(isConnected) { + } + + _handleConnectivityChange = (isConnected) => { this.setState({ isConnected, }); - }, + }; + render() { return ( <View> @@ -153,19 +159,19 @@ const IsConnected = React/View> ); } -}); +} -const IsConnectionExpensive = React.createClass({ - getInitialState() { - return { - isConnectionExpensive: (null : ?boolean), - }; - }, - _checkIfExpensive() { +class IsConnectionExpensive extends React.Component { + state = { + isConnectionExpensive: (null : ?boolean), + }; + + _checkIfExpensive = () => { NetInfo.isConnectionExpensive().then( isConnectionExpensive => { this.setState({isConnectionExpensive}); } ); - }, + }; + render() { return ( <View> @@ -181,7 +187,7 @@ const IsConnectionExpensive = React/View> ); } -}); +} exports.title = 'NetInfo'; exports.description = 'Monitor network status'; diff --git a/releases/next/docs/picker.html b/releases/next/docs/picker.html index c3113163517..9b3d639ba43 100644 --- a/releases/next/docs/picker.html +++ b/releases/next/docs/picker.html @@ -18,27 +18,23 @@ const { Picker, Text, TouchableWithoutFeedback, -} = ReactNative; -const Item = Picker.Item; +} = ReactNative; +// $FlowFixMe found when converting React.createClass to ES6 +const Item = Picker.Item; -const PickerExample = React.createClass({ +class PickerExample extends React.Component { + static title = '<Picker>'; + static description = 'Provides multiple options to choose from, using either a dropdown menu or a dialog.'; - statics: { - title: '<Picker>', - description: 'Provides multiple options to choose from, using either a dropdown menu or a dialog.', - }, + state = { + selected1: 'key1', + selected2: 'key1', + selected3: 'key1', + color: 'red', + mode: Picker.MODE_DIALOG, + }; - getInitialState: function() { - return { - selected1: 'key1', - selected2: 'key1', - selected3: 'key1', - color: 'red', - mode: Picker.MODE_DIALOG, - }; - }, - - render: function() { + render() { return ( <UIExplorerPage title="<Picker>"> <UIExplorerBlock title="Basic Picker"> @@ -107,21 +103,21 @@ const PickerExample = React/UIExplorerBlock> </UIExplorerPage> ); - }, + } - changeMode: function() { + changeMode = () => { const newMode = this.state.mode === Picker.MODE_DIALOG ? Picker.MODE_DROPDOWN : Picker.MODE_DIALOG; this.setState({mode: newMode}); - }, + }; - onValueChange: function(key: string, value: string) { + onValueChange = (key: string, value: string) => { const newState = {}; newState[key] = value; this.setState(newState); - }, -}); + }; +} var styles = StyleSheet.create({ picker: { diff --git a/releases/next/docs/pickerios.html b/releases/next/docs/pickerios.html index 2063453a6ad..b556af9c431 100644 --- a/releases/next/docs/pickerios.html +++ b/releases/next/docs/pickerios.html @@ -51,15 +51,13 @@ }, }; -var PickerExample = React.createClass({ - getInitialState: function() { - return { - carMake: 'cadillac', - modelIndex: 3, - }; - }, +class PickerExample extends React.Component { + state = { + carMake: 'cadillac', + modelIndex: 3, + }; - render: function() { + render() { var make = CAR_MAKES_AND_MODELS[this.state.carMake]; var selectionString = make.name + ' ' + make.models[this.state.modelIndex]; return ( @@ -92,18 +90,16 @@ <Text>You selected: {selectionString}</Text> </View> ); - }, -}); + } +} -var PickerStyleExample = React.createClass({ - getInitialState: function() { - return { - carMake: 'cadillac', - modelIndex: 0, - }; - }, +class PickerStyleExample extends React.Component { + state = { + carMake: 'cadillac', + modelIndex: 0, + }; - render: function() { + render() { var make = CAR_MAKES_AND_MODELS[this.state.carMake]; var selectionString = make.name + ' ' + make.models[this.state.modelIndex]; return ( @@ -120,8 +116,8 @@ ))} </PickerIOS> ); - }, -}); + } +} exports.displayName = (undefined: ?string); exports.title = '<PickerIOS>'; diff --git a/releases/next/docs/progressbarandroid.html b/releases/next/docs/progressbarandroid.html index b9d90cd1eb4..1ec9c09f9fc 100644 --- a/releases/next/docs/progressbarandroid.html +++ b/releases/next/docs/progressbarandroid.html @@ -45,14 +45,11 @@ can only be false if styleAttr is Horizontal. < }, }); -var ProgressBarAndroidExample = React.createClass({ +class ProgressBarAndroidExample extends React.Component { + static title = '<ProgressBarAndroid>'; + static description = 'Horizontal bar to show the progress of some operation.'; - statics: { - title: '<ProgressBarAndroid>', - description: 'Horizontal bar to show the progress of some operation.', - }, - - render: function() { + render() { return ( <UIExplorerPage title="ProgressBar Examples"> <UIExplorerBlock title="Horizontal Indeterminate ProgressBar"> @@ -72,8 +69,8 @@ can only be false if styleAttr is Horizontal.< </UIExplorerBlock> </UIExplorerPage> ); - }, -}); + } +} module.exports = ProgressBarAndroidExample;
- If you specify one butt
</TouchableHighlight>
</View>
);
- },
-});
+ }
+}
-var AlertExample = React.createClass({
- statics: {
- title: 'Alert',
- description: 'Alerts display a concise and informative message ' +
- 'and prompt the user to make a decision.',
- },
- render: function() {
+class AlertExample extends React.Component {
+ static title = 'Alert';
+
+ static description = 'Alerts display a concise and informative message ' +
+ 'and prompt the user to make a decision.';
+
+ render() {
return (
<UIExplorerBlock title={'Alert'}>
<SimpleAlertExampleBlock />
</UIExplorerBlock>
);
}
-});
+}
var styles = StyleSheet.create({
wrapper: {
diff --git a/releases/next/docs/appstate.html b/releases/next/docs/appstate.html
index fda32a0ea4a..59ee91fd137 100644
--- a/releases/next/docs/appstate.html
+++ b/releases/next/docs/appstate.html
@@ -41,33 +41,36 @@ const {
View
} = ReactNative;
-var AppStateSubscription = React.createClass({
- getInitialState() {
- return {
- appState: AppState.currentState,
- previousAppStates: [],
- memoryWarnings: 0,
- };
- },
- componentDidMount: function() {
+class AppStateSubscription extends React.Component {
+ state = {
+ appState: AppState.currentState,
+ previousAppStates: [],
+ memoryWarnings: 0,
+ };
+
+ componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
AppState.addEventListener('memoryWarning', this._handleMemoryWarning);
- },
- componentWillUnmount: function() {
+ }
+
+ componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
AppState.removeEventListener('memoryWarning', this._handleMemoryWarning);
- },
- _handleMemoryWarning: function() {
+ }
+
+ _handleMemoryWarning = () => {
this.setState({memoryWarnings: this.state.memoryWarnings + 1});
- },
- _handleAppStateChange: function(appState) {
+ };
+
+ _handleAppStateChange = (appState) => {
var previousAppStates = this.state.previousAppStates.slice();
previousAppStates.push(this.state.appState);
this.setState({
appState,
previousAppStates,
});
- },
+ };
+
render() {
if (this.props.showMemoryWarnings) {
return (
@@ -89,7 +92,7 @@ const {
</View>
);
}
-});
+}
exports.title = 'AppState';
exports.description = 'app background status';
diff --git a/releases/next/docs/asyncstorage.html b/releases/next/docs/asyncstorage.html
index a6eb0561624..fd0f5fb8954 100644
--- a/releases/next/docs/asyncstorage.html
+++ b/releases/next/docs/asyncstorage.html
@@ -130,12 +130,17 @@ AsyncStorage.var STORAGE_KEY = '@AsyncStorageExample:key';
var COLORS = ['red', 'orange', 'yellow', 'green', 'blue'];
-var BasicStorageExample = React.createClass({
+class BasicStorageExample extends React.Component {
+ state = {
+ selectedValue: COLORS[0],
+ messages: [],
+ };
+
componentDidMount() {
this._loadInitialState().done();
- },
+ }
- async _loadInitialState() {
+ _loadInitialState = async () => {
try {
var value = await AsyncStorage.getItem(STORAGE_KEY);
if (value !== null){
@@ -147,14 +152,7 @@ AsyncStorage.} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
- },
-
- getInitialState() {
- return {
- selectedValue: COLORS[0],
- messages: [],
- };
- },
+ };
render() {
var color = this.state.selectedValue;
@@ -186,9 +184,9 @@ AsyncStorage.{this.state.messages.map((m) => <Text key={m}>{m}</Text>)}
</View>
);
- },
+ }
- async _onValueChange(selectedValue) {
+ _onValueChange = async (selectedValue) => {
this.setState({selectedValue});
try {
await AsyncStorage.setItem(STORAGE_KEY, selectedValue);
@@ -196,21 +194,21 @@ AsyncStorage.} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
- },
+ };
- async _removeStorage() {
+ _removeStorage = async () => {
try {
await AsyncStorage.removeItem(STORAGE_KEY);
this._appendMessage('Selection removed from disk.');
} catch (error) {
this._appendMessage('AsyncStorage error: ' + error.message);
}
- },
+ };
- _appendMessage(message) {
+ _appendMessage = (message) => {
this.setState({messages: this.state.messages.concat(message)});
- },
-});
+ };
+}
exports.title = 'AsyncStorage';
exports.description = 'Asynchronous local disk storage.';
diff --git a/releases/next/docs/cameraroll.html b/releases/next/docs/cameraroll.html
index b021e187caa..4104fcefc33 100644
--- a/releases/next/docs/cameraroll.html
+++ b/releases/next/docs/cameraroll.html
@@ -23,15 +23,12 @@ const AssetScaledImageExampleView = = 'camera_roll_view';
-const CameraRollExample = React.createClass({
-
- getInitialState() {
- return {
- groupTypes: 'SavedPhotos',
- sliderValue: 1,
- bigImages: true,
- };
- },
+class CameraRollExample extends React.Component {
+ state = {
+ groupTypes: 'SavedPhotos',
+ sliderValue: 1,
+ bigImages: true,
+ };
render() {
return (
@@ -53,9 +50,9 @@ const CameraRollExample = React/>
</View>
);
- },
+ }
- loadAsset(asset){
+ loadAsset = (asset) => {
if (this.props.navigator) {
this.props.navigator.push({
title: 'Camera Roll Image',
@@ -64,9 +61,9 @@ const CameraRollExample = React: { asset: asset },
});
}
- },
+ };
- _renderImage(asset) {
+ _renderImage = (asset) => {
const imageSize = this.state.bigImages ? 150 : 75;
const imageStyle = [styles.image, {width: imageSize, height: imageSize}];
const location = asset.node.location.longitude ?
@@ -87,22 +84,22 @@ const CameraRollExample = React/View>
</TouchableOpacity>
);
- },
+ };
- _onSliderChange(value) {
+ _onSliderChange = (value) => {
const options = CameraRoll.GroupTypesOptions;
const index = Math.floor(value * options.length * 0.99);
const groupTypes = options[index];
if (groupTypes !== this.state.groupTypes) {
this.setState({groupTypes: groupTypes});
}
- },
+ };
- _onSwitchChange(value) {
+ _onSwitchChange = (value) => {
this.refs[CAMERA_ROLL_VIEW].rendererChanged();
this.setState({ bigImages: value });
- }
-});
+ };
+}
const styles = StyleSheet.create({
row: {
diff --git a/releases/next/docs/clipboard.html b/releases/next/docs/clipboard.html
index fc9cd13d3a8..ed7f00d9f78 100644
--- a/releases/next/docs/clipboard.html
+++ b/releases/next/docs/clipboard.html
@@ -12,14 +12,12 @@
Text,
} = ReactNative;
-var ClipboardExample = React.createClass({
- getInitialState() {
- return {
- content: 'Content will appear here'
- };
- },
+class ClipboardExample extends React.Component {
+ state = {
+ content: 'Content will appear here'
+ };
- async _setClipboardContent(){
+ _setClipboardContent = async () => {
Clipboard.setString('Hello World');
try {
var content = await Clipboard.getString();
@@ -27,7 +25,7 @@
} catch (e) {
this.setState({content:e.message});
}
- },
+ };
render() {
return (
@@ -41,7 +39,7 @@
</View>
);
}
-});
+}
exports.title = 'Clipboard';
exports.description = 'Show Clipboard contents.';
diff --git a/releases/next/docs/datepickerandroid.html b/releases/next/docs/datepickerandroid.html
index f030290292a..25c73f9dc32 100644
--- a/releases/next/docs/datepickerandroid.html
+++ b/releases/next/docs/datepickerandroid.html
@@ -30,26 +30,21 @@ when using the
React Native