react-native/Examples/UIExplorer/UIExplorerList.android.js
Janic Duplessis b979128c54 Cross platform status bar API
Summary:
I started working on improving the `StatusBar` API and make it work on Android. I added support for `setColor`, `setTranslucent` (the status bar is still visible but the app can draw under) and `setHidden` on Android. Looking for feedback on how to improve the API before I put more time on this :).

Right now I went for a cross platform API and functions that don't exist on a platform are just a no-op but I'm not sure it is the best choice since at the moment what is supported is very different between both platforms. I was wondering what you guys think and if it would be better off as 2 different modules.

It is also possible to port some of the features I added for Android to iOS even if there is no 'standard' way to do it. Like `setColor` could be implemented by drawing a colored view under the status bar and translucent by adding/removing some padding.
Closes https://github.com/facebook/react-native/pull/5360

Reviewed By: svcscm

Differential Revision: D2840417

Pulled By: nicklockwood

fb-gh-sync-id: 5c8d988bccf8035341f0efe27e54dd8402c18d24
2016-02-03 06:41:35 -08:00

117 lines
3.1 KiB
JavaScript

/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @flow
*/
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
} = React;
var UIExplorerListBase = require('./UIExplorerListBase');
var COMPONENTS = [
require('./ImageExample'),
require('./ListViewExample'),
require('./PickerAndroidExample'),
require('./ProgressBarAndroidExample'),
require('./PullToRefreshViewAndroidExample.android'),
require('./RefreshControlExample'),
require('./ScrollViewSimpleExample'),
require('./StatusBarExample'),
require('./SwitchExample'),
require('./TextExample.android'),
require('./TextInputExample.android'),
require('./ToolbarAndroidExample'),
require('./TouchableExample'),
require('./ViewExample'),
require('./ViewPagerAndroidExample.android'),
require('./WebViewExample'),
];
var APIS = [
require('./AccessibilityAndroidExample.android'),
require('./AlertExample').AlertExample,
require('./AppStateExample'),
require('./BorderExample'),
require('./CameraRollExample'),
require('./ClipboardExample'),
require('./DatePickerAndroidExample'),
require('./GeolocationExample'),
require('./ImageEditingExample'),
require('./IntentAndroidExample.android'),
require('./LayoutEventsExample'),
require('./LayoutExample'),
require('./NetInfoExample'),
require('./PanResponderExample'),
require('./PointerEventsExample'),
require('./TimePickerAndroidExample'),
require('./TimerExample'),
require('./ToastAndroidExample.android'),
require('./XHRExample'),
];
type Props = {
onSelectExample: Function,
isInDrawer: bool,
};
class UIExplorerList extends React.Component {
props: Props;
render() {
return (
<UIExplorerListBase
components={COMPONENTS}
apis={APIS}
searchText=""
renderAdditionalView={this.renderAdditionalView.bind(this)}
onPressRow={this.onPressRow.bind(this)}
/>
);
}
renderAdditionalView(renderRow, renderTextInput): React.Component {
if (this.props.isInDrawer) {
var homePage = renderRow({
title: 'UIExplorer',
description: 'List of examples',
}, -1);
return (
<View>
{homePage}
</View>
);
}
return renderTextInput(styles.searchTextInput);
}
onPressRow(example: any) {
var Component = UIExplorerListBase.makeRenderable(example);
this.props.onSelectExample({
title: Component.title,
component: Component,
});
}
}
var styles = StyleSheet.create({
searchTextInput: {
padding: 2,
},
});
module.exports = UIExplorerList;