/**
* 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 strict-local
*/
'use strict';
const React = require('react');
const {
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
} = require('react-native');
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.
);
},
},
{
title: 'Border Style',
render(): React.Node {
type Props = $ReadOnly<{||}>;
type State = {|
showBorder: boolean,
|};
class ViewBorderStyleExample extends React.Component {
state = {
showBorder: true,
};
render() {
return (
Dashed border style
Dotted border style
);
}
_handlePress = () => {
this.setState({showBorder: !this.state.showBorder});
};
}
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 {
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 {
state = {
active: false,
};
render() {
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});
};
}
return ;
},
},
{
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 {
state = {
flipped: false,
};
render() {
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});
};
}
return ;
},
},
{
title: '`display: none` style',
render(): React.Node {
type Props = $ReadOnly<{||}>;
type State = {|
index: number,
|};
class DisplayNoneStyle extends React.Component {
state = {
index: 0,
};
render() {
return (
Press to toggle `display: none`
);
}
_handlePress = () => {
this.setState({index: this.state.index + 1});
};
}
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
);
},
},
];