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

Remove MaskedViewIOS from react-native-github

Browse Source 
Summary:
Remove MaskedViewIOS from react-native-github, update deprecation warnings, rebuild CocoaPods.

Changelog:
[General][Removed] - Remove MaskedViewIOS

Reviewed By: lunaleaps

Differential Revision: D37860775

fbshipit-source-id: 963b4b9891eecf5610cfad1e93ac8bf83f29f521
This commit is contained in:
Michael Sokolnicki
2022-07-22 17:07:26 -07:00
committed by Facebook GitHub Bot
parent 000bbe8013
commit a67360b0f3
11 changed files with 16 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Libraries/Components/MaskedView/MaskedViewIOS.android.js
-13
View File
@@ -1,13 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and 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 strict-local
*/
'use strict';
module.exports = require('../UnimplementedViews/UnimplementedView');
Libraries/Components/MaskedView/MaskedViewIOS.ios.js
-93
View File
@@ -1,93 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and 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
*/
import * as React from 'react';
import StyleSheet from '../../StyleSheet/StyleSheet';
import View from '../View/View';
import type {ViewProps} from '../View/ViewPropTypes';
import RCTMaskedViewNativeComponent from './RCTMaskedViewNativeComponent';
type Props = $ReadOnly<{|
...ViewProps,
children: React.Node,
/**
* Should be a React element to be rendered and applied as the
* mask for the child element.
*/
maskElement: React.Element<any>,
|}>;
/**
* Renders the child view with a mask specified in the `maskElement` prop.
*
* ```
* import React from 'react';
* import { MaskedViewIOS, Text, View } from 'react-native';
*
* class MyMaskedView extends React.Component {
* render() {
* return (
* <MaskedViewIOS
* style={{ flex: 1 }}
* maskElement={
* <View style={styles.maskContainerStyle}>
* <Text style={styles.maskTextStyle}>
* Basic Mask
* </Text>
* </View>
* }
* >
* <View style={{ flex: 1, backgroundColor: 'blue' }} />
* </MaskedViewIOS>
* );
* }
* }
* ```
*
* The above example will render a view with a blue background that fills its
* parent, and then mask that view with text that says "Basic Mask".
*
* The alpha channel of the view rendered by the `maskElement` prop determines how
* much of the view's content and background shows through. Fully or partially
* opaque pixels allow the underlying content to show through but fully
* transparent pixels block that content.
*
*/
class MaskedViewIOS extends React.Component<Props> {
_hasWarnedInvalidRenderMask = false;
render(): React.Node {
const {maskElement, children, ...otherViewProps} = this.props;
if (!React.isValidElement(maskElement)) {
if (!this._hasWarnedInvalidRenderMask) {
console.warn(
'MaskedView: Invalid `maskElement` prop was passed to MaskedView. ' +
'Expected a React Element. No mask will render.',
);
this._hasWarnedInvalidRenderMask = true;
}
return <View {...otherViewProps}>{children}</View>;
}
return (
<RCTMaskedViewNativeComponent {...otherViewProps}>
<View pointerEvents="none" style={StyleSheet.absoluteFill}>
{maskElement}
</View>
{children}
</RCTMaskedViewNativeComponent>
);
}
}
module.exports = MaskedViewIOS;
Libraries/Components/MaskedView/RCTMaskedViewNativeComponent.js
-21
View File
@@ -1,21 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and 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 strict-local
*/
import type {ViewProps} from '../View/ViewPropTypes';
import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
type NativeProps = $ReadOnly<{|
...ViewProps,
|}>;
export default (codegenNativeComponent<NativeProps>(
'RCTMaskedView',
): HostComponent<NativeProps>);
Libraries/Components/MaskedView/__tests__/MaskedViewIOS-test.js
-40
View File
@@ -1,40 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @emails oncall+react_native
* @flow strict-local
*/
'use strict';
const React = require('react');
const Text = require('../../../Text/Text');
const View = require('../../View/View');
const MaskedViewIOS = require('../MaskedViewIOS');
const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
describe('<MaskedViewIOS />', () => {
it('should render as expected', () => {
ReactNativeTestTools.expectRendersMatchingSnapshot(
'MaskedViewIOS',
() => (
<MaskedViewIOS
maskElement={
<View>
<Text>Basic Mask</Text>
</View>
}>
<View />
</MaskedViewIOS>
),
() => {
jest.dontMock('../MaskedViewIOS');
},
);
});
});
Libraries/Components/MaskedView/__tests__/__snapshots__/MaskedViewIOS-test.js.snap
-77
View File
@@ -1,77 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<MaskedViewIOS /> should render as expected: should deep render when mocked (please verify output manually) 1`] = `
<RCTMaskedView>
<View
pointerEvents="none"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View>
<Text>
Basic Mask
</Text>
</View>
</View>
<View />
</RCTMaskedView>
`;
exports[`<MaskedViewIOS /> should render as expected: should deep render when not mocked (please verify output manually) 1`] = `
<RCTMaskedView>
<View
pointerEvents="none"
style={
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View>
<Text>
Basic Mask
</Text>
</View>
</View>
<View />
</RCTMaskedView>
`;
exports[`<MaskedViewIOS /> should render as expected: should shallow render as <MaskedViewIOS /> when mocked 1`] = `
<MaskedViewIOS
maskElement={
<View>
<Text>
Basic Mask
</Text>
</View>
}
>
<View />
</MaskedViewIOS>
`;
exports[`<MaskedViewIOS /> should render as expected: should shallow render as <MaskedViewIOS /> when not mocked 1`] = `
<MaskedViewIOS
maskElement={
<View>
<Text>
Basic Mask
</Text>
</View>
}
>
<View />
</MaskedViewIOS>
`;
React/Views/RCTMaskedView.h
-14
View File
@@ -1,14 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import <UIKit/UIKit.h>
#import <React/RCTView.h>
@interface RCTMaskedView : RCTView
@end
React/Views/RCTMaskedView.m
-34
View File
@@ -1,34 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTMaskedView.h"
#import <React/UIView+React.h>
@implementation RCTMaskedView
- (void)didUpdateReactSubviews
{
// RCTMaskedView expects that the first subview rendered is the mask.
UIView *maskView = [self.reactSubviews firstObject];
self.maskView = maskView;
// Add the other subviews to the view hierarchy
for (NSUInteger i = 1; i < self.reactSubviews.count; i++) {
UIView *subview = [self.reactSubviews objectAtIndex:i];
[self addSubview:subview];
}
}
- (void)displayLayer:(__unused CALayer *)layer
{
// RCTView uses displayLayer to do border rendering.
// We don't need to do that in RCTMaskedView, so we
// stub this method and override the default implementation.
}
@end
React/Views/RCTMaskedViewManager.h
-12
View File
@@ -1,12 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import <React/RCTViewManager.h>
@interface RCTMaskedViewManager : RCTViewManager
@end
React/Views/RCTMaskedViewManager.m
-26
View File
@@ -1,26 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTMaskedViewManager.h"
#import "RCTMaskedView.h"
#import "RCTUIManager.h"
@implementation RCTMaskedViewManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
RCTNewArchitectureValidationPlaceholder(
RCTNotAllowedInFabricWithoutLegacy,
self,
@"This native component is still using the legacy interop layer -- please migrate it to use a Fabric specific implementation.");
return [RCTMaskedView new];
}
@end
index.js
+15 -10
View File
@@ -21,7 +21,6 @@ import typeof Image from './Libraries/Image/Image';
import typeof ImageBackground from './Libraries/Image/ImageBackground';
import typeof InputAccessoryView from './Libraries/Components/TextInput/InputAccessoryView';
import typeof KeyboardAvoidingView from './Libraries/Components/Keyboard/KeyboardAvoidingView';
import typeof MaskedViewIOS from './Libraries/Components/MaskedView/MaskedViewIOS';
import typeof Modal from './Libraries/Modal/Modal';
import typeof Pressable from './Libraries/Components/Pressable/Pressable';
import typeof ProgressBarAndroid from './Libraries/Components/ProgressBarAndroid/ProgressBarAndroid';
@@ -145,15 +144,6 @@ module.exports = {
return require('./Libraries/Components/Keyboard/KeyboardAvoidingView')
.default;
},
get MaskedViewIOS(): MaskedViewIOS {
warnOnce(
'maskedviewios-moved',
'MaskedViewIOS has been extracted from react-native core and will be removed in a future release. ' +
"It can now be installed and imported from '@react-native-masked-view/masked-view' instead of 'react-native'. " +
'See https://github.com/react-native-masked-view/masked-view',
);
return require('./Libraries/Components/MaskedView/MaskedViewIOS');
},
get Modal(): Modal {
return require('./Libraries/Modal/Modal');
},
@@ -736,4 +726,19 @@ if (__DEV__) {
);
},
});
/* $FlowFixMe[prop-missing] This is intentional: Flow will error when
* attempting to access MaskedViewIOS. */
/* $FlowFixMe[invalid-export] This is intentional: Flow will error when
* attempting to access MaskedViewIOS. */
Object.defineProperty(module.exports, 'MaskedViewIOS', {
configurable: true,
get() {
invariant(
false,
'MaskedViewIOS has been removed from React Native. ' +
"It can now be installed and imported from '@react-native-community/react-native-masked-view' instead of 'react-native'. " +
'See https://github.com/react-native-masked-view/masked-view',
);
},
});
}
packages/rn-tester/Podfile.lock
+1 -1
View File
@@ -934,7 +934,7 @@ SPEC CHECKSUMS:
React-RCTTest: 06c388632dc7b30df17af01c8f9e89e641b4d31c
React-RCTText: a861fbf2835299d3cc4189697cddd8bd8602afb9
React-RCTVibration: 0386f50996a153b3f39cecbe7d139763ac9a9fdf
React-rncore: 6daa27c74047a9e13ce3412b99660274a5780603
React-rncore: 2a6ad37560e94cf7ff32e3f2ae1e708491b4c1f3
React-runtimeexecutor: 97dca9247f4d3cfe0733384b189c6930fbd402b7
ReactCommon: 6cef8ed13ee2a9d7d4cf9660dbe6dd2ea6ba7104
ScreenshotManager: 71d047abd38a77310985b87f8136b620c5c61e88