Functional components

* Move to Functional components
* Minor Fix: Android internet issue - debug mode

Author: AmitM30

README.md

@@ -149,6 +149,18 @@ yarn android
 # react-native run-android --variant=Debug
 ```
 
+### Commands
+
+|  | Remark |
+|---|---|
+| `yarn start` | Starts metro bundler |
+| `yarn ios` | Starts iOS app. Start metro bundler first |
+| `yarn android` | Starts Android app. Start metro bundler and Android emulator first |
+| `yarn lint` | linting |
+| `yarn lint:fix` | tries to fix linting issues automatically |
+| `yarn build:android:debug` | Android debug build |
+| `yarn build:android:release` | Android release build |
+
 ### Cheat Sheet
 
 #### iOS Launch Screen

android/app/src/debug/AndroidManifest.xml

@@ -2,6 +2,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 
     <application

package.json

@@ -9,7 +9,7 @@
     "react native navigation",
     "boilerplate"
   ],
-  "version": "0.4.5",
+  "version": "0.4.6",
   "author": {
     "name": "Amit Mangal",
     "email": "[email protected]",

src/view/elements/buttons.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TouchableOpacity, ViewStyle } from 'react-native';
 
 import { GLOBAL } from '../styles/global';
-import { CText } from './custom';
+import { CTEXT } from './custom';
 
 type Callback = () => any;
 export interface Props {
@@ -12,15 +12,15 @@ export interface Props {
 }
 
 /**
- * Default Button
+ * Default Button for the application
  */
-const BUTTON_DEFAULT = ({ title, onClick, style }: Props) => (
+const BUTTON_DEFAULT: React.FC<Props> = ({ title, onClick, style }: Props) => (
   <TouchableOpacity
     activeOpacity={GLOBAL.CTA.TouchableOpacity.default}
     style={[GLOBAL.CTA.Style.primary, GLOBAL.LAYOUT.shadow, style]}
     onPress={() => onClick()}
   >
-    <CText style={GLOBAL.CTA.Style.primaryText}>{title}</CText>
+    <CTEXT style={GLOBAL.CTA.Style.primaryText}>{title}</CTEXT>
   </TouchableOpacity>
 );
 

src/view/elements/custom.tsx

@@ -1,28 +1,49 @@
 import * as React from 'react';
-import { Text, TextStyle } from 'react-native';
+import { StyleProp, Text, TextInput, TextStyle } from 'react-native';
 
 import { GLOBAL } from '../styles/global';
+import { TYPOGRAPHY } from '../styles/typography';
 
-export interface Props {
-  style: TextStyle;
+export interface TextProps {
+  children: React.ReactElement | string;
+  style?: StyleProp<TextStyle>;
 }
 
-interface State {}
+export interface TextInputProps {
+  style?: Object;
+  disabled?: boolean;
+  textInputRef?: any;
+  placeholderTextColor?: string;
+}
 
-class CText extends React.PureComponent<Props, State> {
-  static defaultProps = {
-    style: GLOBAL.TEXT.Default,
-  };
+const CTEXT: React.FC<TextProps> = (props: TextProps) => (
+  <Text style={[GLOBAL.TEXT.Default, props.style]}>
+    {props.children}
+  </Text>
+);
 
-  render() {
-    const { style, children } = this.props;
+const CTEXTINPUT: React.FC<TextInputProps> = (props: TextInputProps) => {
+  const {
+    style,
+    placeholderTextColor = TYPOGRAPHY.COLOR.Secondary,
+    textInputRef,
+    disabled = false,
+  } = props;
+  const [data, setData] = React.useState('');
 
-    return (
-      <Text {...this.props} style={[GLOBAL.TEXT.Default, style]}>
-        {children}
-      </Text>
-    );
-  }
-}
+  return (
+    <TextInput
+      ref={textInputRef}
+      value={data}
+      editable={!disabled}
+      onChange={e => setData(e.nativeEvent.text)}
+      placeholderTextColor={placeholderTextColor}
+      underlineColorAndroid={'transparent'}
+      {...props}
+      style={[GLOBAL.TEXT_INPUT.Style.Default, style]}
+      autoCorrect={false}
+    />
+  );
+};
 
-export { CText };
+export { CTEXT, CTEXTINPUT };

src/view/screens/drawer/Component.tsx

@@ -2,30 +2,14 @@ import * as React from 'react';
 import { SafeAreaView } from 'react-native';
 
 import styles from './styles';
-import { CText } from '../../elements/custom';
+import { CTEXT } from '../../elements/custom';
 
-export interface Props {
-  name: string;
-}
+interface Props {}
 
-interface State {
-  name: string;
-}
+const DRAWER: React.FC<Props> = () => (
+  <SafeAreaView style={styles.container}>
+    <CTEXT>{'Drawer Menu'}</CTEXT>
+  </SafeAreaView>
+);
 
-class Drawer extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  componentDidMount() {}
-
-  render() {
-    return (
-      <SafeAreaView style={styles.container}>
-        <CText>Drawer Menu</CText>
-      </SafeAreaView>
-    );
-  }
-}
-
-export default Drawer;
+export default DRAWER;

src/view/screens/dummy/Component.tsx

@@ -2,34 +2,18 @@ import * as React from 'react';
 import { SafeAreaView } from 'react-native';
 
 import styles from './styles';
-import { CText } from '../../elements/custom';
+import { CTEXT } from '../../elements/custom';
 
 export interface Props {
   dummyText: string;
-  componentId: string;
+  componentId?: string;
 }
 
-interface State {
-  name: string;
-}
-
-class Home extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  componentDidMount() {}
-
-  render() {
-    const { dummyText } = this.props;
-
-    return (
-      <SafeAreaView style={styles.container}>
-        <CText>This Screen has been pushed over Home screen</CText>
-        <CText>Prop passed: {dummyText}</CText>
-      </SafeAreaView>
-    );
-  }
-}
+const DUMMY: React.FC<Props> = (props: Props) => (
+  <SafeAreaView style={styles.container}>
+    <CTEXT>{'This Screen has been pushed over Home screen'}</CTEXT>
+    <CTEXT>{`Prop passed: ${props.dummyText}`}</CTEXT>
+  </SafeAreaView>
+);
 
-export default Home;
+export default DUMMY;

src/view/screens/home/Component.tsx

@@ -3,7 +3,7 @@ import { Navigation } from 'react-native-navigation';
 import { SafeAreaView, TouchableOpacity, Image } from 'react-native';
 
 import styles from './styles';
-import { CText } from '../../elements/custom';
+import { CTEXT, CTEXTINPUT } from '../../elements/custom';
 import router from '../../../navigators/router';
 import { BUTTON_DEFAULT } from '../../elements/buttons';
 
@@ -59,8 +59,9 @@ class Home extends React.PureComponent<Props, State> {
             source={require('../../assets/images/burger-menu.png')}
           />
         </TouchableOpacity>
-        <CText>Home</CText>
-        <CText>{name}</CText>
+        <CTEXT>{'Home'}</CTEXT>
+        <CTEXT>{name}</CTEXT>
+        <CTEXTINPUT />
         <BUTTON_DEFAULT onClick={this.showPushScreen} title={'Push Screen'} style={styles.button} />
       </SafeAreaView>
     );

src/view/screens/settings/Component.tsx

@@ -2,27 +2,14 @@ import * as React from 'react';
 import { SafeAreaView } from 'react-native';
 
 import styles from './styles';
-import { CText } from '../../elements/custom';
+import { CTEXT } from '../../elements/custom';
 
 export interface Props {}
 
-interface State {}
+const SETTINGS: React.FC<Props> = (props: Props) => (
+  <SafeAreaView style={styles.container}>
+    <CTEXT>{'Settings'}</CTEXT>
+  </SafeAreaView>
+);
 
-class Settings extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {};
-  }
-
-  componentDidMount() {}
-
-  render() {
-    return (
-      <SafeAreaView style={styles.container}>
-        <CText>Settings</CText>
-      </SafeAreaView>
-    );
-  }
-}
-
-export default Settings;
+export default SETTINGS;

src/view/screens/splash/Component.tsx

@@ -1,34 +1,27 @@
 import * as React from 'react';
 import { View, Image, SafeAreaView } from 'react-native';
 
-import { tabbedNavigation } from '../../../navigators/navigation';
 import styles from './styles';
+import { tabbedNavigation } from '../../../navigators/navigation';
 import { BUTTON_DEFAULT } from '../../elements/buttons';
 
 export interface Props {
   splashLaunched: Function;
 }
 
-interface State {}
+const SPLASH: React.FC<Props> = (props: Props) => {
 
-class Splash extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {};
-  }
-
-  componentDidMount() {
-    const { splashLaunched } = this.props;
+  React.useEffect(() => {
+    const { splashLaunched } = props;
     splashLaunched();
-  }
+  },              []);
 
-  navigateToHome = () => {
+  const navigateToHome = () => {
     tabbedNavigation();
-  }
+  };
 
-  render() {
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
         <View style={styles.container}>
           <Image
             style={styles.image}
@@ -41,12 +34,11 @@ class Splash extends React.PureComponent<Props, State> {
           />
           <BUTTON_DEFAULT
             title="Continue To App"
-            onClick={this.navigateToHome}
+            onClick={navigateToHome}
           />
         </View>
       </SafeAreaView>
-    );
-  }
-}
+  );
+};
 
-export default Splash;
+export default SPLASH;

src/view/styles/global.tsx

@@ -26,20 +26,17 @@ const LAYOUT = StyleSheet.create({
 const CTA = {
   Style: StyleSheet.create({
     primary: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
       height: 48,
+      borderWidth: 1,
+      borderRadius: 10,
       paddingVertical: 8,
+      alignItems: 'center',
       paddingHorizontal: 20,
-      borderRadius: 10,
-      borderWidth: 1,
-      backgroundColor: TYPOGRAPHY.COLOR.Default,
+      backgroundColor: TYPOGRAPHY.COLOR.Secondary,
     },
     primaryText: {
       fontSize: 16,
-      color: TYPOGRAPHY.COLOR.Primary,
-      textAlign: 'center',
+      color: TYPOGRAPHY.COLOR.Default,
     },
     secondary: {
       flexDirection: 'row',
@@ -98,18 +95,19 @@ const TEXT = StyleSheet.create({
 const TEXT_INPUT = {
   Style: StyleSheet.create({
     Default: {
-      fontFamily: TYPOGRAPHY.FONT.Primary,
-      textAlign: 'left',
       fontSize: 12,
-      borderWidth: 0.2,
+      borderWidth: 1,
+      borderRadius: 5,
+      textAlign: 'left',
+      fontFamily: TYPOGRAPHY.FONT.Primary,
       borderColor: TYPOGRAPHY.COLOR.Border,
       color: TYPOGRAPHY.COLOR.Primary,
     },
     Bold: {
-      fontFamily: TYPOGRAPHY.FONT.Primary,
-      textAlign: 'left',
       fontSize: 12,
-      borderWidth: 0.2,
+      textAlign: 'left',
+      borderWidth: 1,
+      fontFamily: TYPOGRAPHY.FONT.Primary,
       borderColor: TYPOGRAPHY.COLOR.Border,
       color: TYPOGRAPHY.COLOR.Primary,
     },

tslint.js

@@ -80,7 +80,7 @@ module.exports = {
         'static-method-regex': /^[a-z$][\w\d]+$/
       } // 23.1
     ],
-    'variable-name': [true, 'check-format'], // 23.2
+    'variable-name': [true, 'check-format', 'allow-pascal-case'], // 23.2
     'class-name': true, // 23.3
     'no-this-assignment': [true, 'allow-destructuring'], // 23.5
     'import-name': true // 23.6