create-react-native-plugin - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

package.json

 {
   "name": "create-react-native-plugin",
   "description": "Template for creating React Native plugins without native code.",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "repository": "github:tobua/create-react-native-plugin",
@@ -25,2 +25,3 @@ "license": "MIT",
     "template",
+    "template/.gitignore",
     "**/*.js"
@@ -27,0 +28,0 @@ ],

README.md

@@ -13,3 +13,3 @@ # create-react-native-plugin
 ```
-npm init react-native-plugin react-native-my-plugin
+npm init -y react-native-plugin react-native-my-plugin
 # or
@@ -16,0 +16,0 @@ npx create-react-native-plugin react-native-my-plugin

template/app/App.js

 // @flow
 import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
-import <%= pascal %> from '<%= name %>'
+import { <%= pascal %> } from '<%= name %>'
 
@@ -6,0 +6,0 @@ export default () => (

template/package.json

@@ -14,3 +14,3 @@ {
   },
-  "dependencies": {
+  "devDependencies": {
     "@babel/core": "^7.15.0",
@@ -37,3 +37,6 @@ "@babel/node": "^7.14.9",
   "eslintConfig": {
-    "extends": "@react-native-community"
+    "extends": "@react-native-community",
+    "rules": {
+      "semi": 0
+    }
   },
@@ -40,0 +43,0 @@ "jest": {

template/src/index.js

 // @flow
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
 
-export type Props = {
-  initialCount: number,
-}
-
-type State = {
-  count: number,
-}
-
-export default class <%= pascal %> extends Component<Props, State> {
-  static defaultProps = {
-    initialCount: 0,
-  }
-
-  state = {
-    count: this.props.initialCount,
-  }
-
-  handlePress = () => {
-    this.setState({
-      count: this.state.count + 1,
-    })
-  }
-
-  renderThirdLayer(percent: number) {
+const ThirdLayer = ({ percent }) => {
     if (percent > 50) {
@@ -39,11 +16,15 @@ return (
     return <View style={styles.offsetLayer} />
-  }
+}
 
-  render() {
-    const { count } = this.state
-    let percent = count % 100
+export type Props = {
+  initialCount: number,
+}
 
+export const <%= pascal %> = ({ initialCount = 0 }: Props) => {
+  const [count, setCount] = useState(initialCount)
+  const percent = count % 100
+
     return (
       <View style={styles.view}>
-        <TouchableOpacity onPress={this.handlePress}>
+        <TouchableOpacity onPress={() => setCount(count + 1)}>
           <View style={styles.container}>
@@ -54,3 +35,3 @@ <View
             />
-            {this.renderThirdLayer(percent)}
+            <ThirdLayer percent={percent} />
             <View pointerEvents="none" style={styles.textOverlay}>
@@ -63,3 +44,2 @@ <Text style={styles.text}>{count}</Text>
     )
-  }
 }
@@ -66,0 +46,0 @@

No alert changes

Improved metrics

Number of package files

15

increased by7.14%

Worsened metrics

Total package byte prevSize

16256

decreased by-0.2%

Lines of code

279

decreased by-5.42%

No dependency changes