how to change prettier format for react native

2022-05-07 06:20 CCP imported from Stackoverflow

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

2 answers

answered 2022-05-07 06:24 CCP
well i found the answer right away lol
1. press f1 choose Format Document With
1. and select prettier for default
answered 2022-05-07 07:16 Morti Al
There is a shortcut for every idea to format your code, for instance for Vscode Ctrl + Shift + I

AND use Prettier to format your code in all files

1- First you can install the prettier code extension in your idea(Webstorm or vs code) https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode "for the vscode"

2- Then install its package to your dependencies npm install --save-dev --save-exact prettier https://prettier.io/docs/en/install.html

3- create .prettierrc file and paste this code into it
```
{
    "arrowParens": "always",
    "bracketSameLine": false,
    "bracketSpacing": true,
    "embeddedLanguageFormatting": "auto",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}
```
4-Add
```
"scripts": {
    ...
    "prettify": "prettier --write"
}
```
script to your package.json file

Run npm run prettify whenever you think your code is ugly

See also questions close to this topic

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
```
 <Route path="list/:id(\d+)" element={<MyComponent/>} /> 
```
but it not work in v6.

How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."

My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...

This my .env file

REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX
REACT_APP_authDomain=XXXXX.firebaseapp.com
REACT_APP_projectId=XXXX
REACT_APP_storageBucket=XXXXX.appspot.com
REACT_APP_messagingSenderId=4997390XXXXX
REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX
REACT_APP_measurementId=G-M1XDXXXXXX

This my firebase config file

const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain,
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket,
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId,
  measurementId: process.env.REACT_APP_measurementId,
};

when I debugging firebaseConfig object

console.log(firebaseConfig.apiKey);  ==========> undefined 
console.log(firebaseConfig.authDomain);  ==========> undefined 
console.log(firebaseConfig.projectId);  ==========> undefined 
console.log(firebaseConfig.storageBucket); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined 
console.log(firebaseConfig.appId); ==========> undefined 
console.log(firebaseConfig.measurementId); ==========> undefined

client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"

How to group firebase data in flutter with DateTime?

I am making a chat application in flutter using firebase. I want to show a header with the date whenever the date changes. How can I group messages in flutter coming from firebase on the basis of date and show a header with the changed date?

I have tried GroupedListView package but I was not able to retrieve the chatmessages successfully.
Can you make complete apps using Flutter & Dart or just the UI part of an app?

I'm confused about what Flutter framework actually does, I know that it uses Dart and have heard that both of them can be used to create cross-platform apps.

But Wikipedia defines Flutter as a "UI Framework", so my question is, can you make a complete app (for mobile) which also has backend part (communicates with a database) built entirely using Flutter & Dart and not only the UI part?

If you didn't get my question, here is an example:

Suppose a front-end web developer works on client side programming in his job, and the backend logic is written by another backend developer.

When it comes to mobile app development, suppose as a Flutter developer, your job is to create apps, but does that mean that as a Flutter developer, you'll only write the front-end logic and leave the backend part for another backend developer like in web world? Can Flutter developers also write the backend of an app using only Flutter & Dart? If not, then who writes the backend of a mobile app and what tools/languages/frameworks does he uses?

Command failed: xcrun instruments -s

I want to run my react native app on a real ios device with this line :

npx react-native run-ios --udid SOME-UDID

but i got this error :

xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find instruments 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
error Command failed: xcrun instruments -s
xcrun: error: sh -c '/Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk -find instruments 2> /dev/null' failed with exit code 17664: (null) (errno=No such file or directory)
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

everything is ok on simulator

I'm using XCODE 13

How to maintain global states created dynamically
I am trying to Display list of items with then name and button to download its respective file Same list are available in different other screens. When I click on download
1. State info sharing: It should start download and the state/progress of the download should be visible to same item available in different other screens.unique identifier is item id
2. There can be parallel downloads
Problem statement:
1. Unable to share the information for same item if we use state within the same item
2. On use of redux its solving problem 1 however Parallel download information is getting overwritten as its writing to same reducer state
Any idea or approach is appreciated. Thanks

dart modulo operator circular list

I want to use the modulo (%) operator in order to access to list items in a circular way. But the code below doesn't work:

void main() {
  List<String> myList = ['one', 'two', 'three', 'four'];
  int currIdx = 0;
  
  for (int i = 0;i < 10;i++) {
    print(myList[currIdx]);
    currIdx = currIdx++ % myList.length;
  }
}

Related questions

how to change prettier format for react native

2 answers

See also questions close to this topic