diff --git a/@types/expo__react-native-actionsheet.d.ts b/@types/expo__react-native-actionsheet.d.ts new file mode 100644 index 0000000..7108510 --- /dev/null +++ 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 index bc3c2bf..52e58f6 100644 --- 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 { ); } return ( - - {Platform.OS === "ios" && } - - + + + {Platform.OS === "ios" && } + + + ); } } diff --git a/navigation/MainTabNavigator.tsx b/navigation/MainTabNavigator.tsx index a4fb7d3..642aae2 100644 --- 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) => ( ) }; @@ -37,11 +34,11 @@ const LinksStack = createStackNavigator({ }); LinksStack.navigationOptions = { - tabBarLabel: "Links", + tabBarLabel: "Find", tabBarIcon: ({ focused }: TabProps) => ( ) }; @@ -51,11 +48,25 @@ const SettingsStack = createStackNavigator({ }); SettingsStack.navigationOptions = { - tabBarLabel: "Settings", + tabBarLabel: "Notifications", tabBarIcon: ({ focused }: TabProps) => ( + ) +}; + +const MyPageStack = createStackNavigator({ + MyPage: MyPageScreen +}); + +MyPageStack.navigationOptions = { + tabBarLabel: "MyPage", + tabBarIcon: ({ focused }: TabProps) => ( + ) }; @@ -63,5 +74,6 @@ SettingsStack.navigationOptions = { export default createBottomTabNavigator({ HomeStack, LinksStack, - SettingsStack + SettingsStack, + MyPageStack }); diff --git a/package.json b/package.json index 0c364fe..f476b2e 100644 --- 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 new file mode 100644 index 0000000..8fe5028 --- /dev/null +++ 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 ( + + + Hello World! + + + ); +}; + +MyPageScreen.navigationOptions = { + title: "MyPage" +}; + +export default connectActionSheet(MyPageScreen); diff --git a/yarn.lock b/yarn.lock index f412ad6..0cd1f3d 100644 --- 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==