Add custom Elements, Button

Author: AmitM30

src/navigators/navigation.tsx

@@ -35,8 +35,8 @@ export const tabbedNavigation = () =>
                       bottomTab: {
                         fontSize: 12,
                         text: 'Home',
-                        textColor: TYPOGRAPHY.Color.Primary,
-                        selectedTextColor: TYPOGRAPHY.Color.Primary,
+                        textColor: TYPOGRAPHY.COLOR.Primary,
+                        selectedTextColor: TYPOGRAPHY.COLOR.Secondary,
                         icon: require('../view/assets/images/tabbar/home.png'),
                         selectedIcon: require('../view/assets/images/tabbar/home.png'),
                       },
@@ -61,8 +61,8 @@ export const tabbedNavigation = () =>
                       bottomTab: {
                         text: 'Settings',
                         fontSize: 12,
-                        textColor: TYPOGRAPHY.Color.Primary,
-                        selectedTextColor: TYPOGRAPHY.Color.Primary,
+                        textColor: TYPOGRAPHY.COLOR.Primary,
+                        selectedTextColor: TYPOGRAPHY.COLOR.Secondary,
                         icon: require('../view/assets/images/tabbar/settings.png'),
                         selectedIcon: require('../view/assets/images/tabbar/settings.png'),
                       },
@@ -77,7 +77,7 @@ export const tabbedNavigation = () =>
           bottomTabs: {
             visible: true,
             titleDisplayMode: 'alwaysShow',
-            backgroundColor: TYPOGRAPHY.Color.Default,
+            backgroundColor: TYPOGRAPHY.COLOR.Default,
             drawBehind: true,
           },
         },

src/view/assets/images/ts_rn.png

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { GLOBAL } from '../styles/global';
+import { CText } from './custom';
+
+type Callback = () => any;
+export interface Props {
+  title: string;
+  onClick: Callback;
+  style?: Text.propTypes.style;
+}
+
+interface State {}
+
+/**
+ * Default Button
+ */
+const ButtonDefault = ({ 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>
+  </TouchableOpacity>
+);
+
+export { ButtonDefault };

src/view/elements/buttons.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import { GLOBAL } from '../styles/global';
+
+export interface Props {
+  style: Text.propTypes.style;
+}
+
+interface State {}
+
+class CText extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    style: GLOBAL.TEXT.Default,
+  };
+
+  render() {
+    const { style, children } = this.props;
+
+    return (
+      <Text {...this.props} style={[GLOBAL.TEXT.Default, style]}>
+        {children}
+      </Text>
+    );
+  }
+}
+
+export { CText };

src/view/elements/custom.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 
 import styles from './styles';
+import { CText } from '../../elements/custom';
 
 export interface Props {
   name: string;
@@ -15,7 +16,7 @@ class Home extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      name: props.name || 'Amit',
+      name: props.name || 'RN + TS + RNN2',
     };
   }
 
@@ -26,8 +27,8 @@ class Home extends React.PureComponent<Props, State> {
 
     return (
       <View style={styles.container}>
-        <Text>Home</Text>
-        <Text>{name}</Text>
+        <CText>Home</CText>
+        <CText>{name}</CText>
       </View>
     );
   }

src/view/screens/home/Component.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 
 import styles from './styles';
+import { CText } from '../../elements/custom';
 
 export interface Props {}
 
@@ -18,7 +19,7 @@ class Settings extends React.PureComponent<Props, State> {
   render() {
     return (
       <View style={styles.container}>
-        <Text>Settings</Text>
+        <CText>Settings</CText>
       </View>
     );
   }

src/view/screens/settings/Component.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { View, Text, SafeAreaView, Button } from 'react-native';
+import { View, Image, SafeAreaView } from 'react-native';
 
 import { tabbedNavigation } from '../../../navigators/navigation';
 import styles from './styles';
+import { ButtonDefault } from '../../elements/buttons';
 
 export interface Props {}
 
@@ -24,8 +25,19 @@ class Splash extends React.PureComponent<Props, State> {
     return (
       <SafeAreaView style={{ flex: 1 }}>
         <View style={styles.container}>
-          <Text>Splash</Text>
-          <Button title="Continue" onPress={this.navigateToHome} />
+          <Image
+            style={styles.image}
+            resizeMode="contain"
+            source={require('../../assets/images/rnn2.png')}
+          />
+          <Image
+            resizeMode="center"
+            source={require('../../assets/images/rn_ts.png')}
+          />
+          <ButtonDefault
+            title="Continue To App"
+            onClick={this.navigateToHome}
+          />
         </View>
       </SafeAreaView>
     );

src/view/screens/splash/Component.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, Platform } from 'react-native';
 
-import { TYPOGRAPHY } from './TYPOGRAPHY';
+import { TYPOGRAPHY } from './typography';
 
 export const widgetPaddingValue = 16;
 
@@ -16,10 +16,10 @@ const LAYOUT = StyleSheet.create({
     padding: 16,
   },
   shadow: {
-    shadowOpacity: 0.5,
-    shadowRadius: 2.5,
-    shadowOffset: { width: 2, height: 2 },
-    elevation: Platform.OS === 'ios' ? 0 : 7,
+    shadowOpacity: 0.25,
+    shadowRadius: 3,
+    shadowOffset: { width: 3, height: 3 },
+    elevation: Platform.OS === 'ios' ? 0 : 3,
   },
 });
 
@@ -31,8 +31,10 @@ const CTA = {
       justifyContent: 'space-between',
       height: 48,
       paddingVertical: 8,
-      paddingHorizontal: 10,
-      borderRadius: 5,
+      paddingHorizontal: 20,
+      borderRadius: 10,
+      borderWidth: 1,
+      backgroundColor: TYPOGRAPHY.COLOR.Default,
     },
     primaryText: {
       fontSize: 16,