Merge pull request elderfo#5 from Naturalclar/decorator

Add Sample Actionsheet page
michaelbayday · Feb 11, 2019 · 45d483b · 45d483b
2 parents e82f558 + 8bdf726
commit 45d483b
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 15 deletions.
diff --git a/@types/expo__react-native-actionsheet.d.ts b/@types/expo__react-native-actionsheet.d.ts
@@ -0,0 +1,4 @@
+declare module "@expo/samples" {
+  function ActionSheetProvider(): any;
+  function connectActionSheet(): any;
+}
diff --git a/App.tsx b/App.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Platform, StatusBar, StyleSheet, View } from "react-native";
 import { AppLoading, Asset, Font, Icon } from "expo";
+import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import AppNavigator from "./navigation/AppNavigator";
 import { RobotDev, RobotProd } from "./assets/images";
 
@@ -56,10 +57,12 @@ export default class App extends React.Component<Props> {
       );
     }
     return (
-      <View style={styles.container}>
-        {Platform.OS === "ios" && <StatusBar barStyle="default" />}
-        <AppNavigator />
-      </View>
+      <ActionSheetProvider>
+        <View style={styles.container}>
+          {Platform.OS === "ios" && <StatusBar barStyle="default" />}
+          <AppNavigator />
+        </View>
+      </ActionSheetProvider>
     );
   }
 }
diff --git a/navigation/MainTabNavigator.tsx b/navigation/MainTabNavigator.tsx
@@ -9,6 +9,7 @@ import TabBarIcon from "../components/TabBarIcon";
 import HomeScreen from "../screens/HomeScreen";
 import LinksScreen from "../screens/LinksScreen";
 import SettingsScreen from "../screens/SettingsScreen";
+import MyPageScreen from "../screens/MyPageScreen";
 
 interface TabProps {
   focused: boolean;
@@ -23,11 +24,7 @@ HomeStack.navigationOptions = {
   tabBarIcon: ({ focused }: TabProps) => (
     <TabBarIcon
       focused={focused}
-      name={
-        Platform.OS === "ios"
-          ? `ios-information-circle${focused ? "" : "-outline"}`
-          : "md-information-circle"
-      }
+      name={Platform.OS === "ios" ? `ios-home` : "md-home"}
     />
   )
 };
@@ -37,11 +34,11 @@ const LinksStack = createStackNavigator({
 });
 
 LinksStack.navigationOptions = {
-  tabBarLabel: "Links",
+  tabBarLabel: "Find",
   tabBarIcon: ({ focused }: TabProps) => (
     <TabBarIcon
       focused={focused}
-      name={Platform.OS === "ios" ? "ios-link" : "md-link"}
+      name={Platform.OS === "ios" ? "ios-compass" : "md-compass"}
     />
   )
 };
@@ -51,17 +48,32 @@ const SettingsStack = createStackNavigator({
 });
 
 SettingsStack.navigationOptions = {
-  tabBarLabel: "Settings",
+  tabBarLabel: "Notifications",
   tabBarIcon: ({ focused }: TabProps) => (
     <TabBarIcon
       focused={focused}
-      name={Platform.OS === "ios" ? "ios-options" : "md-options"}
+      name={Platform.OS === "ios" ? "ios-notifications" : "md-notifications"}
+    />
+  )
+};
+
+const MyPageStack = createStackNavigator({
+  MyPage: MyPageScreen
+});
+
+MyPageStack.navigationOptions = {
+  tabBarLabel: "MyPage",
+  tabBarIcon: ({ focused }: TabProps) => (
+    <TabBarIcon
+      focused={focused}
+      name={Platform.OS === "ios" ? "ios-person" : "md-person"}
     />
   )
 };
 
 export default createBottomTabNavigator({
   HomeStack,
   LinksStack,
-  SettingsStack
+  SettingsStack,
+  MyPageStack
 });
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@expo/react-native-action-sheet": "^2.1.0",
     "@expo/samples": "2.1.1",
     "expo": "^32.0.0",
     "react": "16.5.1",

diff --git a/screens/MyPageScreen.tsx b/screens/MyPageScreen.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { connectActionSheet } from "@expo/react-native-action-sheet";
+
+interface Props {
+  showActionSheetWithOptions: (
+    options: any,
+    buttonIndex: (index: number) => void
+  ) => void;
+}
+
+const MyPageScreen = ({ showActionSheetWithOptions }: Props) => {
+  const onOpenActionSheet = () => {
+    const options = ["Foo", "Bar", "Cancel"];
+    const okButtonIndex = 0;
+    const destructionButtonIndex = 1;
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex
+      },
+      buttonIndex => {
+        switch (buttonIndex) {
+          case cancelButtonIndex:
+            break;
+          case okButtonIndex:
+            break;
+          case destructionButtonIndex:
+            break;
+          default:
+            break;
+        }
+      }
+    );
+  };
+  return (
+    <View>
+      <TouchableOpacity onPress={onOpenActionSheet}>
+        <Text>Hello World!</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+MyPageScreen.navigationOptions = {
+  title: "MyPage"
+};
+
+export default connectActionSheet(MyPageScreen);
diff --git a/yarn.lock b/yarn.lock
@@ -627,6 +627,14 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@expo/react-native-action-sheet@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@expo/react-native-action-sheet/-/react-native-action-sheet-2.1.0.tgz#7c3f6def52aee15ca7bd9e03cc0529e64618592c"
+  integrity sha512-gtFPQp36pLZxd29vTov+ewaJ7Bd3obP5XxaphwaKZRBVtHrbfd5DvdMBKs8//Y19pRseKrskdATou3b8EKk8Sg==
+  dependencies:
+    hoist-non-react-statics "^2.2.2"
+    prop-types "^15.5.10"
+
 "@expo/samples@2.1.1":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@expo/samples/-/samples-2.1.1.tgz#563ccd71f6c7fd9eb9389f4aa91d37c65040dbff"
@@ -3616,7 +3624,7 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
+hoist-non-react-statics@^2.2.2, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==