Movega Shop Documentation

Last Updated: 2020/01/08

Introduction

All needs in the MowegaShop e-commerce area have been considered. The tools used have been made completely unique and have been used to increase ease of use and project management.

Theme Properties
  • Simple and clean design
  • Reusable components
  • Detailed page ui
  • Code structure and file layout made with 2 years of React Native experience
  • The ability to control many things in one place
  • Support after purchase
    • Component with inside each page
    • Buttons
    • Input and textarea
    • Modal
    • Picker
    • Navbar
    • Sidebar, etc.

Installation

React Native

The theme comes with React Native 0.62.2 version that is already installed. It is currently the most stable version for this project.

With react-native run-android and react-native run-ios commands, you can install the app to your device or emulator/simulator.

If you want to install a specific version from the beginning, you must install React Native first.

Go to documentation fromhere.

As shown in the picture above, we need to setup as React Native CLI Quickstart, not Expo option. MacOS platform is mandatory if Target OS is iOS. For android, macOS, Windows and Linux are available.

Hint

Node installation is mandatory for every platform and also, the Android platform requires Java and Android SDK installation. All of is available on this link

After React Native installation, with npx react-native init AwesomeProject --version X.XX.X (this command is available on the React Native document page) command, need to create new project.

Change project name and its package name

  1. The package name is com.mowega.mowshoptheme. You can change this Var olan paket com.mowshoptheme paket adı ile gelmektedir. You should replace it with a suitable package name.

    Install this plugin from here

    react-native-rename "Your App Name" -b test.company.yourname with this command, you can change easily.

  2. The second way is deleting android and ios folder. After deleting these folders, you need to change name and displayName fields

                                            
    {
        "name": "MowShopTheme",
        "displayName": "MowShopTheme"
    }
                                            
                                        

    Hint

    With the second method you can only make package names starting with com. For example, if the name is MowShopTheme, your package name is com.mowshoptheme.

Plugins

For the theme to work fully, plugins must be installed.


            "dependencies": {
                "@react-native-community/masked-view": "^0.1.10",
                "@react-native-community/toolbar-android": "0.1.0-rc.2",
                "@react-navigation/drawer": "^5.8.0",
                "@react-navigation/native": "^5.4.3",
                "@react-navigation/stack": "^5.4.0",
                "moment": "^2.24.0",
                "react": "16.11.0",
                "react-native": "0.62.2",
                "react-native-countdown-component": "^2.7.1",
                "react-native-datepicker": "^1.7.2",
                "react-native-device-info": "^2.3.2",
                "react-native-gesture-handler": "^1.6.1",
                "react-native-indicators": "^0.17.0",
                "react-native-keyboard-aware-scroll-view": "^0.9.1",
                "react-native-localization": "^2.1.6",
                "react-native-popup-dialog": "^0.17.0",
                "react-native-reanimated": "^1.9.0",
                "react-native-responsive-screen": "^1.2.2",
                "react-native-restart": "0.0.13",
                "react-native-safe-area-context": "^2.0.2",
                "react-native-screens": "^2.8.0",
                "react-native-snap-carousel": "^3.9.1",
                "react-native-star-view": "^1.1.3",
                "react-native-status-bar-height": "^2.2.0",
                "react-native-swiper": "^1.5.14",
                "react-native-vector-icons": "^6.7.0",
                "sync-storage": "^0.3.0"
            }
    

Above is the list of installed plugins in the package.json file. You need to install these plugins.

react-native-countdown-component Go to plugin page

react-native-device-info Go to plugin page

react-native-datepicker Go to plugin page

react-native-indicators Go to plugin page

react-native-keyboard-aware-scroll-view Go to plugin page

react-native-localization Go to plugin page

react-native-orientation Go to plugin page

react-native-popup-dialog Go to plugin page

react-native-responsive-screen Go to plugin page

react-native-restart Go to plugin page

react-native-snap-carousel Go to plugin page

react-native-star-view Go to plugin page

react-native-status-bar-height Go to plugin page

react-native-swiper Go to plugin page

react-native-vector-icons Go to plugin page

react-navigation v5 Go to plugin page

sync-storage Go to plugin page

Hint

Our advice is to throw all the plugins into the package.json as json and then run the npm install command

Components

MowContainer

Hint

Most important core component.

Prop Name Prop Type Default Value Other Values Description
statusBar boolean true true, false to show statusbar.
title string null "Test Title" Page navbar title. Required navbar true
navbar boolean true true, false to show navbar
footer boolean true true, false to show footer
footerActiveIndex Enum 1 1,2,3,4 index for detecting selected index



    <MowContainer
        title={"Categories"}
        footer={true}
        navbar={true}
        statusBar={true}
        footerActiveIndex={2}>

            {Other Components}

        </MowContainer>


                                    
MowNavbar
Prop Name Prop Type Default Value Other Values Description
title string "" "" Not change usually except page title. It cames automatically inside 'MowContainer'.



    <MowNavbar
        title={"Categories"}/>


                                    
MowStatusBar

Hint

This component is inside the MowContainer. No need to change. If you want to change it anyway, you can find it inside container.

MowButton
Prop Name Prop Type Default Value Other Values Description
buttonText string null null button name
containerStyle object null {backgroundColor: red} It changes button ui. Any style can import.
textStyle object null {color: blue} It changes text ui. Any text style can import.
size Enum medium xSmall, small , medium , big Sets the size of the button and the size of the text that inside the button
type Enum default success, warning, info, danger, default Set the button color. It has a Bootstrap style colorful.
rightIcon string null null Feather icon set as default.
Vector Icons library is required.
rightIconStyle object null null Right side icon style.
leftIcon string null null Feather icon set as default.
Vector Icons library is required.
leftIconStyle object null null Left side icon style.
shadow boolean true true, false Set a shadow to button
filled boolean true true, false Makes the button filled or not.
stickyIcon boolean false true, false If button has an icon, this allows text and icon to be contiguous.


    <MowButtonBasic
        buttonText={"Button Text"}
        size={"big"} //Big, Medium, Small, xSmall => Button and text size increase or decrease.
        containerStyle={buttonStyle.container} // Button outside style
        textStyle={buttonStyle.text} // Button text style
        leftIcon={"google"} // left icon that can be changed. Required library https://github.com/oblador/react-native-vector-icons)
        type={"success"} // button types success, danger, warning, info, default
        leftIconStyle={}// left icon style
        rightIconStyle={} // right icon style
        rightIcon={} // right icon that can be changed. Required library https://github.com/oblador/react-native-vector-icons)
        stickyIcon={} // boolean => icon and text to be contiguous
        shadow={}// boolean => enable the shadow
        filled={} // boolean => makes the button filled
    />



                                    
MowInput

Hint

All of react native TextInput props can use. You can access all of these from here You can find additional props below.

Prop Name Prop Type Default Value Other Values Description
keyboardType Enum text "default", "number-pad", "decimal-pad", "numeric", "email-address", "phone-pad" It creates input-style structure in html
secureTextEntry boolean false true, false to hide entered text. It's kind of html password field and there is also show/hide icon on the right.
leftIcon string null All vector icon Adds an icon to the left side of the input.
Requires Vector Icons plugin.
rightIcon string null All vector icon Adds an icon to the right side of the input.
Requires Vector Icons plugin.
rightIconOnPress function null null to assign a function when click the right icon
iconColor string theme mainColor variable all colors changes icon color.
containerStyle style object null null to change input container ui
textInputStyle style object null null to change textInput ui
placeholder style object null null placeholder text .



    <MowInput
        type={"number"}
        passwordInput={false}
        leftIcon={"user"}
        rightIcon={"map"}
        rightIconOnPress={() =>{}}
        iconColor={"red"}
        maxLength={1}
        textInputStyle={{padding:5}}
        containerStyle={{position:absolute;left:0}}
    />

                                    
Mow Datepicker

Hint

Native datepicker. You can setup easily from here. You can edit the component according to the documentation

Prop Name Prop Type Default Value Other Values Description
selectedDate string null null selected date
containerStyle object null null picker container style
textInputStyle object null null date text style
value string null null selected date
leftIcon string null null view left icon



    <MowDatePicker
            containerStyle={{backgroundColor: "white", borderBottomWidth: 0}}
            value={this.state.birthday}
            selectedDate={(birthday) => this.setState({birthday: birthday})}
            textInputStyle={{}}
            leftIcon={"calendar"}/>/>

                                    
Mow LoadingBall

Info

You can find required plugin from here. The global variable is used in this component. It comes in a way that is installed in MowContainer. To use this component;



    constructor(props){
        super(props);

        __loadingContext.showLoading("loadingText");
    }

    componentDidMount () {
        __loadingContext.hideLoading();
    }



                                    
MowListItem
Prop Name Prop Type Default Value Other Values Description
title string null null list title
titleTextStyle style object null null to change title style
subtitle string null null sub title that below the title
subtitleTextStyle style object null null to change sub title style
imagePath require('path') null null list item image that appears the left of the view
imageUrl url null null list item image that appears the left of the view
iconName Fa icon (string) null null Right side > icon. It can change from here.
selected boolean null true, false If you want to set as selected when clicked/touched

    <FlatList
        showsVerticalScrollIndicator={false}
        keyExtractor={(item, index) => index.toString()}
        data={CategoriesData}
        style={[pageContainerStyle]}
        renderItem={({ item, index }) => (

            // category item
            <MowListItem
                key={index}
                style={{marginVertical: 5, borderRadius: 5}}
                onPress={() => {  ... when clicked  }
                imagePath={item["image"]}
                title={item["title"]}/>
    
    )}/>



                                    
MowCheckListItem
Prop Name Prop Type Default Value Other Values Description
title string null null list title
titleTextStyle style object null null to change title style
subtitle string null null sub title that below the title
subtitleTextStyle style object null null to change sub title style
imagePath require('path') null null list item image that appears the left of the view
iconName Fa icon (string) null null Right side > icon. It can change from here.
selected boolean null true, false If you want to set as selected when clicked/touched

    <FlatList
            showsVerticalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
            data={CategoriesData}
            style={[pageContainerStyle]}
            renderItem={({ item, index }) => (

                // category item
                <MowCheckListItem
                    key={index}
                    style={{marginVertical: 5, borderRadius: 5}}
                    onPress={() => {  ... when clicked  }
                    imagePath={item["image"]}
                    title={item["title"]}/>
            )}
    />



                                    
MowModal
Prop Name Prop Type Default Value Other Values Description
modalVisible boolean false true,false Open/Close Modal
onClosed function null null IMPORTANT! when onClosed, in which page you call modal, you must set the modal opening state parameter to false in the state of that page. This is important when use two modal in one page.


    <MowModal
        title={"Modal Title"}
        onClosed={() =>{ this.setState({pageModalVisible: false})}} // IMPORTANT
        modalVisible={this.state.pageModalVisible}>
            <View style={{padding:gPadding}}>
                <MowInput placeholder={"Start price"}/>
                <MowInput placeholder={"End price"}/>
            </View>
    </MowModal>




                                    
MowPicker
Prop Name Prop Type Default Value Other Values Description
pickerVisible boolean false true,false Open/Close picker.
pickerOnClose function null null IMPORTANT! when onClosed, in which page you call modal, you must set the modal opening state parameter to false in the state of that page. This is important when use two modal in one page.
search boolean true true, false to enable search bar
data array null


    [
        {
            id: 1,
            title: "test",

        },
        {
            id: 1,
            title: "test",

        },
    ]



        
data that will list inside picker
valueKey string id null selected picker value
textKey string title null selected picker value key
selectedValue number null null When the picker is turned on, it is used to keep an item selected.
onSelect function null null when selection is made, returns the clicked data as json.


    <MowPicker
        pickerOnClose={() => this.setState({pickerVisible: false})} // IMPORTANT
        pickerVisible={this.state.pickerVisible}
        search={false}
        data={pickerSortData}
        onSelect={(obj) => {this._onSelect(obj)}}/>




                                    
Mow Dialog

Info

You can find required plugin from here. The global variable is used in this component. It comes in a way that is installed in MowContainer. To use this component, you can follow below code blocks. This component is used by calling the function.

Arguments Data Type Default Value Other Values Description
title string "" Dialog Title
message string "" Dialog Description
bpt string "OK" ButtonPositiveText. Positive button text
bnt string "Cancel" ButtonNegativeText. Negative button text
twoButton boolean false to show both positive and negative buttons.

    warningDialog("Mowega Shop Theme", "Message",null,false);

    successDialog("Mowega Shop Theme", "Message","OK","Cancel",true);

    errorDialog("Mowega Shop Theme", "Message","OK",null,false);

    defaultDialog("Mowega Shop Theme", "Message","OK",null,false);

                                    
MowCheckBox
Prop Name Prop Type Default Value Other Values Description
checked boolean false true, false Set checkbox as selected.
containerStyle style object null null Changes container style.
checkedColor string mainColor null Set checkbox selected color.
onPress function null null Function that required for each click operation.
boxSize integer hp(2.5) null It is recommended to give according to the screen ratio.
text string "Checkbox Text" null Checkbox text value
textStyle object {} null Changes text style.


     <MowCheckBox
            onPress={() => {this._onPress()}}
            checkedColor={mowColors.mainColor}
            checked={this.state.checkboxChecked}
            containerStyle={{alignSelf: "center", right: wp("5%")}}/>



                                    
MowCountdown

Info

To use this component, a plugin is needed. You can reach the library documentation from here.

Prop Name Prop Type Default Value Other Values Description
size integer 15 Each Countdown box size
timeToLeft second 1000 The remaining time. Specifies where to count down. Gets the value in seconds.



    <MowCountDown
         size={12}// countdown view size
         timeToLeft={item["timeToLeft"]} // countdown start point
    />





                                    
MowStarView

Info

You can find required plugin from here.

Prop Name Prop Type Default Value Other Values Description
score integer 0 star count
width integer or % hp("12%") not one star width, it's whole star view width. Our advice is to give percentage based on screen length
height integer or % hp("2.5%") not one star height, it's whole star view height. Our advice is to give percentage based on screen length



    <MowStarView
        width={hp("12%")}
        height={hp("2.5%")}
        score={item["star"]}/>





                                    
MowToast

Info

To use this component, a plugin is needed. You can reach the library documentation from here.

Calls as function. It takes two parameters. First one is text that shows on the screen and second one is duration. The time is 1500 millisecond as default.




     ShowToast.success("Success",2000)//text , duration
     ShowToast.info("Info",2000)//text , duration
     ShowToast.warning("Warning")//text , duration
     ShowToast.error("Error")//text , duration





                                    
Router

The service where the router parts of the application are set. The first part of the application. If you want to make changes to the application, first take a look at this section

Pages Folder

All pages within the application are in this folder. Login and non-login are separate.

SampleData Folder

All sample data within the application is here.

Important Informations

  1. Slider images should be in 16: 9 format. If you want another format, you should give the width and height ratio accordingly.