@expo/react-native-action-sheet - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

package.json

 {
   "name": "@expo/react-native-action-sheet",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "A cross-platform ActionSheet for React Native",
-  "main": "index.js",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
   "scripts": {
-    "flow": "flow; test $? -eq 0 -o $? -eq 2"
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint:prettier": "yarn prettier src/**/*.{ts,tsx} --write"
   },
@@ -14,14 +17,7 @@ "repository": {
   "keywords": [
+    "expo",
     "react-native",
     "action-sheet"
   ],
-  "files": [
-    "ActionSheet.js",
-    "ActionSheet.ios.js",
-    "ActionSheetProvider.js",
-    "connectActionSheet.js",
-    "index.js",
-    "index.d.ts",
-    "README.md"
-  ],
+  "files": [],
   "author": "Jesse Ruder <[e-mail]>",
@@ -33,13 +29,13 @@ "license": "MIT",
   "homepage": "https://github.com/expo/react-native-action-sheet",
-  "dependencies": {
-    "hoist-non-react-statics": "^2.2.2",
-    "prop-types": "^15.5.10"
+  "devDependencies": {
+    "@types/react": "^16.8.8",
+    "@types/react-native": "^0.57.41",
+    "expo-module-scripts": "^1.0.0",
+    "prettier": "^1.16.4",
+    "react": "^16.8.4",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
   },
-  "devDependencies": {
-    "@types/react": "^16.4.6",
-    "@types/react-native": "^0.56.0",
-    "flow-bin": "^0.26.0",
-    "react": "^15.6.1",
-    "react-native": "^0.28.0"
+  "peerDependencies": {
+    "react": ">=16.3.0"
   }
 }

README.md

@@ -8,40 +8,25 @@ # react-native-action-sheet [![Slack](https://slack.expo.io/badge.svg)](https://slack.expo.io)
 ```
-npm install @expo/react-native-action-sheet
+npm install @expo/react-native-action-sheet -S
 ```
+or 
+```
+yarn add @expo/react-native-action-sheet
+```
 
 ## A basic ActionSheet Setup
 
-import ActionSheetProvider & connectActionSheet
-
+### 1. import connectActionSheet function and connect your component which uses showActionSheetWithOptions. 
 ```es6
-import {
-  ActionSheetProvider,
-  connectActionSheet,
-} from '@expo/react-native-action-sheet';
-```
+import { connectActionSheet } from '@expo/react-native-action-sheet';
 
-wrap your top-level component with `<ActionSheetProvider />`
-
-```es6
-class AppContainer extends React.Component {
-  render() {
-    return (
-      <ActionSheetProvider>
-        <App />
-      </ActionSheetProvider>
-    );
-  }
+class App extends React.Component {
+  /* ... */
 }
-```
 
-decorate the component you want to use the action sheet with `@connectActionSheet`
+const ConnectedApp = connectActionSheet(App)
 
-```es6
-@connectActionSheet
-class App extends React.Component {
-  /* ... */
-}
+export default ConnectedApp
 ```
 
-access actionSheet method as `this.props.showActionSheetWithOptions`
+`App` component can access actionSheet method as `this.props.showActionSheetWithOptions`
 
@@ -68,2 +53,21 @@ ```es6
 
+### 2. import ActionSheetProvider and wrap your top-level component with `<ActionSheetProvider />`
+
+```es6
+
+import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+class AppContainer extends React.Component {
+  render() {
+    return (
+      <ActionSheetProvider>
+        <ConnectedApp />
+      </ActionSheetProvider>
+    );
+  }
+}
+```
+
+## Web Setup
+WIP
+
 ## Options
@@ -79,14 +83,39 @@
 
-### Android-Only Props
+### Android/Web-Only Props
 
 The below props allow modification of the Android ActionSheet. They have no effect on the look on iOS as the native iOS Action Sheet does not have options for modifying these options.
 
-- `icons` (array of required images or icons; optional): Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc.
-- `tintIcons` (boolean; optional; default: `true`): Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
-- `textStyle` (Text.propTypes.style; optional): Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop.
-- `titleTextStyle` (Text.propTypes.style; optional): Apply any text style props to the title if present.
-- `messageTextStyle` (Text.propTypes.style; optional): Apply any text style props to the message if present.
-- `showSeparators`: (boolean; optional; default: false): Show separators between items. On iOS, separators always show so this prop has no effect.
-- `separatorStyle`: (View.propTypes.style; optional): Modify the look of the separators rather than use the default look.
 
+| Name             | Type                              | Required | Default |
+| -----------------| ----------------------------------| -------- | ------- |
+| icons            | array of required images or icons | No       |         |
+| tintIcons        | boolean                           | No       |  true   |
+| textStyle        | TextStyle                         | No       |         |
+| titleTextStyle   | TextStyle                         | No       |         |
+| messageTextStyle | TextStyle                         | No       |         |
+| showSeparators   | boolean                           | No       |  false  |
+| separatorStyle   | ViewStyle                         | No       |         |
+
+#### `icons` (optional)
+
+Show icons to go along with each option. If image source paths are provided via `require`, images will be rendered for you. Alternatively, you can provide an array of elements such as vector icons, pre-rendered Images, etc.
+
+#### `tintIcons` (optional)
+ Icons by default will be tinted to match the text color. When set to false, the icons will be the color of the source image. This is useful if you want to use multicolor icons. If you provide your own nodes/pre-rendered icons rather than required images in the `icons` array, you will need to tint them appropriately before providing them in the array of `icons`; `tintColor` will not be applied to icons unless they are images from a required source.
+
+#### `textStyle` (optional)
+Apply any text style props to the options. If the `tintColor` option is provided, it takes precedence over a color text style prop.
+
+#### `titleTextStyle` (optional)
+Apply any text style props to the title if present.
+
+#### `messageTextStyle` (optional)
+Apply any text style props to the message if present.
+
+#### `showSeparators`: (optional)
+Show separators between items. On iOS, separators always show so this prop has no effect.
+
+#### `separatorStyle`: (optional)
+Modify the look of the separators rather than use the default look.
+
 ## Try it out
@@ -96,4 +125,11 @@
 
-## Usage
+## Example
 
 See the [example app](https://github.com/expo/react-native-action-sheet/tree/master/example) for examples of how to apply different options.
+
+### Usage
+```
+$ cd exmaple 
+$ yarn 
+$ yarn ios
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

decreased by-50%

Number of lines in readme file

131

increased by36.46%

Worsened metrics

Total package byte prevSize

7039

decreased by-68.68%

Dev dependency count

6

increased by20%

Number of package files

4

decreased by-55.56%

Lines of code

2

decreased by-99.65%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedreact@18.3.1(transitive)

• - Removedhoist-non-react-statics@^2.2.2

• - Removedprop-types@^15.5.10

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact-is@16.13.1(transitive)