/**
* 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';
const React = require('react');
const {
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
Platform,
} = require('react-native');
class ViewBorderStyleExample extends React.Component<
$ReadOnly<{||}>,
{|showBorder: boolean|},
> {
state: {showBorder: boolean} = {
showBorder: true,
};
render(): React.Node {
return (
Dashed border style
Dotted border style
);
}
_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: boolean} = {
active: false,
};
render(): React.Node {
return (
Blobs
Same blobs, but their shared container have 0.5 opacity
Tap to {this.state.active ? 'activate' : 'deactivate'}{' '}
needsOffscreenAlphaCompositing
);
}
_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: boolean} = {
flipped: false,
};
render(): React.Node {
const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
return (
Tap to flip sorting order
ZIndex {indices[0]}
ZIndex {indices[1]}
ZIndex {indices[2]}
ZIndex {indices[3]}
);
}
_handlePress = () => {
this.setState({flipped: !this.state.flipped});
};
}
class DisplayNoneStyle extends React.Component<
$ReadOnly<{||}>,
{|
index: number,
|},
> {
state: {index: number} = {
index: 0,
};
render(): React.Node {
return (
Press to toggle `display: none`
);
}
_handlePress = () => {
this.setState({index: this.state.index + 1});
};
}
class FlexGapExample extends React.Component<$ReadOnly<{||}>> {
render(): React.Node {
return (
);
}
}
exports.title = 'View';
exports.documentationURL = 'https://reactnative.dev/docs/view';
exports.category = 'Basic';
exports.description = ('Basic building block of all UI, examples that ' +
'demonstrate some of the many styles available.': string);
exports.displayName = 'ViewExample';
exports.examples = [
{
title: 'Background Color',
render(): React.Node {
return (
Blue background
);
},
},
{
title: 'Border',
render(): React.Node {
return (
5px blue border
);
},
},
{
title: 'Padding/Margin',
render(): React.Node {
const styles = StyleSheet.create({
box: {
backgroundColor: '#527FE4',
borderColor: '#000033',
borderWidth: 1,
},
});
return (
5px padding
5px margin
5px margin and padding,
widthAutonomous=true
);
},
},
{
title: 'Border Radius',
render(): React.Node {
return (
<>
Too much use of `borderRadius` (especially large radii) on
anything which is scrolling may result in dropped frames. Use
sparingly.
{Platform.OS === 'ios' && (
View with continuous border curve
)}
);
},
},
{
title: 'Border Style',
render(): React.Node {
return ;
},
},
{
title: 'Rounded Borders',
render(): React.Node {
return (
);
},
},
{
title: 'Overflow',
render(): React.Node {
const styles = StyleSheet.create({
container: {
borderWidth: StyleSheet.hairlineWidth,
height: 12,
marginBottom: 8,
marginEnd: 16,
width: 95,
},
content: {
height: 20,
width: 200,
},
});
// NOTE: The that sets `overflow` should only have other layout
// styles so that we can accurately test view flattening optimizations.
return (
undefined
hidden
visible
);
},
},
{
title: 'Opacity',
render(): React.Node {
return (
Opacity 0
Opacity 0.1
Opacity 0.3
Opacity 0.5
Opacity 0.7
Opacity 0.9
Opacity 1
);
},
},
{
title: 'Offscreen Alpha Compositing',
render(): React.Node {
return ;
},
},
{
title: 'ZIndex',
render(): React.Node {
return ;
},
},
{
title: '`display: none` style',
render(): React.Node {
return ;
},
},
{
title: 'BackfaceVisibility',
render: function (): React.Node {
return (
<>
View #1, front is visible, back is hidden.
Front
Back (You should not see this)
View #2, front is hidden, back is visible.
Front (You should not see this)
Back
);
},
},
{
title: 'View with aria-label="label"',
render(): React.Node {
return (
Blue background
);
},
},
{
title: 'FlexGap',
render(): React.Node {
return ;
},
},
{
title: 'Insets',
render(): React.Node {
return (
inset 10
insetBlock 5
insetBlockEnd 5
insetBlockStart 5
insetInline 5
insetInlineEnd 5
insetInlineStart 5
);
},
},
{
title: 'Logical Border Color',
render(): React.Node {
return (
borderBlockColor orange
borderBlockStartColor purple
borderBlockEndColor green
);
},
},
];