mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
cc068b0551
Summary: I wanted to configure the RN dev menu without having to write native code. This is pretty useful in a greenfield app since it avoids having to write a custom native module for both platforms (and might enable the feature for expo too). This ended up a bit more involved than planned since callbacks can only be called once. I needed to convert the `DevSettings` module to a `NativeEventEmitter` and use events when buttons are clicked. This means creating a JS wrapper for it. Currently it does not export all methods, they can be added in follow ups as needed. ## Changelog [General] [Added] - Export the DevSettings module, add `addMenuItem` method Pull Request resolved: https://github.com/facebook/react-native/pull/25848 Test Plan: Tested in an app using the following code. ```js if (__DEV__) { DevSettings.addMenuItem('Show Dev Screen', () => { dispatchNavigationAction( NavigationActions.navigate({ routeName: 'dev', }), ); }); } ``` Added an example in RN tester  Differential Revision: D17394916 Pulled By: cpojer fbshipit-source-id: f9d2c548b09821c594189d1436a27b97cf5a5737
250 lines
6.1 KiB
JavaScript
250 lines
6.1 KiB
JavaScript
/**
|
|
* 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
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import type {RNTesterExample} from '../types/RNTesterTypes';
|
|
|
|
const ComponentExamples: Array<RNTesterExample> = [
|
|
{
|
|
key: 'ActivityIndicatorExample',
|
|
module: require('../examples/ActivityIndicator/ActivityIndicatorExample'),
|
|
},
|
|
{
|
|
key: 'ButtonExample',
|
|
module: require('../examples/Button/ButtonExample'),
|
|
},
|
|
{
|
|
key: 'CheckBoxExample',
|
|
module: require('../examples/CheckBox/CheckBoxExample'),
|
|
},
|
|
{
|
|
key: 'FlatListExample',
|
|
module: require('../examples/FlatList/FlatListExample'),
|
|
},
|
|
{
|
|
key: 'ImageExample',
|
|
module: require('../examples/Image/ImageExample'),
|
|
},
|
|
{
|
|
key: 'JSResponderHandlerExample',
|
|
module: require('../examples/JSResponderHandlerExample/JSResponderHandlerExample'),
|
|
},
|
|
{
|
|
key: 'KeyboardAvoidingViewExample',
|
|
module: require('../examples/KeyboardAvoidingView/KeyboardAvoidingViewExample'),
|
|
},
|
|
{
|
|
key: 'ModalExample',
|
|
module: require('../examples/Modal/ModalExample'),
|
|
},
|
|
{
|
|
key: 'MultiColumnExample',
|
|
module: require('../examples/MultiColumn/MultiColumnExample'),
|
|
},
|
|
{
|
|
key: 'NewAppScreenExample',
|
|
module: require('../examples/NewAppScreen/NewAppScreenExample'),
|
|
},
|
|
{
|
|
key: 'PickerExample',
|
|
module: require('../examples/Picker/PickerExample'),
|
|
},
|
|
{
|
|
key: 'ProgressBarAndroidExample',
|
|
module: require('../examples/ProgressBarAndroid/ProgressBarAndroidExample'),
|
|
},
|
|
{
|
|
key: 'RefreshControlExample',
|
|
module: require('../examples/RefreshControl/RefreshControlExample'),
|
|
},
|
|
{
|
|
key: 'ScrollViewExample',
|
|
module: require('../examples/ScrollView/ScrollViewExample'),
|
|
},
|
|
{
|
|
key: 'ScrollViewSimpleExample',
|
|
module: require('../examples/ScrollView/ScrollViewSimpleExample'),
|
|
},
|
|
{
|
|
key: 'ScrollViewAnimatedExample',
|
|
module: require('../examples/ScrollView/ScrollViewAnimatedExample'),
|
|
},
|
|
{
|
|
key: 'SectionListExample',
|
|
module: require('../examples/SectionList/SectionListExample'),
|
|
},
|
|
{
|
|
key: 'SliderExample',
|
|
module: require('../examples/Slider/SliderExample'),
|
|
},
|
|
{
|
|
key: 'StatusBarExample',
|
|
module: require('../examples/StatusBar/StatusBarExample'),
|
|
},
|
|
{
|
|
key: 'SwitchExample',
|
|
module: require('../examples/Switch/SwitchExample'),
|
|
},
|
|
{
|
|
key: 'TextExample',
|
|
module: require('../examples/Text/TextExample'),
|
|
},
|
|
{
|
|
key: 'TextInputExample',
|
|
module: require('../examples/TextInput/TextInputExample'),
|
|
},
|
|
{
|
|
key: 'TouchableExample',
|
|
module: require('../examples/Touchable/TouchableExample'),
|
|
},
|
|
{
|
|
key: 'ViewExample',
|
|
module: require('../examples/View/ViewExample'),
|
|
},
|
|
];
|
|
|
|
const APIExamples: Array<RNTesterExample> = [
|
|
{
|
|
key: 'AccessibilityExample',
|
|
module: require('../examples/Accessibility/AccessibilityExample'),
|
|
},
|
|
{
|
|
key: 'AccessibilityAndroidExample',
|
|
module: require('../examples/Accessibility/AccessibilityAndroidExample'),
|
|
},
|
|
{
|
|
key: 'AlertExample',
|
|
module: require('../examples/Alert/AlertExample').AlertExample,
|
|
},
|
|
{
|
|
key: 'AnimatedExample',
|
|
module: require('../examples/Animated/AnimatedExample'),
|
|
},
|
|
{
|
|
key: 'Animation - GratuitousAnimation',
|
|
module: require('../examples/Animated/AnimatedGratuitousApp/AnExApp'),
|
|
},
|
|
{
|
|
key: 'AppearanceExample',
|
|
module: require('../examples/Appearance/AppearanceExample'),
|
|
},
|
|
{
|
|
key: 'AppStateExample',
|
|
module: require('../examples/AppState/AppStateExample'),
|
|
},
|
|
{
|
|
key: 'BorderExample',
|
|
module: require('../examples/Border/BorderExample'),
|
|
},
|
|
{
|
|
key: 'ClipboardExample',
|
|
module: require('../examples/Clipboard/ClipboardExample'),
|
|
},
|
|
{
|
|
key: 'CrashExample',
|
|
module: require('../examples/Crash/CrashExample'),
|
|
},
|
|
{
|
|
key: 'DatePickerAndroidExample',
|
|
module: require('../examples/DatePicker/DatePickerAndroidExample'),
|
|
},
|
|
{
|
|
key: 'DevSettings',
|
|
module: require('../examples/DevSettings/DevSettingsExample'),
|
|
},
|
|
{
|
|
key: 'Dimensions',
|
|
module: require('../examples/Dimensions/DimensionsExample'),
|
|
},
|
|
{
|
|
key: 'LayoutEventsExample',
|
|
module: require('../examples/Layout/LayoutEventsExample'),
|
|
},
|
|
{
|
|
key: 'LinkingExample',
|
|
module: require('../examples/Linking/LinkingExample'),
|
|
},
|
|
{
|
|
key: 'LayoutAnimationExample',
|
|
module: require('../examples/Layout/LayoutAnimationExample'),
|
|
},
|
|
{
|
|
key: 'LayoutExample',
|
|
module: require('../examples/Layout/LayoutExample'),
|
|
},
|
|
{
|
|
key: 'NativeAnimationsExample',
|
|
module: require('../examples/NativeAnimation/NativeAnimationsExample'),
|
|
},
|
|
{
|
|
key: 'OrientationChangeExample',
|
|
module: require('../examples/OrientationChange/OrientationChangeExample'),
|
|
},
|
|
{
|
|
key: 'PanResponderExample',
|
|
module: require('../examples/PanResponder/PanResponderExample'),
|
|
},
|
|
{
|
|
key: 'PermissionsExampleAndroid',
|
|
module: require('../examples/PermissionsAndroid/PermissionsExample'),
|
|
},
|
|
{
|
|
key: 'PointerEventsExample',
|
|
module: require('../examples/PointerEvents/PointerEventsExample'),
|
|
},
|
|
{
|
|
key: 'RTLExample',
|
|
module: require('../examples/RTL/RTLExample'),
|
|
},
|
|
{
|
|
key: 'ShareExample',
|
|
module: require('../examples/Share/ShareExample'),
|
|
},
|
|
{
|
|
key: 'TimerExample',
|
|
module: require('../examples/Timer/TimerExample'),
|
|
},
|
|
{
|
|
key: 'ToastAndroidExample',
|
|
module: require('../examples/ToastAndroid/ToastAndroidExample'),
|
|
},
|
|
{
|
|
key: 'TransformExample',
|
|
module: require('../examples/Transform/TransformExample'),
|
|
},
|
|
{
|
|
key: 'VibrationExample',
|
|
module: require('../examples/Vibration/VibrationExample'),
|
|
},
|
|
{
|
|
key: 'WebSocketExample',
|
|
module: require('../examples/WebSocket/WebSocketExample'),
|
|
},
|
|
{
|
|
key: 'XHRExample',
|
|
module: require('../examples/XHR/XHRExample'),
|
|
},
|
|
];
|
|
|
|
const Modules: any = {};
|
|
|
|
APIExamples.concat(ComponentExamples).forEach(Example => {
|
|
Modules[Example.key] = Example.module;
|
|
});
|
|
|
|
const RNTesterList = {
|
|
APIExamples,
|
|
ComponentExamples,
|
|
Modules,
|
|
};
|
|
|
|
module.exports = RNTesterList;
|