🛒 Simple e-commerce app built with React Native.
![]() |
![]() |
![]() |
![]() |
![]() |
For running the project
yarn run-app
- It will gonna install dependencies, run the fake server + bundler and run the app on both platforms automatically.
For running the tests
yarn run-tests
- It will gonna install dependencies, run the fake server + bundler and run the E2E Detox tests on both platforms automatically.
If you wanna run manually
yarn install
,bundle install
and underios
directorypod install
yarn ios
andyarn android
for running the appyarn e2e-ios-build
andyarn e2e-android-build
before the running Detox testsyarn e2e-ios
andyarn e2e-android
for the running Detox tests
Note: Detox test are configured to run on
iPhone 13
andPixel_4_API_29
. If you need to change them you can check the.detoxrc.json
file.
You can find more information on here
For running the Storybook app
- Comment the main app import and uncomment the Storybook import on
index.js
file
import {AppRegistry} from 'react-native';
// import App from './src/App';
import App from './.storybook';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
- Restart the Metro Bundler
yarn start
- Run the app on both platforms
yarn ios
yarn android
Note: Main app import and storybook app import cannot be active at the same time on
index.js
file. Redux gives an error when both are active. Also metro bundler should restart again when app import changes because it caches the previous import.
npx uri-scheme open "takeapp://discover" --ios
npx uri-scheme open "takeapp://discover" --android
npx uri-scheme open "takeapp://products/jewelry" --ios
npx uri-scheme open "takeapp://products/jewelry" --android
npx uri-scheme open "takeapp://product/1001" --ios
npx uri-scheme open "takeapp://product/1001" --android
├── _json_server # Mock server for the app
├── .storybook # Storybook app
├── src
│ ├── components # Reusable UI components
│ ├── container # Wrapper container components
│ ├── enums # Enum files for prevent using magic strings
│ ├── helpers # Generic helper functions
│ ├── hooks # Custom hooks
│ ├── pages # Screen components
│ ├── redux # State manager
│ ├── router # Navigation structure
│ ├── styles # Generic style files to ensure consistency in style definitions and prevent using magic numbers
│ ├── types # Generic type definitions
│ └── utils # Utility functions