MowContainer

    <MowContainer
        title={"Categories"}
        footer={true}
        navbar={true}
        statusBar={true}
        footerActiveIndex={2}
        error={true}
        errorMessage={"en error occurred"}
        errorOnPress={() => console.log("error button pressed")}
        transactionType={"add"}
        transactionOnSave={() => console.log("transaction button pressed")}
        topBorder={true}>

            {Other Components}

    </MowContainer>


                                    

MowNavbar

    <MowNavbar
        title={"Categories"}/>


                                    

MowStatusBar

MowFooter

MowButton

    <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
        iconBGColor={"green"} // icon background color
    />



                                    

MowInput

    <MowInput
        leftIcon={"user"}
        rightIcon={"user"}
        value={"number"}
        onChangeText={value => console.log("value")}
        iconColor={"green"}
        textArea={false}
        multiline={true}
        editable={true}
        keyboardType={"default"}
        secureTextEntry={false}
        autoCapitalize={true}
        shadow={false}
        type={"default"}
        containerStyle={{padding: 5}}
        textInputStyle={{color: "grey}}
        rightIconOnPress={() => console.log("rightIconOnPress")}
        leftIconOnPress={() => console.log("leftIconOnPress")}/>

                                    

MowPicker

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

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

        },
    ]



        

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




                                    

Mow DatePicker

    <MowDatePicker
        containerStyle={{backgroundColor: "white", borderBottomWidth: 0}}
        value={this.state.birthday}
        selectedDate={(birthday) => this.setState({birthday: birthday})}
        textStyle={{fontSize: 15}}
        iconColor={"green"}
        birthday={true}
        rightIcon={"calendar"}
        leftIcon={"calendar"}/>

                                    

MowCurrencyPicker

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

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

        },
    ]



        

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




                                    

MowPickerInput

    <MowPickerInput
        onAdd={(data) => { console.log("added data: ", data)}}
        value={"value"}
        update={true}
        pickerTitle={"Title"}
        pickerSubTitle={"subtitle}
        pickerOnClose={() => this.setState({pickerVisible: false})}
        pickerVisible={pickerVisible}/>




                                    

Mow LoadingBall

    constructor(props){
        super(props);

        __loadingContext.showLoading("loadingText");
    }

    componentDidMount () {
        __loadingContext.hideLoading();
    }



                                    

MowListItem

    <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"]}/>

    )}/>



                                    

MowToast

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





                                    

MowCheckListItem

    <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

    <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>




                                    

Mow Dialog

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

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

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

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

                                    

MowCheckBox

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



                                    

MowCountdown

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





                                    

MowStarView

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





                                    

MowToast

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





                                    

MowTitleView

     <MowCheckBox
        title={"Transactions"}
        buttonText={"All"}
        buttonOnPress={() => {console.log("button pressed")}}/>



                                    

MowGradientView

    <MowGradientView
        horizontal={false"}>

            {Other Components}

    </MowGradientView>



                                    

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.