Project Structure

This section will need to introduce the application mobile KSTORE for React-Native.

See it in a code editor, let's open the project in one and here opened it in Visual Studio Code, Atom or sublime whatever you like now.

Visual Studio Code Visual Studio Code Visual Studio Code

More folder with some configuration more importantly Android and iOS.

These folders holds the actual config fils and builds off the native apps so don't delete.

You can open with Android studio open the full folder or iOS open the Xcode project file.

In index.js kicks our app by calling this strange app.

1.Directory Structure

Before diving into our customizations let’s do a quick overview of what you’re getting by default. This will help you understand what we’re working with and what everything means.

The typical project structure we recommend is something like this:

root/
├── android/
├── ios/
├── node_modules/
├── src/
├── index.js
└── package.json
  • android/:
    This is the directory where all of the native Android code: .gradle files, .java files, and .xml files. This is the directory you would open with Android Studio.

  • ios/:
    Like the android directory this is where all of your native iOS code lives. You’ll find your xcode project in there, .plist files, .h files, .m files, etc. So if you want to open your project in xcode you would open ios/<PROJECT_NAME>.xcodeproj.

  • src/:
    The default file structure to a point where we’re completing our goals we’ll need to figure out a single entry point for our entire app, that’s where our src/ directory .

  • index.js:
    This is the entry point for your app into the React Native code. It’s where you’ll want to register your app (viaAppRegistry)

  • Everything else
    It’s mostly configuration for React Native and the rest is your standard node files/directories (node_modules/ and package.json)

The src/ directory will be a sibling to the ios/ and android/ directory, you can changes in those. Inside of the app directory is where all of our app logic will be going. It’s broken up into a handful of directories itself to easily and logically organize code.

The inside of this directory looks to the following:

src/
├── components/
│   ├── common
│   ├── header
│   ├── intro
│   ├── home
│   ├── map
│   ├── category
│   ├── filter
│   ├── product
│   ├── payement
│   ├── order
│   ├── notification
│   └── modal 
├── containers/ 
│   ├── Intro
│   ├── Authentification 
│   ├── Home
│   ├── Categories
│   ├── Product
│   ├── Cart
│   ├── Offer
│   ├── Gifts
│   └── Setting 
├── data/
├── resources/
├── themes/
├── App.js
├── TabNavigation.js
└── AppNavigator.js
  • src/components:

    Common components that could be used many time, this could be a custom Button, Header, Map, Modal, ...

components/
├── common
├── header
├── intro
├── home
├── map
├── category
├── filter
├── product
├── payement
├── order
├── notification
└── modal
  • src/containers

    Most components of the app is putting here, you could change or re-structure by matching with your own project design.

containers/ 
├── Intro
├── Authentification 
├── Home
├── Categories
├── Product
├── Cart
├── Offer
├── Gifts
└── Setting
  • src/data:
    Contains wrappers of services: Kstore, Payement Method, categories, Support, ....

  • src/resources:
    All images resources icons and images.

resources/
├── icons
└── images
  • src/themes:

    All the styles are in this directory styles, colors, fonts, ...

themes/
├── index.js
├── AppStyles.js
├── Colors.js
├── Fonts.js
└── Metrics.js

results matching ""

    No results matching ""