react-native/RNTester/js/SafeAreaViewExample.js
Rubén Norte d5e9e55fa3 Remove @providesModule from all modules
Summary:
This PR removes the need for having the `providesModule` tags in all the modules in the repository.

It configures Flow, Jest and Metro to get the module names from the filenames (`Libraries/Animated/src/nodes/AnimatedInterpolation.js` => `AnimatedInterpolation`)

* Checked the Flow configuration by running flow on the project root (no errors):

```
yarn flow
```

* Checked the Jest configuration by running the tests with a clean cache:

```
yarn jest --clearCache && yarn test
```

* Checked the Metro configuration by starting the server with a clean cache and requesting some bundles:

```
yarn run start --reset-cache
curl 'localhost:8081/IntegrationTests/AccessibilityManagerTest.bundle?platform=android'
curl 'localhost:8081/Libraries/Alert/Alert.bundle?platform=ios'
```

[INTERNAL] [FEATURE] [All] - Removed providesModule from all modules and configured tools.
Closes https://github.com/facebook/react-native/pull/18995

Reviewed By: mjesun

Differential Revision: D7729509

Pulled By: rubennorte

fbshipit-source-id: 892f760a05ce1fddb088ff0cd2e97e521fb8e825
2018-04-25 07:37:10 -07:00

115 lines
2.9 KiB
JavaScript

/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
* @format
*/
'use strict';
const Button = require('Button');
const DeviceInfo = require('DeviceInfo');
const Modal = require('Modal');
const React = require('react');
const SafeAreaView = require('SafeAreaView');
const StyleSheet = require('StyleSheet');
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<
{},
{|modalVisible: boolean|},
> {
state = {
modalVisible: false,
};
_setModalVisible = visible => {
this.setState({modalVisible: visible});
};
render() {
return (
<View>
<Modal
visible={this.state.modalVisible}
onRequestClose={() => this._setModalVisible(false)}
animationType="slide"
supportedOrientations={['portrait', 'landscape']}>
<View style={styles.modal}>
<SafeAreaView style={styles.safeArea}>
<View style={styles.safeAreaContent}>
<Button
onPress={this._setModalVisible.bind(this, false)}
title="Close"
/>
</View>
</SafeAreaView>
</View>
</Modal>
<Button
onPress={this._setModalVisible.bind(this, true)}
title="Present Modal Screen with SafeAreaView"
/>
</View>
);
}
}
class IsIPhoneXExample extends React.Component<{}> {
render() {
return (
<View>
<Text>
Is this an iPhone X:{' '}
{DeviceInfo.isIPhoneX_deprecated
? 'Yeah!'
: 'Nope. (Or `isIPhoneX_deprecated` was already removed.)'}
</Text>
</View>
);
}
}
exports.examples = [
{
title: '<SafeAreaView> Example',
description:
'SafeAreaView automatically applies paddings reflect the portion of the view that is not covered by other (special) ancestor views.',
render: () => <SafeAreaViewExample />,
},
{
title: 'isIPhoneX_deprecated Example',
description:
'`DeviceInfo.isIPhoneX_deprecated` returns true only on iPhone X. ' +
'Note: This prop is deprecated and will be removed right after June 01, 2018. ' +
'Please use this only for a quick and temporary solution. ' +
'Use <SafeAreaView> instead.',
render: () => <IsIPhoneXExample />,
},
];
var styles = StyleSheet.create({
modal: {
flex: 1,
},
safeArea: {
flex: 1,
height: 1000,
},
safeAreaContent: {
flex: 1,
backgroundColor: '#ffaaaa',
alignItems: 'center',
justifyContent: 'center',
},
});