diff --git a/packages/rn-tester/js/examples/Text/TextExample.ios.js b/packages/rn-tester/js/examples/Text/TextExample.ios.js index 6b65d167894..8d511df36d9 100644 --- a/packages/rn-tester/js/examples/Text/TextExample.ios.js +++ b/packages/rn-tester/js/examples/Text/TextExample.ios.js @@ -12,6 +12,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes'; +import RNTesterText from '../../components/RNTesterText'; import TextLegend from '../../components/TextLegend'; import TextInlineViewsExample from './TextInlineViewsExample'; @@ -1350,9 +1351,9 @@ const examples = [ return ( {`[${code}]`} - + {textByCode[code]} - + ); })} diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js index 4894dd41b48..4facb47446b 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js +++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js @@ -16,6 +16,7 @@ import type { } from '../../types/RNTesterTypes'; import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/TextInput'; +import RNTesterText from '../../components/RNTesterText'; import ExampleTextInput from './ExampleTextInput'; const TextInputSharedExamples = require('./TextInputSharedExamples.js'); @@ -36,7 +37,7 @@ class WithLabel extends React.Component<$FlowFixMeProps> { return ( - {this.props.label} + {this.props.label} {this.props.children} @@ -58,7 +59,9 @@ class TextInputAccessoryViewChangeTextExample extends React.Component< const inputAccessoryViewID = 'inputAccessoryView1'; return ( - Set InputAccessoryView with ID & reset text: + + Set InputAccessoryView with ID & reset text: + this.setState({text})} @@ -98,7 +101,9 @@ class TextInputAccessoryViewChangeKeyboardExample extends React.Component< const inputAccessoryViewID = 'inputAccessoryView2'; return ( - Set InputAccessoryView with ID & switch keyboard: + + Set InputAccessoryView with ID & switch keyboard: + {/* $FlowFixMe[incompatible-use] */} { onChangeText={text => this.setState({text})} value={this.state.text} /> - Current text is: {this.state.text} + Current text is: {this.state.text} - Full width: + Full width: this.setState({fullWidth: value})} /> - Multiline: + Multiline: this.setState({multiline: value})} /> - TextInput: + TextInput: - Plain text value representation: - {this.state.text} - Content Size: {JSON.stringify(this.state.contentSize)} + Plain text value representation: + {this.state.text} + + Content Size: {JSON.stringify(this.state.contentSize)} + ); } @@ -655,7 +662,7 @@ const textInputExamples: Array = [ render: function (): React.Node { return ( - Singleline TextInput + Singleline TextInput = [ placeholder="Placeholder defines intrinsic size" /> - Multiline TextInput - + Multiline TextInput + = [ placeholder="Placeholder defines intrinsic size" /> + Multiline TextInput with flex = [ {Object.keys(textByCode).map(code => { return ( - {`[${code}]`} + {`[${code}]`} = [ {Object.keys(textByCode).map(code => { return ( - {`[${code}]`} + {`[${code}]`} { render(): React.Node { return ( - {this.props.label} + {this.props.label} {this.props.children} ); @@ -417,13 +418,13 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMeState> { } style={styles.singleLine} /> - + {this.state.curText} {'\n'} (prev: {this.state.prevText}){'\n'} (prev2: {this.state.prev2Text}){'\n'} (prev3: {this.state.prev3Text}) - + ); } @@ -571,34 +572,38 @@ class SelectionExample extends React.Component< /> - + selection ={' '} {`{start:${this.state.selection.start},end:${this.state.selection.end}}`} - - + Place at Start (0, 0) - - + Place at End ({length}, {length}) - + {/* $FlowFixMe[method-unbinding] added when improving typing for this * parameters */} - Place at Random - + Place at Random + + Select All - + {/* $FlowFixMe[method-unbinding] added when improving typing for this * parameters */} - Select Random + + Select Random + ); @@ -855,7 +860,7 @@ function DynamicContentWidth() { return ( - Uncontrolled: + Uncontrolled: - Controlled: + Controlled: { return ( - Upload 255 bytes as ... + + Upload 255 bytes as ... + {Object.keys(BINARY_TYPES).map(type => ( { const {responseLength, contentLength} = this.state; readystate = ( - + responseText: {roundKilo(responseLength)}/{roundKilo(contentLength)} k chars - + ); } @@ -173,10 +175,10 @@ class XHRExampleDownload extends React.Component<{...}, Object> { const {progressLoaded, progressTotal} = this.state; progress = ( - + onprogress: {roundKilo(progressLoaded)}/{roundKilo(progressTotal)}{' '} KB - + ); } @@ -184,7 +186,7 @@ class XHRExampleDownload extends React.Component<{...}, Object> { return ( - onreadystatechange handler + onreadystatechange handler @@ -193,21 +195,21 @@ class XHRExampleDownload extends React.Component<{...}, Object> { /> - onprogress handler + onprogress handler this.setState({progressHandler})} /> - download as arraybuffer + download as arraybuffer this.setState({arraybuffer})} /> - transfer-encoding: chunked + transfer-encoding: chunked this.setState({chunked})} diff --git a/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js b/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js index 3f49af76b48..2f0aef97823 100644 --- a/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js +++ b/packages/rn-tester/js/examples/XHR/XHRExampleFetch.js @@ -10,15 +10,16 @@ 'use strict'; -const React = require('react'); -const { +import {RNTesterThemeContext} from '../../components/RNTesterTheme'; +import React from 'react'; +import { Button, Platform, StyleSheet, Text, TextInput, View, -} = require('react-native'); +} from 'react-native'; class XHRExampleFetch extends React.Component { responseURL: ?string; @@ -113,24 +114,33 @@ class XHRExampleFetch extends React.Component { ) : null; return ( - -