create component, make a screen, etc

App/Components/AuthView.js

+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {View, Text, Image} from 'react-native';
+import styles from './Styles/AuthViewStyle';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Images } from '../Themes';
+
+export default class AuthView extends Component {
+  // // Prop type warnings
+  static propTypes = {
+    close: PropTypes.func,
+  }
+  //
+  // // Defaults for props
+  static defaultProps = {
+  }
+
+  render() {
+    return (
+      <View
+        style={styles.container}>
+        <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <Image
+            source={Images.logo_eCartWhite}
+            style={{width: 85, height: 25, resizeMode: 'stretch'}}
+          />
+          <Text
+            style={styles.leftText}>
+            Ingin dapat barang impianmu? Masuk
+          </Text>
+        </View>
+        <TouchableOpacity style={{alignItems: 'center'}} onPress={this.props.close}>
+          <Text
+            style={styles.rightText}>
+            {' '}
+            X{' '}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}

App/Components/BaseText.js

+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {View, Text} from "react-native";
+import styles from "./Styles/BaseTextStyle";
+
+export default class BaseText extends Component {
+  // // Prop type warnings
+  static propTypes = {
+    type: PropTypes.oneOf(["regular", "light", "italic", "bold", "black"]),
+    text: PropTypes.string.isRequired,
+  };
+  // // Defaults for props
+  static defaultProps = {
+    type: "regular",
+    style: PropTypes.any,
+  };
+
+  render() {
+    return (
+      <Text style={[this.props.style, {fontFamily: this.props.type == "regular"? "Nunito-Regular" : this.props.type == "black"? "Nunito-Black": this.props.type == "italic"? "Nunito-Italic" : this.props.type == "light"? "Nunito-Light" : "Nunito-Bold"}]}>
+        {this.props.text}
+      </Text>
+    );
+  }
+}

App/Components/Styles/AuthViewStyle.js

+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    paddingHorizontal: 20,
+    paddingTop: 15,
+    paddingBottom: 20,
+    width: '100%',
+    backgroundColor: '#rgba(76, 201, 240, .9)',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    position: 'absolute',
+    bottom: 0,
+    zIndex: 10,
+  },
+  leftText: {
+    fontFamily: 'Nunito-Bold',
+    marginLeft: 5,
+    color: 'white',
+    fontSize: 12,
+    marginLeft: 10,
+    marginTop: -3,
+  },
+  rightText: {
+    fontFamily: 'Nunito-Bold',
+    fontSize: 14,
+    color: 'white',
+    marginTop: 2,
+  }
+})

App/Components/Styles/BaseTextStyle.js

+import { StyleSheet } from 'react-native'
+
+export default StyleSheet.create({
+  container: {
+    flex: 1
+  }
+})

App/Containers/LoginScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/LoginScreenStyle'
+
+class LoginScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>LoginScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)

App/Containers/NotificationScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, View, Image, BackHandler, Alert } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
 
 // Styles
 import styles from './Styles/NotificationScreenStyle'
+import { Images } from '../Themes'
+import BaseText from '../Components/BaseText'
 
 class NotificationScreen extends Component {
+
+  backAction = () => {
+    Alert.alert("Hold on!", "Are you sure you want to exit app?", [
+      {
+        text: "Cancel",
+        onPress: () => null,
+        style: "cancel"
+      },
+      { text: "YES", onPress: () => BackHandler.exitApp() }
+    ]);
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <KeyboardAvoidingView behavior='position'>
-          <Text>NotificationScreen</Text>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <View style={{flex: 1, backgroundColor: 'white', justifyContent:'center', alignItems:'center'}}>
+        <Image source={Images.comingSoon} style={{width: '100%', height: 250, resizeMode:'stretch'}}/>
+        <BaseText type={"italic"} text={'Under Development'} style={{fontSize: 16, marginLeft: 25, marginTop: -30}}/>
+      </View>
+      // <ScrollView style={styles.container}>
+      //   <KeyboardAvoidingView behavior='position'>
+      //     <Text>NotificationScreen</Text>
+      //   </KeyboardAvoidingView>
+      // </ScrollView>
     )
   }
 }

App/Containers/OtpVerificationScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/OtpVerificationScreenStyle'
+
+class OtpVerificationScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>OtpVerificationScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(OtpVerificationScreen)

App/Containers/ProfileScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, Image, View, BackHandler, Alert } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
 
 // Styles
 import styles from './Styles/ProfileScreenStyle'
+import { Images } from '../Themes'
+import BaseText from '../Components/BaseText'
 
 class ProfileScreen extends Component {
+
+  backAction = () => {
+    Alert.alert("Hold on!", "Are you sure you want to exit app?", [
+      {
+        text: "Cancel",
+        onPress: () => null,
+        style: "cancel"
+      },
+      { text: "YES", onPress: () => BackHandler.exitApp() }
+    ]);
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <KeyboardAvoidingView behavior='position'>
-          <Text>ProfileScreen</Text>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <View style={{flex: 1, backgroundColor: 'white', justifyContent:'center', alignItems:'center'}}>
+        <Image source={Images.comingSoon} style={{width: '100%', height: 250, resizeMode:'stretch'}}/>
+        <BaseText type={"italic"} text={'Under Development'} style={{fontSize: 16, marginLeft: 25, marginTop: -30}}/>
+      </View>
     )
   }
 }

App/Containers/RegisterScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { connect } from 'react-redux'
+// Add Actions - replace 'Your' with whatever your reducer is called :)
+// import YourActions from '../Redux/YourRedux'
+
+// Styles
+import styles from './Styles/RegisterScreenStyle'
+
+class RegisterScreen extends Component {
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>RegisterScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(RegisterScreen)

App/Containers/Styles/HomePageScreenStyle.js

@@ -2,5 +2,26 @@ import { StyleSheet } from 'react-native'
 import { ApplicationStyles } from '../../Themes/'
 
 export default StyleSheet.create({
-  ...ApplicationStyles.screen
+  ...ApplicationStyles.screen,
+  flag: {
+    flexDirection: 'column'
+  },
+  flagTop: {
+    width: 110,
+    height: 56,
+    backgroundColor: 'red',
+  },
+  flagBottom: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    borderBottomWidth: 13,
+    borderBottomColor: 'transparent',
+    borderLeftWidth: 55,
+    borderLeftColor: 'green',
+    borderRightWidth: 55,
+    borderRightColor: 'blue'
+  }
 })

App/Containers/Styles/LoginScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/OtpVerificationScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/Styles/RegisterScreenStyle.js

+import { StyleSheet } from 'react-native'
+import { ApplicationStyles } from '../../Themes/'
+
+export default StyleSheet.create({
+  ...ApplicationStyles.screen
+})

App/Containers/WishlistScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, View, Image, Alert, BackHandler } from 'react-native'
 import { connect } from 'react-redux'
 // Add Actions - replace 'Your' with whatever your reducer is called :)
 // import YourActions from '../Redux/YourRedux'
 
 // Styles
 import styles from './Styles/WishlistScreenStyle'
+import { Images } from '../Themes'
+import BaseText from '../Components/BaseText'
 
 class WishlistScreen extends Component {
+
+  backAction = () => {
+    Alert.alert("Hold on!", "Are you sure you want to exit app?", [
+      {
+        text: "Cancel",
+        onPress: () => null,
+        style: "cancel"
+      },
+      { text: "YES", onPress: () => BackHandler.exitApp() }
+    ]);
+    return true;
+  };
+
+  componentDidMount() {
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <KeyboardAvoidingView behavior='position'>
-          <Text>WishlistScreen</Text>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <View style={{flex: 1, backgroundColor: 'white', justifyContent:'center', alignItems:'center'}}>
+        <Image source={Images.comingSoon} style={{width: '100%', height: 250, resizeMode:'stretch'}}/>
+        <BaseText type={"italic"} text={'Under Development'} style={{fontSize: 16, marginLeft: 25, marginTop: -30}}/>
+      </View>
     )
   }
 }

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import OtpVerificationScreen from '../Containers/OtpVerificationScreen'
+import RegisterScreen from '../Containers/RegisterScreen'
+import LoginScreen from '../Containers/LoginScreen'
 import WishlistScreen from '../Containers/WishlistScreen'
 import NotificationScreen from '../Containers/NotificationScreen'
 import HomeBottomTabScreen from '../Containers/HomeBottomTabScreen'
@@ -12,6 +15,9 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  OtpVerificationScreen: { screen: OtpVerificationScreen },
+  RegisterScreen: { screen: RegisterScreen },
+  LoginScreen: { screen: LoginScreen },
   WishlistScreen: { screen: WishlistScreen },
   NotificationScreen: { screen: NotificationScreen },
   HomeBottomTabScreen: { screen: HomeBottomTabScreen },

App/Navigation/HomeNavigation.js

@@ -41,12 +41,13 @@ function MyTabs() {
   return (
     <Tab.Navigator
       initialRouteName="Feed"
-      tabBarOptions={{
-        activeTintColor: '#4cc9f0',
-        inactiveTintColor: '#cecece',
-        tabStyle: {backgroundColor:'black'}
-      }}
-      tabBar={(props) => <BottomFabBar color="#ffffff" {...props} />}
+      // screenOptions={}
+      // tabBarOptions={{
+      //   activeTintColor: '#4cc9f0',
+      //   inactiveTintColor: '#cecece',
+      //   style:{height:300}
+      // }}
+      tabBar={(props) => <BottomFabBar activeTintColor='#4cc9f0' inactiveTintColor= '#cecece' color="#f3f3f3" {...props}/>}
     >
       <Tab.Screen
         name="Home"

App/Themes/Images.js

@@ -21,7 +21,18 @@ const images = {
   backButton: require('../Images/Icons/back-button.png'),
   closeButton: require('../Images/Icons/close-button.png'),
 
-  logo_eCart: require('../Images/logo_eCart.png')
+  logo_eCart: require('../Images/logo_eCart.png'),
+  logo_eCartWhite: require('../Images/logo_eCartWhite.png'),
+  icon_chart: require('../Images/Icons/icon_chart.png'),
+
+  //dummy
+  celana: require('../Images/imageDummy/celana.jpg'),
+  jaket: require('../Images/imageDummy/jaket.jpeg'),
+  sepatu: require('../Images/imageDummy/sepatu.jpg'),
+  jam: require('../Images/imageDummy/jam.jpg'),
+  beautyProduct: require('../Images/imageDummy/beautyProduct.jpg'),
+  bodyShop: require('../Images/imageDummy/bodyShop.jpeg'),
+  comingSoon: require('../Images/imageDummy/comingSoon.png'),
 }
 
 export default images

ios/eCartProCustomer.xcodeproj/project.pbxproj

@@ -31,6 +31,11 @@
 		9A94E2DB3C984EAEB1EF318C /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B5D4673B9F24124849A44DE /* Octicons.ttf */; };
 		B7D0EA211E00415CAB1EA30D /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 86DC375F938A4F70BA857A97 /* SimpleLineIcons.ttf */; };
 		088821245FBD4B909667C56A /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 41DF00A94BF24C08AB94A229 /* Zocial.ttf */; };
+		8914A9D8E20748B0AE802BB5 /* Nunito-Black.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 857058FD9E9642B0A784A40C /* Nunito-Black.ttf */; };
+		CF6F57280DC042AE970E79E1 /* Nunito-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C6FE04454C4743F2825D02FB /* Nunito-Bold.ttf */; };
+		AA65546BBDBE4293810E5EFA /* Nunito-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0690442D3E474BDA913D1FBD /* Nunito-Italic.ttf */; };
+		325311DF88534B4D9872AD0F /* Nunito-Light.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3144B08665A44EFB9D03B4A7 /* Nunito-Light.ttf */; };
+		D8F54053880B4CBE917EC7D4 /* Nunito-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CBB5333CE67B42FF81768FA2 /* Nunito-Regular.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -81,6 +86,11 @@
 		1B5D4673B9F24124849A44DE /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		86DC375F938A4F70BA857A97 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		41DF00A94BF24C08AB94A229 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		857058FD9E9642B0A784A40C /* Nunito-Black.ttf */ = {isa = PBXFileReference; name = "Nunito-Black.ttf"; path = "../App/assets/fonts/Nunito-Black.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C6FE04454C4743F2825D02FB /* Nunito-Bold.ttf */ = {isa = PBXFileReference; name = "Nunito-Bold.ttf"; path = "../App/assets/fonts/Nunito-Bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		0690442D3E474BDA913D1FBD /* Nunito-Italic.ttf */ = {isa = PBXFileReference; name = "Nunito-Italic.ttf"; path = "../App/assets/fonts/Nunito-Italic.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		3144B08665A44EFB9D03B4A7 /* Nunito-Light.ttf */ = {isa = PBXFileReference; name = "Nunito-Light.ttf"; path = "../App/assets/fonts/Nunito-Light.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		CBB5333CE67B42FF81768FA2 /* Nunito-Regular.ttf */ = {isa = PBXFileReference; name = "Nunito-Regular.ttf"; path = "../App/assets/fonts/Nunito-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -206,6 +216,11 @@
 				1B5D4673B9F24124849A44DE /* Octicons.ttf */,
 				86DC375F938A4F70BA857A97 /* SimpleLineIcons.ttf */,
 				41DF00A94BF24C08AB94A229 /* Zocial.ttf */,
+				857058FD9E9642B0A784A40C /* Nunito-Black.ttf */,
+				C6FE04454C4743F2825D02FB /* Nunito-Bold.ttf */,
+				0690442D3E474BDA913D1FBD /* Nunito-Italic.ttf */,
+				3144B08665A44EFB9D03B4A7 /* Nunito-Light.ttf */,
+				CBB5333CE67B42FF81768FA2 /* Nunito-Regular.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -362,6 +377,11 @@
 				9A94E2DB3C984EAEB1EF318C /* Octicons.ttf in Resources */,
 				B7D0EA211E00415CAB1EA30D /* SimpleLineIcons.ttf in Resources */,
 				088821245FBD4B909667C56A /* Zocial.ttf in Resources */,
+				8914A9D8E20748B0AE802BB5 /* Nunito-Black.ttf in Resources */,
+				CF6F57280DC042AE970E79E1 /* Nunito-Bold.ttf in Resources */,
+				AA65546BBDBE4293810E5EFA /* Nunito-Italic.ttf in Resources */,
+				325311DF88534B4D9872AD0F /* Nunito-Light.ttf in Resources */,
+				D8F54053880B4CBE917EC7D4 /* Nunito-Regular.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/eCartProCustomer/Info.plist

@@ -70,6 +70,11 @@
 		<string>Octicons.ttf</string>
 		<string>SimpleLineIcons.ttf</string>
 		<string>Zocial.ttf</string>
+		<string>Nunito-Black.ttf</string>
+		<string>Nunito-Bold.ttf</string>
+		<string>Nunito-Italic.ttf</string>
+		<string>Nunito-Light.ttf</string>
+		<string>Nunito-Regular.ttf</string>
 	</array>
 </dict>
 </plist>

package.json

@@ -45,6 +45,8 @@
     "react-native-i18n": "2.0.14",
     "react-native-safe-area-context": "^3.0.6",
     "react-native-screens": "^2.9.0",
+    "react-native-side-drawer": "^1.2.6",
+    "react-native-snap-carousel": "^3.9.1",
     "react-native-svg": "^12.1.0",
     "react-native-vector-icons": "6.1.0",
     "react-navigation": "^4.2.2",

react-native.config.js

+module.exports = {
+    project: {
+      ios: {},
+      android: {},
+    },
+    assets: ['./App/assets/fonts'],
+  };
\ No newline at end of file