Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix up lint errors under react-native-github (#33622)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/33622

Changelog: [Internal] Clean up eslint errors

Reviewed By: yungsters

Differential Revision: D35599445

fbshipit-source-id: bbb9061a3cf9df32daacad9a9b44eba94d3ce48c
This commit is contained in:
Luna Wei
2022-04-22 16:25:25 -07:00
committed by Facebook GitHub Bot
parent 56fd85e371
commit 6958bbb28c
11 changed files with 558 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Libraries/Lists/VirtualizedSectionList.js
+1
View File
@@ -338,6 +338,7 @@ class VirtualizedSectionList<
_renderItem =
(listItemCount: number) =>
// eslint-disable-next-line react/no-unstable-nested-components
({item, index}: {item: Item, index: number, ...}) => {
const info = this._subExtractor(index);
if (!info) {
Libraries/NativeComponent/NativeComponentRegistry.js
-2
View File
@@ -23,8 +23,6 @@ import * as React from 'react';
let getRuntimeConfig;
let componentNameToExists: Map<string, boolean> = new Map();
/**
* Configures a function that is called to determine whether a given component
* should be registered using reflection of the native component at runtime.
packages/rn-tester/js/components/RNTesterModuleList.js
+1
View File
@@ -153,6 +153,7 @@ const RNTesterModuleList: React$AbstractComponent<any, void> = React.memo(
automaticallyAdjustContentInsets={false}
keyboardDismissMode="on-drag"
renderSectionHeader={renderSectionHeader}
// eslint-disable-next-line react/no-unstable-nested-components
ListFooterComponent={() => <View style={{height: 80}} />}
/>
)}
packages/rn-tester/js/examples/Appearance/AppearanceExample.js
+64 -63
View File
@@ -77,6 +77,70 @@ const ThemedText = props => (
</RNTesterThemeContext.Consumer>
);
const AppearanceViaHook = () => {
const colorScheme = useColorScheme();
return (
<RNTesterThemeContext.Provider
value={colorScheme === 'dark' ? themes.dark : themes.light}>
<ThemedContainer>
<ThemedText>useColorScheme(): {colorScheme}</ThemedText>
</ThemedContainer>
</RNTesterThemeContext.Provider>
);
};
const ColorShowcase = props => (
<RNTesterThemeContext.Consumer>
{theme => {
return (
<View
style={{
marginVertical: 20,
backgroundColor: theme.SystemBackgroundColor,
}}>
<Text style={{fontWeight: '700', color: theme.LabelColor}}>
{props.themeName}
</Text>
{Object.keys(theme).map(key => (
<View style={{flexDirection: 'row'}} key={key}>
<View
style={{
width: 50,
height: 50,
paddingHorizontal: 8,
paddingVertical: 2,
backgroundColor: theme[key],
}}
/>
<View>
<Text
style={{
paddingHorizontal: 16,
paddingVertical: 2,
color: theme.LabelColor,
fontWeight: '600',
}}>
{key}
</Text>
<Text
style={{
paddingHorizontal: 16,
paddingVertical: 2,
color: theme.LabelColor,
}}>
{typeof theme[key] === 'string'
? theme[key]
: JSON.stringify(theme[key])}
</Text>
</View>
</View>
))}
</View>
);
}}
</RNTesterThemeContext.Consumer>
);
exports.title = 'Appearance';
exports.category = 'UI';
exports.documentationURL = 'https://reactnative.dev/docs/appearance';
@@ -85,17 +149,6 @@ exports.examples = [
{
title: 'useColorScheme hook',
render(): React.Node {
const AppearanceViaHook = () => {
const colorScheme = useColorScheme();
return (
<RNTesterThemeContext.Provider
value={colorScheme === 'dark' ? themes.dark : themes.light}>
<ThemedContainer>
<ThemedText>useColorScheme(): {colorScheme}</ThemedText>
</ThemedContainer>
</RNTesterThemeContext.Provider>
);
};
return <AppearanceViaHook />;
},
},
@@ -155,58 +208,6 @@ exports.examples = [
title: 'RNTester App Colors',
description: 'A light and a dark theme based on standard iOS 13 colors.',
render(): React.Element<any> {
const ColorShowcase = props => (
<RNTesterThemeContext.Consumer>
{theme => {
return (
<View
style={{
marginVertical: 20,
backgroundColor: theme.SystemBackgroundColor,
}}>
<Text style={{fontWeight: '700', color: theme.LabelColor}}>
{props.themeName}
</Text>
{Object.keys(theme).map(key => (
<View style={{flexDirection: 'row'}} key={key}>
<View
style={{
width: 50,
height: 50,
paddingHorizontal: 8,
paddingVertical: 2,
backgroundColor: theme[key],
}}
/>
<View>
<Text
style={{
paddingHorizontal: 16,
paddingVertical: 2,
color: theme.LabelColor,
fontWeight: '600',
}}>
{key}
</Text>
<Text
style={{
paddingHorizontal: 16,
paddingVertical: 2,
color: theme.LabelColor,
}}>
{typeof theme[key] === 'string'
? theme[key]
: JSON.stringify(theme[key])}
</Text>
</View>
</View>
))}
</View>
);
}}
</RNTesterThemeContext.Consumer>
);
return (
<View>
<RNTesterThemeContext.Provider value={themes.light}>
packages/rn-tester/js/examples/Dimensions/DimensionsExample.js
+5 -4
View File
@@ -42,6 +42,11 @@ class DimensionsSubscription extends React.Component<
}
}
const DimensionsViaHook = () => {
const dims = useWindowDimensions();
return <Text>{JSON.stringify(dims, null, 2)}</Text>;
};
exports.title = 'Dimensions';
exports.category = 'UI';
exports.documentationURL = 'https://reactnative.dev/docs/dimensions';
@@ -50,10 +55,6 @@ exports.examples = [
{
title: 'useWindowDimensions hook',
render(): React.Node {
const DimensionsViaHook = () => {
const dims = useWindowDimensions();
return <Text>{JSON.stringify(dims, null, 2)}</Text>;
};
return <DimensionsViaHook />;
},
},
packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+161 -166
View File
@@ -28,6 +28,166 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
state = {
scrollEnabled: true,
};
render() {
return (
<View>
<ScrollView
automaticallyAdjustContentInsets={false}
style={styles.scrollView}
scrollEnabled={this.state.scrollEnabled}>
{ITEMS.map(createItemRow)}
</ScrollView>
<Text>
{'Scrolling enabled = ' + this.state.scrollEnabled.toString()}
</Text>
<Button
label="Disable Scrolling"
onPress={() => {
this.setState({scrollEnabled: false});
}}
/>
<Button
label="Enable Scrolling"
onPress={() => {
this.setState({scrollEnabled: true});
}}
/>
</View>
);
}
}
let AppendingListItemCount = 6;
class AppendingList extends React.Component<
{},
{items: Array<React.Element<typeof Item>>},
> {
state = {
items: [...Array(AppendingListItemCount)].map((_, ii) => (
<Item msg={`Item ${ii}`} />
)),
};
render() {
return (
<View>
<ScrollView
automaticallyAdjustContentInsets={false}
maintainVisibleContentPosition={{
minIndexForVisible: 1,
autoscrollToTopThreshold: 10,
}}
style={styles.scrollView}>
{this.state.items.map(item =>
React.cloneElement(item, {key: item.props.msg}),
)}
</ScrollView>
<ScrollView
horizontal={true}
automaticallyAdjustContentInsets={false}
maintainVisibleContentPosition={{
minIndexForVisible: 1,
autoscrollToTopThreshold: 10,
}}
style={[styles.scrollView, styles.horizontalScrollView]}>
{this.state.items.map(item =>
React.cloneElement(item, {key: item.props.msg, style: null}),
)}
</ScrollView>
<View style={styles.row}>
<Button
label="Add to top"
onPress={() => {
this.setState(state => {
const idx = AppendingListItemCount++;
return {
items: [
<Item style={{paddingTop: idx * 5}} msg={`Item ${idx}`} />,
].concat(state.items),
};
});
}}
/>
<Button
label="Remove top"
onPress={() => {
this.setState(state => ({
items: state.items.slice(1),
}));
}}
/>
<Button
label="Change height top"
onPress={() => {
this.setState(state => ({
items: [
React.cloneElement(state.items[0], {
style: {paddingBottom: Math.random() * 40},
}),
].concat(state.items.slice(1)),
}));
}}
/>
</View>
<View style={styles.row}>
<Button
label="Add to end"
onPress={() => {
this.setState(state => ({
items: state.items.concat(
<Item msg={`Item ${AppendingListItemCount++}`} />,
),
}));
}}
/>
<Button
label="Remove end"
onPress={() => {
this.setState(state => ({
items: state.items.slice(0, -1),
}));
}}
/>
<Button
label="Change height end"
onPress={() => {
this.setState(state => ({
items: state.items.slice(0, -1).concat(
React.cloneElement(state.items[state.items.length - 1], {
style: {paddingBottom: Math.random() * 40},
}),
),
}));
}}
/>
</View>
</View>
);
}
}
function CenterContentList(): React.Node {
return (
<ScrollView style={styles.scrollView} centerContent={true}>
<Text>This should be in center.</Text>
</ScrollView>
);
}
function ContentOffsetList(): React.Node {
return (
<ScrollView
style={[styles.scrollView, {height: 100}]}
horizontal={true}
contentOffset={{x: 100, y: 0}}>
{ITEMS.map(createItemRow)}
</ScrollView>
);
}
exports.displayName = 'ScrollViewExample';
exports.title = 'ScrollView';
exports.documentationURL = 'https://reactnative.dev/docs/scrollview';
@@ -112,41 +272,6 @@ const examples = ([
title: '<ScrollView> enable & disable\n',
description: 'ScrollView scrolling behaviour can be disabled and enabled',
render: function (): React.Node {
class EnableDisableList extends React.Component<
{},
{scrollEnabled: boolean},
> {
state = {
scrollEnabled: true,
};
render() {
return (
<View>
<ScrollView
automaticallyAdjustContentInsets={false}
style={styles.scrollView}
scrollEnabled={this.state.scrollEnabled}>
{ITEMS.map(createItemRow)}
</ScrollView>
<Text>
{'Scrolling enabled = ' + this.state.scrollEnabled.toString()}
</Text>
<Button
label="Disable Scrolling"
onPress={() => {
this.setState({scrollEnabled: false});
}}
/>
<Button
label="Enable Scrolling"
onPress={() => {
this.setState({scrollEnabled: true});
}}
/>
</View>
);
}
}
return <EnableDisableList />;
},
},
@@ -275,119 +400,6 @@ if (Platform.OS === 'ios') {
'The `maintainVisibleContentPosition` prop allows insertions to either end of the content ' +
'without causing the visible content to jump. Re-ordering is not supported.',
render: function () {
let itemCount = 6;
class AppendingList extends React.Component<
{},
{items: Array<React.Element<typeof Item>>},
> {
state = {
items: [...Array(itemCount)].map((_, ii) => (
<Item msg={`Item ${ii}`} />
)),
};
render() {
return (
<View>
<ScrollView
automaticallyAdjustContentInsets={false}
maintainVisibleContentPosition={{
minIndexForVisible: 1,
autoscrollToTopThreshold: 10,
}}
style={styles.scrollView}>
{this.state.items.map(item =>
React.cloneElement(item, {key: item.props.msg}),
)}
</ScrollView>
<ScrollView
horizontal={true}
automaticallyAdjustContentInsets={false}
maintainVisibleContentPosition={{
minIndexForVisible: 1,
autoscrollToTopThreshold: 10,
}}
style={[styles.scrollView, styles.horizontalScrollView]}>
{this.state.items.map(item =>
React.cloneElement(item, {key: item.props.msg, style: null}),
)}
</ScrollView>
<View style={styles.row}>
<Button
label="Add to top"
onPress={() => {
this.setState(state => {
const idx = itemCount++;
return {
items: [
<Item
style={{paddingTop: idx * 5}}
msg={`Item ${idx}`}
/>,
].concat(state.items),
};
});
}}
/>
<Button
label="Remove top"
onPress={() => {
this.setState(state => ({
items: state.items.slice(1),
}));
}}
/>
<Button
label="Change height top"
onPress={() => {
this.setState(state => ({
items: [
React.cloneElement(state.items[0], {
style: {paddingBottom: Math.random() * 40},
}),
].concat(state.items.slice(1)),
}));
}}
/>
</View>
<View style={styles.row}>
<Button
label="Add to end"
onPress={() => {
this.setState(state => ({
items: state.items.concat(
<Item msg={`Item ${itemCount++}`} />,
),
}));
}}
/>
<Button
label="Remove end"
onPress={() => {
this.setState(state => ({
items: state.items.slice(0, -1),
}));
}}
/>
<Button
label="Change height end"
onPress={() => {
this.setState(state => ({
items: state.items.slice(0, -1).concat(
React.cloneElement(
state.items[state.items.length - 1],
{
style: {paddingBottom: Math.random() * 40},
},
),
),
}));
}}
/>
</View>
</View>
);
}
}
return <AppendingList />;
},
});
@@ -396,13 +408,6 @@ if (Platform.OS === 'ios') {
description:
'ScrollView puts its content in the center if the content is smaller than scroll view',
render: function (): React.Node {
function CenterContentList(): React.Node {
return (
<ScrollView style={styles.scrollView} centerContent={true}>
<Text>This should be in center.</Text>
</ScrollView>
);
}
return <CenterContentList />;
},
});
@@ -410,17 +415,7 @@ if (Platform.OS === 'ios') {
title: '<ScrollView> (contentOffset = {x: 100, y: 0})\n',
description: 'Initial contentOffset can be set on ScrollView.',
render: function (): React.Node {
function CenterContentList(): React.Node {
return (
<ScrollView
style={[styles.scrollView, {height: 100}]}
horizontal={true}
contentOffset={{x: 100, y: 0}}>
{ITEMS.map(createItemRow)}
</ScrollView>
);
}
return <CenterContentList />;
return <ContentOffsetList />;
},
});
examples.push({
packages/rn-tester/js/examples/SectionList/SectionList-scrollable.js
+2
View File
@@ -271,9 +271,11 @@ export function SectionList_scrollable(Props: {
ref={ref}
ListHeaderComponent={HeaderComponent}
ListFooterComponent={FooterComponent}
// eslint-disable-next-line react/no-unstable-nested-components
SectionSeparatorComponent={info => (
<CustomSeparatorComponent {...info} text="SECTION SEPARATOR" />
)}
// eslint-disable-next-line react/no-unstable-nested-components
ItemSeparatorComponent={info => (
<CustomSeparatorComponent {...info} text="ITEM SEPARATOR" />
)}
packages/rn-tester/js/examples/Timer/TimerExample.js
+44 -47
View File
@@ -264,6 +264,50 @@ class TimerTester extends React.Component<TimerTesterProps> {
};
}
class IntervalExample extends React.Component<
$ReadOnly<{||}>,
{|
showTimer: boolean,
|},
> {
state = {
showTimer: true,
};
_timerTester: ?React.ElementRef<typeof TimerTester>;
render() {
return (
<View>
{this.state.showTimer && this._renderTimer()}
<RNTesterButton onPress={this._toggleTimer}>
{this.state.showTimer ? 'Unmount timer' : 'Mount new timer'}
</RNTesterButton>
</View>
);
}
_renderTimer = () => {
return (
<View>
<TimerTester
ref={ref => (this._timerTester = ref)}
dt={25}
type="setInterval"
/>
<RNTesterButton
onPress={() => this._timerTester && this._timerTester.clear()}>
Clear interval
</RNTesterButton>
</View>
);
};
_toggleTimer = () => {
this.setState({showTimer: !this.state.showTimer});
};
}
exports.framework = 'React';
exports.title = 'Timers';
exports.category = 'UI';
@@ -323,53 +367,6 @@ exports.examples = [
description: ('Execute function fn every t milliseconds until cancelled ' +
'or component is unmounted.': string),
render: function (): React.Node {
type IntervalExampleProps = $ReadOnly<{||}>;
type IntervalExampleState = {|
showTimer: boolean,
|};
class IntervalExample extends React.Component<
IntervalExampleProps,
IntervalExampleState,
> {
state = {
showTimer: true,
};
_timerTester: ?React.ElementRef<typeof TimerTester>;
render() {
return (
<View>
{this.state.showTimer && this._renderTimer()}
<RNTesterButton onPress={this._toggleTimer}>
{this.state.showTimer ? 'Unmount timer' : 'Mount new timer'}
</RNTesterButton>
</View>
);
}
_renderTimer = () => {
return (
<View>
<TimerTester
ref={ref => (this._timerTester = ref)}
dt={25}
type="setInterval"
/>
<RNTesterButton
onPress={() => this._timerTester && this._timerTester.clear()}>
Clear interval
</RNTesterButton>
</View>
);
};
_toggleTimer = () => {
this.setState({showTimer: !this.state.showTimer});
};
}
return <IntervalExample />;
},
},
packages/rn-tester/js/examples/View/ViewExample.js
+279 -282
View File
@@ -19,6 +19,285 @@ const {
View,
} = require('react-native');
class ViewBorderStyleExample extends React.Component<
$ReadOnly<{||}>,
{|showBorder: boolean|},
> {
state = {
showBorder: true,
};
render() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<View
style={[
{
borderWidth: 1,
padding: 5,
},
this.state.showBorder
? {
borderStyle: 'dashed',
}
: null,
]}>
<Text style={{fontSize: 11}}>Dashed border style</Text>
</View>
<View
style={[
{
marginTop: 5,
borderWidth: 1,
borderRadius: 5,
padding: 5,
},
this.state.showBorder
? {
borderStyle: 'dotted',
}
: null,
]}>
<Text style={{fontSize: 11}}>Dotted border style</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({showBorder: !this.state.showBorder});
};
}
const offscreenAlphaCompositingStyles = StyleSheet.create({
alphaCompositing: {
justifyContent: 'space-around',
width: 100,
height: 50,
borderRadius: 100,
},
});
class OffscreenAlphaCompositing extends React.Component<
$ReadOnly<{||}>,
{|
active: boolean,
|},
> {
state = {
active: false,
};
render() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>Blobs</Text>
<View
style={{opacity: 1.0, paddingBottom: 30}}
needsOffscreenAlphaCompositing={this.state.active}>
<View
style={[
offscreenAlphaCompositingStyles.alphaCompositing,
{marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
]}
/>
<View
style={[
offscreenAlphaCompositingStyles.alphaCompositing,
{
marginTop: -50,
marginLeft: 50,
backgroundColor: '#F7CB15',
},
]}
/>
</View>
<Text style={{paddingBottom: 10}}>
Same blobs, but their shared container have 0.5 opacity
</Text>
<Text style={{paddingBottom: 10}}>
Tap to {this.state.active ? 'activate' : 'deactivate'}{' '}
needsOffscreenAlphaCompositing
</Text>
<View
style={{opacity: 0.8}}
needsOffscreenAlphaCompositing={this.state.active}>
<View
style={[
offscreenAlphaCompositingStyles.alphaCompositing,
{marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
]}
/>
<View
style={[
offscreenAlphaCompositingStyles.alphaCompositing,
{
marginTop: -50,
marginLeft: 50,
backgroundColor: '#F7CB15',
},
]}
/>
</View>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({active: !this.state.active});
};
}
const ZIndexExampleStyles = StyleSheet.create({
zIndex: {
justifyContent: 'space-around',
width: 100,
height: 50,
marginTop: -10,
position: 'relative',
},
});
class ZIndexExample extends React.Component<
$ReadOnly<{||}>,
{|
flipped: boolean,
|},
> {
state = {
flipped: false,
};
render() {
const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>Tap to flip sorting order</Text>
<View
style={[
ZIndexExampleStyles.zIndex,
{
marginTop: 0,
backgroundColor: '#E57373',
zIndex: indices[0],
},
]}>
<Text>ZIndex {indices[0]}</Text>
</View>
<View
style={[
ZIndexExampleStyles.zIndex,
{
marginLeft: 50,
backgroundColor: '#FFF176',
zIndex: indices[1],
},
]}>
<Text>ZIndex {indices[1]}</Text>
</View>
<View
style={[
ZIndexExampleStyles.zIndex,
{
marginLeft: 100,
backgroundColor: '#81C784',
zIndex: indices[2],
},
]}>
<Text>ZIndex {indices[2]}</Text>
</View>
<View
style={[
ZIndexExampleStyles.zIndex,
{
marginLeft: 150,
backgroundColor: '#64B5F6',
zIndex: indices[3],
},
]}>
<Text>ZIndex {indices[3]}</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({flipped: !this.state.flipped});
};
}
class DisplayNoneStyle extends React.Component<
$ReadOnly<{||}>,
{|
index: number,
|},
> {
state = {
index: 0,
};
render() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>
Press to toggle `display: none`
</Text>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'red',
display: this.state.index % 2 === 0 ? 'none' : 'flex',
}}
/>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'blue',
display: this.state.index % 3 === 0 ? 'none' : 'flex',
}}
/>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'yellow',
display: this.state.index % 5 === 0 ? 'none' : 'flex',
}}>
<View
style={{
height: 30,
width: 30,
backgroundColor: 'salmon',
display: this.state.index % 11 === 0 ? 'none' : 'flex',
}}
/>
</View>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'magenta',
display: this.state.index % 7 === 0 ? 'none' : 'flex',
}}
/>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({index: this.state.index + 1});
};
}
exports.title = 'View';
exports.documentationURL = 'https://reactnative.dev/docs/view';
exports.category = 'Basic';
@@ -93,59 +372,6 @@ exports.examples = [
{
title: 'Border Style',
render(): React.Node {
type Props = $ReadOnly<{||}>;
type State = {|
showBorder: boolean,
|};
class ViewBorderStyleExample extends React.Component<Props, State> {
state = {
showBorder: true,
};
render() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<View
style={[
{
borderWidth: 1,
padding: 5,
},
this.state.showBorder
? {
borderStyle: 'dashed',
}
: null,
]}>
<Text style={{fontSize: 11}}>Dashed border style</Text>
</View>
<View
style={[
{
marginTop: 5,
borderWidth: 1,
borderRadius: 5,
padding: 5,
},
this.state.showBorder
? {
borderStyle: 'dotted',
}
: null,
]}>
<Text style={{fontSize: 11}}>Dotted border style</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({showBorder: !this.state.showBorder});
};
}
return <ViewBorderStyleExample />;
},
},
@@ -273,247 +499,18 @@ exports.examples = [
{
title: 'Offscreen Alpha Compositing',
render(): React.Node {
type Props = $ReadOnly<{||}>;
type State = {|
active: boolean,
|};
const styles = StyleSheet.create({
alphaCompositing: {
justifyContent: 'space-around',
width: 100,
height: 50,
borderRadius: 100,
},
});
class OffscreenAlphaCompositing extends React.Component<Props, State> {
state = {
active: false,
};
render() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>Blobs</Text>
<View
style={{opacity: 1.0, paddingBottom: 30}}
needsOffscreenAlphaCompositing={this.state.active}>
<View
style={[
styles.alphaCompositing,
{marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
]}
/>
<View
style={[
styles.alphaCompositing,
{
marginTop: -50,
marginLeft: 50,
backgroundColor: '#F7CB15',
},
]}
/>
</View>
<Text style={{paddingBottom: 10}}>
Same blobs, but their shared container have 0.5 opacity
</Text>
<Text style={{paddingBottom: 10}}>
Tap to {this.state.active ? 'activate' : 'deactivate'}{' '}
needsOffscreenAlphaCompositing
</Text>
<View
style={{opacity: 0.8}}
needsOffscreenAlphaCompositing={this.state.active}>
<View
style={[
styles.alphaCompositing,
{marginTop: 0, marginLeft: 0, backgroundColor: '#FF6F59'},
]}
/>
<View
style={[
styles.alphaCompositing,
{
marginTop: -50,
marginLeft: 50,
backgroundColor: '#F7CB15',
},
]}
/>
</View>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({active: !this.state.active});
};
}
return <OffscreenAlphaCompositing />;
},
},
{
title: 'ZIndex',
render(): React.Node {
type Props = $ReadOnly<{||}>;
type State = {|
flipped: boolean,
|};
const styles = StyleSheet.create({
zIndex: {
justifyContent: 'space-around',
width: 100,
height: 50,
marginTop: -10,
position: 'relative',
},
});
class ZIndexExample extends React.Component<Props, State> {
state = {
flipped: false,
};
render() {
const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>
Tap to flip sorting order
</Text>
<View
style={[
styles.zIndex,
{
marginTop: 0,
backgroundColor: '#E57373',
zIndex: indices[0],
},
]}>
<Text>ZIndex {indices[0]}</Text>
</View>
<View
style={[
styles.zIndex,
{
marginLeft: 50,
backgroundColor: '#FFF176',
zIndex: indices[1],
},
]}>
<Text>ZIndex {indices[1]}</Text>
</View>
<View
style={[
styles.zIndex,
{
marginLeft: 100,
backgroundColor: '#81C784',
zIndex: indices[2],
},
]}>
<Text>ZIndex {indices[2]}</Text>
</View>
<View
style={[
styles.zIndex,
{
marginLeft: 150,
backgroundColor: '#64B5F6',
zIndex: indices[3],
},
]}>
<Text>ZIndex {indices[3]}</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({flipped: !this.state.flipped});
};
}
return <ZIndexExample />;
},
},
{
title: '`display: none` style',
render(): React.Node {
type Props = $ReadOnly<{||}>;
type State = {|
index: number,
|};
class DisplayNoneStyle extends React.Component<Props, State> {
state = {
index: 0,
};
render() {
return (
<TouchableWithoutFeedback onPress={this._handlePress}>
<View>
<Text style={{paddingBottom: 10}}>
Press to toggle `display: none`
</Text>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'red',
display: this.state.index % 2 === 0 ? 'none' : 'flex',
}}
/>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'blue',
display: this.state.index % 3 === 0 ? 'none' : 'flex',
}}
/>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'yellow',
display: this.state.index % 5 === 0 ? 'none' : 'flex',
}}>
<View
style={{
height: 30,
width: 30,
backgroundColor: 'salmon',
display: this.state.index % 11 === 0 ? 'none' : 'flex',
}}
/>
</View>
<View
style={{
height: 50,
width: 50,
backgroundColor: 'magenta',
display: this.state.index % 7 === 0 ? 'none' : 'flex',
}}
/>
</View>
</TouchableWithoutFeedback>
);
}
_handlePress = () => {
this.setState({index: this.state.index + 1});
};
}
return <DisplayNoneStyle />;
},
},
scripts/bump-oss-version.js
+1 -14
View File
@@ -14,7 +14,7 @@
* This script walks a releaser through bumping the version for a release
* It will commit the appropriate tags to trigger the CircleCI jobs.
*/
const {exec, exit} = require('shelljs');
const {exit} = require('shelljs');
const yargs = require('yargs');
const inquirer = require('inquirer');
const request = require('request');
@@ -56,19 +56,6 @@ function exitIfNotOnReleaseBranch(branch) {
}
}
function getLatestTag(versionPrefix) {
const tags = exec(`git tag --list "v${versionPrefix}*" --sort=-refname`, {
silent: true,
})
.stdout.trim()
.split('\n')
.filter(tag => tag.length > 0);
if (tags.length > 0) {
return tags[0];
}
return null;
}
function triggerReleaseWorkflow(options) {
return new Promise((resolve, reject) => {
request(options, function (error, response, body) {
scripts/prepare-package-for-release.js
-1
View File
@@ -38,7 +38,6 @@ const argv = yargs
default: false,
}).argv;
const currentCommit = process.env.CIRCLE_SHA1;
const branch = process.env.CIRCLE_BRANCH;
const remote = argv.remote;
const releaseVersion = argv.toVersion;