react-native environment setup

• [x] I verified that I have not react-native-cli installed globally and be up to date about the React Native environment setup.

Description

[1/2] Removing module [email protected]/react-native-boilerplate... error This module isn't specified in a package.json file. info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command. warn Failed to clean up template temp files in node_modules/[email protected]/react-native-boilerplate. This is not a critical error, you can work on your app. D:\Repo\TIDispense\TIDispense\node_modules\metro-hermes-compiler\src\emhermesc.js:77 throw ex; ^

RuntimeError: abort(Error: ENOENT: no such file or directory, lstat 'D:\Repo\TIDispense\TIDispense\node_modules\[email protected]\react-native-boilerplate'). Build with -s ASSERTIONS=1 for more info. at process.abort (D:\Repo\TIDispense\TIDispense\node_modules\metro-hermes-compiler\src\emhermesc.js:440:13) at process.emit (events.js:375:28) at processPromiseRejections (internal/process/promises.js:245:33) at processTicksAndRejections (internal/process/task_queues.js:96:32)

Version

latest

On which OS this issue appear on?

• [ ] IOS
• [X] Android

Desktop OS

Windows 10

Describe the bug UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, scandir 'E:\Hobbit\dur\[email protected]\rnb-plugin-typescript\template'

when trying to select typescript template when creating the application

Looking for JS files in /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate

warning: the transform cache was reset. Loading dependency graph, done. error: bundling failed: Error: While resolving module App/Config, the Haste package App was found. However the module Config could not be found within the package. Indeed, none of these files exist:

• /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/App/Config(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
• /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/App/Config/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx) at resolveHasteName (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro-resolver/src/resolve.js:236:9) at Object.resolve (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro-resolver/src/resolve.js:103:20) at ModuleResolver.resolveDependency (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:143:31) at ResolutionRequest.resolveDependency (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18) at DependencyGraph.resolveDependency (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/node-haste/DependencyGraph.js:283:16) at Object.resolve (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/lib/transformHelpers.js:264:42) at dependencies.map.result (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31) at Array.map () at resolveDependencies (/Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18) at /Users/momeraj/Documents/cisco/tutorials/react-native/react-native-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33 BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓░░░░░░░░░ 49.0% (300/511)::ffff:127.0.0.1 - - [25/Sep/2019:09:32:23 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1" BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓░░░░░░░░░ 49.0% (300/511), failed.

react-native environment setup

• [X] I verified that I have not react-native-cli installed globally and be up to date about the React Native environment setup.

Description

When using the react-native initialization command line tool provided by your Installation Guide, the command fails to run npm install due to unresolved dependencies related to eslint

Steps to reproduce

1. Run npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate
2. Press N when prompted for Typescript

Console log

                  Welcome to React Native!                
                 Learn once, write anywhere               

✔ Downloading template
✔ Copying template
✔ Processing template
✔ 📘 Using typescript ? (y/N) 

 … no


TheCodingMachine React-Native Boilerplate initialized with success ! 🚀

- 📚 If you need to read more about this boilerplate : https://thecodingmachine.github.io/react-native-boilerplate/
- 🤕 If you have some troubles : https://github.com/thecodingmachine/react-native-boilerplate/issues
- ⭐ If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :) https://github.com/thecodingmachine/react-native-boilerplate
✔ Executing post init script 
✖ Installing dependencies
error Error: Command failed: npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   @typescript-eslint/[email protected]"^3.1.0" from @react-native-community/[email protected]
npm ERR!   node_modules/@react-native-community/eslint-config
npm ERR!     dev @react-native-community/[email protected]"^2.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @typescript-eslint/[email protected]">= 4" from [email protected]
npm ERR! node_modules/eslint-plugin-jest
npm ERR!   dev [email protected]"^24.3.5" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @typescript-eslint/[email protected]
npm ERR! node_modules/@typescript-eslint/eslint-plugin
npm ERR!   peerOptional @typescript-eslint/[email protected]">= 4" from [email protected]
npm ERR!   node_modules/eslint-plugin-jest
npm ERR!     dev [email protected]"^24.3.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See .npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     .npm/_logs/2022-02-16T23_36_09_416Z-debug-0.log

Version

Latest (3.2.4)

On which OS this issue appear on?

• [ ] IOS
• [ ] Android

Desktop OS

MacBook Pro M1, Monterey 12.0.1

Hi there

The project is nicely organised. I love it. Only one little request if you can post a login code, as the example is only demonstrate an api call to retrieve the data, we need an example for post data call as well.

Thanks, Xiaoyu Chen

Hi @AurelGit , @JeremyDolle :

I created a new project with the following command:

npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate

Then I went through all the next steps, but what I find inside the app is this, not the template.

What am I doing wrong?

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Is your feature request related to a problem? Please describe. Obfuscate the code so that the class and components are not easy to read.

Additional context

@JeremyDolle : https://stackoverflow.com/a/64347516/8024296 https://stackoverflow.com/a/54282723/8024296 https://stackoverflow.com/a/69202010/8024296

Error when running 'yarn ios'

''Found Xcode workspace''

BUT first time running it, gives error code 65, second code 70.

***Replication

• Follow instructions
• Install all dependencies as per the react-native website (all of them)
• Run Yarn start (to start Metro)
• Run Yarn ios... gives errors.

Describe the bug Getting an error when initializing the project. The app gets initialized but the the template does not get imported. Not sure if it is a mistake on my side or a bug. Also getting an error in the CLI with the git URL for the template.

To Reproduce Steps to reproduce the behavior:

1. Run react-native init galleryv2 --version 0.63.3 --template @thecodingmachine/react-native-boilerplate

Expected behavior A new react native app with the boilerplate and folder structure should be created.

Screenshots

Say I wanted to make an add to cart action and I simple wanted it to persist locally as opposed to a server call?

Below is my thinking...except the confusion comes with handling the productId being passed and updating addedCartItems: [] which would be part of the module state. Should I pass the productId along with the state as the parameters instead of only the productId? Or should it be in Services because it can apply to more than just api clients?

import { buildAction, buildReducers } from '@/Store/builder'

export default {
    initialState:  { loading: false, error: null },
    action: buildAction('user/addToCart', (productId) => {
        
    }),
    reducers: buildReducers({ itemKey: null }),
}

Hello,

I want to test my components.

Here is my component;

import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { useTheme } from '@/Theme'

const Button = ({onPress, text}) => {
  const { Layout, Common, Fonts } = useTheme()

  return (
    <View style={[[Layout.center], { flex: 1 }]}>
      <TouchableOpacity
        style={[[Common.button.solidRounded]]}
        onPress={onPress}
      >
        <Text style={[[Fonts.textInterSemiBold16]]}>
          {text}
        </Text>
      </TouchableOpacity>
    </View>
  )
}

export default Button

Here is my test;

import React from 'react'
import { render } from '@testing-library/react-native';
import Button from '../src/Components/Button';
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'

describe('With React Testing Library', () => {
  const initialState = {output:10}
  const mockStore = configureStore()
  let store,wrapper

  it('Renders Button correctly"', () => {
    store = mockStore(initialState)
    const { getByText } = render(<Provider store={store}><Button /></Provider>)
  })
})

Here is the error I get;

With React Testing Library
    ✕ Renders Button correctly" (35 ms)

  ● With React Testing Library › Renders Button correctly"

    TypeError: Cannot read properties of undefined (reading 'theme')

      15 |
      16 |   // Get current theme from the store
    > 17 |   const currentTheme = useSelector(state => state.theme.theme || 'default')
         |                                                         ^
      18 |   const isDark = useSelector(state => state.theme.darkMode)
      19 |   const darkMode = isDark === null ? colorScheme === 'light' : isDark
      20 |   // const darkMode = isDark === null ? colorScheme === 'dark' : isDark /////////////

      at src/Theme/hooks/useTheme.js:17:57
      at useSelectorWithStoreAndSubscription (node_modules/react-redux/lib/hooks/useSelector.js:41:30)
      at useSelector (node_modules/react-redux/lib/hooks/useSelector.js:137:25)
      at _default (src/Theme/hooks/useTheme.js:17:24)
      at Button (src/Components/Button.js:6:37)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6016:18)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8744:13)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9966:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13404:18)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2537:26
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:468:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
      at flushSyncCallbackQueueImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2532:9)
      at flushSyncCallbackQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2519:3)
      at batchedUpdates (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13459:7)
      at act (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15280:14)
      at renderWithAct (node_modules/@testing-library/react-native/build/render.js:75:20)
      at render (node_modules/@testing-library/react-native/build/render.js:46:20)
      at Object.<anonymous> (__tests__/button.test.js:51:27)

  console.error
    The above error occurred in the <Button> component:

        at Button (/Users/appApp/Desktop/app/appApp/src/Components/Button.js:5:18)
        at Provider (/Users/appApp/Desktop/app/appApp/node_modules/react-redux/lib/components/Provider.js:21:20)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

      at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10989:23)
      at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11022:5)
      at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3662:12)
      at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3683:9)
      at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11855:11)
      at commitLayoutEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14443:7)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11391:14)

So If I use const { Layout, Common, Fonts } = useTheme() in my component, the test is failed. How can I test my component along with Theme using Jest?

react-native environment setup

• [X] I verified that I have not react-native-cli installed globally and be up to date about the React Native environment setup.

Description

I am unable to install Firebase SDK using flipper as it required use_frameworks! and when i switch my Pod file to use_framweorks, app building fails.

Version

3.0.0

On which OS this issue appear on?

• [X] IOS
• [x] Android

Desktop OS

Monterey 12.6

react-native environment setup

• [X] I verified that I have not react-native-cli installed globally and be up to date about the React Native environment setup.

Description

Error:

THE TYPESCRIPT VERSION 📘


- 📚 If you need to read more about this boilerplate : https://thecodingmachine.github.io/react-native-boilerplate/
- 🤕 If you have some troubles : https://github.com/thecodingmachine/react-native-boilerplate/issues
- ⭐ If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :) https://github.com/thecodingmachine/react-native-boilerplate
× Installing dependencies
error Error: Command failed: npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   [email protected]"18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer [email protected]"^16.8.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-native-flipper
npm ERR!   [email protected]"^0.156.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\bleki\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\bleki\AppData\Local\npm-cache\_logs\2022-10-05T23_05_23_999Z-debug-0.log

The complete log:

0 verbose cli C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\Users\blek\Documents\app\.npmrc Completed in 0ms
10 timing config:load:project Completed in 3ms
11 timing config:load:file:C:\Users\blek\.npmrc Completed in 0ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\blek\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 12ms
19 timing npm:load:configload Completed in 12ms
20 timing npm:load:mkdirpcache Completed in 1ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm install
23 verbose argv "install"
24 timing npm:load:setTitle Completed in 1ms
25 timing config:load:flatten Completed in 2ms
26 timing npm:load:display Completed in 2ms
27 verbose logfile logs-max:10 dir:C:\Users\blek\AppData\Local\npm-cache\_logs
28 verbose logfile C:\Users\blek\AppData\Local\npm-cache\_logs\2022-10-05T23_05_23_999Z-debug-0.log
29 timing npm:load:logFile Completed in 21ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 37ms
33 timing arborist:ctor Completed in 0ms
34 silly logfile start cleaning logs, removing 2 files
35 silly logfile done cleaning log files
36 timing arborist:ctor Completed in 0ms
37 timing idealTree:init Completed in 62ms
38 timing idealTree:userRequests Completed in 0ms
39 silly idealTree buildDeps
40 silly fetch manifest @react-native-async-storage/[email protected]
41 http fetch GET 200 https://registry.npmjs.org/@react-native-async-storage%2fasync-storage 1387ms (cache revalidated)
42 silly fetch manifest [email protected]
43 http fetch GET 200 https://registry.npmjs.org/react-native 14ms (cache hit)
44 silly fetch manifest [email protected]
45 http fetch GET 200 https://registry.npmjs.org/react 186ms (cache revalidated)
46 silly fetch manifest @react-native-masked-view/[email protected]
47 http fetch GET 200 https://registry.npmjs.org/@react-native-masked-view%2fmasked-view 846ms (cache revalidated)
48 silly fetch manifest @react-navigation/[email protected]
49 http fetch GET 200 https://registry.npmjs.org/@react-navigation%2fbottom-tabs 740ms (cache revalidated)
50 silly fetch manifest @react-navigation/[email protected]
51 http fetch GET 200 https://registry.npmjs.org/@react-navigation%2fnative 1241ms (cache revalidated)
52 silly fetch manifest [email protected]
53 http fetch GET 200 https://registry.npmjs.org/react-native-safe-area-context 370ms (cache revalidated)
54 silly fetch manifest [email protected]
55 http fetch GET 200 https://registry.npmjs.org/react-native-screens 368ms (cache revalidated)
56 silly fetch manifest @react-navigation/[email protected]
57 http fetch GET 200 https://registry.npmjs.org/@react-navigation%2fstack 429ms (cache revalidated)
58 silly fetch manifest [email protected]
59 http fetch GET 200 https://registry.npmjs.org/react-native-gesture-handler 384ms (cache revalidated)
60 silly fetch manifest @reduxjs/[email protected]
61 http fetch GET 200 https://registry.npmjs.org/@reduxjs%2ftoolkit 365ms (cache revalidated)
62 silly fetch manifest [email protected]
63 http fetch GET 200 https://registry.npmjs.org/react-redux 195ms (cache revalidated)
64 silly fetch manifest @types/[email protected]^16.8 || ^17.0 || ^18.0
65 http fetch GET 200 https://registry.npmjs.org/@types%2freact 213ms (cache revalidated)
66 silly fetch manifest @types/[email protected]^16.8 || ^17.0 || ^18.0
67 http fetch GET 200 https://registry.npmjs.org/@types%2freact-dom 206ms (cache revalidated)
68 silly fetch manifest [email protected]^16.8 || ^17.0 || ^18.0
69 http fetch GET 200 https://registry.npmjs.org/react-dom 204ms (cache revalidated)
70 silly fetch manifest [email protected]^18.2.0
71 silly fetch manifest [email protected]^4
72 http fetch GET 200 https://registry.npmjs.org/redux 227ms (cache revalidated)
73 silly fetch manifest [email protected]
74 http fetch GET 200 https://registry.npmjs.org/i18next 199ms (cache revalidated)
75 silly fetch manifest [email protected]
76 http fetch GET 200 https://registry.npmjs.org/prop-types 186ms (cache revalidated)
77 silly fetch manifest [email protected]
78 http fetch GET 200 https://registry.npmjs.org/react-i18next 383ms (cache revalidated)
79 silly fetch manifest [email protected]
80 http fetch GET 200 https://registry.npmjs.org/react-native-flipper 406ms (cache revalidated)
81 silly fetch manifest [email protected]^16.8.0 || ^17.0.0
82 timing idealTree Completed in 8876ms
83 timing command:install Completed in 8881ms
84 verbose stack Error: unable to resolve dependency tree
84 verbose stack     at Arborist.[failPeerConflict] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1428:25)
84 verbose stack     at Arborist.[loadPeerSet] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1394:34)
84 verbose stack     at async Arborist.[buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:976:11)
84 verbose stack     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:218:7)
84 verbose stack     at async Promise.all (index 1)
84 verbose stack     at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:154:5)
84 verbose stack     at async Install.exec (C:\Program Files\nodejs\node_modules\npm\lib\commands\install.js:145:5)
84 verbose stack     at async module.exports (C:\Program Files\nodejs\node_modules\npm\lib\cli.js:78:5)
85 verbose cwd C:\Users\blek\Documents\app
86 verbose Windows_NT 10.0.19044
87 verbose node v16.17.1
88 verbose npm  v8.15.0
89 error code ERESOLVE
90 error ERESOLVE unable to resolve dependency tree
91 error
92 error While resolving: [email protected]
92 error Found: [email protected]
92 error node_modules/react
92 error   [email protected]"18.0.0" from the root project
92 error
92 error Could not resolve dependency:
92 error peer [email protected]"^16.8.0 || ^17.0.0" from [email protected]
92 error node_modules/react-native-flipper
92 error   [email protected]"^0.156.0" from the root project
92 error
92 error Fix the upstream dependency conflict, or retry
92 error this command with --force, or --legacy-peer-deps
92 error to accept an incorrect (and potentially broken) dependency resolution.
92 error
92 error See C:\Users\blek\AppData\Local\npm-cache\eresolve-report.txt for a full report.
93 verbose exit 1
94 timing npm Completed in 9018ms
95 verbose unfinished npm timer reify 1665011124131
96 verbose unfinished npm timer reify:loadTrees 1665011124134
97 verbose unfinished npm timer idealTree:buildDeps 1665011124198
98 verbose unfinished npm timer idealTree:#root 1665011124198
99 verbose code 1
100 error A complete log of this run can be found in:
100 error     C:\Users\blek\AppData\Local\npm-cache\_logs\2022-10-05T23_05_23_999Z-debug-0.log

To reproduce the error, run npx react-native init App --template @thecodingmachine/react-native-boilerplate

### Version

3.5.1

### On which OS this issue appear on?

- [ ] IOS
- [ ] Android

### Desktop OS

Windows 10 build 19044.2006

Remove the repeated code when it need to have space for full cases, for example:

<View style={[Gutters.smallTPadding, Gutters.smallRPadding, Gutters.smallLPadding, Gutters.smallBPadding]} />

to

<View style={Gutters.smallPadding} />