kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-21 08:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add flow types RNTester examples (#22829)

Browse Source 
Summary:
This PR adds flow types for the RNTester examples, and updates all of the RNTester examples to match the flow type consistently.

Previously, there was a mix of static class definitions and whether or not pages exported examples or a component. Now we will always export the same way, enforced by flow types

Note: I also fixed most of the $FlowFixMe in changed components
Pull Request resolved: https://github.com/facebook/react-native/pull/22829

Reviewed By: cpojer

Differential Revision: D13563191

Pulled By: rickhanlonii

fbshipit-source-id: b697e3346a863d1b130881592b0522a96c202b63
This commit is contained in:
Rick Hanlon
2018-12-31 08:26:00 -08:00
committed by Facebook Github Bot
parent 34ee8250b5
commit bd32234e6e
58 changed files with 715 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
RNTester/js/ARTExample.js
View File

@@ -18,7 +18,8 @@ const {Surface, Path, Group, Shape} = ART;
const scale = Platform.isTV ? 4 : 1;
class ARTExample extends React.Component<{}> {
type Props = $ReadOnly<{||}>;
class ARTExample extends React.Component<Props> {
render() {
const pathRect = new Path()
.moveTo(scale * 0, scale * 0)

14
RNTester/js/AccessibilityAndroidExample.android.js
View File

@@ -31,9 +31,6 @@ const importantForAccessibilityValues = [
];
class AccessibilityAndroidExample extends React.Component {
static title = 'Accessibility';
static description = 'Examples of using Accessibility API.';
state = {
count: 0,
backgroundImportantForAcc: 0,
@@ -306,4 +303,13 @@ const styles = StyleSheet.create({
},
});
module.exports = AccessibilityAndroidExample;
exports.title = 'Accessibility';
exports.description = 'Examples of using Accessibility API.';
exports.examples = [
{
title: 'Accessibility elements',
render(): React.Element<typeof AccessibilityAndroidExample> {
return <AccessibilityAndroidExample />;
},
},
];

3
RNTester/js/AccessibilityIOSExample.js
View File

@@ -14,7 +14,8 @@ const React = require('react');
const ReactNative = require('react-native');
const {AccessibilityInfo, Text, View, TouchableOpacity, Alert} = ReactNative;
class AccessibilityIOSExample extends React.Component<{}> {
type Props = $ReadOnly<{||}>;
class AccessibilityIOSExample extends React.Component<Props> {
render() {
return (
<View>

4
RNTester/js/ActionSheetIOSExample.js
View File

@@ -25,7 +25,9 @@ const BUTTONS = ['Option 0', 'Option 1', 'Option 2', 'Delete', 'Cancel'];
const DESTRUCTIVE_INDEX = 3;
const CANCEL_INDEX = 4;
class ActionSheetExample extends React.Component<{}, $FlowFixMeState> {
type Props = $ReadOnly<{||}>;
type State = {|clicked: string|};
class ActionSheetExample extends React.Component<Props, State> {
state = {
clicked: 'none',
};

56
RNTester/js/ActivityIndicatorExample.js
View File

@@ -13,22 +13,14 @@
import React, {Component} from 'react';
import {ActivityIndicator, StyleSheet, View} from 'react-native';
/**
* Optional Flowtype state and timer types definition
*/
type State = {animating: boolean};
type Timer = number;
type State = {|animating: boolean|};
type Props = $ReadOnly<{||}>;
type Timer = TimeoutID;
class ToggleAnimatingActivityIndicator extends Component<
$FlowFixMeProps,
State,
> {
class ToggleAnimatingActivityIndicator extends Component<Props, State> {
_timer: Timer;
/* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an error
* found when Flow v0.85 was deployed. To see the error, delete this comment
* and run Flow. */
constructor(props) {
constructor(props: Props) {
super(props);
this.state = {
animating: true,
@@ -40,16 +32,10 @@ class ToggleAnimatingActivityIndicator extends Component<
}
componentWillUnmount() {
/* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.63 was deployed. To see the error delete this
* comment and run Flow. */
clearTimeout(this._timer);
}
setToggleTimeout() {
/* $FlowFixMe(>=0.63.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.63 was deployed. To see the error delete this
* comment and run Flow. */
this._timer = setTimeout(() => {
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
@@ -67,6 +53,22 @@ class ToggleAnimatingActivityIndicator extends Component<
}
}
const styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 8,
},
});
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<ActivityIndicator>';
@@ -158,19 +160,3 @@ exports.examples = [
},
},
];
const styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 8,
},
});

4
RNTester/js/AlertExample.js
View File

@@ -23,7 +23,9 @@ const alertMessage =
/**
* Simple alert examples.
*/
class SimpleAlertExampleBlock extends React.Component {
type Props = $ReadOnly<{||}>;
class SimpleAlertExampleBlock extends React.Component<Props> {
render() {
return (
<View>

107
RNTester/js/AlertIOSExample.js
View File

@@ -16,59 +16,10 @@ const {StyleSheet, View, Text, TouchableHighlight, AlertIOS} = ReactNative;
const {SimpleAlertExampleBlock} = require('./AlertExample');
exports.framework = 'React';
exports.title = 'AlertIOS';
exports.description = 'iOS alerts and action sheets';
exports.examples = [
{
title: 'Alerts',
render() {
return <SimpleAlertExampleBlock />;
},
},
{
title: 'Prompt Options',
render(): React.Element<any> {
return <PromptOptions />;
},
},
{
title: 'Prompt Types',
render() {
return (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>plain-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Secure Text', null, null, 'secure-text')
}>
<View style={styles.button}>
<Text>secure-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Login & Password', null, null, 'login-password')
}>
<View style={styles.button}>
<Text>login-password</Text>
</View>
</TouchableHighlight>
</View>
);
},
},
];
type Props = $ReadOnly<{||}>;
type State = {|promptValue: ?string|};
class PromptOptions extends React.Component<$FlowFixMeProps, any> {
class PromptOptions extends React.Component<Props, State> {
customButtons: Array<Object>;
constructor(props) {
@@ -196,3 +147,55 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
},
});
exports.framework = 'React';
exports.title = 'AlertIOS';
exports.description = 'iOS alerts and action sheets';
exports.examples = [
{
title: 'Alerts',
render() {
return <SimpleAlertExampleBlock />;
},
},
{
title: 'Prompt Options',
render(): React.Element<any> {
return <PromptOptions />;
},
},
{
title: 'Prompt Types',
render() {
return (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>plain-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Secure Text', null, null, 'secure-text')
}>
<View style={styles.button}>
<Text>secure-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Login & Password', null, null, 'login-password')
}>
<View style={styles.button}>
<Text>login-password</Text>
</View>
</TouchableHighlight>
</View>
);
},
},
];

42
RNTester/js/AnimatedExample.js
View File

@@ -15,6 +15,22 @@ const ReactNative = require('react-native');
const {Animated, Easing, StyleSheet, Text, View} = ReactNative;
const RNTesterButton = require('./RNTesterButton');
const styles = StyleSheet.create({
content: {
backgroundColor: 'deepskyblue',
borderWidth: 1,
borderColor: 'dodgerblue',
padding: 20,
margin: 20,
borderRadius: 10,
alignItems: 'center',
},
rotatingImage: {
width: 70,
height: 70,
},
});
exports.framework = 'React';
exports.title = 'Animated - Examples';
exports.description =
@@ -58,11 +74,11 @@ exports.examples = [
);
}
}
class FadeInExample extends React.Component<$FlowFixMeProps, any> {
/* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an
* error found when Flow v0.85 was deployed. To see the error, delete
* this comment and run Flow. */
constructor(props) {
type Props = $ReadOnly<{||}>;
type State = {|show: boolean|};
class FadeInExample extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
show: true,
@@ -287,19 +303,3 @@ exports.examples = [
render: () => <Text>Checkout the Gratuitous Animation App!</Text>,
},
];
const styles = StyleSheet.create({
content: {
backgroundColor: 'deepskyblue',
borderWidth: 1,
borderColor: 'dodgerblue',
padding: 20,
margin: 20,
borderRadius: 10,
alignItems: 'center',
},
rotatingImage: {
width: 70,
height: 70,
},
});

17
RNTester/js/AnimatedGratuitousApp/AnExApp.js
View File

@@ -195,11 +195,6 @@ class Circle extends React.Component<any, any> {
}
class AnExApp extends React.Component<any, any> {
static title = 'Animated - Gratuitous App';
static description =
'Bunch of Animations - tap a circle to ' +
'open a view with more animations, or longPress and drag to reorder circles.';
_onMove: (position: Point) => void;
constructor(props: any): void {
super(props);
@@ -365,4 +360,14 @@ const styles = StyleSheet.create({
},
});
module.exports = AnExApp;
exports.title = 'Animated - Gratuitous App';
exports.description =
'Bunch of Animations - tap a circle to open a view with more animations, or longPress and drag to reorder circles.';
exports.examples = [
{
title: 'And example app',
render(): React.Element<typeof AnExApp> {
return <AnExApp />;
},
},
];

49
RNTester/js/CheckBoxExample.js
View File

@@ -14,7 +14,13 @@ const React = require('react');
const ReactNative = require('react-native');
const {CheckBox, Text, View, StyleSheet} = ReactNative;
class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
type BasicState = {|
trueCheckBoxIsOn: boolean,
falseCheckBoxIsOn: boolean,
|};
type BasicProps = $ReadOnly<{||}>;
class BasicCheckBoxExample extends React.Component<BasicProps, BasicState> {
state = {
trueCheckBoxIsOn: true,
falseCheckBoxIsOn: false,
@@ -37,7 +43,8 @@ class BasicCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
}
}
class DisabledCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
type DisabledProps = $ReadOnly<{||}>;
class DisabledCheckBoxExample extends React.Component<DisabledProps> {
render() {
return (
<View>
@@ -48,7 +55,13 @@ class DisabledCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
}
}
class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
type EventProps = $ReadOnly<{||}>;
type EventState = {|
eventCheckBoxIsOn: boolean,
eventCheckBoxRegressionIsOn: boolean,
|};
class EventCheckBoxExample extends React.Component<EventProps, EventState> {
state = {
eventCheckBoxIsOn: false,
eventCheckBoxRegressionIsOn: true,
@@ -92,7 +105,20 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
}
}
let examples = [
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
},
checkbox: {
marginBottom: 10,
},
});
exports.title = '<CheckBox>';
exports.displayName = 'CheckBoxExample';
exports.description = 'Native boolean input';
exports.examples = [
{
title: 'CheckBoxes can be set to true or false',
render(): React.Element<any> {
@@ -118,18 +144,3 @@ let examples = [
},
},
];
exports.title = '<CheckBox>';
exports.displayName = 'CheckBoxExample';
exports.description = 'Native boolean input';
exports.examples = examples;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-around',
},
checkbox: {
marginBottom: 10,
},
});

27
RNTester/js/ClipboardExample.js
View File

@@ -14,7 +14,12 @@ const React = require('react');
const ReactNative = require('react-native');
const {Clipboard, View, Text, StyleSheet} = ReactNative;
class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
type Props = $ReadOnly<{||}>;
type State = {|
content: string,
|};
class ClipboardExample extends React.Component<Props, State> {
state = {
content: 'Content will appear here',
};
@@ -41,6 +46,16 @@ class ClipboardExample extends React.Component<{}, $FlowFixMeState> {
}
}
const styles = StyleSheet.create({
label: {
color: 'blue',
},
content: {
color: 'red',
marginTop: 20,
},
});
exports.title = 'Clipboard';
exports.description = 'Show Clipboard contents.';
exports.examples = [
@@ -51,13 +66,3 @@ exports.examples = [
},
},
];
const styles = StyleSheet.create({
label: {
color: 'blue',
},
content: {
color: 'red',
marginTop: 20,
},
});

32
RNTester/js/DatePickerAndroidExample.js
View File

@@ -21,10 +21,25 @@ const {
const RNTesterBlock = require('./RNTesterBlock');
const RNTesterPage = require('./RNTesterPage');
class DatePickerAndroidExample extends React.Component {
static title = 'DatePickerAndroid';
static description = 'Standard Android date picker dialog';
type Props = $ReadOnly<{||}>;
type State = {|
presetDate: Date,
simpleDate: Date,
spinnerDate: Date,
calendarDate: Date,
defaultDate: Date,
allDate: Date,
simpleText: string,
spinnerText: string,
calendarText: string,
defaultText: string,
minText: string,
maxText: string,
presetText: string,
allText: string,
|};
class DatePickerAndroidExample extends React.Component<Props, State> {
state = {
presetDate: new Date(2020, 4, 5),
simpleDate: new Date(2020, 4, 5),
@@ -144,4 +159,13 @@ const styles = StyleSheet.create({
},
});
module.exports = DatePickerAndroidExample;
exports.title = 'DatePickerAndroid';
exports.description = 'Standard Android date picker dialog';
exports.examples = [
{
title: 'Simple date picker',
render: function(): React.Element<typeof DatePickerAndroidExample> {
return <DatePickerAndroidExample />;
},
},
];

29
RNTester/js/ExampleTypes.js
View File

@@ -1,29 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
import type React from 'react';
export type Example = {
title: string,
/* $FlowFixMe(>=0.89.0 site=react_native_fb) This comment suppresses an error
* found when Flow v0.89 was deployed. To see the error, delete this comment
* and run Flow. */
render: () => ?React.Element<any>,
description?: string,
platform?: string,
};
export type ExampleModule = {
title: string,
description: string,
examples: Array<Example>,
};

29
RNTester/js/FlatListExample.js
View File

@@ -10,6 +10,8 @@
'use strict';
import type {Item} from './ListExampleShared';
const Alert = require('Alert');
const React = require('react');
const ReactNative = require('react-native');
@@ -40,10 +42,20 @@ const VIEWABILITY_CONFIG = {
waitForInteraction: true,
};
class FlatListExample extends React.PureComponent<{}, $FlowFixMeState> {
static title = '<FlatList>';
static description = 'Performant, scrollable list of data.';
type Props = $ReadOnly<{||}>;
type State = {|
data: Array<Item>,
debug: boolean,
horizontal: boolean,
inverted: boolean,
filterText: string,
fixedHeight: boolean,
logViewable: boolean,
virtualized: boolean,
empty: boolean,
|};
class FlatListExample extends React.PureComponent<Props, State> {
state = {
data: genItemData(100),
debug: false,
@@ -220,4 +232,13 @@ const styles = StyleSheet.create({
},
});
module.exports = FlatListExample;
exports.title = '<FlatList>';
exports.description = 'Performant, scrollable list of data.';
exports.examples = [
{
title: 'Simple list of items',
render: function(): React.Element<typeof FlatListExample> {
return <FlatListExample />;
},
},
];

26
RNTester/js/GeolocationExample.js
View File

@@ -14,19 +14,6 @@ const React = require('react');
const ReactNative = require('react-native');
const {StyleSheet, Text, View, Alert} = ReactNative;
exports.framework = 'React';
exports.title = 'Geolocation';
exports.description = 'Examples of using the Geolocation API.';
exports.examples = [
{
title: 'navigator.geolocation',
render: function(): React.Element<any> {
return <GeolocationExample />;
},
},
];
class GeolocationExample extends React.Component<{}, $FlowFixMeState> {
state = {
initialPosition: 'unknown',
@@ -75,3 +62,16 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
});
exports.framework = 'React';
exports.title = 'Geolocation';
exports.description = 'Examples of using the Geolocation API.';
exports.examples = [
{
title: 'navigator.geolocation',
render: function(): React.Element<any> {
return <GeolocationExample />;
},
},
];

3
RNTester/js/ImageCapInsetsExample.js
View File

@@ -16,7 +16,8 @@ const ReactNative = require('react-native');
const nativeImageSource = require('nativeImageSource');
const {Image, StyleSheet, Text, View} = ReactNative;
class ImageCapInsetsExample extends React.Component<{}> {
type Props = $ReadOnly<{||}>;
class ImageCapInsetsExample extends React.Component<Props> {
render() {
return (
<View>

24
RNTester/js/ImageEditingExample.js
View File

@@ -278,18 +278,6 @@ class ImageCropper extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
}
}
exports.framework = 'React';
exports.title = 'ImageEditor';
exports.description = 'Cropping and scaling with ImageEditor';
exports.examples = [
{
title: 'Image Cropping',
render() {
return <SquareImageCropper />;
},
},
];
const styles = StyleSheet.create({
container: {
flex: 1,
@@ -314,3 +302,15 @@ const styles = StyleSheet.create({
fontWeight: '500',
},
});
exports.framework = 'React';
exports.title = 'ImageEditor';
exports.description = 'Cropping and scaling with ImageEditor';
exports.examples = [
{
title: 'Image Cropping',
render() {
return <SquareImageCropper />;
},
},
];

130
RNTester/js/ImageExample.js
View File

@@ -335,6 +335,71 @@ class MultipleSourcesExample extends React.Component<
}
}
const fullImage = {
uri: 'https://facebook.github.io/react-native/img/opengraph.png',
};
const smallImage = {
uri: 'https://facebook.github.io/react-native/img/favicon.png',
};
const styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
progress: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
width: 100,
},
leftMargin: {
marginLeft: 10,
},
background: {
backgroundColor: '#222222',
},
sectionText: {
marginVertical: 6,
},
nestedText: {
marginLeft: 12,
marginTop: 20,
backgroundColor: 'transparent',
color: 'white',
},
resizeMode: {
width: 90,
height: 60,
borderWidth: 0.5,
borderColor: 'black',
},
resizeModeText: {
fontSize: 11,
marginBottom: 3,
},
icon: {
width: 15,
height: 15,
},
horizontal: {
flexDirection: 'row',
},
gif: {
flex: 1,
height: 200,
},
base64: {
flex: 1,
height: 50,
resizeMode: 'contain',
},
touchableText: {
fontWeight: '500',
color: 'blue',
},
});
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<Image>';
@@ -890,68 +955,3 @@ exports.examples = [
},
},
];
const fullImage = {
uri: 'https://facebook.github.io/react-native/img/opengraph.png',
};
const smallImage = {
uri: 'https://facebook.github.io/react-native/img/favicon.png',
};
const styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
progress: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
width: 100,
},
leftMargin: {
marginLeft: 10,
},
background: {
backgroundColor: '#222222',
},
sectionText: {
marginVertical: 6,
},
nestedText: {
marginLeft: 12,
marginTop: 20,
backgroundColor: 'transparent',
color: 'white',
},
resizeMode: {
width: 90,
height: 60,
borderWidth: 0.5,
borderColor: 'black',
},
resizeModeText: {
fontSize: 11,
marginBottom: 3,
},
icon: {
width: 15,
height: 15,
},
horizontal: {
flexDirection: 'row',
},
gif: {
flex: 1,
height: 200,
},
base64: {
flex: 1,
height: 50,
resizeMode: 'contain',
},
touchableText: {
fontWeight: '500',
color: 'blue',
},
});

27
RNTester/js/InputAccessoryViewExample.js
View File

@@ -23,7 +23,8 @@ const {
View,
} = ReactNative;
class Message extends React.PureComponent<*> {
type MessageProps = $ReadOnly<{||}>;
class Message extends React.PureComponent<MessageProps> {
render() {
return (
<View style={styles.textBubbleBackground}>
@@ -33,7 +34,9 @@ class Message extends React.PureComponent<*> {
}
}
class TextInputBar extends React.PureComponent<*, *> {
type TextInputProps = $ReadOnly<{||}>;
type TextInputState = {|text: string|};
class TextInputBar extends React.PureComponent<TextInputProps, TextInputState> {
state = {text: ''};
render() {
@@ -59,12 +62,8 @@ class TextInputBar extends React.PureComponent<*, *> {
}
const BAR_HEIGHT = 44;
class InputAccessoryViewExample extends React.Component<*> {
static title = '<InputAccessoryView>';
static description =
'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
type InputAccessoryProps = $ReadOnly<{||}>;
class InputAccessoryViewExample extends React.Component<InputAccessoryProps> {
render() {
return (
<>
@@ -108,4 +107,14 @@ const styles = StyleSheet.create({
},
});
module.exports = InputAccessoryViewExample;
exports.title = '<InputAccessoryView>';
exports.description =
'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
exports.examples = [
{
title: 'Simple view with sticky input',
render: function(): React.Node {
return <InputAccessoryViewExample />;
},
},
];

22
RNTester/js/KeyboardAvoidingViewExample.js
View File

@@ -25,11 +25,13 @@ const {
const RNTesterBlock = require('./RNTesterBlock');
const RNTesterPage = require('./RNTesterPage');
class KeyboardAvoidingViewExample extends React.Component {
static title = '<KeyboardAvoidingView>';
static description =
'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
type Props = $ReadOnly<{||}>;
type State = {|
behavior: string,
modalOpen: boolean,
|};
class KeyboardAvoidingViewExample extends React.Component<Props, State> {
state = {
behavior: 'padding',
modalOpen: false,
@@ -105,4 +107,14 @@ const styles = StyleSheet.create({
},
});
module.exports = KeyboardAvoidingViewExample;
exports.title = '<KeyboardAvoidingView>';
exports.description =
'Base component for views that automatically adjust their height or position to move out of the way of the keyboard.';
exports.examples = [
{
title: 'Simple keyboard view',
render: function(): React.Element<typeof KeyboardAvoidingViewExample> {
return <KeyboardAvoidingViewExample />;
},
},
];

3
RNTester/js/LayoutEventsExample.js
View File

@@ -16,6 +16,7 @@ const {Image, LayoutAnimation, StyleSheet, Text, View} = ReactNative;
import type {ViewLayout, ViewLayoutEvent} from 'ViewPropTypes';
type Props = $ReadOnly<{||}>;
type State = {
containerStyle?: {|width: number|},
extraText?: string,
@@ -25,7 +26,7 @@ type State = {
viewStyle: {|margin: number|},
};
class LayoutEventExample extends React.Component<{}, State> {
class LayoutEventExample extends React.Component<Props, State> {
state: State = {
viewStyle: {
margin: 20,

16
RNTester/js/LayoutExample.js
View File

@@ -51,10 +51,6 @@ class CircleBlock extends React.Component<$FlowFixMeProps> {
}
class LayoutExample extends React.Component<$FlowFixMeProps> {
static title = 'Layout - Flexbox';
static description = 'Examples of using the flexbox API to layout views.';
static displayName = 'LayoutExample';
render() {
const fiveColoredCircles = [
<Circle bgColor="#527fe4" key="blue" />,
@@ -196,4 +192,14 @@ const styles = StyleSheet.create({
},
});
module.exports = LayoutExample;
exports.title = 'Layout - Flexbox';
exports.description = 'Examples of using the flexbox API to layout views.';
exports.displayName = 'LayoutExample';
exports.examples = [
{
title: 'Simple layout using flexbox',
render: function(): React.Element<typeof LayoutExample> {
return <LayoutExample />;
},
},
];

14
RNTester/js/LinkingExample.js
View File

@@ -69,9 +69,6 @@ class SendIntentButton extends React.Component<Props> {
}
class IntentAndroidExample extends React.Component {
static title = 'Linking';
static description = 'Shows how to use Linking to open URLs.';
render() {
return (
<View>
@@ -119,4 +116,13 @@ const styles = StyleSheet.create({
},
});
module.exports = IntentAndroidExample;
exports.title = 'Linking';
exports.description = 'Shows how to use Linking to open URLs.';
exports.examples = [
{
title: 'Simple list of items',
render: function(): React.Element<typeof IntentAndroidExample> {
return <IntentAndroidExample />;
},
},
];

2
RNTester/js/ListExampleShared.js
View File

@@ -24,7 +24,7 @@ const {
View,
} = ReactNative;
type Item = {
export type Item = {
title: string,
text: string,
key: string,

16
RNTester/js/ListViewExample.js
View File

@@ -29,10 +29,7 @@ type State = {|
dataSource: ListViewDataSource,
|};
class ListViewSimpleExample extends React.Component<RNTesterProps, State> {
static title = '<ListView>';
static description = 'Performant, scrollable list of data.';
class ListViewExample extends React.Component<RNTesterProps, State> {
state = {
dataSource: this.getInitialDataSource(),
};
@@ -166,4 +163,13 @@ const styles = StyleSheet.create({
},
});
module.exports = ListViewSimpleExample;
exports.title = '<ListView>';
exports.description = 'Performant, scrollable list of data.';
exports.examples = [
{
title: 'Simple list of items',
render: function(): React.Element<typeof ListViewExample> {
return <ListViewExample />;
},
},
];

14
RNTester/js/ListViewGridLayoutExample.js
View File

@@ -44,9 +44,6 @@ type State = {|
|};
class ListViewGridLayoutExample extends React.Component<RNTesterProps, State> {
static title = '<ListView> - Grid Layout';
static description = 'Flexbox grid layout.';
state = {
dataSource: this.getInitialDataSource(),
};
@@ -152,4 +149,13 @@ const styles = StyleSheet.create({
},
});
module.exports = ListViewGridLayoutExample;
exports.title = '<ListView> - Grid Layout';
exports.description = 'Flexbox grid layout.';
exports.examples = [
{
title: 'Simple list view with grid layout',
render: function(): React.Element<typeof ListViewGridLayoutExample> {
return <ListViewGridLayoutExample />;
},
},
];

14
RNTester/js/ListViewPagingExample.js
View File

@@ -88,9 +88,6 @@ class Thumb extends React.Component<{}, $FlowFixMeState> {
}
class ListViewPagingExample extends React.Component<$FlowFixMeProps, *> {
static title = '<ListView> - Paging';
static description = 'Floating headers & layout animations.';
// $FlowFixMe found when converting React.createClass to ES6
constructor(props) {
super(props);
@@ -282,4 +279,13 @@ const layoutAnimationConfigs = [
animations.layout.easeInEaseOut,
];
module.exports = ListViewPagingExample;
exports.title = '<ListView> - Paging';
exports.description = 'Floating headers & layout animations.';
exports.examples = [
{
title: 'Simple list view with pagination',
render: function(): React.Element<typeof ListViewPagingExample> {
return <ListViewPagingExample />;
},
},
];

21
RNTester/js/MaskedViewExample.js
View File

@@ -22,11 +22,12 @@ const {
View,
} = require('react-native');
class MaskedViewExample extends React.Component<{}, $FlowFixMeState> {
static title = '<MaskedViewIOS>';
static description =
'Renders the child view with a mask specified in the `renderMask` prop.';
type Props = $ReadOnly<{||}>;
type State = {|
alternateChildren: boolean,
|};
class MaskedViewExample extends React.Component<Props, State> {
state = {
alternateChildren: true,
};
@@ -181,4 +182,14 @@ const styles = StyleSheet.create({
},
});
module.exports = MaskedViewExample;
exports.title = '<MaskedViewIOS>';
exports.description =
'Renders the child view with a mask specified in the `renderMask` prop.';
exports.examples = [
{
title: 'Simple masked view',
render: function(): React.Element<typeof MaskedViewExample> {
return <MaskedViewExample />;
},
},
];

14
RNTester/js/MultiColumnExample.js
View File

@@ -34,9 +34,6 @@ class MultiColumnExample extends React.PureComponent<
$FlowFixMeProps,
$FlowFixMeState,
> {
static title = '<FlatList> - MultiColumn';
static description = 'Performant, scrollable grid of data.';
state = {
data: genItemData(1000),
filterText: '',
@@ -165,4 +162,13 @@ const styles = StyleSheet.create({
},
});
module.exports = MultiColumnExample;
exports.title = '<FlatList> - MultiColumn';
exports.description = 'Performant, scrollable grid of data.';
exports.examples = [
{
title: 'Simple flat list multi column',
render: function(): React.Element<typeof MultiColumnExample> {
return <MultiColumnExample />;
},
},
];

16
RNTester/js/PanResponderExample.js
View File

@@ -28,10 +28,6 @@ const CIRCLE_SIZE = 80;
type Props = $ReadOnly<{||}>;
class PanResponderExample extends React.Component<Props> {
static title = 'PanResponder Sample';
static description =
'Shows the Use of PanResponder to provide basic gesture handling';
_handleStartShouldSetPanResponder = (
event: PressEvent,
gestureState: GestureState,
@@ -141,4 +137,14 @@ const styles = StyleSheet.create({
},
});
module.exports = PanResponderExample;
exports.title = 'PanResponder Sample';
exports.description =
'Shows the Use of PanResponder to provide basic gesture handling';
exports.examples = [
{
title: 'Basic gresture handling',
render: function(): React.Element<typeof PanResponderExample> {
return <PanResponderExample />;
},
},
];

9
RNTester/js/PermissionsExampleAndroid.android.js
View File

@@ -23,11 +23,6 @@ const {
const Item = Picker.Item;
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = 'PermissionsAndroid';
exports.description = 'Permissions example for API 23+.';
class PermissionsExample extends React.Component<{}, $FlowFixMeState> {
state = {
permission: PermissionsAndroid.PERMISSIONS.CAMERA,
@@ -105,6 +100,10 @@ class PermissionsExample extends React.Component<{}, $FlowFixMeState> {
};
}
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = 'PermissionsAndroid';
exports.description = 'Permissions example for API 23+.';
exports.examples = [
{
title: 'Permissions Example',

14
RNTester/js/ProgressBarAndroidExample.android.js
View File

@@ -57,9 +57,6 @@ class MovingBar extends React.Component<MovingBarProps, MovingBarState> {
}
class ProgressBarAndroidExample extends React.Component<{}> {
static title = '<ProgressBarAndroid>';
static description = 'Horizontal bar to show the progress of some operation.';
render() {
return (
<RNTesterPage title="ProgressBar Examples">
@@ -91,4 +88,13 @@ class ProgressBarAndroidExample extends React.Component<{}> {
}
}
module.exports = ProgressBarAndroidExample;
exports.title = '<ProgressBarAndroid>';
exports.description = 'Horizontal bar to show the progress of some operation.';
exports.examples = [
{
title: 'Simple progress bar',
render: function(): React.Element<typeof ProgressBarAndroidExample> {
return <ProgressBarAndroidExample />;
},
},
];

20
RNTester/js/ProgressViewIOSExample.js
View File

@@ -82,6 +82,16 @@ class ProgressViewExample extends React.Component<Props, State> {
}
}
const styles = StyleSheet.create({
container: {
marginTop: -20,
backgroundColor: 'transparent',
},
progressView: {
marginTop: 20,
},
});
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = 'ProgressViewIOS';
@@ -94,13 +104,3 @@ exports.examples = [
},
},
];
const styles = StyleSheet.create({
container: {
marginTop: -20,
backgroundColor: 'transparent',
},
progressView: {
marginTop: 20,
},
});

2
RNTester/js/RNTesterApp.ios.js
View File

@@ -33,7 +33,7 @@ const {
YellowBox,
} = ReactNative;
import type {RNTesterExample} from './RNTesterList.ios';
import type {RNTesterExample} from 'RNTesterTypes';
import type {RNTesterAction} from './RNTesterActions';
import type {RNTesterNavigationState} from './RNTesterNavigationReducer';

4
RNTester/js/RNTesterExampleContainer.js
View File

@@ -34,10 +34,6 @@ class RNTesterExampleContainer extends React.Component {
}
render(): React.Element<any> {
if (!this.props.module.examples) {
return <this.props.module />;
}
if (this.props.module.examples.length === 1) {
const Example = this.props.module.examples[0].render;
return <Example />;

2
RNTester/js/RNTesterExampleList.js
View File

@@ -22,7 +22,7 @@ const View = require('View');
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found when
* making Flow check .android.js files. */
import type {RNTesterExample} from './RNTesterList.ios';
import type {RNTesterExample} from 'RNTesterTypes';
import type {ViewStyleProp} from 'StyleSheet';
type Props = {

5
RNTester/js/RNTesterList.android.js
View File

@@ -10,10 +10,7 @@
'use strict';
export type RNTesterExample = {
key: string,
module: Object,
};
import type {RNTesterExample} from 'RNTesterTypes';
const ComponentExamples: Array<RNTesterExample> = [
{

6
RNTester/js/RNTesterList.ios.js
View File

@@ -10,11 +10,7 @@
'use strict';
export type RNTesterExample = {
key: string,
module: Object,
supportsTVOS: boolean,
};
import type {RNTesterExample} from 'RNTesterTypes';
const ComponentExamples: Array<RNTesterExample> = [
{

15
RNTester/js/RTLExample.js
View File

@@ -372,10 +372,6 @@ const BorderExample = withRTLState(({isRTL, setRTL}) => {
});
class RTLExample extends React.Component<any, State> {
static title = 'RTLExample';
static description =
'Examples to show how to apply components to RTL layout.';
_panResponder: Object;
constructor(props: Object) {
@@ -679,4 +675,13 @@ const styles = StyleSheet.create({
},
});
module.exports = RTLExample;
exports.title = 'RTLExample';
exports.description = 'Examples to show how to apply components to RTL layout.';
exports.examples = [
{
title: 'Simple RTL',
render: function(): React.Element<typeof RTLExample> {
return <RTLExample />;
},
},
];

14
RNTester/js/RefreshControlExample.js
View File

@@ -56,9 +56,6 @@ class Row extends React.Component {
}
class RefreshControlExample extends React.Component {
static title = '<RefreshControl>';
static description = 'Adds pull-to-refresh support to a scrollview.';
state = {
isRefreshing: false,
loaded: 0,
@@ -118,4 +115,13 @@ class RefreshControlExample extends React.Component {
};
}
module.exports = RefreshControlExample;
exports.title = '<RefreshControl>';
exports.description = 'Adds pull-to-refresh support to a scrollview.';
exports.examples = [
{
title: 'Simple refresh',
render: function(): React.Element<typeof RefreshControlExample> {
return <RefreshControlExample />;
},
},
];

43
RNTester/js/SafeAreaViewExample.js
View File

@@ -19,12 +19,6 @@ const Switch = require('Switch');
const Text = require('Text');
const View = require('View');
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<SafeAreaView>';
exports.description =
'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
class SafeAreaViewExample extends React.Component<
{},
{|
@@ -100,6 +94,27 @@ class IsIPhoneXExample extends React.Component<{}> {
}
}
const styles = StyleSheet.create({
modal: {
flex: 1,
},
safeArea: {
flex: 1,
height: 1000,
},
safeAreaContent: {
flex: 1,
backgroundColor: '#ffaaaa',
alignItems: 'center',
justifyContent: 'center',
},
});
exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<SafeAreaView>';
exports.description =
'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.';
exports.examples = [
{
title: '<SafeAreaView> Example',
@@ -117,19 +132,3 @@ exports.examples = [
render: () => <IsIPhoneXExample />,
},
];
const styles = StyleSheet.create({
modal: {
flex: 1,
},
safeArea: {
flex: 1,
height: 1000,
},
safeAreaContent: {
flex: 1,
backgroundColor: '#ffaaaa',
alignItems: 'center',
justifyContent: 'center',
},
});

17
RNTester/js/ScrollViewSimpleExample.js
View File

@@ -17,10 +17,6 @@ const {ScrollView, StyleSheet, Text, TouchableOpacity} = ReactNative;
const NUM_ITEMS = 20;
class ScrollViewSimpleExample extends React.Component<{}> {
static title = '<ScrollView>';
static description =
'Component that enables scrolling through child components.';
/* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an error
* found when Flow v0.85 was deployed. To see the error, delete this comment
* and run Flow. */
@@ -90,4 +86,15 @@ const styles = StyleSheet.create({
},
});
module.exports = ScrollViewSimpleExample;
exports.title = '<ScrollView>';
exports.description =
'Component that enables scrolling through child components.';
exports.examples = [
{
title: 'Simple scroll view',
render: function(): React.Element<typeof ScrollViewSimpleExample> {
return <ScrollViewSimpleExample />;
},
},
];

14
RNTester/js/SectionListExample.js
View File

@@ -62,9 +62,6 @@ const CustomSeparatorComponent = ({highlighted, text}) => (
);
class SectionListExample extends React.PureComponent<{}, $FlowFixMeState> {
static title = '<SectionList>';
static description = 'Performant, scrollable list of data.';
state = {
data: genItemData(1000),
debug: false,
@@ -275,4 +272,13 @@ const styles = StyleSheet.create({
},
});
module.exports = SectionListExample;
exports.title = '<SectionList>';
exports.description = 'Performant, scrollable list of data.';
exports.examples = [
{
title: 'Simple scrollable list',
render: function(): React.Element<typeof SectionListExample> {
return <SectionListExample />;
},
},
];

27
RNTester/js/ShareExample.js
View File

@@ -14,19 +14,10 @@ const React = require('react');
const ReactNative = require('react-native');
const {StyleSheet, View, Text, TouchableHighlight, Share} = ReactNative;
exports.framework = 'React';
exports.title = 'Share';
exports.description = 'Share data with other Apps.';
exports.examples = [
{
title: 'Share Text Content',
render() {
return <ShareMessageExample />;
},
},
];
type Props = $ReadOnly<{||}>;
type State = {|result: string|};
class ShareMessageExample extends React.Component<$FlowFixMeProps, any> {
class ShareMessageExample extends React.Component<Props, State> {
_shareMessage: Function;
_shareText: Function;
_showResult: Function;
@@ -116,3 +107,15 @@ const styles = StyleSheet.create({
padding: 10,
},
});
exports.framework = 'React';
exports.title = 'Share';
exports.description = 'Share data with other Apps.';
exports.examples = [
{
title: 'Share Text Content',
render() {
return <ShareMessageExample />;
},
},
];

22
RNTester/js/Shared/RNTesterTypes.js
View File

@@ -11,6 +11,7 @@
'use strict';
import type {ComponentType} from 'React';
import * as React from 'react';
export type RNTesterProps = $ReadOnly<{|
navigator?: ?$ReadOnlyArray<
@@ -22,3 +23,24 @@ export type RNTesterProps = $ReadOnly<{|
|}>,
>,
|}>;
export type RNTesterExampleModuleItem = $ReadOnly<{|
title: string,
platform?: string,
description?: string,
render: () => React.Node,
|}>;
export type RNTesterExampleModule = $ReadOnly<{|
title: string,
description: string,
displayName?: ?string,
framework?: string,
examples: Array<RNTesterExampleModuleItem>,
|}>;
export type RNTesterExample = $ReadOnly<{|
key: string,
module: RNTesterExampleModule,
supportsTVOS?: boolean,
|}>;

11
RNTester/js/StatusBarExample.js
View File

@@ -21,10 +21,6 @@ const {
Modal,
} = ReactNative;
exports.framework = 'React';
exports.title = '<StatusBar>';
exports.description = 'Component for controlling the status bar';
const colors = ['#ff0000', '#00ff00', '#0000ff', 'rgba(0, 0, 0, 0.4)'];
const barStyles = ['default', 'light-content'];
@@ -434,7 +430,10 @@ class ModalExample extends React.Component<{}, $FlowFixMeState> {
}
}
const examples = [
exports.framework = 'React';
exports.title = '<StatusBar>';
exports.description = 'Component for controlling the status bar';
exports.examples = [
{
title: 'StatusBar hidden',
render() {
@@ -496,8 +495,6 @@ const examples = [
},
];
exports.examples = examples;
const styles = StyleSheet.create({
container: {
flex: 1,

14
RNTester/js/SwipeableFlatListExample.js
View File

@@ -44,9 +44,6 @@ const data = [
];
class SwipeableFlatListExample extends React.Component<RNTesterProps> {
static title = '<SwipeableFlatList>';
static description = 'Performant, scrollable, swipeable list of data.';
render() {
return (
<RNTesterPage
@@ -141,4 +138,13 @@ const styles = StyleSheet.create({
},
});
module.exports = SwipeableFlatListExample;
exports.title = '<SwipeableFlatList>';
exports.description = 'Performant, scrollable, swipeable list of data.';
exports.examples = [
{
title: 'Simple swipable list',
render: function(): React.Element<typeof SwipeableFlatListExample> {
return <SwipeableFlatListExample />;
},
},
];

19
RNTester/js/SwipeableListViewExample.js
View File

@@ -30,13 +30,7 @@ type State = {|
dataSource: SwipeableListViewDataSource,
|};
class SwipeableListViewSimpleExample extends React.Component<
RNTesterProps,
State,
> {
static title = '<SwipeableListView>';
static description = 'Performant, scrollable, swipeable list of data.';
class SwipeableListViewExample extends React.Component<RNTesterProps, State> {
state = {
dataSource: SwipeableListView.getNewDataSource().cloneWithRowsAndSections(
...this._genDataSource({}),
@@ -203,4 +197,13 @@ const styles = StyleSheet.create({
},
});
module.exports = SwipeableListViewSimpleExample;
exports.title = '<SwipeableListView>';
exports.description = 'Performant, scrollable, swipeable list of data.';
exports.examples = [
{
title: 'Simple swipable list',
render: function(): React.Element<typeof SwipeableListViewExample> {
return <SwipeableListViewExample />;
},
},
];

38
RNTester/js/TVEventHandlerExample.js
View File

@@ -15,28 +15,10 @@ const ReactNative = require('react-native');
const {Platform, View, Text, TouchableOpacity, TVEventHandler} = ReactNative;
exports.framework = 'React';
exports.title = 'TVEventHandler example';
exports.description = 'iOS alerts and action sheets';
exports.examples = [
{
title: 'TVEventHandler',
render() {
return <TVEventHandlerView />;
},
},
];
class TVEventHandlerView extends React.Component<
$FlowFixMeProps,
{
lastEventType: string,
},
> {
/* $FlowFixMe(>=0.85.0 site=react_native_fb) This comment suppresses an error
* found when Flow v0.85 was deployed. To see the error, delete this comment
* and run Flow. */
constructor(props) {
type Props = $ReadOnly<{||}>;
type State = {|lastEventType: string|};
class TVEventHandlerView extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
lastEventType: '',
@@ -92,3 +74,15 @@ class TVEventHandlerView extends React.Component<
}
}
}
exports.framework = 'React';
exports.title = 'TVEventHandler example';
exports.description = 'iOS alerts and action sheets';
exports.examples = [
{
title: 'TVEventHandler',
render() {
return <TVEventHandlerView />;
},
},
];

16
RNTester/js/TabBarIOSBarStyleExample.js
View File

@@ -30,10 +30,6 @@ const base64Icon =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
class TabBarIOSBarStyleExample extends React.Component<{}> {
static title = '<TabBarIOS> - Custom Bar Style';
static description = 'Tab-based navigation.';
static displayName = 'TabBarIOSBarStyleExample';
render() {
return (
<TabBarIOS barStyle="black">
@@ -58,4 +54,14 @@ const styles = StyleSheet.create({
},
});
module.exports = TabBarIOSBarStyleExample;
exports.title = '<TabBarIOS> - Custom Bar Style';
exports.description = 'Tab-based navigation.';
exports.displayName = 'TabBarIOSBarStyleExample';
exports.examples = [
{
title: 'Custom tab bar navigation',
render: function(): React.Element<typeof TabBarIOSBarStyleExample> {
return <TabBarIOSBarStyleExample />;
},
},
];

23
RNTester/js/TabBarIOSExample.js
View File

@@ -17,11 +17,14 @@ const {StyleSheet, TabBarIOS, Text, View} = ReactNative;
const base64Icon =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAQAAACSR7JhAAADtUlEQVR4Ac3YA2Bj6QLH0XPT1Fzbtm29tW3btm3bfLZtv7e2ObZnms7d8Uw098tuetPzrxv8wiISrtVudrG2JXQZ4VOv+qUfmqCGGl1mqLhoA52oZlb0mrjsnhKpgeUNEs91Z0pd1kvihA3ULGVHiQO2narKSHKkEMulm9VgUyE60s1aWoMQUbpZOWE+kaqs4eLEjdIlZTcFZB0ndc1+lhB1lZrIuk5P2aib1NBpZaL+JaOGIt0ls47SKzLC7CqrlGF6RZ09HGoNy1lYl2aRSWL5GuzqWU1KafRdoRp0iOQEiDzgZPnG6DbldcomadViflnl/cL93tOoVbsOLVM2jylvdWjXolWX1hmfZbGR/wjypDjFLSZIRov09BgYmtUqPQPlQrPapecLgTIy0jMgPKtTeob2zWtrGH3xvjUkPCtNg/tm1rjwrMa+mdUkPd3hWbH0jArPGiU9ufCsNNWFZ40wpwn+62/66R2RUtoso1OB34tnLOcy7YB1fUdc9e0q3yru8PGM773vXsuZ5YIZX+5xmHwHGVvlrGPN6ZSiP1smOsMMde40wKv2VmwPPVXNut4sVpUreZiLBHi0qln/VQeI/LTMYXpsJtFiclUN+5HVZazim+Ky+7sAvxWnvjXrJFneVtLWLyPJu9K3cXLWeOlbMTlrIelbMDlrLenrjEQOtIF+fuI9xRp9ZBFp6+b6WT8RrxEpdK64BuvHgDk+vUy+b5hYk6zfyfs051gRoNO1usU12WWRWL73/MMEy9pMi9qIrR4ZpV16Rrvduxazmy1FSvuFXRkqTnE7m2kdb5U8xGjLw/spRr1uTov4uOgQE+0N/DvFrG/Jt7i/FzwxbA9kDanhf2w+t4V97G8lrT7wc08aA2QNUkuTfW/KimT01wdlfK4yEw030VfT0RtZbzjeMprNq8m8tnSTASrTLti64oBNdpmMQm0eEwvfPwRbUBywG5TzjPCsdwk3IeAXjQblLCoXnDVeoAz6SfJNk5TTzytCNZk/POtTSV40NwOFWzw86wNJRpubpXsn60NJFlHeqlYRbslqZm2jnEZ3qcSKgm0kTli3zZVS7y/iivZTweYXJ26Y+RTbV1zh3hYkgyFGSTKPfRVbRqWWVReaxYeSLarYv1Qqsmh1s95S7G+eEWK0f3jYKTbV6bOwepjfhtafsvUsqrQvrGC8YhmnO9cSCk3yuY984F1vesdHYhWJ5FvASlacshUsajFt2mUM9pqzvKGcyNJW0arTKN1GGGzQlH0tXwLDgQTurS8eIQAAAABJRU5ErkJggg==';
class TabBarExample extends React.Component<{}, $FlowFixMeState> {
static title = '<TabBarIOS>';
static description = 'Tab-based navigation.';
static displayName = 'TabBarExample';
type Props = $ReadOnly<{||}>;
type State = {|
selectedTab: string,
notifCount: number,
presses: number,
|};
class TabBarExample extends React.Component<Props, State> {
state = {
selectedTab: 'redTab',
notifCount: 0,
@@ -100,4 +103,14 @@ const styles = StyleSheet.create({
},
});
module.exports = TabBarExample;
exports.title = '<TabBarIOS>';
exports.description = 'Tab-based navigation.';
exports.displayName = 'TabBarExample';
exports.examples = [
{
title: 'Simple tab navigation',
render: function(): React.Element<typeof TabBarExample> {
return <TabBarExample />;
},
},
];

17
RNTester/js/TextExample.android.js
View File

@@ -17,7 +17,7 @@ const RNTesterBlock = require('./RNTesterBlock');
const RNTesterPage = require('./RNTesterPage');
const TextLegend = require('./Shared/TextLegend');
class Entity extends React.Component<$FlowFixMeProps> {
class Entity extends React.Component<{|children: React.Node|}> {
render() {
return (
<Text style={{fontWeight: 'bold', color: '#527fe4'}}>
@@ -26,7 +26,6 @@ class Entity extends React.Component<$FlowFixMeProps> {
);
}
}
class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
state = {fontWeight: 'bold', fontSize: 15};
@@ -71,9 +70,6 @@ class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
}
class TextExample extends React.Component<{}> {
static title = '<Text>';
static description = 'Base component for rendering styled text.';
render() {
return (
<RNTesterPage title="<Text>">
@@ -605,4 +601,13 @@ const styles = StyleSheet.create({
},
});
module.exports = TextExample;
exports.title = '<Text>';
exports.description = 'Base component for rendering styled text.';
exports.examples = [
{
title: 'Basic text',
render: function(): React.Element<typeof TextExample> {
return <TextExample />;
},
},
];

14
RNTester/js/TimePickerAndroidExample.js
View File

@@ -22,9 +22,6 @@ const RNTesterBlock = require('./RNTesterBlock');
const RNTesterPage = require('./RNTesterPage');
class TimePickerAndroidExample extends React.Component {
static title = 'TimePickerAndroid';
static description = 'Standard Android time picker dialog';
state = {
isoFormatText: 'pick a time (24-hour format)',
presetHour: 4,
@@ -117,4 +114,13 @@ const styles = StyleSheet.create({
},
});
module.exports = TimePickerAndroidExample;
exports.title = 'TimePickerAndroid';
exports.description = 'Standard Android time picker dialog';
exports.examples = [
{
title: 'Simple time picker',
render: function(): React.Element<typeof TimePickerAndroidExample> {
return <TimePickerAndroidExample />;
},
},
];

20
RNTester/js/ToastAndroidExample.android.js
View File

@@ -17,12 +17,8 @@ const {StyleSheet, Text, ToastAndroid, TouchableWithoutFeedback} = ReactNative;
const RNTesterBlock = require('RNTesterBlock');
const RNTesterPage = require('RNTesterPage');
class ToastExample extends React.Component<{}, $FlowFixMeState> {
static title = 'Toast Example';
static description =
'Example that demonstrates the use of an Android Toast to provide feedback.';
state = {};
type Props = $ReadOnly<{||}>;
class ToastExample extends React.Component<Props> {
render() {
return (
<RNTesterPage title="ToastAndroid">
@@ -123,4 +119,14 @@ const styles = StyleSheet.create({
},
});
module.exports = ToastExample;
exports.title = 'Toast Example';
exports.description =
'Example that demonstrates the use of an Android Toast to provide feedback.';
exports.examples = [
{
title: 'Basic toast',
render: function(): React.Element<typeof ToastExample> {
return <ToastExample />;
},
},
];

14
RNTester/js/ToolbarAndroidExample.android.js
View File

@@ -22,9 +22,6 @@ const Switch = require('Switch');
const ToolbarAndroid = require('ToolbarAndroid');
class ToolbarAndroidExample extends React.Component<{}, $FlowFixMeState> {
static title = '<ToolbarAndroid>';
static description = 'Examples of using the Android toolbar.';
state = {
actionText: 'Example app with toolbar component',
toolbarSwitch: false,
@@ -174,4 +171,13 @@ const styles = StyleSheet.create({
},
});
module.exports = ToolbarAndroidExample;
exports.title = '<ToolbarAndroid>';
exports.description = 'Examples of using the Android toolbar.';
exports.examples = [
{
title: 'Basic toolbar',
render: function(): React.Element<typeof ToolbarAndroidExample> {
return <ToolbarAndroidExample />;
},
},
];

21
RNTester/js/ViewPagerAndroidExample.android.js
View File

@@ -33,7 +33,9 @@ const IMAGE_URIS = [
'https://apod.nasa.gov/apod/image/1510/lunareclipse_27Sep_beletskycrop4.jpg',
];
class LikeCount extends React.Component {
type Props = $ReadOnly<{||}>;
type State = {|likes: number|};
class LikeCount extends React.Component<Props, State> {
state = {
likes: 7,
};
@@ -92,10 +94,6 @@ class ProgressBar extends React.Component {
}
class ViewPagerAndroidExample extends React.Component {
static title = '<ViewPagerAndroid>';
static description =
'Container that allows to flip left and right between child views.';
state = {
page: 0,
animationsAreEnabled: true,
@@ -291,4 +289,15 @@ const styles = StyleSheet.create({
},
});
module.exports = ViewPagerAndroidExample;
exports.title = '<ViewPagerAndroid>';
exports.description =
'Container that allows to flip left and right between child views.';
exports.examples = [
{
title: 'Basic pager',
render(): React.Element<typeof ViewPagerAndroidExample> {
return <ViewPagerAndroidExample />;
},
},
];

14
RNTester/js/WebSocketExample.js
View File

@@ -125,9 +125,6 @@ type State = {
};
class WebSocketExample extends React.Component<any, any, State> {
static title = 'WebSocket';
static description = 'WebSocket API';
state: State = {
url: DEFAULT_WS_URL,
httpUrl: DEFAULT_HTTP_URL,
@@ -347,4 +344,13 @@ const styles = StyleSheet.create({
},
});
module.exports = WebSocketExample;
exports.title = 'WebSocket';
exports.description = 'WebSocket API';
exports.examples = [
{
title: 'Basic websocket',
render(): React.Element<typeof WebSocketExample> {
return <WebSocketExample />;
},
},
];

5
RNTester/js/createExamplePage.js
View File

@@ -13,12 +13,11 @@
const React = require('react');
const RNTesterExampleContainer = require('./RNTesterExampleContainer');
import type {ExampleModule} from 'ExampleTypes';
import type {RNTesterExample} from 'RNTesterTypes';
const createExamplePage = function(
title: ?string,
exampleModule: ExampleModule,
exampleModule: RNTesterExample,
): React.ComponentType<any> {
class ExamplePage extends React.Component<{}> {
render() {