fix(react): compatible babel configuration & React function component

move dependencies to devDependencies to avoid publish to npm

Author: tobua

template/app/App.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
-import <%= pascal %> from '<%= name %>'
+import { <%= pascal %> } from '<%= name %>'
 
 export default () => (
   <View style={styles.screen}>

template/babel.config.js template/babel.config.cjstemplate/babel.config.js renamed to template/babel.config.cjs

@@ -1,3 +1,3 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
-};
+}

template/package.json

@@ -11,7 +11,7 @@
     "lint": "eslint ./src --fix",
     "format": "prettier \"src/**/*\" --write"
   },
-  "dependencies": {
+  "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/node": "^7.14.9",
     "@babel/preset-env": "^7.15.0",

template/src/index.js

@@ -1,31 +1,8 @@
 // @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) {
       return (
         <View
@@ -36,29 +13,32 @@ export default class <%= pascal %> extends Component<Props, State> {
     }
 
     return <View style={styles.offsetLayer} />
-  }
+}
+
+export type Props = {
+  initialCount: number,
+}
 
-  render() {
-    const { count } = this.state
-    let percent = count % 100
+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}>
             <View
               key={percent}
               style={[styles.firstProgressLayer, rotation(percent, -135)]}
             />
-            {this.renderThirdLayer(percent)}
+            <ThirdLayer percent={percent} />
             <View pointerEvents="none" style={styles.textOverlay}>
               <Text style={styles.text}>{count}</Text>
             </View>
           </View>
         </TouchableOpacity>
       </View>
     )
-  }
 }
 
 const rotation = (percent: number, base: number) => ({