Merge branch 'master' of http://103.44.149.204/d.arizona/ecartpro-customer

App/Components/BaseButton.js

@@ -8,17 +8,20 @@ export default class BaseButton extends Component {
   // Prop type warnings
   static propTypes = {
     onPress: PropTypes.func,
-    text: PropTypes.string
+    text: PropTypes.string,
+    color: PropTypes.any,
+    style: PropTypes.object
   }
   
   // Defaults for props
   static defaultProps = {
-    text: ''
+    text: '',
+    color: '#4cc9f0'
   }
 
   render () {
     return (
-      <TouchableOpacity onPress={this.props.onPress} style={{width:'100%', alignItems: 'center', borderRadius: 32, backgroundColor: '#4cc9f0', paddingVertical: 15}}>
+      <TouchableOpacity onPress={this.props.onPress} style={[{width:'100%', alignItems: 'center', borderRadius: 32, backgroundColor: this.props.color, paddingVertical: 15}, this.props.style]}>
         <BaseText text={this.props.text} type={"bold"} style={{fontSize: 16, color: 'white'}}/>
       </TouchableOpacity>
     )

App/Components/BaseHeader.js

@@ -19,7 +19,7 @@ export default class BaseHeader extends Component {
   // Defaults for props
   static defaultProps = {
     leftText: 'Title Screen',
-    rightText: 'Next Screen'
+    rightText: ''
   }
 
   render () {

App/Components/BaseText.js

@@ -9,12 +9,12 @@ export default class BaseText extends Component {
     type: PropTypes.oneOf(["regular", "light", "italic", "bold", "black"]),
     text: PropTypes.string.isRequired,
     ellipsizeMode: PropTypes.string,
-    onPress: PropTypes.func
+    onPress: PropTypes.func,
+    style: PropTypes.object
   };
   // // Defaults for props
   static defaultProps = {
     type: "regular",
-    style: PropTypes.any,
   };
 
   render() {

App/Containers/AboutAppScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, 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/AboutAppScreenStyle'
+
+class AboutAppScreen extends Component {
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    // alert(JSON.stringify(this.props))
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>AboutAppScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AboutAppScreen)

App/Containers/AppContactScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, 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/AppContactScreenStyle'
+
+class AppContactScreen extends Component {
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    // alert(JSON.stringify(this.props))
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>AppContactScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AppContactScreen)

App/Containers/CategoryScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, 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/CategoryScreenStyle'
+
+class CategoryScreen extends Component {
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    // alert(JSON.stringify(this.props))
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>CategoryScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CategoryScreen)

App/Containers/HomePageScreen.js

@@ -35,6 +35,23 @@ class HomePageScreen extends Component {
   toggleOpen = () => {
     this.setState({ open: !this.state.open });
   };
+
+  handleListDrawer(type){
+    let navigate = this.props.navigation.navigate
+    this.toggleOpen()
+
+    if (type == 'Kategori') {
+      navigate('CategoryScreen')
+    } else if (type == 'Akun Saya') {
+      navigate('MyAccountScreen')
+    } else if (type == 'Kontak Kami') {
+      navigate('AppContactScreen')
+    } else if (type == 'Ketentuan & Privasi') {
+      navigate('TermAndPrivacyScreen')
+    } else if (type == 'Tentang Kami') {
+      navigate('AboutAppScreen')
+    }
+  }
  
   drawerContent = () => {
     return (
@@ -69,7 +86,7 @@ class HomePageScreen extends Component {
           <View style={{paddingLeft: 30}}>
             {this.state.statisListDrawer.map((item, index) => {
               return (
-                <TouchableOpacity key={index}>
+                <TouchableOpacity key={index} onPress={() => this.handleListDrawer(item)}>
                   <BaseText type={"regular"} text={item} style={{fontSize: 12, marginVertical: 20}}/>
                 </TouchableOpacity>
               )
@@ -145,7 +162,7 @@ class HomePageScreen extends Component {
                 <TouchableOpacity onPress={() => this.setState({open: true})} style={{width: '10%'}}>
                   <FontAwesome name="bars" size={20} color={this.state.opacity  >= .5? '#e3e3e3' : '#FFF'}/>
                 </TouchableOpacity>
-                <View style={{width: '70%', alignItems:'center', flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 15, backgroundColor: this.state.opacity  >= .5? '#f1f1f1' : '#FFF', borderRadius: 25}}>
+                <View style={{width: '70%', elevation: this.state.opacity == 1? 0 : 5, alignItems:'center', flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 15, backgroundColor: this.state.opacity  >= .5? '#f1f1f1' : '#FFF', borderRadius: 25}}>
                   <FontAwesome name="search" size={15} color={'#4b4b4b'}/>
                   <Image source={Images.logo_eCart} style={{width: 75, height: 22, marginLeft: 15, resizeMode:'stretch'}}/>
                 </View>

App/Containers/LoginScreen.js

@@ -52,7 +52,7 @@ class LoginScreen extends Component {
     return (
       <View style={{flex: 1, backgroundColor:'#4cc9f0'}}>
         <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Masuk'} rightText={'Daftar'} onNextPress={() => this.props.navigation.navigate('RegisterScreen')}/>
-        <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingHorizontal: 25, paddingTop: 50}}>
+        <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollContent}>
           <View style={{width: '100%'}}>
             <View>
               <BaseInput 
@@ -78,12 +78,12 @@ class LoginScreen extends Component {
             <View style={{marginTop: 30}}>
               <BaseButton text={'Masuk'} onPress={() => alert('yuhuu')}/>
             </View>
-            <View style={{marginTop: 20, alignItems: 'center', justifyContent: 'center', flexDirection:'row'}}>
+            <View style={{marginTop: 20, alignItems: 'center', justifyContent: 'center', flexDirection:'row', marginBottom: 75}}>
               <BaseText text={"Belum punya akun e-CartPro?"} type={"bold"} style={{fontSize: 14, color: '#4b4b4b', opacity: .6,}}/>
               <BaseText text={"Daftar"} type={"bold"} style={{fontSize: 14, color: '#4cc9f0', marginLeft: 5,}} onPress={() => this.props.navigation.navigate('RegisterScreen')}/>
             </View>
           </View>
-        </View>
+        </ScrollView>
       </View>
     )
   }

App/Containers/MyAccountScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, 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/MyAccountScreenStyle'
+
+class MyAccountScreen extends Component {
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    // alert(JSON.stringify(this.props))
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>MyAccountScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyAccountScreen)

App/Containers/OtpVerificationScreen.js

 import React, { Component } from 'react'
-import { ScrollView, Text, KeyboardAvoidingView } from 'react-native'
+import { ScrollView, Text, KeyboardAvoidingView, View, Image, TextInput, Keyboard, 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/OtpVerificationScreenStyle'
+import BaseHeader from '../Components/BaseHeader'
+import { Images } from '../Themes'
+import BaseText from '../Components/BaseText'
+import BaseButton from '../Components/BaseButton'
+// import {  } from '@react-navigation/native'
+import { StackActions, NavigationActions } from 'react-navigation'
 
 class OtpVerificationScreen extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      char1: '',
+      char2: '',
+      char3: '',
+      char4: '',
+      otpKey: ''
+    }
+  }
+
+  handleOtpKey() {
+    const {char1, char2, char3, char4} = this.state
+    let otpKey = char1 + char2 + char3 + char4
+    if (otpKey.length == 4) {
+      this.setState({otpKey})
+    }
+  }
+
+  handleVerif() {
+    if (this.state.otpKey != '') {
+      const resetAction = StackActions.reset({
+        index: 0,
+        actions: [
+            NavigationActions.navigate({ routeName: 'HomeNavigation' })
+        ],
+      });
+      this.props.navigation.dispatch(resetAction); 
+    }
+  }
+
+  backAction = () => {
+    // Alert.alert("Hold on!", "Are you sure you want to exit app?", [
+    //   {
+    //     text: "Cancel",
+    //     onPress: () => null,
+    //     style: "cancel"
+    //   },
+    //   { text: "YES", onPress: () => BackHandler.exitApp() }
+    // ]);
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    // alert(JSON.stringify(this.props))
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+
   render () {
     return (
-      <ScrollView style={styles.container}>
-        <KeyboardAvoidingView behavior='position'>
-          <Text>OtpVerificationScreen</Text>
-        </KeyboardAvoidingView>
-      </ScrollView>
+      <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
+        <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Aktivasi Akun'}/>
+        <ScrollView showsVerticalScrollIndicator={false} style={[styles.scrollContent, {paddingHorizontal: 50}]}>
+          <View style={{width: '100%', alignItems: 'center'}}>
+            <Image source={Images.letter} style={{width: 110, height: 75, resizeMode:'stretch'}}/>
+            <BaseText text={'Masukkan Kode Verifikasi'} type={'bold'} style={{fontSize: 18, marginTop: 20, color: '#4b4b4b'}} />
+            <BaseText text={'Kode verifikasi telah dikirimkan melalui'} type={'regular'} style={{textAlign: 'center', marginTop: 30, opacity: .5, color: '#4b4b4b'}} />
+            <View style={{flexDirection:'row'}}>
+              <BaseText text={'email ke '} type={'regular'} style={{textAlign: 'center', opacity: .5, color: '#4b4b4b'}} />
+              <BaseText text={'test@gmail.com'} type={'bold'} style={{textAlign: 'center', opacity: .7, color: '#4b4b4b'}} />
+            </View>
+            <BaseText text={'Kode Verifikasi'} type={'regular'} style={{textAlign: 'center', marginTop: 40, opacity: .5, color: '#4b4b4b', fontSize: 16}} />      
+          </View>
+          <View style={{flexDirection: 'row', justifyContent: 'center', marginVertical: 10}}>
+            <TextInput 
+            ref={(ref) => { this.char1 = ref; }}
+            value={this.state.char1}
+            keyboardType={'decimal-pad'}
+            maxLength={1}
+            onChangeText={(char1) => { 
+              var value = String(char1).replace(/\D/g, '')
+              this.setState({char1: value}, () => {
+                if(this.state.char1 == '') {
+                  this.setState({otpKey: ''})
+                } else {
+                  this.char2.focus();
+                }
+                this.handleOtpKey()}
+              )
+            }}
+            style={{borderBottomColor: this.state.char1 == ''? 'rgba(75, 75, 75, .2)' : '#4cc9f0', color: '#4cc9f0', borderBottomWidth: 1, textAlign: 'center', fontSize: 24}}/>
+            <TextInput 
+            ref={(ref) => { this.char2 = ref; }}
+            value={this.state.char2}
+            keyboardType={'decimal-pad'}
+            onChangeText={(char2) => { 
+              var value = String(char2).replace(/\D/g, '')
+              this.setState({char2: value}, () => {
+                if(this.state.char2 == '') {
+                  this.char1.focus();
+                  this.setState({otpKey: ''})
+                } else {
+                  this.char3.focus();
+                }
+                this.handleOtpKey()
+              })
+            }}
+            maxLength={1}
+            style={{borderBottomColor: this.state.char2 == ''? 'rgba(75, 75, 75, .2)' : '#4cc9f0', color: '#4cc9f0', borderBottomWidth: 1, marginLeft: 5, textAlign: 'center', fontSize: 24}}/>
+            <TextInput 
+            ref={(ref) => { this.char3 = ref; }}
+            value={this.state.char3}
+            keyboardType={'decimal-pad'}
+            onChangeText={(char3) => { 
+              var value = String(char3).replace(/\D/g, '')
+              this.setState({char3: value}, () => {
+                if(this.state.char3 == '') {
+                  this.char2.focus();
+                  this.setState({otpKey: ''})
+                } else {
+                  this.char4.focus();
+                }
+                this.handleOtpKey()
+              })
+            }}
+            maxLength={1}
+            style={{borderBottomColor: this.state.char3 == ''? 'rgba(75, 75, 75, .2)' : '#4cc9f0', color: '#4cc9f0', borderBottomWidth: 1, marginLeft: 5, textAlign: 'center', fontSize: 24}}/>
+            <TextInput 
+            ref={(ref) => { this.char4 = ref; }}
+            value={this.state.char4}
+            keyboardType={'decimal-pad'}
+            onChangeText={(char4) =>  { 
+              var value = String(char4).replace(/\D/g, '')
+              this.setState({char4: value}, () => {
+                if(this.state.char4 == '') {
+                  this.char3.focus();
+                  this.setState({otpKey: ''})
+                } else {
+                  Keyboard.dismiss()
+                }
+                this.handleOtpKey()
+              })
+            }}
+            maxLength={1}
+            style={{borderBottomColor: this.state.char4 == ''? 'rgba(75, 75, 75, .2)' : '#4cc9f0', color: '#4cc9f0', borderBottomWidth: 1, marginLeft: 5, textAlign: 'center', fontSize: 24}}/>
+          </View>
+          <View style={{marginTop: 30, paddingHorizontal: 10}}>
+            <BaseButton text={'Verifikasi'} onPress={() => this.handleVerif()} style={{backgroundColor: this.state.otpKey == ''? 'rgba(75, 75, 75, .2)' : '#4cc9f0'}}/>
+          </View>
+          <View style={{marginTop: 20, alignItems: 'center', justifyContent: 'center', flexDirection:'row', marginBottom: 75}}>
+            <BaseText text={"Tidak menerima kode?"} type={"bold"} style={{fontSize: 14, color: '#4b4b4b', opacity: .6,}}/>
+            <BaseText text={"Kirim Ulang"} type={"bold"} style={{fontSize: 14, color: '#4cc9f0', marginLeft: 5,}} onPress={() => this.props.navigation.navigate('RegisterScreen')}/>
+          </View>
+        </ScrollView>
+      </View>
     )
   }
 }

App/Containers/RegisterScreen.js

@@ -42,12 +42,16 @@ class RegisterScreen extends Component {
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.backAction);
   }
+
+  handleRegister() {
+    this.props.navigation.navigate('OtpVerificationScreen')
+  }
   
   render () {
     return (
       <View style={{flex: 1, backgroundColor: '#4cc9f0'}}>
         <BaseHeader onBackPress={() => this.props.navigation.goBack()} leftText={'Daftar'} rightText={'Masuk'} onNextPress={() => this.props.navigation.goBack()}/>
-        <View style={{flex: 1, backgroundColor: 'white', borderTopLeftRadius: 32, borderTopRightRadius: 32, paddingHorizontal: 25, paddingTop: 50}}>
+        <ScrollView showsVerticalScrollIndicator={false} style={styles.scrollContent}>
           <View style={{width: '100%'}}>
             <View>
               <BaseInput 
@@ -104,14 +108,14 @@ class RegisterScreen extends Component {
               />
             </View>
             <View style={{marginTop: 40}}>
-              <BaseButton text={'Daftar'} onPress={() => alert('yuhuu')}/>
+              <BaseButton text={'Daftar'} onPress={() => this.handleRegister()}/>
             </View>
-            <View style={{marginTop: 20, alignItems: 'center', justifyContent: 'center', flexDirection:'row'}}>
+            <View style={{marginTop: 20, alignItems: 'center', justifyContent: 'center', flexDirection:'row', marginBottom: 75}}>
               <BaseText text={"Sudah punya akun e-CartPro?"} type={"bold"} style={{fontSize: 14, color: '#4b4b4b', opacity: .6,}}/>
               <BaseText text={"Masuk"} type={"bold"} style={{fontSize: 14, color: '#4cc9f0', marginLeft: 5,}} onPress={() => this.props.navigation.goBack()}/>
             </View>
           </View>
-        </View>
+        </ScrollView>
       </View>
     )
   }

App/Containers/Styles/AboutAppScreenStyle.js

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

App/Containers/Styles/AppContactScreenStyle.js

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

App/Containers/Styles/CategoryScreenStyle.js

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

App/Containers/Styles/MyAccountScreenStyle.js

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

App/Containers/Styles/OtpVerificationScreenStyle.js

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

App/Containers/Styles/TermAndPrivacyScreenStyle.js

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

App/Containers/TermAndPrivacyScreen.js

+import React, { Component } from 'react'
+import { ScrollView, Text, KeyboardAvoidingView, 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/TermAndPrivacyScreenStyle'
+
+class TermAndPrivacyScreen extends Component {
+
+  backAction = () => {
+    this.props.navigation.goBack()
+    return true;
+  };
+
+  componentDidMount() {
+    // alert(JSON.stringify(this.props))
+    BackHandler.addEventListener("hardwareBackPress", this.backAction);
+  }
+
+  componentWillUnmount() {
+    BackHandler.removeEventListener("hardwareBackPress", this.backAction);
+  }
+  
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <KeyboardAvoidingView behavior='position'>
+          <Text>TermAndPrivacyScreen</Text>
+        </KeyboardAvoidingView>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+  }
+}
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TermAndPrivacyScreen)

App/Lib/Constans.js

+const Constant = {
+    
+    BASE_URL : 'https://project-demo.eksad.com/projectmanagement_dev/public/mobile/',
+
+    //USER
+    globalColor: '#4cc9f0'
+}
+
+export default Constant;
\ No newline at end of file

App/Navigation/AppNavigation.js

 import { createAppContainer } from 'react-navigation'
+import AboutAppScreen from '../Containers/AboutAppScreen'
+import TermAndPrivacyScreen from '../Containers/TermAndPrivacyScreen'
+import AppContactScreen from '../Containers/AppContactScreen'
+import MyAccountScreen from '../Containers/MyAccountScreen'
+import CategoryScreen from '../Containers/CategoryScreen'
 import OtpVerificationScreen from '../Containers/OtpVerificationScreen'
 import RegisterScreen from '../Containers/RegisterScreen'
 import LoginScreen from '../Containers/LoginScreen'
@@ -15,6 +20,11 @@ import HomeNavigation from './HomeNavigation'
 
 // Manifest of possible screens
 const PrimaryNav = createStackNavigator({
+  AboutAppScreen: { screen: AboutAppScreen },
+  TermAndPrivacyScreen: { screen: TermAndPrivacyScreen },
+  AppContactScreen: { screen: AppContactScreen },
+  MyAccountScreen: { screen: MyAccountScreen },
+  CategoryScreen: { screen: CategoryScreen },
   OtpVerificationScreen: { screen: OtpVerificationScreen },
   RegisterScreen: { screen: RegisterScreen },
   LoginScreen: { screen: LoginScreen },

App/Themes/ApplicationStyles.js

-import Fonts from './Fonts'
-import Metrics from './Metrics'
-import Colors from './Colors'
+import Fonts from './Fonts';
+import Metrics from './Metrics';
+import Colors from './Colors';
 
 // This file is for a reusable grouping of Theme items.
 // Similar to an XML fragment layout in Android
@@ -9,59 +9,67 @@ const ApplicationStyles = {
   screen: {
     mainContainer: {
       flex: 1,
-      backgroundColor: Colors.transparent
+      backgroundColor: Colors.transparent,
     },
     backgroundImage: {
       position: 'absolute',
       top: 0,
       left: 0,
       bottom: 0,
-      right: 0
+      right: 0,
     },
     container: {
       flex: 1,
       paddingTop: Metrics.baseMargin,
-      backgroundColor: Colors.transparent
+      backgroundColor: Colors.transparent,
+    },
+    scrollContent: {
+      flex: 1,
+      backgroundColor: 'white',
+      borderTopLeftRadius: 32,
+      borderTopRightRadius: 32,
+      paddingHorizontal: 25,
+      paddingTop: 50,
     },
     section: {
       margin: Metrics.section,
-      padding: Metrics.baseMargin
+      padding: Metrics.baseMargin,
     },
     sectionText: {
       ...Fonts.style.normal,
       paddingVertical: Metrics.doubleBaseMargin,
       color: Colors.snow,
       marginVertical: Metrics.smallMargin,
-      textAlign: 'center'
+      textAlign: 'center',
     },
     subtitle: {
       color: Colors.snow,
       padding: Metrics.smallMargin,
       marginBottom: Metrics.smallMargin,
-      marginHorizontal: Metrics.smallMargin
+      marginHorizontal: Metrics.smallMargin,
     },
     titleText: {
       ...Fonts.style.h2,
       fontSize: 14,
-      color: Colors.text
-    }
+      color: Colors.text,
+    },
   },
   darkLabelContainer: {
     padding: Metrics.smallMargin,
     paddingBottom: Metrics.doubleBaseMargin,
     borderBottomColor: Colors.border,
     borderBottomWidth: 1,
-    marginBottom: Metrics.baseMargin
+    marginBottom: Metrics.baseMargin,
   },
   darkLabel: {
     fontFamily: Fonts.type.bold,
-    color: Colors.snow
+    color: Colors.snow,
   },
   groupContainer: {
     margin: Metrics.smallMargin,
     flexDirection: 'row',
     justifyContent: 'space-around',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   sectionTitle: {
     ...Fonts.style.h4,
@@ -73,8 +81,8 @@ const ApplicationStyles = {
     borderWidth: 1,
     borderColor: Colors.ember,
     alignItems: 'center',
-    textAlign: 'center'
-  }
-}
+    textAlign: 'center',
+  },
+};
 
-export default ApplicationStyles
+export default ApplicationStyles;

App/Themes/Images.js

 // leave off @2x/@3x
 const images = {
-  logo: require('../Images/ir.png'),
-  clearLogo: require('../Images/top_logo.png'),
-  launch: require('../Images/launch-icon.png'),
-  ready: require('../Images/your-app.png'),
-  ignite: require('../Images/ignite_logo.png'),
-  igniteClear: require('../Images/ignite-logo-transparent.png'),
-  tileBg: require('../Images/tile_bg.png'),
-  background: require('../Images/BG.png'),
-  buttonBackground: require('../Images/button-bg.png'),
-  api: require('../Images/Icons/icon-api-testing.png'),
-  components: require('../Images/Icons/icon-components.png'),
-  deviceInfo: require('../Images/Icons/icon-device-information.png'),
-  faq: require('../Images/Icons/faq-icon.png'),
-  home: require('../Images/Icons/icon-home.png'),
-  theme: require('../Images/Icons/icon-theme.png'),
-  usageExamples: require('../Images/Icons/icon-usage-examples.png'),
-  chevronRight: require('../Images/Icons/chevron-right.png'),
-  hamburger: require('../Images/Icons/hamburger.png'),
-  backButton: require('../Images/Icons/back-button.png'),
-  closeButton: require('../Images/Icons/close-button.png'),
 
   logo_eCart: require('../Images/logo_eCart.png'),
   logo_eCartWhite: require('../Images/logo_eCartWhite.png'),
@@ -31,6 +11,9 @@ const images = {
   icon_backbulat: require('../Images/Icons/icon_backbulat.png'),
   icon_backwhite: require('../Images/Icons/icon_backwhite.png'),
 
+  // big image
+  letter: require('../Images/letter.png'),
+
   //dummy
   celana: require('../Images/imageDummy/celana.jpg'),
   jaket: require('../Images/imageDummy/jaket.jpeg'),

android/app/build.gradle

@@ -91,12 +91,13 @@ apply from: "../../node_modules/react-native/react.gradle"
  * the correct one based on the CPU architecture of their device.
  */
 def enableSeparateBuildPerCPUArchitecture = false
+// def enableSeparateBuildPerCPUArchitecture = true
 
 /**
  * Run Proguard to shrink the Java bytecode in release builds.
  */
 def enableProguardInReleaseBuilds = false
-
+// def enableProguardInReleaseBuilds = true
 /**
  * The preferred build flavor of JavaScriptCore.
  *
@@ -140,24 +141,27 @@ android {
             enable enableSeparateBuildPerCPUArchitecture
             universalApk false  // If true, also generate a universal APK
             include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+            // , "arm64-v8a", "x86_64"
         }
     }
     signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
+        release {
+            // if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
+                storeFile file(MYAPP_UPLOAD_STORE_FILE)
+                storePassword MYAPP_UPLOAD_STORE_PASSWORD
+                keyAlias MYAPP_UPLOAD_KEY_ALIAS
+                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
+            // }
         }
     }
     buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
+        // debug {
+        //     signingConfig signingConfigs.debug
+        // }
         release {
             // Caution! In production, you need to generate your own keystore file.
             // see https://facebook.github.io/react-native/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
+            signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
         }
@@ -166,7 +170,7 @@ android {
     applicationVariants.all { variant ->
         variant.outputs.each { output ->
             // For each separate APK per architecture, set a unique version code as described here:
-            // https://developer.android.com/studio/build/configure-apk-splits.html
+            // https://developer.android.com/studio/build/configure-apk-splits.html , "arm64-v8a": 3, "x86_64": 4
             def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
             def abi = output.getFilter(OutputFile.ABI)
             if (abi != null) {  // null for the universal-debug, universal-release variants

android/app/src/main/res/values/strings.xml

 <resources>
-    <string name="app_name">eCartProCustomer</string>
+    <string name="app_name">e-CartPro</string>
 </resources>

android/gradle.properties

@@ -19,3 +19,7 @@
 
 android.useAndroidX=true
 android.enableJetifier=true
+MYAPP_UPLOAD_STORE_FILE=eCartCustomer.keystore
+MYAPP_UPLOAD_KEY_ALIAS=eCartCustomer
+MYAPP_UPLOAD_STORE_PASSWORD=ecart2020#
+MYAPP_UPLOAD_KEY_PASSWORD=ecart2020#
\ No newline at end of file

package.json

@@ -75,6 +75,7 @@
     "@storybook/react-native": "^4.1.11",
     "babel-eslint": "7.1.1",
     "babel-jest": "^24.9.0",
+    "babel-plugin-ignite-ignore-reactotron": "^0.3.0",
     "eslint": "^6.6.0",
     "ignite-andross": "^4.2.0",
     "ignite-animatable": "1.0.2",

yarn.lock

@@ -3089,6 +3089,11 @@ babel-plugin-emotion@^10.0.27:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
+babel-plugin-ignite-ignore-reactotron@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-ignite-ignore-reactotron/-/babel-plugin-ignite-ignore-reactotron-0.3.0.tgz#1801b207c7e3de5b3482671ca3cbb75dd4abd29e"
+  integrity sha1-GAGyB8fj3ls0gmcco8u3XdSr0p4=
+
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"