[ncl] Remove RNCore screen

apps/native-component-list/src/navigation/ExpoApis.ts

@@ -10,6 +10,7 @@ function optionalRequire(requirer: () => { default: React.ComponentType }) {
 
 const Accelerometer = optionalRequire(() => require('../screens/AccelerometerScreen'));
 const ActionSheet = optionalRequire(() => require('../screens/ActionSheetScreen'));
+const Alert = optionalRequire(() => require('../screens/AlertScreen'));
 const AppAuth = optionalRequire(() => require('../screens/AppAuthScreen'));
 const Appearance = optionalRequire(() => require('../screens/AppearanceScreen'));
 const AppleAuthentication = optionalRequire(() => require('../screens/AppleAuthenticationScreen'));
@@ -20,6 +21,7 @@ const Battery = optionalRequire(() => require('../screens/BatteryScreen'));
 const Branch = optionalRequire(() => require('../screens/BranchScreen'));
 const Brightness = optionalRequire(() => require('../screens/BrightnessScreen'));
 const Calendars = optionalRequire(() => require('../screens/CalendarsScreen'));
+const Clipboard = optionalRequire(() => require('../screens/ClipboardScreen'));
 const Constants = optionalRequire(() => require('../screens/ConstantsScreen'));
 const ContactDetail = optionalRequire(() => require('../screens/Contacts/ContactDetailScreen'));
 const Contacts = optionalRequire(() => require('../screens/Contacts/ContactsScreen'));
@@ -60,6 +62,7 @@ const SecureStore = optionalRequire(() => require('../screens/SecureStoreScreen'
 const Sensor = optionalRequire(() => require('../screens/SensorScreen'));
 const Sharing = optionalRequire(() => require('../screens/SharingScreen'));
 const SMS = optionalRequire(() => require('../screens/SMSScreen'));
+const StatusBar = optionalRequire(() => require('../screens/StatusBarScreen'));
 const StoreReview = optionalRequire(() => require('../screens/StoreReview'));
 const TaskManager = optionalRequire(() => require('../screens/TaskManagerScreen'));
 const TextToSpeech = optionalRequire(() => require('../screens/TextToSpeechScreen'));
@@ -70,6 +73,9 @@ const WebBrowser = optionalRequire(() => require('../screens/WebBrowserScreen'))
 const optionalScreens: {
   [key: string]: React.ComponentType | null;
 } = {
+  StatusBar,
+  Alert,
+  Clipboard,
   Accelerometer,
   ActionSheet,
   AppAuth,

apps/native-component-list/src/navigation/ExpoApisStackNavigator.tsx

@@ -26,10 +26,10 @@ function ExpoApisStackNavigator(props: { navigation: BottomTabNavigationProp<any
   );
 }
 const icon = ({ focused }: { focused: boolean }) => {
-  return <TabIcon name="exponent-box" focused={focused} />;
+  return <TabIcon name="code-tags" focused={focused} />;
 };
 ExpoApisStackNavigator.navigationOptions = {
-  title: 'Expo APIs',
+  title: 'APIs',
   tabBarLabel: 'APIs',
   tabBarIcon: icon,
   drawerIcon: icon,

apps/native-component-list/src/navigation/ExpoComponents.ts

@@ -6,61 +6,93 @@ function optionalRequire(requirer: () => { default: React.ComponentType }) {
   }
 }
 
+const ActivityIndicator = optionalRequire(() => require('../screens/ActivityIndicatorScreen'));
 const AdMob = optionalRequire(() => require('../screens/AdMobScreen'));
-
 const BarCodeScanner = optionalRequire(() => require('../screens/BarCodeScannerScreen'));
 const BasicMaskScreen = optionalRequire(() => require('../screens/BasicMaskScreen'));
 const BlurView = optionalRequire(() => require('../screens/BlurViewScreen'));
+const Button = optionalRequire(() => require('../screens/ButtonScreen'));
 const Camera = optionalRequire(() => require('../screens/Camera/CameraScreen'));
-const QRCode = optionalRequire(() => require('../screens/QRCodeScreen'));
+const CheckBox = optionalRequire(() => require('../screens/CheckBoxScreen'));
 const DateTimePicker = optionalRequire(() => require('../screens/DateTimePickerScreen'));
+const DrawerLayoutAndroid = optionalRequire(() => require('../screens/DrawerLayoutAndroidScreen'));
+const FacebookAds = optionalRequire(() => require('../screens/FacebookAdsScreen'));
 const GestureHandlerList = optionalRequire(() => require('../screens/GestureHandlerListScreen'));
 const GestureHandlerPinch = optionalRequire(() => require('../screens/GestureHandlerPinchScreen'));
 const GestureHandlerSwipeable = optionalRequire(() =>
   require('../screens/GestureHandlerSwipeableScreen')
 );
-const Gif = optionalRequire(() => require('../screens/GifScreen'));
-const LinearGradient = optionalRequire(() => require('../screens/LinearGradientScreen'));
-const Maps = optionalRequire(() => require('../screens/MapsScreen'));
-const Video = optionalRequire(() => require('../screens/AV/VideoScreen'));
-const WebView = optionalRequire(() => require('../screens/WebViewScreen'));
-const ScreensScreens = optionalRequire(() => require('../screens/Screens'));
-const FacebookAds = optionalRequire(() => require('../screens/FacebookAdsScreen'));
 const GL = optionalRequire(() => require('../screens/GL/GLScreen'));
 const GLScreens = (optionalRequire(() => require('../screens/GL/GLScreens')) as unknown) as {
   [key: string]: React.ComponentType;
 };
+const Gif = optionalRequire(() => require('../screens/GifScreen'));
+const HTML = optionalRequire(() => require('../screens/HTMLElementsScreen'));
+const Image = optionalRequire(() => require('../screens/Image/ImageScreen'));
+const ImageScreens = (optionalRequire(() =>
+  require('../screens/Image/ImageScreens')
+) as unknown) as {
+  [key: string]: React.ComponentType;
+};
+const LinearGradient = optionalRequire(() => require('../screens/LinearGradientScreen'));
 const Lottie = optionalRequire(() => require('../screens/LottieScreen'));
+const Maps = optionalRequire(() => require('../screens/MapsScreen'));
+const Modal = optionalRequire(() => require('../screens/ModalScreen'));
+const Picker = optionalRequire(() => require('../screens/PickerScreen'));
+const Pressable = optionalRequire(() => require('../screens/PressableScreen'));
+const ProgressBarAndroid = optionalRequire(() => require('../screens/ProgressBarAndroidScreen'));
+const ProgressViewIOS = optionalRequire(() => require('../screens/ProgressViewIOSScreen'));
+const QRCode = optionalRequire(() => require('../screens/QRCodeScreen'));
 const ReanimatedImagePreview = optionalRequire(() =>
   require('../screens/Reanimated/ReanimatedImagePreviewScreen')
 );
 const ReanimatedProgress = optionalRequire(() =>
   require('../screens/Reanimated/ReanimatedProgressScreen')
 );
+const ScreensScreens = optionalRequire(() => require('../screens/Screens'));
+const ScrollView = optionalRequire(() => require('../screens/ScrollViewScreen'));
+const Slider = optionalRequire(() => require('../screens/SliderScreen'));
+const Switch = optionalRequire(() => require('../screens/SwitchScreen'));
+const TouchableBounce = optionalRequire(() => require('../screens/TouchableBounceScreen'));
+const Text = optionalRequire(() => require('../screens/TextScreen'));
+const TextInput = optionalRequire(() => require('../screens/TextInputScreen'));
+const Touchables = optionalRequire(() => require('../screens/TouchablesScreen'));
 const SegmentedControl = optionalRequire(() => require('../screens/SegmentedControlScreen'));
 const SVGExample = optionalRequire(() => require('../screens/SVG/SVGExampleScreen'));
 const SVG = optionalRequire(() => require('../screens/SVG/SVGScreen'));
 const SharedElement = optionalRequire(() => require('../screens/SharedElementScreen'));
 const ViewPager = optionalRequire(() => require('../screens/ViewPagerScreen'));
-const HTML = optionalRequire(() => require('../screens/HTMLElementsScreen'));
-const Image = optionalRequire(() => require('../screens/Image/ImageScreen'));
-const ImageScreens = (optionalRequire(() =>
-  require('../screens/Image/ImageScreens')
-) as unknown) as {
-  [key: string]: React.ComponentType;
-};
+const Video = optionalRequire(() => require('../screens/AV/VideoScreen'));
+const WebView = optionalRequire(() => require('../screens/WebViewScreen'));
 
 const optionalScreens: { [key: string]: React.ComponentType | null } = {
   AdMob,
   BarCodeScanner,
+  DrawerLayoutAndroid,
+  Modal,
+  ScrollView,
   MaskedView: BasicMaskScreen,
   BlurView,
   Camera,
+  Text,
+  TextInput,
+  Touchables,
+  ProgressViewIOS,
+  ProgressBarAndroid,
+  TouchableBounce,
+  Switch,
+  Slider,
+  Pressable,
+  Picker,
+  CheckBox,
+  Button,
+  ActivityIndicator,
   QRCode,
   DateTimePicker,
   GL,
   ...Object.keys(GLScreens ?? {}).reduce((prev, screenName) => {
     const entry = GLScreens[screenName];
+    // @ts-ignore
     const screen = entry.screen ?? entry;
     screen.navigationOptions = {
       title: screen.title,

apps/native-component-list/src/navigation/ExpoComponentsStackNavigator.tsx

@@ -31,10 +31,10 @@ function ExpoComponentsStackNavigator(props: { navigation: BottomTabNavigationPr
 }
 
 const icon = ({ focused }: { focused: boolean }) => {
-  return <TabIcon name="cards-playing-outline" focused={focused} />;
+  return <TabIcon name="react" focused={focused} />;
 };
 ExpoComponentsStackNavigator.navigationOptions = {
-  title: 'Expo Components',
+  title: 'Components',
   tabBarLabel: 'Components',
   tabBarIcon: icon,
   drawerIcon: icon,

apps/native-component-list/src/navigation/MainNavigators.tsx

@@ -2,7 +2,6 @@ import { Routes as ExpoApiRoutes } from './ExpoApis';
 import ExpoApisStackNavigator from './ExpoApisStackNavigator';
 import { Routes as ExpoComponentRoutes } from './ExpoComponents';
 import ExpoComponentsStackNavigator from './ExpoComponentsStackNavigator';
-import ReactNativeCoreStackNavigator from './ReactNativeCoreStackNavigator';
 
 // @tsapeta: These navigators are being used by `bare-expo` app,
 // so make sure they still work there once you change something here.
@@ -30,13 +29,4 @@ export default {
     },
     navigator: ExpoComponentsStackNavigator,
   },
-  'react-native': {
-    linking: {
-      path: '/react-native',
-      screens: {
-        ReactNativeCore: '',
-      },
-    },
-    navigator: ReactNativeCoreStackNavigator,
-  },
 };

apps/native-component-list/src/navigation/RootNavigation.tsx

@@ -19,7 +19,6 @@ export const linking = {
         screens: {
           apis: MainNavigators.apis.linking,
           components: MainNavigators.components.linking,
-          'react-native': MainNavigators['react-native'].linking,
         },
       },
     },

apps/native-component-list/src/screens/ActionSheetScreen.tsx

@@ -1,17 +1,96 @@
 import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';
 import React from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import {
+  ActionSheetIOS,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
 
 import ShowActionSheetButton from '../components/ShowActionSheetButton';
+import { Colors } from '../constants';
 
-const ActionSheetScreen = () => (
+const Button: React.FunctionComponent<TouchableOpacityProps> = props => {
+  return (
+    <TouchableOpacity
+      onPress={props.onPress}
+      style={{
+        paddingHorizontal: 15,
+        paddingVertical: 10,
+        borderRadius: 3,
+        backgroundColor: Colors.tintColor,
+        marginRight: 10,
+      }}>
+      <Text
+        style={{
+          color: '#fff',
+        }}>
+        {props.children}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const ActionSheetProviderScreen = () => (
   <ActionSheetProvider>
     {/*
     // @ts-ignore */}
     <App />
   </ActionSheetProvider>
 );
 
+function ActionSheetScreen() {
+  return (
+    <ScrollView>
+      <ActionSheetProviderScreen />
+      {Platform.OS === 'ios' && <ActionSheetIOSExample />}
+    </ScrollView>
+  );
+}
+
+function ActionSheetIOSExample() {
+  const showActionSheet = () => {
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: ['Option 0', 'Option 1', 'Delete', 'Cancel'],
+        cancelButtonIndex: 3,
+        destructiveButtonIndex: 2,
+      },
+      buttonIndex => {
+        console.log({ buttonIndex });
+      }
+    );
+  };
+
+  const showShareSheet = () => {
+    ActionSheetIOS.showShareActionSheetWithOptions(
+      {
+        url: 'https://expo.io',
+        message: 'message to go with the shared url',
+        subject: 'a subject to go in the email heading',
+      },
+      error => alert(error),
+      (success, method) => {
+        if (success) {
+          alert(`Shared via ${method}`);
+        }
+      }
+    );
+  };
+
+  return (
+    <View style={{ flexDirection: 'row', padding: 10 }}>
+      <Button onPress={showActionSheet}>Action sheet</Button>
+
+      <Button onPress={showShareSheet}>Share sheet</Button>
+    </View>
+  );
+}
+
 ActionSheetScreen.navigationOptions = {
   title: 'Action Sheet',
 };

apps/native-component-list/src/screens/ReactNativeCore/ActivityIndicator.tsx → apps/native-component-list/src/screens/ActivityIndicatorScreen.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { ActivityIndicator, StyleSheet } from 'react-native';
 
-import Colors from '../../constants/Colors';
-import { Page, Section } from './CommonViews';
+import Colors from '../constants/Colors';
+import { Page, Section } from '../components/Page';
 
 function ActivityIndicatorStopping({ hidesWhenStopped }: { hidesWhenStopped?: boolean }) {
   const [animating, setAnimating] = React.useState(true);
@@ -29,7 +29,7 @@ function ActivityIndicatorStopping({ hidesWhenStopped }: { hidesWhenStopped?: bo
   );
 }
 
-export function ActivityIndicatorExample() {
+export default function ActivityIndicatorScreen() {
   return (
     <Page>
       <Section title="Custom Color" row>
@@ -49,6 +49,10 @@ export function ActivityIndicatorExample() {
   );
 }
 
+ActivityIndicatorScreen.navigationOptions = {
+  title: 'ActivityIndicator',
+};
+
 const styles = StyleSheet.create({
   item: {
     marginRight: 8,

apps/native-component-list/src/screens/ReactNativeCore/Alert.tsx → apps/native-component-list/src/screens/AlertScreen.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Alert, Platform } from 'react-native';
 
-import Button from '../../components/Button';
-import { Page, Section } from './CommonViews';
+import Button from '../components/Button';
+import { Page, Section } from '../components/Page';
 
-export function AlertExample() {
+export default function AlertExample() {
   const showPrompt = () => {
     Alert.prompt('Enter a value', undefined, text => console.log(`You entered ${text}`));
   };
@@ -33,3 +33,7 @@ export function AlertExample() {
     </Page>
   );
 }
+
+AlertExample.navigationOptions = {
+  title: 'Alert',
+};