├── .bundle └── config ├── .detoxrc.js ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .node-version ├── .prettierrc.js ├── .ruby-version ├── .watchmanconfig ├── Gemfile ├── Gemfile.lock ├── README.md ├── __mocks__ ├── msw │ ├── handlers.ts │ └── mock-data.ts └── zustand.js ├── android ├── app │ ├── build.gradle │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── androidTest │ │ └── java │ │ │ └── com │ │ │ └── reactnativezustandrq │ │ │ └── DetoxTest.java │ │ ├── debug │ │ ├── AndroidManifest.xml │ │ └── java │ │ │ └── com │ │ │ └── reactnativezustandrq │ │ │ └── ReactNativeFlipper.java │ │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ │ └── com │ │ │ │ └── reactnativezustandrq │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ └── res │ │ │ ├── drawable │ │ │ └── rn_edit_text_material.xml │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ │ │ └── xml │ │ │ └── network_security_config.xml │ │ └── release │ │ └── java │ │ └── com │ │ └── reactnativezustandrq │ │ └── ReactNativeFlipper.java ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── docs ├── basket-screen-overview.gif ├── coverage-ss.png ├── e2e-android.mp4 ├── e2e-iOS.mp4 ├── product-detail-overview.gif └── product-list-screen-overview.gif ├── e2e ├── jest.config.js └── starter.test.js ├── index.js ├── ios ├── .xcode.env ├── Fonts │ ├── AntDesign.ttf │ ├── Entypo.ttf │ ├── EvilIcons.ttf │ ├── Feather.ttf │ ├── FontAwesome.ttf │ ├── FontAwesome5_Brands.ttf │ ├── FontAwesome5_Regular.ttf │ ├── FontAwesome5_Solid.ttf │ ├── Fontisto.ttf │ ├── Foundation.ttf │ ├── Ionicons.ttf │ ├── MaterialCommunityIcons.ttf │ ├── MaterialIcons.ttf │ ├── Octicons.ttf │ ├── SimpleLineIcons.ttf │ └── Zocial.ttf ├── Podfile ├── Podfile.lock ├── ReactNativeZustandRQ.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ └── ReactNativeZustandRQ.xcscheme ├── ReactNativeZustandRQ.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist ├── ReactNativeZustandRQ │ ├── AppDelegate.h │ ├── AppDelegate.mm │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ ├── LaunchScreen.storyboard │ └── main.m └── ReactNativeZustandRQTests │ ├── Info.plist │ └── ReactNativeZustandRQTests.m ├── jest.config.js ├── jest.setup.ts ├── metro.config.js ├── package.json ├── react-native.config.js ├── src ├── api │ ├── axios.instance.ts │ └── product │ │ ├── get-all-products.ts │ │ ├── get-product-by-id.ts │ │ ├── index.ts │ │ ├── key-factory.ts │ │ └── types.ts ├── app.tsx ├── components │ ├── basket-card.tsx │ ├── basket-icon.tsx │ ├── close-icon.tsx │ ├── delete-icon.tsx │ ├── error-boundary.tsx │ ├── product-list-card.tsx │ ├── quantity-toggler.tsx │ ├── screen-loading.tsx │ └── spacing.tsx ├── hooks │ └── useRefreshByUser.ts ├── index.ts ├── navigation │ ├── product-stack.tsx │ ├── route-names.ts │ └── types.ts ├── screens │ ├── __tests__ │ │ ├── basket.test.tsx │ │ ├── error.test.tsx │ │ ├── product-detail.test.tsx │ │ └── product-list.test.tsx │ ├── basket.tsx │ ├── error.tsx │ ├── index.ts │ ├── product-detail.tsx │ └── product-list.tsx ├── store │ ├── helpers.test.ts │ ├── helpers.ts │ ├── product.test.ts │ └── product.ts ├── styles │ └── common-styles.ts └── utils │ ├── cut-string.ts │ ├── get-basket-total-price.ts │ ├── get-price-text.ts │ ├── layout.ts │ └── testing.tsx ├── tsconfig.eslint.json ├── tsconfig.json ├── tsconfig.spec.json └── yarn.lock /.bundle/config: -------------------------------------------------------------------------------- 1 | BUNDLE_PATH: "vendor/bundle" 2 | BUNDLE_FORCE_RUBY_PLATFORM: 1 3 | -------------------------------------------------------------------------------- /.detoxrc.js: -------------------------------------------------------------------------------- 1 | /** @type {Detox.DetoxConfig} */ 2 | module.exports = { 3 | testRunner: { 4 | args: { 5 | $0: 'jest', 6 | config: 'e2e/jest.config.js', 7 | }, 8 | jest: { 9 | setupTimeout: 120000, 10 | }, 11 | }, 12 | apps: { 13 | 'ios.debug': { 14 | type: 'ios.app', 15 | binaryPath: 16 | 'ios/build/Build/Products/Debug-iphonesimulator/ReactNativeZustandRQ.app', 17 | build: 18 | 'xcodebuild -workspace ios/ReactNativeZustandRQ.xcworkspace -scheme ReactNativeZustandRQ -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build', 19 | }, 20 | 'ios.release': { 21 | type: 'ios.app', 22 | binaryPath: 23 | 'ios/build/Build/Products/Release-iphonesimulator/ReactNativeZustandRQ.app', 24 | build: 25 | 'xcodebuild -workspace ios/ReactNativeZustandRQ.xcworkspace -scheme ReactNativeZustandRQ -configuration Release -sdk iphonesimulator -derivedDataPath ios/build', 26 | }, 27 | 'android.debug': { 28 | type: 'android.apk', 29 | binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk', 30 | build: 31 | 'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug', 32 | reversePorts: [8081], 33 | }, 34 | 'android.release': { 35 | type: 'android.apk', 36 | binaryPath: 'android/app/build/outputs/apk/release/app-release.apk', 37 | build: 38 | 'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release', 39 | }, 40 | }, 41 | devices: { 42 | simulator: { 43 | type: 'ios.simulator', 44 | device: { 45 | type: 'iPhone 12', 46 | }, 47 | }, 48 | attached: { 49 | type: 'android.attached', 50 | device: { 51 | adbName: '.*', 52 | }, 53 | }, 54 | emulator: { 55 | type: 'android.emulator', 56 | device: { 57 | avdName: 'Pixel_XL_API_28', 58 | }, 59 | }, 60 | }, 61 | configurations: { 62 | 'ios.sim.debug': { 63 | device: 'simulator', 64 | app: 'ios.debug', 65 | }, 66 | 'ios.sim.release': { 67 | device: 'simulator', 68 | app: 'ios.release', 69 | }, 70 | 'android.att.debug': { 71 | device: 'attached', 72 | app: 'android.debug', 73 | }, 74 | 'android.att.release': { 75 | device: 'attached', 76 | app: 'android.release', 77 | }, 78 | 'android.emu.debug': { 79 | device: 'emulator', 80 | app: 'android.debug', 81 | }, 82 | 'android.emu.release': { 83 | device: 'emulator', 84 | app: 'android.release', 85 | }, 86 | }, 87 | }; 88 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | ignorePatterns: ['**/e2e/*.js'], 5 | }; 6 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - main 7 | - release 8 | push: 9 | branches: 10 | - main 11 | - release 12 | 13 | jobs: 14 | test: 15 | runs-on: ubuntu-latest 16 | 17 | steps: 18 | - uses: actions/checkout@v2 19 | - name: Set up Node.js 20 | uses: actions/setup-node@v2 21 | with: 22 | node-version: 14 23 | - name: Install dependencies 24 | run: yarn install 25 | - name: Run tests 26 | run: yarn test --updateSnapshot --detectOpenHandles 27 | - name: Run yarn lint 28 | run: | 29 | yarn lint 30 | - name: Run yarn tsc 31 | run: | 32 | yarn build 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # coverage 6 | coverage 7 | 8 | # Xcode 9 | # 10 | build/ 11 | *.pbxuser 12 | !default.pbxuser 13 | *.mode1v3 14 | !default.mode1v3 15 | *.mode2v3 16 | !default.mode2v3 17 | *.perspectivev3 18 | !default.perspectivev3 19 | xcuserdata 20 | *.xccheckout 21 | *.moved-aside 22 | DerivedData 23 | *.hmap 24 | *.ipa 25 | *.xcuserstate 26 | ios/.xcode.env.local 27 | 28 | # Android/IntelliJ 29 | # 30 | build/ 31 | .idea 32 | .gradle 33 | local.properties 34 | *.iml 35 | *.hprof 36 | .cxx/ 37 | *.keystore 38 | !debug.keystore 39 | 40 | # node.js 41 | # 42 | node_modules/ 43 | npm-debug.log 44 | yarn-error.log 45 | 46 | # fastlane 47 | # 48 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 49 | # screenshots whenever they are needed. 50 | # For more information about the recommended setup visit: 51 | # https://docs.fastlane.tools/best-practices/source-control/ 52 | 53 | **/fastlane/report.xml 54 | **/fastlane/Preview.html 55 | **/fastlane/screenshots 56 | **/fastlane/test_output 57 | 58 | # Bundle artifact 59 | *.jsbundle 60 | 61 | # Ruby / CocoaPods 62 | /ios/Pods/ 63 | /vendor/bundle/ 64 | 65 | # Temporary files created by Metro to check the health of the file watcher 66 | .metro-health-check* 67 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 18 2 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | arrowParens: 'avoid', 3 | bracketSameLine: true, 4 | bracketSpacing: false, 5 | singleQuote: true, 6 | trailingComma: 'all', 7 | }; 8 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.7.6 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version 4 | ruby File.read(File.join(__dir__, '.ruby-version')).strip 5 | 6 | gem 'cocoapods', '~> 1.11', '>= 1.11.3' 7 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | CFPropertyList (3.0.6) 5 | rexml 6 | activesupport (6.1.7.2) 7 | concurrent-ruby (~> 1.0, >= 1.0.2) 8 | i18n (>= 1.6, < 2) 9 | minitest (>= 5.1) 10 | tzinfo (~> 2.0) 11 | zeitwerk (~> 2.3) 12 | addressable (2.8.1) 13 | public_suffix (>= 2.0.2, < 6.0) 14 | algoliasearch (1.27.5) 15 | httpclient (~> 2.8, >= 2.8.3) 16 | json (>= 1.5.1) 17 | atomos (0.1.3) 18 | claide (1.1.0) 19 | cocoapods (1.11.3) 20 | addressable (~> 2.8) 21 | claide (>= 1.0.2, < 2.0) 22 | cocoapods-core (= 1.11.3) 23 | cocoapods-deintegrate (>= 1.0.3, < 2.0) 24 | cocoapods-downloader (>= 1.4.0, < 2.0) 25 | cocoapods-plugins (>= 1.0.0, < 2.0) 26 | cocoapods-search (>= 1.0.0, < 2.0) 27 | cocoapods-trunk (>= 1.4.0, < 2.0) 28 | cocoapods-try (>= 1.1.0, < 2.0) 29 | colored2 (~> 3.1) 30 | escape (~> 0.0.4) 31 | fourflusher (>= 2.3.0, < 3.0) 32 | gh_inspector (~> 1.0) 33 | molinillo (~> 0.8.0) 34 | nap (~> 1.0) 35 | ruby-macho (>= 1.0, < 3.0) 36 | xcodeproj (>= 1.21.0, < 2.0) 37 | cocoapods-core (1.11.3) 38 | activesupport (>= 5.0, < 7) 39 | addressable (~> 2.8) 40 | algoliasearch (~> 1.0) 41 | concurrent-ruby (~> 1.1) 42 | fuzzy_match (~> 2.0.4) 43 | nap (~> 1.0) 44 | netrc (~> 0.11) 45 | public_suffix (~> 4.0) 46 | typhoeus (~> 1.0) 47 | cocoapods-deintegrate (1.0.5) 48 | cocoapods-downloader (1.6.3) 49 | cocoapods-plugins (1.0.0) 50 | nap 51 | cocoapods-search (1.0.1) 52 | cocoapods-trunk (1.6.0) 53 | nap (>= 0.8, < 2.0) 54 | netrc (~> 0.11) 55 | cocoapods-try (1.2.0) 56 | colored2 (3.1.2) 57 | concurrent-ruby (1.2.0) 58 | escape (0.0.4) 59 | ethon (0.16.0) 60 | ffi (>= 1.15.0) 61 | ffi (1.15.5) 62 | fourflusher (2.3.1) 63 | fuzzy_match (2.0.4) 64 | gh_inspector (1.1.3) 65 | httpclient (2.8.3) 66 | i18n (1.12.0) 67 | concurrent-ruby (~> 1.0) 68 | json (2.6.3) 69 | minitest (5.17.0) 70 | molinillo (0.8.0) 71 | nanaimo (0.3.0) 72 | nap (1.1.0) 73 | netrc (0.11.0) 74 | public_suffix (4.0.7) 75 | rexml (3.2.5) 76 | ruby-macho (2.5.1) 77 | typhoeus (1.4.0) 78 | ethon (>= 0.9.0) 79 | tzinfo (2.0.6) 80 | concurrent-ruby (~> 1.0) 81 | xcodeproj (1.22.0) 82 | CFPropertyList (>= 2.3.3, < 4.0) 83 | atomos (~> 0.1.3) 84 | claide (>= 1.0.2, < 2.0) 85 | colored2 (~> 3.1) 86 | nanaimo (~> 0.3.0) 87 | rexml (~> 3.2.4) 88 | zeitwerk (2.6.6) 89 | 90 | PLATFORMS 91 | ruby 92 | 93 | DEPENDENCIES 94 | cocoapods (~> 1.11, >= 1.11.3) 95 | 96 | RUBY VERSION 97 | ruby 2.7.6p219 98 | 99 | BUNDLED WITH 100 | 2.1.4 101 | -------------------------------------------------------------------------------- /__mocks__/msw/handlers.ts: -------------------------------------------------------------------------------- 1 | import {rest} from 'msw'; 2 | import {setupServer} from 'msw/node'; 3 | import {BASE_URL} from '../../src/api/axios.instance'; 4 | import { 5 | GET_ALL_PRODUCTS_MOCK_RESPONSE, 6 | GET_PRODUCT_BY_ID_MOCK_RESPONSE, 7 | } from './mock-data'; 8 | 9 | const getAllProductsUrl = BASE_URL + '/products'; 10 | const getProductByIdUrl = BASE_URL + `/products/:id`; 11 | 12 | const getAllProductsHandler = rest.get(getAllProductsUrl, (_req, res, ctx) => { 13 | return res(ctx.status(200), ctx.json(GET_ALL_PRODUCTS_MOCK_RESPONSE)); 14 | }); 15 | 16 | const getProductByIdHandler = rest.get(getProductByIdUrl, (_req, res, ctx) => { 17 | return res(ctx.status(200), ctx.json(GET_PRODUCT_BY_ID_MOCK_RESPONSE)); 18 | }); 19 | 20 | const handlers = [getAllProductsHandler, getProductByIdHandler]; 21 | 22 | export const mswServer = setupServer(...handlers); 23 | 24 | const getAllProductsFailedHandler = rest.get( 25 | getAllProductsUrl, 26 | (_req, res, ctx) => { 27 | return res(ctx.status(500)); 28 | }, 29 | ); 30 | 31 | const getProductByIdFailedHandler = rest.get( 32 | getProductByIdUrl, 33 | (_req, res, ctx) => { 34 | return res(ctx.status(500)); 35 | }, 36 | ); 37 | 38 | export const setupGetAllProductsFailedHandler = () => 39 | mswServer.use(getAllProductsFailedHandler); 40 | 41 | export const setupGetProductByIdFailedHandler = () => 42 | mswServer.use(getProductByIdFailedHandler); 43 | -------------------------------------------------------------------------------- /__mocks__/msw/mock-data.ts: -------------------------------------------------------------------------------- 1 | export const GET_ALL_PRODUCTS_MOCK_RESPONSE = [ 2 | { 3 | id: 1, 4 | title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops', 5 | price: 109.95, 6 | description: 7 | 'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday', 8 | category: "men's clothing", 9 | image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg', 10 | rating: { 11 | rate: 3.9, 12 | count: 120, 13 | }, 14 | }, 15 | { 16 | id: 2, 17 | title: 'Mens Casual Premium Slim Fit T-Shirts ', 18 | price: 22.3, 19 | description: 20 | 'Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.', 21 | category: "men's clothing", 22 | image: 23 | 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg', 24 | rating: { 25 | rate: 4.1, 26 | count: 259, 27 | }, 28 | }, 29 | { 30 | id: 3, 31 | title: 'Mens Cotton Jacket', 32 | price: 55.99, 33 | description: 34 | 'great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.', 35 | category: "men's clothing", 36 | image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg', 37 | rating: { 38 | rate: 4.7, 39 | count: 500, 40 | }, 41 | }, 42 | { 43 | id: 4, 44 | title: 'Mens Casual Slim Fit', 45 | price: 15.99, 46 | description: 47 | 'The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.', 48 | category: "men's clothing", 49 | image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg', 50 | rating: { 51 | rate: 2.1, 52 | count: 430, 53 | }, 54 | }, 55 | { 56 | id: 5, 57 | title: 58 | "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet", 59 | price: 695, 60 | description: 61 | "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.", 62 | category: 'jewelery', 63 | image: 'https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg', 64 | rating: { 65 | rate: 4.6, 66 | count: 400, 67 | }, 68 | }, 69 | { 70 | id: 6, 71 | title: 'Solid Gold Petite Micropave ', 72 | price: 168, 73 | description: 74 | 'Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.', 75 | category: 'jewelery', 76 | image: 'https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg', 77 | rating: { 78 | rate: 3.9, 79 | count: 70, 80 | }, 81 | }, 82 | { 83 | id: 7, 84 | title: 'White Gold Plated Princess', 85 | price: 9.99, 86 | description: 87 | "Classic Created Wedding Engagement Solitaire Diamond Promise Ring for Her. Gifts to spoil your love more for Engagement, Wedding, Anniversary, Valentine's Day...", 88 | category: 'jewelery', 89 | image: 'https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg', 90 | rating: { 91 | rate: 3, 92 | count: 400, 93 | }, 94 | }, 95 | { 96 | id: 8, 97 | title: 'Pierced Owl Rose Gold Plated Stainless Steel Double', 98 | price: 10.99, 99 | description: 100 | 'Rose Gold Plated Double Flared Tunnel Plug Earrings. Made of 316L Stainless Steel', 101 | category: 'jewelery', 102 | image: 'https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg', 103 | rating: { 104 | rate: 1.9, 105 | count: 100, 106 | }, 107 | }, 108 | { 109 | id: 9, 110 | title: 'WD 2TB Elements Portable External Hard Drive - USB 3.0 ', 111 | price: 64, 112 | description: 113 | 'USB 3.0 and USB 2.0 Compatibility Fast data transfers Improve PC Performance High Capacity; Compatibility Formatted NTFS for Windows 10, Windows 8.1, Windows 7; Reformatting may be required for other operating systems; Compatibility may vary depending on user’s hardware configuration and operating system', 114 | category: 'electronics', 115 | image: 'https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg', 116 | rating: { 117 | rate: 3.3, 118 | count: 203, 119 | }, 120 | }, 121 | { 122 | id: 10, 123 | title: 'SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s', 124 | price: 109, 125 | description: 126 | 'Easy upgrade for faster boot up, shutdown, application load and response (As compared to 5400 RPM SATA 2.5” hard drive; Based on published specifications and internal benchmarking tests using PCMark vantage scores) Boosts burst write performance, making it ideal for typical PC workloads The perfect balance of performance and reliability Read/write speeds of up to 535MB/s/450MB/s (Based on internal testing; Performance may vary depending upon drive capacity, host device, OS and application.)', 127 | category: 'electronics', 128 | image: 'https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg', 129 | rating: { 130 | rate: 2.9, 131 | count: 470, 132 | }, 133 | }, 134 | { 135 | id: 11, 136 | title: 137 | 'Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA III 2.5', 138 | price: 109, 139 | description: 140 | '3D NAND flash are applied to deliver high transfer speeds Remarkable transfer speeds that enable faster bootup and improved overall system performance. The advanced SLC Cache Technology allows performance boost and longer lifespan 7mm slim design suitable for Ultrabooks and Ultra-slim notebooks. Supports TRIM command, Garbage Collection technology, RAID, and ECC (Error Checking & Correction) to provide the optimized performance and enhanced reliability.', 141 | category: 'electronics', 142 | image: 'https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg', 143 | rating: { 144 | rate: 4.8, 145 | count: 319, 146 | }, 147 | }, 148 | { 149 | id: 12, 150 | title: 151 | 'WD 4TB Gaming Drive Works with Playstation 4 Portable External Hard Drive', 152 | price: 114, 153 | description: 154 | "Expand your PS4 gaming experience, Play anywhere Fast and easy, setup Sleek design with high capacity, 3-year manufacturer's limited warranty", 155 | category: 'electronics', 156 | image: 'https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg', 157 | rating: { 158 | rate: 4.8, 159 | count: 400, 160 | }, 161 | }, 162 | { 163 | id: 13, 164 | title: 'Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS Ultra-Thin', 165 | price: 599, 166 | description: 167 | '21. 5 inches Full HD (1920 x 1080) widescreen IPS display And Radeon free Sync technology. No compatibility for VESA Mount Refresh Rate: 75Hz - Using HDMI port Zero-frame design | ultra-thin | 4ms response time | IPS panel Aspect ratio - 16: 9. Color Supported - 16. 7 million colors. Brightness - 250 nit Tilt angle -5 degree to 15 degree. Horizontal viewing angle-178 degree. Vertical viewing angle-178 degree 75 hertz', 168 | category: 'electronics', 169 | image: 'https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg', 170 | rating: { 171 | rate: 2.9, 172 | count: 250, 173 | }, 174 | }, 175 | { 176 | id: 14, 177 | title: 178 | 'Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor (LC49HG90DMNXZA) – Super Ultrawide Screen QLED ', 179 | price: 999.99, 180 | description: 181 | '49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with dual 27 inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY, HDR support and factory calibration provides stunningly realistic and accurate color and contrast 144HZ HIGH REFRESH RATE and 1ms ultra fast response time work to eliminate motion blur, ghosting, and reduce input lag', 182 | category: 'electronics', 183 | image: 'https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg', 184 | rating: { 185 | rate: 2.2, 186 | count: 140, 187 | }, 188 | }, 189 | { 190 | id: 15, 191 | title: "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter Coats", 192 | price: 56.99, 193 | description: 194 | 'Note:The Jackets is US standard size, Please choose size as your usual wear Material: 100% Polyester; Detachable Liner Fabric: Warm Fleece. Detachable Functional Liner: Skin Friendly, Lightweigt and Warm.Stand Collar Liner jacket, keep you warm in cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2 Zippered Pockets on Chest (enough to keep cards or keys)and 1 Hidden Pocket Inside.Zippered Hand Pockets and Hidden Pocket keep your things secure. Humanized Design: Adjustable and Detachable Hood and Adjustable cuff to prevent the wind and water,for a comfortable fit. 3 in 1 Detachable Design provide more convenience, you can separate the coat and inner as needed, or wear it together. It is suitable for different season and help you adapt to different climates', 195 | category: "women's clothing", 196 | image: 'https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg', 197 | rating: { 198 | rate: 2.6, 199 | count: 235, 200 | }, 201 | }, 202 | { 203 | id: 16, 204 | title: 205 | "Lock and Love Women's Removable Hooded Faux Leather Moto Biker Jacket", 206 | price: 29.95, 207 | description: 208 | '100% POLYURETHANE(shell) 100% POLYESTER(lining) 75% POLYESTER 25% COTTON (SWEATER), Faux leather material for style and comfort / 2 pockets of front, 2-For-One Hooded denim style faux leather jacket, Button detail on waist / Detail stitching at sides, HAND WASH ONLY / DO NOT BLEACH / LINE DRY / DO NOT IRON', 209 | category: "women's clothing", 210 | image: 'https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg', 211 | rating: { 212 | rate: 2.9, 213 | count: 340, 214 | }, 215 | }, 216 | { 217 | id: 17, 218 | title: 'Rain Jacket Women Windbreaker Striped Climbing Raincoats', 219 | price: 39.99, 220 | description: 221 | "Lightweight perfet for trip or casual wear---Long sleeve with hooded, adjustable drawstring waist design. Button and zipper front closure raincoat, fully stripes Lined and The Raincoat has 2 side pockets are a good size to hold all kinds of things, it covers the hips, and the hood is generous but doesn't overdo it.Attached Cotton Lined Hood with Adjustable Drawstrings give it a real styled look.", 222 | category: "women's clothing", 223 | image: 'https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-2.jpg', 224 | rating: { 225 | rate: 3.8, 226 | count: 679, 227 | }, 228 | }, 229 | { 230 | id: 18, 231 | title: "MBJ Women's Solid Short Sleeve Boat Neck V ", 232 | price: 9.85, 233 | description: 234 | '95% RAYON 5% SPANDEX, Made in USA or Imported, Do Not Bleach, Lightweight fabric with great stretch for comfort, Ribbed on sleeves and neckline / Double stitching on bottom hem', 235 | category: "women's clothing", 236 | image: 'https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg', 237 | rating: { 238 | rate: 4.7, 239 | count: 130, 240 | }, 241 | }, 242 | { 243 | id: 19, 244 | title: "Opna Women's Short Sleeve Moisture", 245 | price: 7.95, 246 | description: 247 | '100% Polyester, Machine wash, 100% cationic polyester interlock, Machine Wash & Pre Shrunk for a Great Fit, Lightweight, roomy and highly breathable with moisture wicking fabric which helps to keep moisture away, Soft Lightweight Fabric with comfortable V-neck collar and a slimmer fit, delivers a sleek, more feminine silhouette and Added Comfort', 248 | category: "women's clothing", 249 | image: 'https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg', 250 | rating: { 251 | rate: 4.5, 252 | count: 146, 253 | }, 254 | }, 255 | { 256 | id: 20, 257 | title: 'DANVOUY Womens T Shirt Casual Cotton Short', 258 | price: 12.99, 259 | description: 260 | '95%Cotton,5%Spandex, Features: Casual, Short Sleeve, Letter Print,V-Neck,Fashion Tees, The fabric is soft and has some stretch., Occasion: Casual/Office/Beach/School/Home/Street. Season: Spring,Summer,Autumn,Winter.', 261 | category: "women's clothing", 262 | image: 'https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg', 263 | rating: { 264 | rate: 3.6, 265 | count: 145, 266 | }, 267 | }, 268 | ]; 269 | 270 | export const GET_PRODUCT_BY_ID_MOCK_RESPONSE = { 271 | id: 1, 272 | title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops', 273 | price: 109.95, 274 | description: 275 | 'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday', 276 | category: "men's clothing", 277 | image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg', 278 | rating: { 279 | rate: 3.9, 280 | count: 120, 281 | }, 282 | }; 283 | -------------------------------------------------------------------------------- /__mocks__/zustand.js: -------------------------------------------------------------------------------- 1 | // https://docs.pmnd.rs/zustand/guides/testing#resetting-state-between-tests-in-react-dom 2 | const {create: actualCreate} = jest.requireActual('zustand'); // if using jest 3 | import {act} from '@testing-library/react-native'; 4 | 5 | // a variable to hold reset functions for all stores declared in the app 6 | const storeResetFns = new Set(); 7 | 8 | // when creating a store, we get its initial state, create a reset function and add it in the set 9 | export const create = createState => { 10 | const store = actualCreate(createState); 11 | const initialState = store.getState(); 12 | storeResetFns.add(() => store.setState(initialState, true)); 13 | return store; 14 | }; 15 | 16 | // Reset all stores after each test run 17 | beforeEach(() => { 18 | act(() => storeResetFns.forEach(resetFn => resetFn())); 19 | }); 20 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | apply plugin: "com.facebook.react" 3 | 4 | import com.android.build.OutputFile 5 | 6 | /** 7 | * This is the configuration block to customize your React Native Android app. 8 | * By default you don't need to apply any configuration, just uncomment the lines you need. 9 | */ 10 | react { 11 | /* Folders */ 12 | // The root of your project, i.e. where "package.json" lives. Default is '..' 13 | // root = file("../") 14 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native 15 | // reactNativeDir = file("../node_modules/react-native") 16 | // The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen 17 | // codegenDir = file("../node_modules/react-native-codegen") 18 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js 19 | // cliFile = file("../node_modules/react-native/cli.js") 20 | 21 | /* Variants */ 22 | // The list of variants to that are debuggable. For those we're going to 23 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'. 24 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. 25 | // debuggableVariants = ["liteDebug", "prodDebug"] 26 | 27 | /* Bundling */ 28 | // A list containing the node command and its flags. Default is just 'node'. 29 | // nodeExecutableAndArgs = ["node"] 30 | // 31 | // The command to run when bundling. By default is 'bundle' 32 | // bundleCommand = "ram-bundle" 33 | // 34 | // The path to the CLI configuration file. Default is empty. 35 | // bundleConfig = file(../rn-cli.config.js) 36 | // 37 | // The name of the generated asset file containing your JS bundle 38 | // bundleAssetName = "MyApplication.android.bundle" 39 | // 40 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js' 41 | // entryFile = file("../js/MyApplication.android.js") 42 | // 43 | // A list of extra flags to pass to the 'bundle' commands. 44 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle 45 | // extraPackagerArgs = [] 46 | 47 | /* Hermes Commands */ 48 | // The hermes compiler command to run. By default it is 'hermesc' 49 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" 50 | // 51 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" 52 | // hermesFlags = ["-O", "-output-source-map"] 53 | } 54 | 55 | /** 56 | * Set this to true to create four separate APKs instead of one, 57 | * one for each native architecture. This is useful if you don't 58 | * use App Bundles (https://developer.android.com/guide/app-bundle/) 59 | * and want to have separate APKs to upload to the Play Store. 60 | */ 61 | def enableSeparateBuildPerCPUArchitecture = false 62 | 63 | /** 64 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode. 65 | */ 66 | def enableProguardInReleaseBuilds = false 67 | 68 | /** 69 | * The preferred build flavor of JavaScriptCore (JSC) 70 | * 71 | * For example, to use the international variant, you can use: 72 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'` 73 | * 74 | * The international variant includes ICU i18n library and necessary data 75 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that 76 | * give correct results when using with locales other than en-US. Note that 77 | * this variant is about 6MiB larger per architecture than default. 78 | */ 79 | def jscFlavor = 'org.webkit:android-jsc:+' 80 | 81 | /** 82 | * Private function to get the list of Native Architectures you want to build. 83 | * This reads the value from reactNativeArchitectures in your gradle.properties 84 | * file and works together with the --active-arch-only flag of react-native run-android. 85 | */ 86 | def reactNativeArchitectures() { 87 | def value = project.getProperties().get("reactNativeArchitectures") 88 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"] 89 | } 90 | 91 | android { 92 | ndkVersion rootProject.ext.ndkVersion 93 | 94 | compileSdkVersion rootProject.ext.compileSdkVersion 95 | 96 | namespace "com.reactnativezustandrq" 97 | defaultConfig { 98 | applicationId "com.reactnativezustandrq" 99 | minSdkVersion rootProject.ext.minSdkVersion 100 | targetSdkVersion rootProject.ext.targetSdkVersion 101 | versionCode 1 102 | versionName "1.0" 103 | testBuildType System.getProperty('testBuildType', 'debug') 104 | testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner' 105 | } 106 | 107 | splits { 108 | abi { 109 | reset() 110 | enable enableSeparateBuildPerCPUArchitecture 111 | universalApk false // If true, also generate a universal APK 112 | include (*reactNativeArchitectures()) 113 | } 114 | } 115 | signingConfigs { 116 | debug { 117 | storeFile file('debug.keystore') 118 | storePassword 'android' 119 | keyAlias 'androiddebugkey' 120 | keyPassword 'android' 121 | } 122 | } 123 | buildTypes { 124 | debug { 125 | signingConfig signingConfigs.debug 126 | } 127 | release { 128 | // Caution! In production, you need to generate your own keystore file. 129 | // see https://reactnative.dev/docs/signed-apk-android. 130 | signingConfig signingConfigs.debug 131 | minifyEnabled enableProguardInReleaseBuilds 132 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 133 | proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro" 134 | 135 | } 136 | } 137 | 138 | // applicationVariants are e.g. debug, release 139 | applicationVariants.all { variant -> 140 | variant.outputs.each { output -> 141 | // For each separate APK per architecture, set a unique version code as described here: 142 | // https://developer.android.com/studio/build/configure-apk-splits.html 143 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc. 144 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4] 145 | def abi = output.getFilter(OutputFile.ABI) 146 | if (abi != null) { // null for the universal-debug, universal-release variants 147 | output.versionCodeOverride = 148 | defaultConfig.versionCode * 1000 + versionCodes.get(abi) 149 | } 150 | 151 | } 152 | } 153 | } 154 | 155 | dependencies { 156 | androidTestImplementation('com.wix:detox:+') 157 | implementation 'androidx.appcompat:appcompat:1.1.0' 158 | // The version of react-native is set by the React Native Gradle Plugin 159 | implementation("com.facebook.react:react-android") 160 | 161 | implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0") 162 | 163 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") 164 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") { 165 | exclude group:'com.squareup.okhttp3', module:'okhttp' 166 | } 167 | 168 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") 169 | if (hermesEnabled.toBoolean()) { 170 | implementation("com.facebook.react:hermes-android") 171 | } else { 172 | implementation jscFlavor 173 | } 174 | } 175 | 176 | apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 177 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) 178 | 179 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/androidTest/java/com/reactnativezustandrq/DetoxTest.java: -------------------------------------------------------------------------------- 1 | package com.reactnativezustandrq; 2 | 3 | import com.wix.detox.Detox; 4 | import com.wix.detox.config.DetoxConfig; 5 | 6 | import org.junit.Rule; 7 | import org.junit.Test; 8 | import org.junit.runner.RunWith; 9 | 10 | import androidx.test.ext.junit.runners.AndroidJUnit4; 11 | import androidx.test.filters.LargeTest; 12 | import androidx.test.rule.ActivityTestRule; 13 | 14 | @RunWith(AndroidJUnit4.class) 15 | @LargeTest 16 | public class DetoxTest { 17 | @Rule 18 | public ActivityTestRule mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false); 19 | 20 | @Test 21 | public void runDetoxTests() { 22 | DetoxConfig detoxConfig = new DetoxConfig(); 23 | detoxConfig.idlePolicyConfig.masterTimeoutSec = 90; 24 | detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60; 25 | detoxConfig.rnContextLoadTimeoutSec = (BuildConfig.DEBUG ? 180 : 60); 26 | 27 | Detox.runTests(mActivityRule, detoxConfig); 28 | } 29 | } -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /android/app/src/debug/java/com/reactnativezustandrq/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.reactnativezustandrq; 8 | 9 | import android.content.Context; 10 | import com.facebook.flipper.android.AndroidFlipperClient; 11 | import com.facebook.flipper.android.utils.FlipperUtils; 12 | import com.facebook.flipper.core.FlipperClient; 13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin; 14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin; 15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin; 16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping; 17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin; 18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor; 19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin; 20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin; 21 | import com.facebook.react.ReactInstanceEventListener; 22 | import com.facebook.react.ReactInstanceManager; 23 | import com.facebook.react.bridge.ReactContext; 24 | import com.facebook.react.modules.network.NetworkingModule; 25 | import okhttp3.OkHttpClient; 26 | 27 | /** 28 | * Class responsible of loading Flipper inside your React Native application. This is the debug 29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup. 30 | */ 31 | public class ReactNativeFlipper { 32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 33 | if (FlipperUtils.shouldEnableFlipper(context)) { 34 | final FlipperClient client = AndroidFlipperClient.getInstance(context); 35 | 36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults())); 37 | client.addPlugin(new DatabasesFlipperPlugin(context)); 38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context)); 39 | client.addPlugin(CrashReporterPlugin.getInstance()); 40 | 41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin(); 42 | NetworkingModule.setCustomClientBuilder( 43 | new NetworkingModule.CustomClientBuilder() { 44 | @Override 45 | public void apply(OkHttpClient.Builder builder) { 46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); 47 | } 48 | }); 49 | client.addPlugin(networkFlipperPlugin); 50 | client.start(); 51 | 52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized 53 | // Hence we run if after all native modules have been initialized 54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext(); 55 | if (reactContext == null) { 56 | reactInstanceManager.addReactInstanceEventListener( 57 | new ReactInstanceEventListener() { 58 | @Override 59 | public void onReactContextInitialized(ReactContext reactContext) { 60 | reactInstanceManager.removeReactInstanceEventListener(this); 61 | reactContext.runOnNativeModulesQueueThread( 62 | new Runnable() { 63 | @Override 64 | public void run() { 65 | client.addPlugin(new FrescoFlipperPlugin()); 66 | } 67 | }); 68 | } 69 | }); 70 | } else { 71 | client.addPlugin(new FrescoFlipperPlugin()); 72 | } 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/reactnativezustandrq/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.reactnativezustandrq; 2 | import android.os.Bundle; 3 | import com.facebook.react.ReactActivity; 4 | import com.facebook.react.ReactActivityDelegate; 5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 6 | import com.facebook.react.defaults.DefaultReactActivityDelegate; 7 | 8 | public class MainActivity extends ReactActivity { 9 | 10 | /** 11 | * Returns the name of the main component registered from JavaScript. This is used to schedule 12 | * rendering of the component. 13 | */ 14 | 15 | @Override 16 | protected void onCreate(Bundle savedInstanceState) { 17 | super.onCreate(null); 18 | } 19 | 20 | @Override 21 | protected String getMainComponentName() { 22 | return "ReactNativeZustandRQ"; 23 | } 24 | 25 | /** 26 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link 27 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React 28 | * (aka React 18) with two boolean flags. 29 | */ 30 | @Override 31 | protected ReactActivityDelegate createReactActivityDelegate() { 32 | return new DefaultReactActivityDelegate( 33 | this, 34 | getMainComponentName(), 35 | // If you opted-in for the New Architecture, we enable the Fabric Renderer. 36 | DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled 37 | // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18). 38 | DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/reactnativezustandrq/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.reactnativezustandrq; 2 | 3 | import android.app.Application; 4 | import com.facebook.react.PackageList; 5 | import com.facebook.react.ReactApplication; 6 | import com.facebook.react.ReactNativeHost; 7 | import com.facebook.react.ReactPackage; 8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint; 9 | import com.facebook.react.defaults.DefaultReactNativeHost; 10 | import com.facebook.soloader.SoLoader; 11 | import java.util.List; 12 | 13 | public class MainApplication extends Application implements ReactApplication { 14 | 15 | private final ReactNativeHost mReactNativeHost = 16 | new DefaultReactNativeHost(this) { 17 | @Override 18 | public boolean getUseDeveloperSupport() { 19 | return BuildConfig.DEBUG; 20 | } 21 | 22 | @Override 23 | protected List getPackages() { 24 | @SuppressWarnings("UnnecessaryLocalVariable") 25 | List packages = new PackageList(this).getPackages(); 26 | // Packages that cannot be autolinked yet can be added manually here, for example: 27 | // packages.add(new MyReactNativePackage()); 28 | return packages; 29 | } 30 | 31 | @Override 32 | protected String getJSMainModuleName() { 33 | return "index"; 34 | } 35 | 36 | @Override 37 | protected boolean isNewArchEnabled() { 38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED; 39 | } 40 | 41 | @Override 42 | protected Boolean isHermesEnabled() { 43 | return BuildConfig.IS_HERMES_ENABLED; 44 | } 45 | }; 46 | 47 | @Override 48 | public ReactNativeHost getReactNativeHost() { 49 | return mReactNativeHost; 50 | } 51 | 52 | @Override 53 | public void onCreate() { 54 | super.onCreate(); 55 | SoLoader.init(this, /* native exopackage */ false); 56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { 57 | // If you opted-in for the New Architecture, we load the native entry point for this app. 58 | DefaultNewArchitectureEntryPoint.load(); 59 | } 60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/rn_edit_text_material.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | 21 | 22 | 23 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ReactNativeZustandRQ 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/app/src/main/res/xml/network_security_config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10.0.2.2 5 | localhost 6 | 7 | -------------------------------------------------------------------------------- /android/app/src/release/java/com/reactnativezustandrq/ReactNativeFlipper.java: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Meta Platforms, Inc. and affiliates. 3 | * 4 | *

This source code is licensed under the MIT license found in the LICENSE file in the root 5 | * directory of this source tree. 6 | */ 7 | package com.reactnativezustandrq; 8 | 9 | import android.content.Context; 10 | import com.facebook.react.ReactInstanceManager; 11 | 12 | /** 13 | * Class responsible of loading Flipper inside your React Native application. This is the release 14 | * flavor of it so it's empty as we don't want to load Flipper. 15 | */ 16 | public class ReactNativeFlipper { 17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { 18 | // Do nothing as we don't want to initialize Flipper on Release. 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "33.0.0" 6 | minSdkVersion = 21 7 | compileSdkVersion = 33 8 | targetSdkVersion = 33 9 | 10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. 11 | ndkVersion = "23.1.7779620" 12 | kotlinVersion = '1.6.10' 13 | } 14 | repositories { 15 | google() 16 | mavenCentral() 17 | } 18 | dependencies { 19 | classpath("com.android.tools.build:gradle:7.3.1") 20 | classpath("com.facebook.react:react-native-gradle-plugin") 21 | classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion") 22 | } 23 | 24 | allprojects { 25 | repositories { 26 | 27 | maven { 28 | url("$rootDir/../node_modules/detox/Detox-android") 29 | } 30 | maven { url 'https://www.jitpack.io' } 31 | 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m 13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | # AndroidX package structure to make it clearer which packages are bundled with the 21 | # Android operating system, and which are packaged with your app's APK 22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 23 | android.useAndroidX=true 24 | # Automatically convert third-party libraries to use AndroidX 25 | android.enableJetifier=true 26 | 27 | # Version of flipper SDK to use with React Native 28 | FLIPPER_VERSION=0.125.0 29 | 30 | # Use this property to specify which architecture you want to build. 31 | # You can also override it from the CLI using 32 | # ./gradlew -PreactNativeArchitectures=x86_64 33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 34 | 35 | # Use this property to enable support to the new architecture. 36 | # This will allow you to use TurboModules and the Fabric render in 37 | # your application. You should enable this flag either if you want 38 | # to write custom TurboModules/Fabric components OR use libraries that 39 | # are providing them. 40 | newArchEnabled=false 41 | 42 | # Use this property to enable or disable the Hermes JS engine. 43 | # If set to false, you will be using JSC instead. 44 | hermesEnabled=true 45 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ReactNativeZustandRQ' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | includeBuild('../node_modules/react-native-gradle-plugin') 5 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeZustandRQ", 3 | "displayName": "ReactNativeZustandRQ" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('ts-jest').JestConfigWithTsJest} */ 2 | module.exports = { 3 | presets: ['module:metro-react-native-babel-preset'], 4 | }; 5 | -------------------------------------------------------------------------------- /docs/basket-screen-overview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/docs/basket-screen-overview.gif -------------------------------------------------------------------------------- /docs/coverage-ss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/docs/coverage-ss.png -------------------------------------------------------------------------------- /docs/e2e-android.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/docs/e2e-android.mp4 -------------------------------------------------------------------------------- /docs/e2e-iOS.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/docs/e2e-iOS.mp4 -------------------------------------------------------------------------------- /docs/product-detail-overview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/docs/product-detail-overview.gif -------------------------------------------------------------------------------- /docs/product-list-screen-overview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/docs/product-list-screen-overview.gif -------------------------------------------------------------------------------- /e2e/jest.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('@jest/types').Config.InitialOptions} */ 2 | module.exports = { 3 | rootDir: '..', 4 | testMatch: ['/e2e/**/*.test.js'], 5 | testTimeout: 120000, 6 | maxWorkers: 1, 7 | globalSetup: 'detox/runners/jest/globalSetup', 8 | globalTeardown: 'detox/runners/jest/globalTeardown', 9 | reporters: ['detox/runners/jest/reporter'], 10 | testEnvironment: 'detox/runners/jest/testEnvironment', 11 | verbose: true, 12 | }; 13 | -------------------------------------------------------------------------------- /e2e/starter.test.js: -------------------------------------------------------------------------------- 1 | describe('Example', () => { 2 | beforeAll(async () => { 3 | await device.launchApp({ 4 | newInstance: true, 5 | }); 6 | }); 7 | 8 | beforeEach(async () => { 9 | await device.reloadReactNative(); 10 | }); 11 | 12 | test('complete app flow', async () => { 13 | // wait for product flat list to be visible with timeout of 6000ms 14 | // 6000ms can vary depending on the network, since we fetch the data from https://fakestoreapi.com 15 | // and server might not be stable all the time 16 | await waitFor(element(by.id('product-list-flat-list'))) 17 | .toBeVisible() 18 | .withTimeout(6000); 19 | 20 | // it expects first product list card to be visible 21 | await expect(element(by.id('product-list-card-1'))).toBeVisible(); 22 | 23 | // scroll to the end of the product list 24 | await element(by.id('product-list-flat-list')).scrollTo('bottom'); 25 | 26 | // it expects last item of the product list to be visible after scrolling to the bottom 27 | await expect(element(by.id('product-list-card-20'))).toBeVisible(); 28 | 29 | // scroll to top of the product list 30 | await element(by.id('product-list-flat-list')).scrollTo('top'); 31 | 32 | // tap heart button of the first product list item in order to add product to the basket 33 | await element(by.id('basket-button-1')).tap(); 34 | 35 | // tap heart button of the third product list item in order to add product to the basket 36 | await element(by.id('basket-button-3')).tap(); 37 | 38 | // tap basket icon in order to navigate to basket screen 39 | await element(by.id('basket-icon')).tap(); 40 | 41 | // it expects basket card of first product to be visible 42 | await waitFor(element(by.id('basket-card-1'))) 43 | .toBeVisible() 44 | .withTimeout(1000); 45 | 46 | // it expects basket card of third product to be visible 47 | await expect(element(by.id('basket-card-3'))).toBeVisible(); 48 | 49 | // increase quantity of the first product item by tapping + button in basket screen 50 | await element(by.id('increase-quantity-btn-1')).tap(); 51 | 52 | // increase quantity of the first product item by tapping + button in basket screen 53 | await element(by.id('increase-quantity-btn-1')).tap(); 54 | 55 | // it expects first product's quantity toggler component to have text of 3 56 | // since it has been added in product list with count of 1, and its quantity is increased by 2 in the basket screen/above 57 | await expect(element(by.id('quantity-toggler-value-1'))).toHaveText('3'); 58 | 59 | // decrease first product quantity 60 | await element(by.id('decrease-quantity-btn-1')).tap(); 61 | 62 | // it expects first product's quantity toggler component to have text of 2 since it is decreased by 1 above 63 | await expect(element(by.id('quantity-toggler-value-1'))).toHaveText('2'); 64 | 65 | // increase quantity of the third product item by tapping + button in basket screen 66 | await element(by.id('increase-quantity-btn-3')).tap(); 67 | 68 | // increase quantity of the third product item by tapping + button in basket screen 69 | await element(by.id('increase-quantity-btn-3')).tap(); 70 | 71 | // it expects third product's quantity toggler component to have text of 3 72 | await expect(element(by.id('quantity-toggler-value-3'))).toHaveText('3'); 73 | 74 | // decrease quantity of the third product item by tapping - button in basket screen 75 | await element(by.id('decrease-quantity-btn-3')).tap(); 76 | 77 | // decrease quantity of the third product item by tapping - button in basket screen 78 | await element(by.id('decrease-quantity-btn-3')).tap(); 79 | 80 | // decrease quantity of the third product item by tapping - button in basket screen 81 | await element(by.id('decrease-quantity-btn-3')).tap(); 82 | 83 | // third product item is removed from the basket since its quantity its decreased by 3 times above 84 | await waitFor(element(by.id('basket-card-3'))) 85 | .not.toBeVisible() 86 | .withTimeout(1000); 87 | 88 | // tap basket screen delete icon in the header right 89 | await element(by.id('basket-delete-icon')).tap(); 90 | 91 | // it expects your basket is empty text to be visible after tapping basket delete icon 92 | await waitFor(element(by.text('Your basket is empty'))) 93 | .toBeVisible() 94 | .withTimeout(1000); 95 | 96 | // tap basket screen header left to navigate back 97 | await element(by.id('basket-screen-header-left-btn')).tap(); 98 | 99 | // it expects fourth product list item to be visible 100 | await waitFor(element(by.id('product-list-card-4'))) 101 | .toBeVisible() 102 | .withTimeout(700); 103 | 104 | // tap fourth product list item 105 | await element(by.id('product-list-card-4')).tap(); 106 | 107 | // it expects product detail image to be visible after tapping to the product item 108 | await waitFor(element(by.id('product-detail-image'))) 109 | .toBeVisible() 110 | .withTimeout(700); 111 | 112 | // tap twice to increase quantity of fourth product item in product detail screen 113 | await element(by.id('increase-quantity-btn-4')).tap(); 114 | await element(by.id('increase-quantity-btn-4')).tap(); 115 | 116 | // it expects fourth product's quantity toggler component to have text of 1 117 | await expect(element(by.id('quantity-toggler-value-4'))).toHaveText('2'); 118 | 119 | // tap to decrease quantity of fourth product item in product detail screen 120 | await element(by.id('decrease-quantity-btn-4')).tap(); 121 | 122 | // it expects fourth product's quantity toggler component to have text of 1 123 | await expect(element(by.id('quantity-toggler-value-4'))).toHaveText('1'); 124 | 125 | // tap go to basket button in order to navigate to basket screen from product detail screen 126 | await element(by.id('product-detail-go-to-basket-btn')).tap(); 127 | 128 | // it expects fourth product item basket card to be visible since it has been added to the basket in above 129 | await waitFor(element(by.id('basket-card-4'))) 130 | .toBeVisible() 131 | .withTimeout(1000); 132 | 133 | // it expects fourth product's quantity toggler component to have text of 1 in the basket screen 134 | await expect(element(by.id('quantity-toggler-value-4'))).toHaveText('1'); 135 | }); 136 | }); 137 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import 'react-native-gesture-handler'; 7 | import {name as appName} from './app.json'; 8 | import {App} from './src'; 9 | 10 | AppRegistry.registerComponent(appName, () => App); 11 | -------------------------------------------------------------------------------- /ios/.xcode.env: -------------------------------------------------------------------------------- 1 | # This `.xcode.env` file is versioned and is used to source the environment 2 | # used when running script phases inside Xcode. 3 | # To customize your local environment, you can create an `.xcode.env.local` 4 | # file that is not versioned. 5 | 6 | # NODE_BINARY variable contains the PATH to the node executable. 7 | # 8 | # Customize the NODE_BINARY variable here. 9 | # For example, to use nvm with brew, add the following line 10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use 11 | export NODE_BINARY=$(command -v node) 12 | -------------------------------------------------------------------------------- /ios/Fonts/AntDesign.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/AntDesign.ttf -------------------------------------------------------------------------------- /ios/Fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Entypo.ttf -------------------------------------------------------------------------------- /ios/Fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /ios/Fonts/Feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Feather.ttf -------------------------------------------------------------------------------- /ios/Fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /ios/Fonts/FontAwesome5_Brands.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/FontAwesome5_Brands.ttf -------------------------------------------------------------------------------- /ios/Fonts/FontAwesome5_Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/FontAwesome5_Regular.ttf -------------------------------------------------------------------------------- /ios/Fonts/FontAwesome5_Solid.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/FontAwesome5_Solid.ttf -------------------------------------------------------------------------------- /ios/Fonts/Fontisto.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Fontisto.ttf -------------------------------------------------------------------------------- /ios/Fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Foundation.ttf -------------------------------------------------------------------------------- /ios/Fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Ionicons.ttf -------------------------------------------------------------------------------- /ios/Fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /ios/Fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /ios/Fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Octicons.ttf -------------------------------------------------------------------------------- /ios/Fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /ios/Fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tarikfp/react-native-testing/d49820d69fe5c8536cc12b488523a5ca50f25036/ios/Fonts/Zocial.ttf -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | platform :ios, min_ios_version_supported 5 | prepare_react_native_project! 6 | 7 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set. 8 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded 9 | # 10 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js` 11 | # ```js 12 | # module.exports = { 13 | # dependencies: { 14 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}), 15 | # ``` 16 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled 17 | 18 | linkage = ENV['USE_FRAMEWORKS'] 19 | if linkage != nil 20 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green 21 | use_frameworks! :linkage => linkage.to_sym 22 | end 23 | 24 | target 'ReactNativeZustandRQ' do 25 | config = use_native_modules! 26 | 27 | # Flags change depending on the env values. 28 | flags = get_default_flags() 29 | 30 | use_react_native!( 31 | :path => config[:reactNativePath], 32 | # Hermes is now enabled by default. Disable by setting this flag to false. 33 | # Upcoming versions of React Native may rely on get_default_flags(), but 34 | # we make it explicit here to aid in the React Native upgrade process. 35 | :hermes_enabled => flags[:hermes_enabled], 36 | :fabric_enabled => flags[:fabric_enabled], 37 | # Enables Flipper. 38 | # 39 | # Note that if you have use_frameworks! enabled, Flipper will not work and 40 | # you should disable the next line. 41 | :flipper_configuration => flipper_config, 42 | # An absolute path to your application root. 43 | :app_path => "#{Pod::Config.instance.installation_root}/.." 44 | ) 45 | 46 | target 'ReactNativeZustandRQTests' do 47 | inherit! :complete 48 | # Pods for testing 49 | end 50 | 51 | post_install do |installer| 52 | react_native_post_install( 53 | installer, 54 | # Set `mac_catalyst_enabled` to `true` in order to apply patches 55 | # necessary for Mac Catalyst builds 56 | :mac_catalyst_enabled => false 57 | ) 58 | __apply_Xcode_12_5_M1_post_install_workaround(installer) 59 | end 60 | end 61 | -------------------------------------------------------------------------------- /ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.76.0) 3 | - CocoaAsyncSocket (7.6.5) 4 | - DoubleConversion (1.1.6) 5 | - FBLazyVector (0.71.2) 6 | - FBReactNativeSpec (0.71.2): 7 | - RCT-Folly (= 2021.07.22.00) 8 | - RCTRequired (= 0.71.2) 9 | - RCTTypeSafety (= 0.71.2) 10 | - React-Core (= 0.71.2) 11 | - React-jsi (= 0.71.2) 12 | - ReactCommon/turbomodule/core (= 0.71.2) 13 | - Flipper (0.125.0): 14 | - Flipper-Folly (~> 2.6) 15 | - Flipper-RSocket (~> 1.4) 16 | - Flipper-Boost-iOSX (1.76.0.1.11) 17 | - Flipper-DoubleConversion (3.2.0.1) 18 | - Flipper-Fmt (7.1.7) 19 | - Flipper-Folly (2.6.10): 20 | - Flipper-Boost-iOSX 21 | - Flipper-DoubleConversion 22 | - Flipper-Fmt (= 7.1.7) 23 | - Flipper-Glog 24 | - libevent (~> 2.1.12) 25 | - OpenSSL-Universal (= 1.1.1100) 26 | - Flipper-Glog (0.5.0.5) 27 | - Flipper-PeerTalk (0.0.4) 28 | - Flipper-RSocket (1.4.3): 29 | - Flipper-Folly (~> 2.6) 30 | - FlipperKit (0.125.0): 31 | - FlipperKit/Core (= 0.125.0) 32 | - FlipperKit/Core (0.125.0): 33 | - Flipper (~> 0.125.0) 34 | - FlipperKit/CppBridge 35 | - FlipperKit/FBCxxFollyDynamicConvert 36 | - FlipperKit/FBDefines 37 | - FlipperKit/FKPortForwarding 38 | - SocketRocket (~> 0.6.0) 39 | - FlipperKit/CppBridge (0.125.0): 40 | - Flipper (~> 0.125.0) 41 | - FlipperKit/FBCxxFollyDynamicConvert (0.125.0): 42 | - Flipper-Folly (~> 2.6) 43 | - FlipperKit/FBDefines (0.125.0) 44 | - FlipperKit/FKPortForwarding (0.125.0): 45 | - CocoaAsyncSocket (~> 7.6) 46 | - Flipper-PeerTalk (~> 0.0.4) 47 | - FlipperKit/FlipperKitHighlightOverlay (0.125.0) 48 | - FlipperKit/FlipperKitLayoutHelpers (0.125.0): 49 | - FlipperKit/Core 50 | - FlipperKit/FlipperKitHighlightOverlay 51 | - FlipperKit/FlipperKitLayoutTextSearchable 52 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.125.0): 53 | - FlipperKit/Core 54 | - FlipperKit/FlipperKitHighlightOverlay 55 | - FlipperKit/FlipperKitLayoutHelpers 56 | - YogaKit (~> 1.18) 57 | - FlipperKit/FlipperKitLayoutPlugin (0.125.0): 58 | - FlipperKit/Core 59 | - FlipperKit/FlipperKitHighlightOverlay 60 | - FlipperKit/FlipperKitLayoutHelpers 61 | - FlipperKit/FlipperKitLayoutIOSDescriptors 62 | - FlipperKit/FlipperKitLayoutTextSearchable 63 | - YogaKit (~> 1.18) 64 | - FlipperKit/FlipperKitLayoutTextSearchable (0.125.0) 65 | - FlipperKit/FlipperKitNetworkPlugin (0.125.0): 66 | - FlipperKit/Core 67 | - FlipperKit/FlipperKitReactPlugin (0.125.0): 68 | - FlipperKit/Core 69 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.125.0): 70 | - FlipperKit/Core 71 | - FlipperKit/SKIOSNetworkPlugin (0.125.0): 72 | - FlipperKit/Core 73 | - FlipperKit/FlipperKitNetworkPlugin 74 | - fmt (6.2.1) 75 | - glog (0.3.5) 76 | - hermes-engine (0.71.2): 77 | - hermes-engine/Pre-built (= 0.71.2) 78 | - hermes-engine/Pre-built (0.71.2) 79 | - libevent (2.1.12) 80 | - OpenSSL-Universal (1.1.1100) 81 | - RCT-Folly (2021.07.22.00): 82 | - boost 83 | - DoubleConversion 84 | - fmt (~> 6.2.1) 85 | - glog 86 | - RCT-Folly/Default (= 2021.07.22.00) 87 | - RCT-Folly/Default (2021.07.22.00): 88 | - boost 89 | - DoubleConversion 90 | - fmt (~> 6.2.1) 91 | - glog 92 | - RCT-Folly/Futures (2021.07.22.00): 93 | - boost 94 | - DoubleConversion 95 | - fmt (~> 6.2.1) 96 | - glog 97 | - libevent 98 | - RCTRequired (0.71.2) 99 | - RCTTypeSafety (0.71.2): 100 | - FBLazyVector (= 0.71.2) 101 | - RCTRequired (= 0.71.2) 102 | - React-Core (= 0.71.2) 103 | - React (0.71.2): 104 | - React-Core (= 0.71.2) 105 | - React-Core/DevSupport (= 0.71.2) 106 | - React-Core/RCTWebSocket (= 0.71.2) 107 | - React-RCTActionSheet (= 0.71.2) 108 | - React-RCTAnimation (= 0.71.2) 109 | - React-RCTBlob (= 0.71.2) 110 | - React-RCTImage (= 0.71.2) 111 | - React-RCTLinking (= 0.71.2) 112 | - React-RCTNetwork (= 0.71.2) 113 | - React-RCTSettings (= 0.71.2) 114 | - React-RCTText (= 0.71.2) 115 | - React-RCTVibration (= 0.71.2) 116 | - React-callinvoker (0.71.2) 117 | - React-Codegen (0.71.2): 118 | - FBReactNativeSpec 119 | - hermes-engine 120 | - RCT-Folly 121 | - RCTRequired 122 | - RCTTypeSafety 123 | - React-Core 124 | - React-jsi 125 | - React-jsiexecutor 126 | - ReactCommon/turbomodule/bridging 127 | - ReactCommon/turbomodule/core 128 | - React-Core (0.71.2): 129 | - glog 130 | - hermes-engine 131 | - RCT-Folly (= 2021.07.22.00) 132 | - React-Core/Default (= 0.71.2) 133 | - React-cxxreact (= 0.71.2) 134 | - React-hermes 135 | - React-jsi (= 0.71.2) 136 | - React-jsiexecutor (= 0.71.2) 137 | - React-perflogger (= 0.71.2) 138 | - Yoga 139 | - React-Core/CoreModulesHeaders (0.71.2): 140 | - glog 141 | - hermes-engine 142 | - RCT-Folly (= 2021.07.22.00) 143 | - React-Core/Default 144 | - React-cxxreact (= 0.71.2) 145 | - React-hermes 146 | - React-jsi (= 0.71.2) 147 | - React-jsiexecutor (= 0.71.2) 148 | - React-perflogger (= 0.71.2) 149 | - Yoga 150 | - React-Core/Default (0.71.2): 151 | - glog 152 | - hermes-engine 153 | - RCT-Folly (= 2021.07.22.00) 154 | - React-cxxreact (= 0.71.2) 155 | - React-hermes 156 | - React-jsi (= 0.71.2) 157 | - React-jsiexecutor (= 0.71.2) 158 | - React-perflogger (= 0.71.2) 159 | - Yoga 160 | - React-Core/DevSupport (0.71.2): 161 | - glog 162 | - hermes-engine 163 | - RCT-Folly (= 2021.07.22.00) 164 | - React-Core/Default (= 0.71.2) 165 | - React-Core/RCTWebSocket (= 0.71.2) 166 | - React-cxxreact (= 0.71.2) 167 | - React-hermes 168 | - React-jsi (= 0.71.2) 169 | - React-jsiexecutor (= 0.71.2) 170 | - React-jsinspector (= 0.71.2) 171 | - React-perflogger (= 0.71.2) 172 | - Yoga 173 | - React-Core/RCTActionSheetHeaders (0.71.2): 174 | - glog 175 | - hermes-engine 176 | - RCT-Folly (= 2021.07.22.00) 177 | - React-Core/Default 178 | - React-cxxreact (= 0.71.2) 179 | - React-hermes 180 | - React-jsi (= 0.71.2) 181 | - React-jsiexecutor (= 0.71.2) 182 | - React-perflogger (= 0.71.2) 183 | - Yoga 184 | - React-Core/RCTAnimationHeaders (0.71.2): 185 | - glog 186 | - hermes-engine 187 | - RCT-Folly (= 2021.07.22.00) 188 | - React-Core/Default 189 | - React-cxxreact (= 0.71.2) 190 | - React-hermes 191 | - React-jsi (= 0.71.2) 192 | - React-jsiexecutor (= 0.71.2) 193 | - React-perflogger (= 0.71.2) 194 | - Yoga 195 | - React-Core/RCTBlobHeaders (0.71.2): 196 | - glog 197 | - hermes-engine 198 | - RCT-Folly (= 2021.07.22.00) 199 | - React-Core/Default 200 | - React-cxxreact (= 0.71.2) 201 | - React-hermes 202 | - React-jsi (= 0.71.2) 203 | - React-jsiexecutor (= 0.71.2) 204 | - React-perflogger (= 0.71.2) 205 | - Yoga 206 | - React-Core/RCTImageHeaders (0.71.2): 207 | - glog 208 | - hermes-engine 209 | - RCT-Folly (= 2021.07.22.00) 210 | - React-Core/Default 211 | - React-cxxreact (= 0.71.2) 212 | - React-hermes 213 | - React-jsi (= 0.71.2) 214 | - React-jsiexecutor (= 0.71.2) 215 | - React-perflogger (= 0.71.2) 216 | - Yoga 217 | - React-Core/RCTLinkingHeaders (0.71.2): 218 | - glog 219 | - hermes-engine 220 | - RCT-Folly (= 2021.07.22.00) 221 | - React-Core/Default 222 | - React-cxxreact (= 0.71.2) 223 | - React-hermes 224 | - React-jsi (= 0.71.2) 225 | - React-jsiexecutor (= 0.71.2) 226 | - React-perflogger (= 0.71.2) 227 | - Yoga 228 | - React-Core/RCTNetworkHeaders (0.71.2): 229 | - glog 230 | - hermes-engine 231 | - RCT-Folly (= 2021.07.22.00) 232 | - React-Core/Default 233 | - React-cxxreact (= 0.71.2) 234 | - React-hermes 235 | - React-jsi (= 0.71.2) 236 | - React-jsiexecutor (= 0.71.2) 237 | - React-perflogger (= 0.71.2) 238 | - Yoga 239 | - React-Core/RCTSettingsHeaders (0.71.2): 240 | - glog 241 | - hermes-engine 242 | - RCT-Folly (= 2021.07.22.00) 243 | - React-Core/Default 244 | - React-cxxreact (= 0.71.2) 245 | - React-hermes 246 | - React-jsi (= 0.71.2) 247 | - React-jsiexecutor (= 0.71.2) 248 | - React-perflogger (= 0.71.2) 249 | - Yoga 250 | - React-Core/RCTTextHeaders (0.71.2): 251 | - glog 252 | - hermes-engine 253 | - RCT-Folly (= 2021.07.22.00) 254 | - React-Core/Default 255 | - React-cxxreact (= 0.71.2) 256 | - React-hermes 257 | - React-jsi (= 0.71.2) 258 | - React-jsiexecutor (= 0.71.2) 259 | - React-perflogger (= 0.71.2) 260 | - Yoga 261 | - React-Core/RCTVibrationHeaders (0.71.2): 262 | - glog 263 | - hermes-engine 264 | - RCT-Folly (= 2021.07.22.00) 265 | - React-Core/Default 266 | - React-cxxreact (= 0.71.2) 267 | - React-hermes 268 | - React-jsi (= 0.71.2) 269 | - React-jsiexecutor (= 0.71.2) 270 | - React-perflogger (= 0.71.2) 271 | - Yoga 272 | - React-Core/RCTWebSocket (0.71.2): 273 | - glog 274 | - hermes-engine 275 | - RCT-Folly (= 2021.07.22.00) 276 | - React-Core/Default (= 0.71.2) 277 | - React-cxxreact (= 0.71.2) 278 | - React-hermes 279 | - React-jsi (= 0.71.2) 280 | - React-jsiexecutor (= 0.71.2) 281 | - React-perflogger (= 0.71.2) 282 | - Yoga 283 | - React-CoreModules (0.71.2): 284 | - RCT-Folly (= 2021.07.22.00) 285 | - RCTTypeSafety (= 0.71.2) 286 | - React-Codegen (= 0.71.2) 287 | - React-Core/CoreModulesHeaders (= 0.71.2) 288 | - React-jsi (= 0.71.2) 289 | - React-RCTBlob 290 | - React-RCTImage (= 0.71.2) 291 | - ReactCommon/turbomodule/core (= 0.71.2) 292 | - React-cxxreact (0.71.2): 293 | - boost (= 1.76.0) 294 | - DoubleConversion 295 | - glog 296 | - hermes-engine 297 | - RCT-Folly (= 2021.07.22.00) 298 | - React-callinvoker (= 0.71.2) 299 | - React-jsi (= 0.71.2) 300 | - React-jsinspector (= 0.71.2) 301 | - React-logger (= 0.71.2) 302 | - React-perflogger (= 0.71.2) 303 | - React-runtimeexecutor (= 0.71.2) 304 | - React-hermes (0.71.2): 305 | - DoubleConversion 306 | - glog 307 | - hermes-engine 308 | - RCT-Folly (= 2021.07.22.00) 309 | - RCT-Folly/Futures (= 2021.07.22.00) 310 | - React-cxxreact (= 0.71.2) 311 | - React-jsi 312 | - React-jsiexecutor (= 0.71.2) 313 | - React-jsinspector (= 0.71.2) 314 | - React-perflogger (= 0.71.2) 315 | - React-jsi (0.71.2): 316 | - boost (= 1.76.0) 317 | - DoubleConversion 318 | - glog 319 | - hermes-engine 320 | - RCT-Folly (= 2021.07.22.00) 321 | - React-jsiexecutor (0.71.2): 322 | - DoubleConversion 323 | - glog 324 | - hermes-engine 325 | - RCT-Folly (= 2021.07.22.00) 326 | - React-cxxreact (= 0.71.2) 327 | - React-jsi (= 0.71.2) 328 | - React-perflogger (= 0.71.2) 329 | - React-jsinspector (0.71.2) 330 | - React-logger (0.71.2): 331 | - glog 332 | - react-native-safe-area-context (4.5.0): 333 | - RCT-Folly 334 | - RCTRequired 335 | - RCTTypeSafety 336 | - React-Core 337 | - ReactCommon/turbomodule/core 338 | - React-perflogger (0.71.2) 339 | - React-RCTActionSheet (0.71.2): 340 | - React-Core/RCTActionSheetHeaders (= 0.71.2) 341 | - React-RCTAnimation (0.71.2): 342 | - RCT-Folly (= 2021.07.22.00) 343 | - RCTTypeSafety (= 0.71.2) 344 | - React-Codegen (= 0.71.2) 345 | - React-Core/RCTAnimationHeaders (= 0.71.2) 346 | - React-jsi (= 0.71.2) 347 | - ReactCommon/turbomodule/core (= 0.71.2) 348 | - React-RCTAppDelegate (0.71.2): 349 | - RCT-Folly 350 | - RCTRequired 351 | - RCTTypeSafety 352 | - React-Core 353 | - ReactCommon/turbomodule/core 354 | - React-RCTBlob (0.71.2): 355 | - hermes-engine 356 | - RCT-Folly (= 2021.07.22.00) 357 | - React-Codegen (= 0.71.2) 358 | - React-Core/RCTBlobHeaders (= 0.71.2) 359 | - React-Core/RCTWebSocket (= 0.71.2) 360 | - React-jsi (= 0.71.2) 361 | - React-RCTNetwork (= 0.71.2) 362 | - ReactCommon/turbomodule/core (= 0.71.2) 363 | - React-RCTImage (0.71.2): 364 | - RCT-Folly (= 2021.07.22.00) 365 | - RCTTypeSafety (= 0.71.2) 366 | - React-Codegen (= 0.71.2) 367 | - React-Core/RCTImageHeaders (= 0.71.2) 368 | - React-jsi (= 0.71.2) 369 | - React-RCTNetwork (= 0.71.2) 370 | - ReactCommon/turbomodule/core (= 0.71.2) 371 | - React-RCTLinking (0.71.2): 372 | - React-Codegen (= 0.71.2) 373 | - React-Core/RCTLinkingHeaders (= 0.71.2) 374 | - React-jsi (= 0.71.2) 375 | - ReactCommon/turbomodule/core (= 0.71.2) 376 | - React-RCTNetwork (0.71.2): 377 | - RCT-Folly (= 2021.07.22.00) 378 | - RCTTypeSafety (= 0.71.2) 379 | - React-Codegen (= 0.71.2) 380 | - React-Core/RCTNetworkHeaders (= 0.71.2) 381 | - React-jsi (= 0.71.2) 382 | - ReactCommon/turbomodule/core (= 0.71.2) 383 | - React-RCTSettings (0.71.2): 384 | - RCT-Folly (= 2021.07.22.00) 385 | - RCTTypeSafety (= 0.71.2) 386 | - React-Codegen (= 0.71.2) 387 | - React-Core/RCTSettingsHeaders (= 0.71.2) 388 | - React-jsi (= 0.71.2) 389 | - ReactCommon/turbomodule/core (= 0.71.2) 390 | - React-RCTText (0.71.2): 391 | - React-Core/RCTTextHeaders (= 0.71.2) 392 | - React-RCTVibration (0.71.2): 393 | - RCT-Folly (= 2021.07.22.00) 394 | - React-Codegen (= 0.71.2) 395 | - React-Core/RCTVibrationHeaders (= 0.71.2) 396 | - React-jsi (= 0.71.2) 397 | - ReactCommon/turbomodule/core (= 0.71.2) 398 | - React-runtimeexecutor (0.71.2): 399 | - React-jsi (= 0.71.2) 400 | - ReactCommon/turbomodule/bridging (0.71.2): 401 | - DoubleConversion 402 | - glog 403 | - hermes-engine 404 | - RCT-Folly (= 2021.07.22.00) 405 | - React-callinvoker (= 0.71.2) 406 | - React-Core (= 0.71.2) 407 | - React-cxxreact (= 0.71.2) 408 | - React-jsi (= 0.71.2) 409 | - React-logger (= 0.71.2) 410 | - React-perflogger (= 0.71.2) 411 | - ReactCommon/turbomodule/core (0.71.2): 412 | - DoubleConversion 413 | - glog 414 | - hermes-engine 415 | - RCT-Folly (= 2021.07.22.00) 416 | - React-callinvoker (= 0.71.2) 417 | - React-Core (= 0.71.2) 418 | - React-cxxreact (= 0.71.2) 419 | - React-jsi (= 0.71.2) 420 | - React-logger (= 0.71.2) 421 | - React-perflogger (= 0.71.2) 422 | - RNGestureHandler (2.9.0): 423 | - React-Core 424 | - RNScreens (3.19.0): 425 | - React-Core 426 | - React-RCTImage 427 | - SocketRocket (0.6.0) 428 | - Yoga (1.14.0) 429 | - YogaKit (1.18.1): 430 | - Yoga (~> 1.14) 431 | 432 | DEPENDENCIES: 433 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 434 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 435 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 436 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 437 | - Flipper (= 0.125.0) 438 | - Flipper-Boost-iOSX (= 1.76.0.1.11) 439 | - Flipper-DoubleConversion (= 3.2.0.1) 440 | - Flipper-Fmt (= 7.1.7) 441 | - Flipper-Folly (= 2.6.10) 442 | - Flipper-Glog (= 0.5.0.5) 443 | - Flipper-PeerTalk (= 0.0.4) 444 | - Flipper-RSocket (= 1.4.3) 445 | - FlipperKit (= 0.125.0) 446 | - FlipperKit/Core (= 0.125.0) 447 | - FlipperKit/CppBridge (= 0.125.0) 448 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.125.0) 449 | - FlipperKit/FBDefines (= 0.125.0) 450 | - FlipperKit/FKPortForwarding (= 0.125.0) 451 | - FlipperKit/FlipperKitHighlightOverlay (= 0.125.0) 452 | - FlipperKit/FlipperKitLayoutPlugin (= 0.125.0) 453 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.125.0) 454 | - FlipperKit/FlipperKitNetworkPlugin (= 0.125.0) 455 | - FlipperKit/FlipperKitReactPlugin (= 0.125.0) 456 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0) 457 | - FlipperKit/SKIOSNetworkPlugin (= 0.125.0) 458 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 459 | - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`) 460 | - libevent (~> 2.1.12) 461 | - OpenSSL-Universal (= 1.1.1100) 462 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 463 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 464 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 465 | - React (from `../node_modules/react-native/`) 466 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 467 | - React-Codegen (from `build/generated/ios`) 468 | - React-Core (from `../node_modules/react-native/`) 469 | - React-Core/DevSupport (from `../node_modules/react-native/`) 470 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 471 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 472 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 473 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`) 474 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 475 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 476 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 477 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 478 | - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) 479 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 480 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 481 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 482 | - React-RCTAppDelegate (from `../node_modules/react-native/Libraries/AppDelegate`) 483 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 484 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 485 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 486 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 487 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 488 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 489 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 490 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 491 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 492 | - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) 493 | - RNScreens (from `../node_modules/react-native-screens`) 494 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 495 | 496 | SPEC REPOS: 497 | trunk: 498 | - CocoaAsyncSocket 499 | - Flipper 500 | - Flipper-Boost-iOSX 501 | - Flipper-DoubleConversion 502 | - Flipper-Fmt 503 | - Flipper-Folly 504 | - Flipper-Glog 505 | - Flipper-PeerTalk 506 | - Flipper-RSocket 507 | - FlipperKit 508 | - fmt 509 | - libevent 510 | - OpenSSL-Universal 511 | - SocketRocket 512 | - YogaKit 513 | 514 | EXTERNAL SOURCES: 515 | boost: 516 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 517 | DoubleConversion: 518 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 519 | FBLazyVector: 520 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 521 | FBReactNativeSpec: 522 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 523 | glog: 524 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 525 | hermes-engine: 526 | :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" 527 | RCT-Folly: 528 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 529 | RCTRequired: 530 | :path: "../node_modules/react-native/Libraries/RCTRequired" 531 | RCTTypeSafety: 532 | :path: "../node_modules/react-native/Libraries/TypeSafety" 533 | React: 534 | :path: "../node_modules/react-native/" 535 | React-callinvoker: 536 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 537 | React-Codegen: 538 | :path: build/generated/ios 539 | React-Core: 540 | :path: "../node_modules/react-native/" 541 | React-CoreModules: 542 | :path: "../node_modules/react-native/React/CoreModules" 543 | React-cxxreact: 544 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 545 | React-hermes: 546 | :path: "../node_modules/react-native/ReactCommon/hermes" 547 | React-jsi: 548 | :path: "../node_modules/react-native/ReactCommon/jsi" 549 | React-jsiexecutor: 550 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 551 | React-jsinspector: 552 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 553 | React-logger: 554 | :path: "../node_modules/react-native/ReactCommon/logger" 555 | react-native-safe-area-context: 556 | :path: "../node_modules/react-native-safe-area-context" 557 | React-perflogger: 558 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 559 | React-RCTActionSheet: 560 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 561 | React-RCTAnimation: 562 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 563 | React-RCTAppDelegate: 564 | :path: "../node_modules/react-native/Libraries/AppDelegate" 565 | React-RCTBlob: 566 | :path: "../node_modules/react-native/Libraries/Blob" 567 | React-RCTImage: 568 | :path: "../node_modules/react-native/Libraries/Image" 569 | React-RCTLinking: 570 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 571 | React-RCTNetwork: 572 | :path: "../node_modules/react-native/Libraries/Network" 573 | React-RCTSettings: 574 | :path: "../node_modules/react-native/Libraries/Settings" 575 | React-RCTText: 576 | :path: "../node_modules/react-native/Libraries/Text" 577 | React-RCTVibration: 578 | :path: "../node_modules/react-native/Libraries/Vibration" 579 | React-runtimeexecutor: 580 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 581 | ReactCommon: 582 | :path: "../node_modules/react-native/ReactCommon" 583 | RNGestureHandler: 584 | :path: "../node_modules/react-native-gesture-handler" 585 | RNScreens: 586 | :path: "../node_modules/react-native-screens" 587 | Yoga: 588 | :path: "../node_modules/react-native/ReactCommon/yoga" 589 | 590 | SPEC CHECKSUMS: 591 | boost: 57d2868c099736d80fcd648bf211b4431e51a558 592 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 593 | DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 594 | FBLazyVector: d58428b28fe1f5070fe993495b0e2eaf701d3820 595 | FBReactNativeSpec: 225fb0f0ab00493ce0731f954da3658638d9b191 596 | Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 597 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c 598 | Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 599 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b 600 | Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3 601 | Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446 602 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 603 | Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 604 | FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86 605 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 606 | glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b 607 | hermes-engine: 6351580c827b3b03e5f25aadcf989f582d0b0a86 608 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 609 | OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c 610 | RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 611 | RCTRequired: c154ebcfbf41d6fef86c52674fc1aa08837ff538 612 | RCTTypeSafety: 3063e5a1e5b1dc2cbeda5c8f8926c0ad1a6b0871 613 | React: 0a1a36e8e81cfaac244ed88b97f23ab56e5434f0 614 | React-callinvoker: 679a09fbfe1a8bbf0c8588b588bf3ef85e7e4922 615 | React-Codegen: 78f8966839f22b54d3303a6aca2679bce5723c3f 616 | React-Core: 679e5ff1eb0e3122463976d0b2049bebcb7b33d6 617 | React-CoreModules: 06cbf15185e6daf9fb3aec02c963f4807bd794b3 618 | React-cxxreact: 645dc75c9deba4c15698b1b5902236d6a766461f 619 | React-hermes: bc7bcfeaaa7cb98dc9f9252f2f3eca66f06f01e2 620 | React-jsi: 82625f9f1f8d7abf716d897612a9ea06ecf6db6e 621 | React-jsiexecutor: c7e028406112db456ac3cf5720d266bc7bc20938 622 | React-jsinspector: ea8101acf525ec08b2d87ddf0637d45f8e3b4148 623 | React-logger: 97987f46779d8dd24656474ad0c43a5b459f31d6 624 | react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc 625 | React-perflogger: c7ccda3d1d1da837f7ff4e54e816022a6803ee87 626 | React-RCTActionSheet: 01c125aebbad462a24228f68c584c7a921d6c28e 627 | React-RCTAnimation: 5277a9440acffc4a5b7baa6ae3880fe467277ae6 628 | React-RCTAppDelegate: 3977201606125157aa94872b4171ca316478939b 629 | React-RCTBlob: 8e15fc9091d8947f406ba706f11505b38b1b5e40 630 | React-RCTImage: 65319acfe82b85219b2d410725a593abe19ac795 631 | React-RCTLinking: a5fc2b9d7a346d6e7d34de8093bb5d1064042508 632 | React-RCTNetwork: 5d1efcd01ca7f08ebf286d68be544f747a5d315a 633 | React-RCTSettings: fa760b0add819ac3ad73b06715f9547316acdf20 634 | React-RCTText: 05c244b135d75d4395eb35c012949a5326f8ab70 635 | React-RCTVibration: 0af3babdeee1b2d052811a2f86977d1e1c81ebd1 636 | React-runtimeexecutor: 4bf9a9086d27f74065fce1dddac274aa95216952 637 | ReactCommon: f697c0ac52e999aa818e43e2b6f277787c735e2d 638 | RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39 639 | RNScreens: ea4cd3a853063cda19a4e3c28d2e52180c80f4eb 640 | SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 641 | Yoga: 5b0304b3dbef2b52e078052138e23a19c7dacaef 642 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 643 | 644 | PODFILE CHECKSUM: 68ecd9fd2234bdcaf3ffaf9aedc6e34cda522714 645 | 646 | COCOAPODS: 1.11.3 647 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ.xcodeproj/xcshareddata/xcschemes/ReactNativeZustandRQ.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 33 | 39 | 40 | 41 | 42 | 43 | 53 | 55 | 61 | 62 | 63 | 64 | 70 | 72 | 78 | 79 | 80 | 81 | 83 | 84 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : RCTAppDelegate 5 | 6 | @end 7 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/AppDelegate.mm: -------------------------------------------------------------------------------- 1 | #import "AppDelegate.h" 2 | 3 | #import 4 | 5 | @implementation AppDelegate 6 | 7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 8 | { 9 | self.moduleName = @"ReactNativeZustandRQ"; 10 | // You can add your custom initial props in the dictionary below. 11 | // They will be passed down to the ViewController used by React Native. 12 | self.initialProps = @{}; 13 | 14 | return [super application:application didFinishLaunchingWithOptions:launchOptions]; 15 | } 16 | 17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 18 | { 19 | #if DEBUG 20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]; 21 | #else 22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 23 | #endif 24 | } 25 | 26 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off. 27 | /// 28 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html 29 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture). 30 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`. 31 | - (BOOL)concurrentRootEnabled 32 | { 33 | return true; 34 | } 35 | 36 | @end 37 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "scale" : "2x", 6 | "size" : "20x20" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "scale" : "3x", 11 | "size" : "20x20" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "scale" : "2x", 16 | "size" : "29x29" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "scale" : "3x", 21 | "size" : "29x29" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "scale" : "2x", 26 | "size" : "40x40" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "scale" : "3x", 31 | "size" : "40x40" 32 | }, 33 | { 34 | "idiom" : "iphone", 35 | "scale" : "2x", 36 | "size" : "60x60" 37 | }, 38 | { 39 | "idiom" : "iphone", 40 | "scale" : "3x", 41 | "size" : "60x60" 42 | }, 43 | { 44 | "idiom" : "ios-marketing", 45 | "scale" : "1x", 46 | "size" : "1024x1024" 47 | } 48 | ], 49 | "info" : { 50 | "author" : "xcode", 51 | "version" : 1 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | ReactNativeZustandRQ 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | $(MARKETING_VERSION) 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | $(CURRENT_PROJECT_VERSION) 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSExceptionDomains 30 | 31 | localhost 32 | 33 | NSExceptionAllowsInsecureHTTPLoads 34 | 35 | 36 | 37 | 38 | NSLocationWhenInUseUsageDescription 39 | 40 | UILaunchStoryboardName 41 | LaunchScreen 42 | UIRequiredDeviceCapabilities 43 | 44 | armv7 45 | 46 | UIAppFonts 47 | 48 | AntDesign.ttf 49 | Entypo.ttf 50 | EvilIcons.ttf 51 | Feather.ttf 52 | FontAwesome.ttf 53 | FontAwesome5_Brands.ttf 54 | FontAwesome5_Regular.ttf 55 | FontAwesome5_Solid.ttf 56 | Foundation.ttf 57 | Ionicons.ttf 58 | MaterialIcons.ttf 59 | MaterialCommunityIcons.ttf 60 | SimpleLineIcons.ttf 61 | Octicons.ttf 62 | Zocial.ttf 63 | Fontisto.ttf 64 | 65 | UISupportedInterfaceOrientations 66 | 67 | UIInterfaceOrientationPortrait 68 | UIInterfaceOrientationLandscapeLeft 69 | UIInterfaceOrientationLandscapeRight 70 | 71 | UIViewControllerBasedStatusBarAppearance 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQ/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | @autoreleasepool { 8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/ReactNativeZustandRQTests/ReactNativeZustandRQTests.m: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | #import 5 | #import 6 | 7 | #define TIMEOUT_SECONDS 600 8 | #define TEXT_TO_LOOK_FOR @"Welcome to React" 9 | 10 | @interface ReactNativeZustandRQTests : XCTestCase 11 | 12 | @end 13 | 14 | @implementation ReactNativeZustandRQTests 15 | 16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test 17 | { 18 | if (test(view)) { 19 | return YES; 20 | } 21 | for (UIView *subview in [view subviews]) { 22 | if ([self findSubviewInView:subview matching:test]) { 23 | return YES; 24 | } 25 | } 26 | return NO; 27 | } 28 | 29 | - (void)testRendersWelcomeScreen 30 | { 31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 33 | BOOL foundElement = NO; 34 | 35 | __block NSString *redboxError = nil; 36 | #ifdef DEBUG 37 | RCTSetLogFunction( 38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 39 | if (level >= RCTLogLevelError) { 40 | redboxError = message; 41 | } 42 | }); 43 | #endif 44 | 45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 48 | 49 | foundElement = [self findSubviewInView:vc.view 50 | matching:^BOOL(UIView *view) { 51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 52 | return YES; 53 | } 54 | return NO; 55 | }]; 56 | } 57 | 58 | #ifdef DEBUG 59 | RCTSetLogFunction(RCTDefaultLogFunction); 60 | #endif 61 | 62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 64 | } 65 | 66 | @end 67 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const {defaults: tsjPreset} = require('ts-jest/presets'); 2 | 3 | /** @type {import('ts-jest').JestConfigWithTsJest} */ 4 | module.exports = { 5 | preset: 'react-native', 6 | transform: { 7 | '^.+\\.jsx$': 'babel-jest', 8 | '^.+\\.tsx?$': [ 9 | 'ts-jest', 10 | { 11 | tsconfig: 'tsconfig.spec.json', 12 | }, 13 | ], 14 | }, 15 | testMatch: ['/src/**/?(*.)+(spec|test).[jt]s?(x)'], 16 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], 17 | collectCoverage: true, 18 | collectCoverageFrom: ['./src/screens/**/*.tsx', './src/store/**/*.ts'], 19 | setupFilesAfterEnv: [ 20 | './jest.setup.ts', 21 | '@testing-library/jest-native/extend-expect', 22 | ], 23 | transformIgnorePatterns: [ 24 | `node_modules/(?!(${[ 25 | 'react-native-vector-icons', 26 | 'react-native', 27 | '@react-native', 28 | '@react-navigation/elements', 29 | ].join('|')})/)`, 30 | ], 31 | }; 32 | -------------------------------------------------------------------------------- /jest.setup.ts: -------------------------------------------------------------------------------- 1 | import 'react-native-gesture-handler/jestSetup'; 2 | import {mswServer} from './__mocks__/msw/handlers'; 3 | 4 | jest.useFakeTimers(); 5 | 6 | // https://mswjs.io/docs/getting-started/integrate/node#setup 7 | 8 | // Establish API mocking before all tests. 9 | beforeAll(() => mswServer.listen()); 10 | // Reset any request handlers that we may add during the tests, 11 | // so they don't affect other tests. 12 | afterEach(() => mswServer.resetHandlers()); 13 | // Clean up after the tests are finished. 14 | afterAll(() => mswServer.close()); 15 | 16 | // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing 17 | jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper'); 18 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ReactNativeZustandRQ", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "ios": "react-native run-ios", 8 | "clean": "react-native-clean-project", 9 | "lint": "eslint .", 10 | "build": "yarn run tsc", 11 | "start": "react-native start", 12 | "test": "jest", 13 | "e2e-build-ios-debug": "yarn run detox build --configuration ios.sim.debug", 14 | "e2e-test-ios-debug": "yarn run detox test --configuration ios.sim.debug", 15 | "e2e-build-android-debug": "yarn run detox build --configuration android.emu.debug", 16 | "e2e-test-android-debug": "yarn run detox test --configuration android.emu.debug" 17 | }, 18 | "dependencies": { 19 | "@react-navigation/elements": "^1.3.14", 20 | "@react-navigation/native": "^6.1.3", 21 | "@react-navigation/native-stack": "^6.9.9", 22 | "@react-navigation/stack": "^6.3.12", 23 | "axios": "^1.3.2", 24 | "react": "18.2.0", 25 | "react-native": "0.71.2", 26 | "react-native-gesture-handler": "^2.9.0", 27 | "react-native-safe-area-context": "^4.5.0", 28 | "react-native-screens": "^3.19.0", 29 | "react-native-vector-icons": "^9.2.0", 30 | "react-query": "^3.39.3", 31 | "zustand": "^4.3.2" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.20.0", 35 | "@babel/preset-env": "^7.20.0", 36 | "@babel/runtime": "^7.20.0", 37 | "@react-native-community/eslint-config": "^3.2.0", 38 | "@testing-library/jest-native": "^5.4.1", 39 | "@testing-library/react-hooks": "^8.0.1", 40 | "@testing-library/react-native": "^11.5.1", 41 | "@tsconfig/react-native": "^2.0.2", 42 | "@types/jest": "^29.4.0", 43 | "@types/react": "^18.0.24", 44 | "@types/react-native-vector-icons": "^6.4.13", 45 | "@types/react-test-renderer": "^18.0.0", 46 | "babel-jest": "^29.2.1", 47 | "detox": "^20.1.3", 48 | "eslint": "^8.19.0", 49 | "jest": "^29.4.1", 50 | "metro-react-native-babel-preset": "0.73.7", 51 | "msw": "^1.0.0", 52 | "prettier": "^2.4.1", 53 | "react-native-clean-project": "^4.0.1", 54 | "react-test-renderer": "^18.2.0", 55 | "ts-jest": "^29.0.5", 56 | "typescript": "^4.9.5" 57 | } 58 | } -------------------------------------------------------------------------------- /react-native.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dependencies: { 3 | 'react-native-vector-icons': { 4 | platforms: { 5 | ios: null, 6 | }, 7 | }, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /src/api/axios.instance.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | export const BASE_URL = 'https://fakestoreapi.com'; 4 | 5 | export const api = axios.create({ 6 | baseURL: BASE_URL, 7 | }); 8 | -------------------------------------------------------------------------------- /src/api/product/get-all-products.ts: -------------------------------------------------------------------------------- 1 | import {AxiosError} from 'axios'; 2 | import {useQuery, UseQueryOptions} from 'react-query'; 3 | import {api} from '../axios.instance'; 4 | import {productKeyFactory} from './key-factory'; 5 | import {Product} from './types'; 6 | 7 | export const getAllProducts = async () => { 8 | return (await api.get>('/products')).data; 9 | }; 10 | 11 | export const useGetAllProducts = ( 12 | options?: UseQueryOptions< 13 | Array, 14 | AxiosError, 15 | Array, 16 | readonly [string] 17 | >, 18 | ) => { 19 | return useQuery({ 20 | queryKey: [...productKeyFactory.products], 21 | queryFn: getAllProducts, 22 | ...options, 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /src/api/product/get-product-by-id.ts: -------------------------------------------------------------------------------- 1 | import {AxiosError} from 'axios'; 2 | import {useQuery, UseQueryOptions} from 'react-query'; 3 | import {api} from '../axios.instance'; 4 | import {productKeyFactory} from './key-factory'; 5 | import {Product} from './types'; 6 | 7 | export const getProductById = async (productId: number) => { 8 | return (await api.get(`/products/${productId}`)).data; 9 | }; 10 | 11 | export const useGetProductById = ( 12 | productId: number, 13 | options?: UseQueryOptions< 14 | Product, 15 | AxiosError, 16 | Product, 17 | readonly (string | number)[] 18 | >, 19 | ) => { 20 | return useQuery({ 21 | queryFn: () => getProductById(productId), 22 | queryKey: [...productKeyFactory.productById(productId)], 23 | ...options, 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /src/api/product/index.ts: -------------------------------------------------------------------------------- 1 | export {useGetAllProducts} from './get-all-products'; 2 | export {useGetProductById} from './get-product-by-id'; 3 | export type {Product, Rating} from './types'; 4 | -------------------------------------------------------------------------------- /src/api/product/key-factory.ts: -------------------------------------------------------------------------------- 1 | export const productKeyFactory = { 2 | products: ['all-products'], 3 | productById: (id: number) => [...productKeyFactory.products, id], 4 | } as const; 5 | -------------------------------------------------------------------------------- /src/api/product/types.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: number; 3 | title: string; 4 | price: number; 5 | description: string; 6 | category: string; 7 | image: string; 8 | rating: Rating; 9 | } 10 | 11 | export interface Rating { 12 | rate: number; 13 | count: number; 14 | } 15 | -------------------------------------------------------------------------------- /src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import {DefaultTheme, NavigationContainer} from '@react-navigation/native'; 4 | import {GestureHandlerRootView} from 'react-native-gesture-handler'; 5 | import {SafeAreaProvider} from 'react-native-safe-area-context'; 6 | import {QueryClient, QueryClientProvider} from 'react-query'; 7 | import ErrorBoundary from './components/error-boundary'; 8 | import ProductStack from './navigation/product-stack'; 9 | import {COMMON_STYLES} from './styles/common-styles'; 10 | 11 | export const queryClient = new QueryClient(); 12 | 13 | export default function App() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/components/basket-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Image, StyleSheet, Text, View} from 'react-native'; 3 | import {ProductInBasket} from '../store/product'; 4 | import {getPriceText} from '../utils/get-price-text'; 5 | import {getWindowHeight, getWindowWidth} from '../utils/layout'; 6 | import QuantityToggler from './quantity-toggler'; 7 | 8 | type BasketCardProps = ProductInBasket & 9 | React.ComponentProps & { 10 | testID?: string; 11 | quantityTogglerUniqueID?: string; 12 | }; 13 | 14 | const BasketCard: React.FC = ({ 15 | product: {title, image, price}, 16 | testID, 17 | quantityTogglerUniqueID, 18 | ...quantityTogglerProps 19 | }) => { 20 | return ( 21 | 22 | 23 | 28 | 29 | {title} 30 | 31 | {getPriceText(price)} 32 | 33 | 34 | 35 | 36 | 41 | 42 | ); 43 | }; 44 | 45 | export default BasketCard; 46 | 47 | const styles = StyleSheet.create({ 48 | root: { 49 | height: getWindowHeight(12.5), 50 | flexDirection: 'row', 51 | justifyContent: 'space-between', 52 | backgroundColor: '#fff', 53 | borderRadius: 8, 54 | padding: 12, 55 | alignItems: 'center', 56 | }, 57 | quantityToggler: { 58 | flex: 0.5, 59 | }, 60 | body: { 61 | flex: 1, 62 | flexDirection: 'row', 63 | height: '100%', 64 | alignItems: 'center', 65 | marginRight: 12, 66 | }, 67 | image: { 68 | width: getWindowWidth(8), 69 | height: getWindowHeight(8), 70 | marginRight: 12, 71 | }, 72 | rightContainer: { 73 | flex: 0.35, 74 | flexDirection: 'row', 75 | justifyContent: 'space-around', 76 | alignItems: 'center', 77 | }, 78 | actionBtn: { 79 | backgroundColor: '#e2e2e2', 80 | borderRadius: 8, 81 | padding: 2, 82 | }, 83 | midContainer: { 84 | flex: 1, 85 | justifyContent: 'center', 86 | height: '100%', 87 | }, 88 | priceText: { 89 | marginTop: 4, 90 | }, 91 | }); 92 | -------------------------------------------------------------------------------- /src/components/basket-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Pressable, StyleSheet, Text, View} from 'react-native'; 3 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 4 | 5 | type Props = { 6 | onPress: () => void; 7 | productCount: number; 8 | }; 9 | 10 | const BasketIcon: React.FC = ({onPress, productCount}) => { 11 | return ( 12 | 13 | {productCount > 0 && ( 14 | 15 | 18 | {productCount} 19 | 20 | 21 | )} 22 | 23 | 29 | 30 | ); 31 | }; 32 | 33 | export default BasketIcon; 34 | 35 | const styles = StyleSheet.create({ 36 | productCountText: { 37 | color: 'white', 38 | fontSize: 12, 39 | }, 40 | productCountTextContainer: { 41 | top: -6, 42 | backgroundColor: 'darkslateblue', 43 | borderRadius: 999, 44 | height: 18, 45 | justifyContent: 'center', 46 | alignItems: 'center', 47 | width: 18, 48 | right: -10, 49 | position: 'absolute', 50 | }, 51 | }); 52 | -------------------------------------------------------------------------------- /src/components/close-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Pressable} from 'react-native'; 3 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 4 | 5 | type Props = { 6 | onPress: () => void; 7 | color: string; 8 | }; 9 | 10 | const CloseIcon: React.FC = ({onPress, color}) => { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export default CloseIcon; 19 | -------------------------------------------------------------------------------- /src/components/delete-icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Pressable} from 'react-native'; 3 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 4 | 5 | type Props = { 6 | onPress: () => void; 7 | }; 8 | 9 | const DeleteIcon: React.FC = ({onPress}) => { 10 | return ( 11 | 12 | 18 | 19 | ); 20 | }; 21 | 22 | export default DeleteIcon; 23 | -------------------------------------------------------------------------------- /src/components/error-boundary.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import ErrorScreen from '../screens/error'; 3 | 4 | interface Props { 5 | children: React.ReactNode; 6 | } 7 | 8 | interface State { 9 | hasError: boolean; 10 | } 11 | 12 | class ErrorBoundary extends React.Component { 13 | constructor(props: Props) { 14 | super(props); 15 | this.state = { 16 | hasError: false, 17 | }; 18 | } 19 | 20 | public static getDerivedStateFromError(_error: Error): State { 21 | return {hasError: true}; 22 | } 23 | 24 | public componentDidCatch(_error: Error, _errorInfo: React.ErrorInfo): void {} 25 | 26 | private resetState = (): void => { 27 | this.setState({hasError: false}); 28 | }; 29 | 30 | public render(): React.ReactNode { 31 | if (this.state.hasError) { 32 | return ; 33 | } 34 | 35 | return this.props.children; 36 | } 37 | } 38 | 39 | export default ErrorBoundary; 40 | -------------------------------------------------------------------------------- /src/components/product-list-card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Dimensions, Image, Pressable, StyleSheet, Text} from 'react-native'; 3 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 4 | import {Product} from '../api/product/types'; 5 | import {getPriceText} from '../utils/get-price-text'; 6 | import {getWindowHeight, getWindowWidth} from '../utils/layout'; 7 | import Spacing from './spacing'; 8 | 9 | type Props = Product & { 10 | onPress: () => void; 11 | isInBasket?: boolean; 12 | onAddToBasketPress: () => void; 13 | testID?: string; 14 | basketButtonTestID?: string; 15 | }; 16 | 17 | const ProductListCard: React.FC = ({ 18 | title, 19 | image, 20 | price, 21 | rating, 22 | onPress, 23 | onAddToBasketPress, 24 | basketButtonTestID, 25 | isInBasket = false, 26 | testID, 27 | }) => { 28 | return ( 29 | 30 | 31 | 32 | 36 | 41 | 42 | 43 | 44 | 45 | 46 | {title} 47 | 48 | 49 | {getPriceText(price)} 50 | 51 | 52 | {rating.rate} ({rating.count}) 53 | 54 | 55 | ); 56 | }; 57 | 58 | export default ProductListCard; 59 | 60 | const styles = StyleSheet.create({ 61 | root: { 62 | backgroundColor: '#FFF', 63 | height: getWindowHeight(30), 64 | justifyContent: 'space-between', 65 | width: getWindowWidth(42.5), 66 | borderRadius: 8, 67 | padding: 16, 68 | }, 69 | heartIcon: { 70 | position: 'absolute', 71 | right: 8, 72 | top: 8, 73 | }, 74 | image: { 75 | height: getWindowHeight(Dimensions.get('window').height < 700 ? 12.5 : 15), 76 | width: getWindowWidth(35), 77 | marginTop: 6, 78 | }, 79 | title: { 80 | fontSize: 16, 81 | textAlign: 'center', 82 | }, 83 | price: { 84 | fontSize: 16, 85 | marginTop: 4, 86 | textAlign: 'center', 87 | }, 88 | }); 89 | -------------------------------------------------------------------------------- /src/components/quantity-toggler.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { 3 | StyleProp, 4 | StyleSheet, 5 | Text, 6 | TouchableOpacity, 7 | View, 8 | ViewStyle, 9 | } from 'react-native'; 10 | import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; 11 | 12 | type Props = { 13 | quantity: number; 14 | onIncreaseQuantityPress: () => void; 15 | onDecreaseQuantityPress: () => void; 16 | style?: StyleProp; 17 | uniqueID?: string; 18 | }; 19 | 20 | const QuantityToggler: React.FC = ({ 21 | quantity, 22 | onDecreaseQuantityPress, 23 | onIncreaseQuantityPress, 24 | style, 25 | uniqueID, 26 | }) => { 27 | return ( 28 | 29 | 39 | 40 | 41 | 42 | 49 | {quantity.toString()} 50 | 51 | 52 | 61 | 62 | 63 | 64 | ); 65 | }; 66 | 67 | export default QuantityToggler; 68 | 69 | const styles = StyleSheet.create({ 70 | root: { 71 | flexDirection: 'row', 72 | justifyContent: 'space-evenly', 73 | alignItems: 'center', 74 | }, 75 | actionBtn: { 76 | backgroundColor: 'darkslateblue', 77 | borderRadius: 8, 78 | padding: 2, 79 | }, 80 | disabledActionBtn: { 81 | backgroundColor: '#e1e1e1', 82 | borderRadius: 8, 83 | padding: 2, 84 | }, 85 | quantityText: { 86 | width: 50, 87 | textAlign: 'center', 88 | }, 89 | }); 90 | -------------------------------------------------------------------------------- /src/components/screen-loading.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {ActivityIndicator, View} from 'react-native'; 3 | import {COMMON_STYLES} from '../styles/common-styles'; 4 | 5 | const ScreenLoading: React.FC = () => { 6 | return ( 7 | 8 | 13 | 14 | ); 15 | }; 16 | 17 | export default ScreenLoading; 18 | -------------------------------------------------------------------------------- /src/components/spacing.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {View} from 'react-native'; 3 | 4 | type Props = { 5 | height?: number; 6 | width?: number; 7 | backgroundColor?: string; 8 | }; 9 | 10 | const Spacing: React.FC = ({ 11 | height, 12 | width, 13 | backgroundColor = '#ffff', 14 | }) => { 15 | return ; 16 | }; 17 | 18 | export default Spacing; 19 | -------------------------------------------------------------------------------- /src/hooks/useRefreshByUser.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function useRefreshByUser(refetch: any) { 4 | const [isRefetchingByUser, setIsRefetchingByUser] = React.useState(false); 5 | 6 | async function refetchByUser() { 7 | setIsRefetchingByUser(true); 8 | 9 | try { 10 | await refetch(); 11 | } finally { 12 | setIsRefetchingByUser(false); 13 | } 14 | } 15 | 16 | return { 17 | isRefetchingByUser, 18 | refetchByUser, 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export {default as App} from './app'; 2 | -------------------------------------------------------------------------------- /src/navigation/product-stack.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-unstable-nested-components */ 2 | import {HeaderBackButton} from '@react-navigation/elements'; 3 | import {createNativeStackNavigator} from '@react-navigation/native-stack'; 4 | import React from 'react'; 5 | import BasketIcon from '../components/basket-icon'; 6 | import CloseIcon from '../components/close-icon'; 7 | import {BasketScreen, ProductDetailScreen, ProductListScreen} from '../screens'; 8 | import {useProductsInBasketCount} from '../store/product'; 9 | import {RouteNames} from './route-names'; 10 | 11 | const Stack = createNativeStackNavigator(); 12 | 13 | export default function ProductStack() { 14 | const favoritedProductsCount = useProductsInBasketCount(); 15 | 16 | return ( 17 | 22 | ({ 25 | headerTitle: 'Products', 26 | headerRight: headerRightProps => ( 27 | navigation.navigate(RouteNames.basket)} 31 | /> 32 | ), 33 | })} 34 | component={ProductListScreen as React.ComponentType} 35 | /> 36 | 43 | ({ 45 | animation: 'fade_from_bottom', 46 | headerTitle: 'Basket', 47 | // Back button subview is not yet Fabric compatible in react-native-screens 48 | headerLeft: headerLeftProps => ( 49 | ( 53 | 54 | )} 55 | /> 56 | ), 57 | })} 58 | name={RouteNames.basket} 59 | component={BasketScreen as React.ComponentType} 60 | /> 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/navigation/route-names.ts: -------------------------------------------------------------------------------- 1 | export enum RouteNames { 2 | productList = 'product-list', 3 | productDetail = 'product-detail', 4 | basket = 'basket', 5 | } 6 | -------------------------------------------------------------------------------- /src/navigation/types.ts: -------------------------------------------------------------------------------- 1 | import {NativeStackScreenProps} from '@react-navigation/native-stack'; 2 | import {RouteNames} from './route-names'; 3 | 4 | export type ProductStackParamList = { 5 | [RouteNames.productList]: undefined; 6 | [RouteNames.basket]: undefined; 7 | [RouteNames.productDetail]: {id: number}; 8 | }; 9 | 10 | export type ProductListScreenProps = NativeStackScreenProps< 11 | ProductStackParamList, 12 | RouteNames.productList 13 | >; 14 | 15 | export type ProductDetailScreenProps = NativeStackScreenProps< 16 | ProductStackParamList, 17 | RouteNames.productDetail 18 | >; 19 | 20 | export type BasketScreen = NativeStackScreenProps< 21 | ProductStackParamList, 22 | RouteNames.basket 23 | >; 24 | -------------------------------------------------------------------------------- /src/screens/__tests__/basket.test.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | fireEvent, 3 | render, 4 | screen, 5 | waitFor, 6 | } from '@testing-library/react-native'; 7 | import React from 'react'; 8 | import {GET_ALL_PRODUCTS_MOCK_RESPONSE} from '../../../__mocks__/msw/mock-data'; 9 | import {useProductsInBasket} from '../../store/product'; 10 | import {getBasketTotalPrice} from '../../utils/get-basket-total-price'; 11 | import {createReactQueryWrapper} from '../../utils/testing'; 12 | import BasketScreen from '../basket'; 13 | 14 | const increaseProductQuantityInBasketMock = jest.fn(); 15 | const decreaseProductQuantityInBasketMock = jest.fn(); 16 | const addProductToBasketMock = jest.fn(); 17 | const removeProductFromBasketMock = jest.fn(); 18 | 19 | const favoritedProducts = GET_ALL_PRODUCTS_MOCK_RESPONSE.map(product => ({ 20 | product, 21 | quantity: Math.floor(Math.random() * 10) + 1, 22 | })); 23 | 24 | jest.mock('../../store/product', () => ({ 25 | useProductActions: () => ({ 26 | increaseProductQuantityInBasket: increaseProductQuantityInBasketMock, 27 | decreaseProductQuantityInBasket: decreaseProductQuantityInBasketMock, 28 | addProductToBasket: addProductToBasketMock, 29 | removeProductFromBasket: removeProductFromBasketMock, 30 | }), 31 | useProductsInBasket: jest.fn(), 32 | })); 33 | 34 | const navigateMock = jest.fn(); 35 | const setOptionsMock = jest.fn(); 36 | const navigation = {navigate: navigateMock, setOptions: setOptionsMock} as any; 37 | const route = jest.fn() as any; 38 | 39 | const component = ; 40 | 41 | describe('Basket screen', () => { 42 | it('should display all basket list data correctly', async () => { 43 | (useProductsInBasket as jest.Mock).mockImplementation( 44 | () => favoritedProducts, 45 | ); 46 | 47 | render(component, {wrapper: createReactQueryWrapper}); 48 | 49 | const eventData = { 50 | nativeEvent: { 51 | contentOffset: { 52 | y: 500, 53 | }, 54 | contentSize: { 55 | height: 500, 56 | width: 100, 57 | }, 58 | layoutMeasurement: { 59 | height: 100, 60 | width: 100, 61 | }, 62 | }, 63 | }; 64 | 65 | // first 10 item will be visible on initial render 66 | for (const { 67 | product: {id}, 68 | } of favoritedProducts.slice(0, favoritedProducts.length / 2)) { 69 | expect(await screen.getByTestId(`basket-card-${id}`)).toBeTruthy(); 70 | } 71 | 72 | // scroll down to render remaining items 73 | fireEvent.scroll(screen.getByTestId('basket-screen-flat-list'), eventData); 74 | 75 | await waitFor(async () => { 76 | for (const { 77 | product: {id}, 78 | } of favoritedProducts.slice(10, favoritedProducts.length)) { 79 | expect(await screen.getByTestId(`basket-card-${id}`)).toBeTruthy(); 80 | } 81 | }); 82 | }); 83 | 84 | it('should set navigation header right component if there is at least one item in the basket', async () => { 85 | (useProductsInBasket as jest.Mock).mockImplementation( 86 | () => favoritedProducts, 87 | ); 88 | 89 | render(component, {wrapper: createReactQueryWrapper}); 90 | 91 | expect(setOptionsMock).toHaveBeenCalled(); 92 | }); 93 | 94 | it('should display basket total price correctly', async () => { 95 | render(component, {wrapper: createReactQueryWrapper}); 96 | 97 | expect( 98 | screen.findByText(`$ ${getBasketTotalPrice(favoritedProducts)}`), 99 | ).toBeTruthy(); 100 | }); 101 | 102 | it('should not display basket total price when there is no items in the basket', async () => { 103 | (useProductsInBasket as jest.Mock).mockImplementation(() => []); 104 | 105 | render(component, {wrapper: createReactQueryWrapper}); 106 | 107 | expect( 108 | screen.queryByText(`$ ${getBasketTotalPrice(favoritedProducts)}`), 109 | ).not.toBeTruthy(); 110 | }); 111 | 112 | it('should display empty basket when there is no item in the basket', async () => { 113 | (useProductsInBasket as jest.Mock).mockImplementation(() => []); 114 | 115 | render(component, {wrapper: createReactQueryWrapper}); 116 | 117 | expect(screen.findByText(`Your basket is empty`)).toBeTruthy(); 118 | }); 119 | 120 | it('should increase quantity on pressing increase button', async () => { 121 | (useProductsInBasket as jest.Mock).mockImplementation( 122 | () => favoritedProducts, 123 | ); 124 | 125 | render(component, {wrapper: createReactQueryWrapper}); 126 | 127 | fireEvent.press(screen.getByTestId(`increase-quantity-btn-1`)); 128 | 129 | expect(increaseProductQuantityInBasketMock).toHaveBeenCalledWith( 130 | favoritedProducts[0].product.id, 131 | ); 132 | }); 133 | 134 | it('should remove the product from the basket if quantity of the product equals to 1', async () => { 135 | (useProductsInBasket as jest.Mock).mockImplementation(() => 136 | favoritedProducts.map(favoritedProduct => { 137 | // set first product quantity to 1 138 | if (favoritedProduct.product.id === 1) { 139 | return { 140 | ...favoritedProduct, 141 | product: favoritedProduct.product, 142 | quantity: 1, 143 | }; 144 | } 145 | return favoritedProduct; 146 | }), 147 | ); 148 | 149 | render(component, {wrapper: createReactQueryWrapper}); 150 | 151 | fireEvent.press(screen.getByTestId(`decrease-quantity-btn-1`)); 152 | 153 | expect(removeProductFromBasketMock).toHaveBeenCalledWith( 154 | favoritedProducts[0].product.id, 155 | ); 156 | }); 157 | 158 | it('should decrease the quantity of the product if its greater than 1', async () => { 159 | (useProductsInBasket as jest.Mock).mockImplementation(() => 160 | favoritedProducts.map(favoritedProduct => { 161 | // set first product quantity to 2 162 | if (favoritedProduct.product.id === 1) { 163 | return { 164 | ...favoritedProduct, 165 | product: favoritedProduct.product, 166 | quantity: 2, 167 | }; 168 | } 169 | return favoritedProduct; 170 | }), 171 | ); 172 | 173 | render(component, {wrapper: createReactQueryWrapper}); 174 | 175 | fireEvent.press(screen.getByTestId(`decrease-quantity-btn-1`)); 176 | 177 | expect(decreaseProductQuantityInBasketMock).toHaveBeenCalledWith( 178 | favoritedProducts[0].product.id, 179 | ); 180 | }); 181 | }); 182 | -------------------------------------------------------------------------------- /src/screens/__tests__/error.test.tsx: -------------------------------------------------------------------------------- 1 | import {fireEvent, render, screen} from '@testing-library/react-native'; 2 | import React from 'react'; 3 | import ErrorScreen from '../error'; 4 | 5 | const resetErrorMock = jest.fn(); 6 | const component = ; 7 | 8 | describe('Product list screen', () => { 9 | it('should display loading indicator on mount', async () => { 10 | render(component); 11 | 12 | expect(screen.getByText(`An error occurred...`)).toBeTruthy(); 13 | }); 14 | 15 | it('should display Go home button', async () => { 16 | render(component); 17 | 18 | expect(screen.getByText(`Go home`)).toBeTruthy(); 19 | }); 20 | 21 | it('go home button should be pressable ', async () => { 22 | render(component); 23 | 24 | fireEvent.press(screen.getByText(`Go home`)); 25 | 26 | expect(resetErrorMock).toHaveBeenCalled(); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /src/screens/__tests__/product-detail.test.tsx: -------------------------------------------------------------------------------- 1 | import {renderHook} from '@testing-library/react-hooks'; 2 | import {fireEvent, render, screen} from '@testing-library/react-native'; 3 | import React from 'react'; 4 | import {ProductDetailScreen} from '..'; 5 | import {setupGetProductByIdFailedHandler} from '../../../__mocks__/msw/handlers'; 6 | import {useGetProductById} from '../../api/product'; 7 | import {RouteNames} from '../../navigation/route-names'; 8 | import {useProductInBasketQuantityById} from '../../store/product'; 9 | import {cutString} from '../../utils/cut-string'; 10 | import {getPriceText} from '../../utils/get-price-text'; 11 | import {createReactQueryWrapper} from '../../utils/testing'; 12 | 13 | const increaseProductQuantityInBasketMock = jest.fn(); 14 | const decreaseProductQuantityInBasketMock = jest.fn(); 15 | const addProductToBasketMock = jest.fn(); 16 | const removeProductFromBasketMock = jest.fn(); 17 | 18 | jest.mock('../../store/product', () => ({ 19 | useProductActions: () => ({ 20 | increaseProductQuantityInBasket: increaseProductQuantityInBasketMock, 21 | decreaseProductQuantityInBasket: decreaseProductQuantityInBasketMock, 22 | addProductToBasket: addProductToBasketMock, 23 | removeProductFromBasket: removeProductFromBasketMock, 24 | }), 25 | useProductInBasketQuantityById: jest.fn(() => undefined), 26 | })); 27 | 28 | const navigateMock = jest.fn(); 29 | const setOptionsMock = jest.fn(); 30 | const navigation = {navigate: navigateMock, setOptions: setOptionsMock} as any; 31 | const productId = 1; 32 | const route = {params: {id: productId}} as any; 33 | 34 | const component = ; 35 | 36 | describe('Product detail screen', () => { 37 | it('should display loading indicator on mount', async () => { 38 | render(component, {wrapper: createReactQueryWrapper}); 39 | 40 | expect(screen.queryByTestId(`screen-loader`)).toBeTruthy(); 41 | 42 | const {result, waitFor} = renderHook(() => useGetProductById(productId), { 43 | wrapper: createReactQueryWrapper, 44 | }); 45 | 46 | await waitFor(() => result.current.isSuccess); 47 | }); 48 | 49 | it('should display product detail data correctly, and should set header title based on api data', async () => { 50 | // we need to render whole app stack in order to be able to get header title 51 | render(component, { 52 | wrapper: createReactQueryWrapper, 53 | }); 54 | 55 | const {result, waitFor: waitForHook} = renderHook( 56 | () => useGetProductById(productId), 57 | { 58 | wrapper: createReactQueryWrapper, 59 | }, 60 | ); 61 | 62 | await waitForHook(() => result.current.isSuccess); 63 | 64 | expect(setOptionsMock).toHaveBeenCalledWith({ 65 | headerTitle: cutString(result.current.data!.title), 66 | }); 67 | 68 | expect(screen.getByTestId(`product-detail-scroll-view`)).toBeTruthy(); 69 | 70 | expect(screen.getByTestId('product-detail-image').props.source.uri).toBe( 71 | result.current.data!.image, 72 | ); 73 | 74 | expect(screen.getByText(result.current.data!.title)).toBeTruthy(); 75 | 76 | expect(screen.getByText(result.current.data!.description)).toBeTruthy(); 77 | }); 78 | 79 | it('should display error text in case get all products query fails', async () => { 80 | setupGetProductByIdFailedHandler(); 81 | 82 | render(component, {wrapper: createReactQueryWrapper}); 83 | 84 | const {result, waitFor} = renderHook(() => useGetProductById(productId), { 85 | wrapper: createReactQueryWrapper, 86 | }); 87 | 88 | await waitFor(() => result.current.isError); 89 | 90 | expect(screen.getByText(`An error occurred`)).toBeTruthy(); 91 | }); 92 | 93 | it('should display price and quantity of the item correctly', async () => { 94 | render(component, { 95 | wrapper: createReactQueryWrapper, 96 | }); 97 | 98 | const {result, waitFor: waitForHook} = renderHook( 99 | () => useGetProductById(productId), 100 | { 101 | wrapper: createReactQueryWrapper, 102 | }, 103 | ); 104 | 105 | await waitForHook(() => result.current.isSuccess); 106 | 107 | expect(screen.getByTestId(`product-detail-price`).props.children).toBe( 108 | getPriceText(result.current.data!.price), 109 | ); 110 | 111 | expect( 112 | screen.getByTestId( 113 | `quantity-toggler-value-${result.current.data?.id.toString()}`, 114 | ).props.children, 115 | ).toBe('0'); 116 | }); 117 | 118 | it('should have decrease quantity button disabled and should call addFavoriteProduct function in case product has not been added to basket yet', async () => { 119 | render(component, { 120 | wrapper: createReactQueryWrapper, 121 | }); 122 | 123 | const {result, waitFor: waitForHook} = renderHook( 124 | () => useGetProductById(productId), 125 | { 126 | wrapper: createReactQueryWrapper, 127 | }, 128 | ); 129 | 130 | await waitForHook(() => result.current.isSuccess); 131 | 132 | const increaseBtn = screen.getByTestId( 133 | `increase-quantity-btn-${result.current.data?.id.toString()}`, 134 | ); 135 | const decreaseBtn = screen.getByTestId( 136 | `decrease-quantity-btn-${result.current.data?.id.toString()}`, 137 | ); 138 | 139 | fireEvent.press(decreaseBtn); 140 | 141 | // decrease quantity button should be disabled if quantity equals to 0 142 | expect(decreaseProductQuantityInBasketMock).not.toHaveBeenCalled(); 143 | 144 | fireEvent.press(increaseBtn); 145 | 146 | expect(addProductToBasketMock).toHaveBeenCalledWith(result.current.data!); 147 | }); 148 | 149 | it('should increase quantity on pressing increase button in case product has already been added to basket', async () => { 150 | // product has been added to the basket 151 | (useProductInBasketQuantityById as jest.Mock).mockImplementation(() => 1); 152 | 153 | render(component, { 154 | wrapper: createReactQueryWrapper, 155 | }); 156 | 157 | const {result, waitFor: waitForHook} = renderHook( 158 | () => useGetProductById(productId), 159 | { 160 | wrapper: createReactQueryWrapper, 161 | }, 162 | ); 163 | 164 | await waitForHook(() => result.current.isSuccess); 165 | 166 | const increaseBtn = screen.getByTestId( 167 | `increase-quantity-btn-${result.current.data?.id.toString()}`, 168 | ); 169 | 170 | fireEvent.press(increaseBtn); 171 | 172 | expect(increaseProductQuantityInBasketMock).toHaveBeenCalledWith( 173 | result.current.data!.id, 174 | ); 175 | }); 176 | 177 | it('should call remove favorited product on pressing decrease button in case product has already been added to basket and its quantity equals to 1', async () => { 178 | // product has been added to the basket 179 | (useProductInBasketQuantityById as jest.Mock).mockImplementation(() => 1); 180 | 181 | render(component, { 182 | wrapper: createReactQueryWrapper, 183 | }); 184 | 185 | const {result, waitFor: waitForHook} = renderHook( 186 | () => useGetProductById(productId), 187 | { 188 | wrapper: createReactQueryWrapper, 189 | }, 190 | ); 191 | 192 | await waitForHook(() => result.current.isSuccess); 193 | 194 | const decreaseBtn = screen.getByTestId( 195 | `decrease-quantity-btn-${result.current.data?.id.toString()}`, 196 | ); 197 | 198 | fireEvent.press(decreaseBtn); 199 | 200 | expect(removeProductFromBasketMock).toHaveBeenCalledWith( 201 | result.current.data!.id, 202 | ); 203 | }); 204 | 205 | it('should call decrease favorited product on pressing decrease button in case product has already been added to basket and its quantity greater than 1', async () => { 206 | // product has been added to the basket and has quantity greater than 1 207 | (useProductInBasketQuantityById as jest.Mock).mockImplementation(() => 2); 208 | 209 | render(component, { 210 | wrapper: createReactQueryWrapper, 211 | }); 212 | 213 | const {result, waitFor: waitForHook} = renderHook( 214 | () => useGetProductById(productId), 215 | { 216 | wrapper: createReactQueryWrapper, 217 | }, 218 | ); 219 | 220 | await waitForHook(() => result.current.isSuccess); 221 | 222 | const decreaseBtn = screen.getByTestId( 223 | `decrease-quantity-btn-${result.current.data?.id.toString()}`, 224 | ); 225 | 226 | fireEvent.press(decreaseBtn); 227 | 228 | expect(decreaseProductQuantityInBasketMock).toHaveBeenCalledWith( 229 | result.current.data!.id, 230 | ); 231 | }); 232 | 233 | it('should call navigation function with correct params on pressing Go To Basket button', async () => { 234 | render(component, { 235 | wrapper: createReactQueryWrapper, 236 | }); 237 | 238 | const {result, waitFor: waitForHook} = renderHook( 239 | () => useGetProductById(productId), 240 | { 241 | wrapper: createReactQueryWrapper, 242 | }, 243 | ); 244 | 245 | await waitForHook(() => result.current.isSuccess); 246 | 247 | const goToBasketBtn = screen.getByText('Go to basket'); 248 | 249 | fireEvent.press(goToBasketBtn); 250 | 251 | expect(navigateMock).toHaveBeenCalledWith(RouteNames.basket); 252 | }); 253 | }); 254 | -------------------------------------------------------------------------------- /src/screens/__tests__/product-list.test.tsx: -------------------------------------------------------------------------------- 1 | import {NavigationContainer} from '@react-navigation/native'; 2 | import {renderHook} from '@testing-library/react-hooks'; 3 | import {fireEvent, render, screen} from '@testing-library/react-native'; 4 | import React from 'react'; 5 | import {setupGetAllProductsFailedHandler} from '../../../__mocks__/msw/handlers'; 6 | import {useGetAllProducts} from '../../api/product'; 7 | import ProductStack from '../../navigation/product-stack'; 8 | import {RouteNames} from '../../navigation/route-names'; 9 | import {useProductStore} from '../../store/product'; 10 | import {createReactQueryWrapper} from '../../utils/testing'; 11 | import ProductListScreen from '../product-list'; 12 | 13 | // We render the whole app stack instead of rendering just the screen 14 | // because we need access to the react-navigation's header, which wouldn't 15 | // be possible if we just rendered the screen. 16 | const rootAppComponent = ( 17 | 18 | 19 | 20 | ); 21 | const navigateMock = jest.fn(); 22 | const navigation = {navigate: navigateMock} as any; 23 | const route = jest.fn() as any; 24 | 25 | const component = ; 26 | 27 | describe('Product list screen', () => { 28 | it('should display loading indicator initially', async () => { 29 | // We render the component and expect to see a loading indicator 30 | render(component, {wrapper: createReactQueryWrapper}); 31 | expect(screen.queryByTestId(`screen-loader`)).toBeTruthy(); 32 | 33 | // We render the product list using useGetAllProducts hook and wait until the products are loaded 34 | const {result, waitFor} = renderHook(() => useGetAllProducts(), { 35 | wrapper: createReactQueryWrapper, 36 | }); 37 | await waitFor(() => result.current.isSuccess); 38 | 39 | // We expect the loading indicator to disappear after the products are loaded 40 | expect(screen.queryByTestId(`screen-loader`)).not.toBeTruthy(); 41 | }); 42 | 43 | it('should display product list data correctly', async () => { 44 | // Render the component and wait for it to load 45 | render(component, {wrapper: createReactQueryWrapper}); 46 | 47 | // Check that no product card is rendered before fetching data 48 | expect(screen.queryByTestId(`product-list-card-1`)).not.toBeTruthy(); 49 | 50 | // Fetch the product data 51 | const {result, waitFor} = renderHook(() => useGetAllProducts(), { 52 | wrapper: createReactQueryWrapper, 53 | }); 54 | 55 | // Wait for the data to be fetched successfully 56 | await waitFor(() => result.current.isSuccess); 57 | 58 | // Check that each product card is rendered for each product in the data 59 | for (const {id} of result.current.data!) { 60 | expect(screen.queryByTestId(`product-list-card-${id}`)).toBeTruthy(); 61 | } 62 | }); 63 | 64 | it('should display error text in case get all products query fails', async () => { 65 | // Set up the mock handler for GET requests to the /products endpoint that returns an error response 66 | setupGetAllProductsFailedHandler(); 67 | 68 | // Render the ProductListScreen component wrapped in the React Query wrapper 69 | render(component, {wrapper: createReactQueryWrapper}); 70 | 71 | // Set up a mock React hook that calls the useGetAllProducts hook from the API module 72 | const {result, waitFor} = renderHook(() => useGetAllProducts(), { 73 | wrapper: createReactQueryWrapper, 74 | }); 75 | 76 | // Wait for the useGetAllProducts hook to throw an error 77 | await waitFor(() => result.current.isError); 78 | 79 | // Assert that the "An error occurred" text is displayed on the screen 80 | expect(screen.getByText(`An error occurred`)).toBeTruthy(); 81 | }); 82 | 83 | it('should call navigation action on pressing the first product item', async () => { 84 | // Render the ProductListScreen component along with react-query wrapper 85 | render(component, {wrapper: createReactQueryWrapper}); 86 | 87 | // Render the useGetAllProducts hook with react-query wrapper to fetch data 88 | const {result, waitFor} = renderHook(() => useGetAllProducts(), { 89 | wrapper: createReactQueryWrapper, 90 | }); 91 | 92 | // Wait for the data to be fetched 93 | await waitFor(() => result.current.isSuccess); 94 | 95 | // Find the first product card in the list and simulate a press event on it 96 | const firstProductItem = screen.getByTestId(`product-list-card-1`); 97 | fireEvent.press(firstProductItem); 98 | 99 | // Expect that the navigation function is called with the correct route name and params 100 | expect(navigateMock).toHaveBeenCalledWith(RouteNames.productDetail, { 101 | id: 1, 102 | }); 103 | }); 104 | 105 | it('should add/remove product item correctly on pressing product items basket icon', async () => { 106 | // We render the entire app stack and use the createReactQueryWrapper as a 107 | // wrapper for the render function to set up the React Query Provider. 108 | render(rootAppComponent, { 109 | wrapper: createReactQueryWrapper, 110 | }); 111 | 112 | // We use the renderHook function to invoke the useGetAllProducts hook which 113 | // fetches the data. 114 | const {result, waitFor} = renderHook(() => useGetAllProducts(), { 115 | wrapper: createReactQueryWrapper, 116 | }); 117 | 118 | // We use the renderHook function to get access to the useProductStore hook 119 | // which we will use to check that the products in the basket were added/removed correctly. 120 | const {result: productStore} = renderHook(() => useProductStore(), { 121 | wrapper: createReactQueryWrapper, 122 | }); 123 | 124 | // We wait for the useGetAllProducts hook to complete fetching the data before proceeding 125 | // with the test. 126 | await waitFor(() => result.current.isSuccess); 127 | 128 | // We get the basket button for the first product item using the getByTestId function. 129 | const firstProductItemBasketButton = screen.getByTestId(`basket-button-1`); 130 | 131 | // We click the basket button for the first product item. 132 | fireEvent.press(firstProductItemBasketButton); 133 | 134 | // We check that the basket icon quantity text is present using the getByTestId function. 135 | expect(screen.getByTestId('basket-icon-quantity-text-1')).toBeTruthy(); 136 | 137 | // We check that the products in the basket have been added correctly using the productStore. 138 | expect(productStore.current.productsInBasket).toHaveLength(1); 139 | expect(productStore.current.productsInBasket[0].quantity).toBe(1); 140 | expect(productStore.current.productsInBasket[0].product).toMatchObject( 141 | result.current.data![0], 142 | ); 143 | 144 | // We click the basket button for the first product item again to remove it from the basket. 145 | fireEvent.press(firstProductItemBasketButton); 146 | 147 | // We check that the basket icon quantity text is not present. 148 | expect( 149 | screen.queryByTestId('basket-icon-quantity-text-1'), 150 | ).not.toBeTruthy(); 151 | 152 | // We check that the products in the basket have been removed correctly using the productStore. 153 | expect(productStore.current.productsInBasket).toHaveLength(0); 154 | }); 155 | }); 156 | -------------------------------------------------------------------------------- /src/screens/basket.tsx: -------------------------------------------------------------------------------- 1 | import {DefaultTheme} from '@react-navigation/native'; 2 | import * as React from 'react'; 3 | import { 4 | FlatList, 5 | ListRenderItemInfo, 6 | StyleSheet, 7 | Text, 8 | View, 9 | } from 'react-native'; 10 | import BasketCard from '../components/basket-card'; 11 | import DeleteIcon from '../components/delete-icon'; 12 | import Spacing from '../components/spacing'; 13 | import {ProductListScreenProps} from '../navigation/types'; 14 | import { 15 | ProductInBasket, 16 | useProductActions, 17 | useProductsInBasket, 18 | } from '../store/product'; 19 | import {COMMON_STYLES} from '../styles/common-styles'; 20 | import {getBasketTotalPrice} from '../utils/get-basket-total-price'; 21 | import {getWindowHeight} from '../utils/layout'; 22 | 23 | type Props = ProductListScreenProps; 24 | 25 | const BasketScreen: React.FC = ({navigation}) => { 26 | const { 27 | increaseProductQuantityInBasket, 28 | decreaseProductQuantityInBasket, 29 | removeProductFromBasket, 30 | resetAllProductsInBasket, 31 | } = useProductActions(); 32 | 33 | const productsInBasket = useProductsInBasket(); 34 | 35 | React.useEffect(() => { 36 | if (productsInBasket.length > 0) { 37 | navigation.setOptions({ 38 | headerRight: () => , 39 | }); 40 | } 41 | }, [productsInBasket.length, navigation, resetAllProductsInBasket]); 42 | 43 | const renderBasketItem = ({ 44 | item: {product, quantity}, 45 | }: ListRenderItemInfo) => { 46 | return ( 47 | 53 | increaseProductQuantityInBasket(product.id) 54 | } 55 | onDecreaseQuantityPress={() => { 56 | if (quantity === 1) { 57 | removeProductFromBasket(product.id); 58 | } else { 59 | decreaseProductQuantityInBasket(product.id); 60 | } 61 | }} 62 | /> 63 | ); 64 | }; 65 | 66 | const renderSeparatorComponent = () => ( 67 | 68 | ); 69 | 70 | const getKeyExtractor = (item: ProductInBasket) => item.product.id.toString(); 71 | 72 | const renderListEmptyComponent = () => ( 73 | 74 | Your basket is empty 75 | 76 | ); 77 | 78 | return ( 79 | 80 | 91 | 92 | {productsInBasket.length > 0 && ( 93 | 94 | {'Total Price: '} 95 | 96 | $ {getBasketTotalPrice(productsInBasket)} 97 | 98 | 99 | )} 100 | 101 | ); 102 | }; 103 | 104 | export default BasketScreen; 105 | 106 | const styles = StyleSheet.create({ 107 | root: { 108 | flex: 1, 109 | }, 110 | safeArea: { 111 | flex: 1, 112 | backgroundColor: '#fff', 113 | }, 114 | contentContainerStyle: { 115 | flexGrow: 1, 116 | backgroundColor: DefaultTheme.colors.background, 117 | padding: COMMON_STYLES.screenPadding, 118 | }, 119 | basketItemsContainer: { 120 | flex: 1, 121 | justifyContent: 'flex-start', 122 | }, 123 | summaryContainer: { 124 | height: getWindowHeight(10), 125 | width: '100%', 126 | borderTopColor: '#e2e2e2', 127 | borderTopWidth: 1, 128 | backgroundColor: '#fff', 129 | flexDirection: 'row', 130 | alignItems: 'flex-start', 131 | justifyContent: 'space-between', 132 | padding: COMMON_STYLES.screenPadding, 133 | }, 134 | totalPrice: { 135 | fontSize: 18, 136 | textAlign: 'left', 137 | }, 138 | priceText: { 139 | textAlign: 'right', 140 | fontSize: 18, 141 | width: 150, 142 | }, 143 | }); 144 | -------------------------------------------------------------------------------- /src/screens/error.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import {Button, StyleSheet, Text, View} from 'react-native'; 3 | 4 | type Props = { 5 | resetError: () => void; 6 | }; 7 | 8 | const ErrorScreen: React.FC = ({resetError}) => { 9 | return ( 10 | 11 | 12 | An error occurred... 13 | 14 |