To fix the error in any list components where a keyExtractor is in use, update the Component (FlatList etc) to have a **string key** with .toString(). **All keys must now be string values**.

Like below;


    keyExtractor={item =&gt; item.index_id}

to

    keyExtractor={item =&gt; item.index_id.toString()}


This change is a requirement for all uses of a keyExtractor so that would include React-Native components like; FlatList and ActionSheet.

    keyExtractor={(item, index) =&gt; index.toString()}

This will solve the warning given by `React` and `React Native`.

You could try this solution:

```javascript
keyExtractor={(item, index) =&gt; item + index.toString()}
```

I&#39;m using JSON file and register in `Pubspec.ymal` but showing error and also when I use an image and register it, the same error also occurs. Maybe there is a formatting mistake in it, but don&#39;t know what the problem is.this is the [doc][3] I followed.

&gt; **Error on line 29, column 5 of pubspec.yaml: Expected a key while parsing a block mapping**.
&gt; **assets:**
&gt;     **^**

This is my `pubspec.yaml` file
 
 

    name: jsondata description: A new Flutter application.
      
      dependencies:  
     
      flutter:
     
      sdk: flutter
     
      cupertino_icons: ^0.1.0
      
      dev_dependencies:   
     
     flutter_test:
    
          sdk: flutter
      
        flutter:
     
        uses-material-design: true
     
          assets:
      
           - loadjson/person.json





[![enter image description here][4]][4]


  [1]: https://stackoverflow.com/questions/33066015/jekyll-config-yml-did-not-find-expected-key-while-parsing-a-block-mapping
  [2]: https://stackoverflow.com/questions/38272137/yaml-parser-parsererror-while-parsing-a-block-mapping
  [3]: https://www.dartlang.org/tools/pub/pubspec
  [4]: https://i.stack.imgur.com/a85Kp.png

Flutter Pub: Expected a key while parsing a block mapping. path:

I&#39;ve found myself in an almost endless cycle of errors when trying to update my Angular CLI and NPM. Every time I update, I am met with WARN messages telling me to install peer dependencies (see below), but each time I install a dependency, I am met with more WARN messages. Is there a better way of handling this situation or does it seriously take hours?

    npm WARN @angular/animations@5.2.1 requires a peer of @angular/core@5.2.1 
    but none is installed. You must install peer dependencies yourself.
    npm WARN @angular/compiler-cli@5.1.0 requires a peer of typescript@&gt;=2.4.2 
    &lt;2.6 but none is installed. You must install peer dependencies yourself.
    npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
    @angular/core@^4.0.3 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
    @angular/common@^4.0.3 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN @ng-bootstrap/ng-bootstrap@1.0.0-beta.6 requires a peer of 
    @angular/forms@^4.0.3 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN @schematics/angular@0.1.17 requires a peer of @angular-
    devkit/core@0.0.29 but none is installed. You must install peer dependencies 
    yourself.
    npm WARN @schematics/angular@0.1.17 requires a peer of @angular-
    devkit/schematics@0.0.52 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN @schematics/schematics@0.0.11 requires a peer of @angular-
    devkit/core@0.0.22 but none is installed. You must install peer dependencies 
    yourself.
    npm WARN angular2-notifications@0.7.4 requires a peer of 
    @angular/core@^4.0.1 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN angular2-notifications@0.7.4 requires a peer of 
    @angular/common@^4.0.1 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN angular2-notifications@0.7.4 requires a peer of @angular/platform-
    browser@^4.0.0 but none is installed. You must install peer dependencies 
    yourself.
    npm WARN angular2-notifications@0.7.4 requires a peer of 
    @angular/animations@^4.0.1 but none is installed. You must install peer 
    dependencies yourself.
    npm WARN bootstrap@4.0.0-beta.2 requires a peer of jquery@1.9.1 - 3 but none 
    is installed. You must install peer dependencies yourself.
    npm WARN bootstrap@4.0.0-beta.2 requires a peer of popper.js@^1.12.3 but 
    none is installed. You must install peer dependencies yourself.
    npm WARN ng2-toasty@4.0.3 requires a peer of @angular/core@^2.4.7 || ^4.0.0 
    but none is installed. You must install peer dependencies yourself.
    npm WARN ngx-carousel@1.3.5 requires a peer of @angular/core@^2.4.0 || 
    ^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN ngx-carousel@1.3.5 requires a peer of @angular/common@^2.4.0 || 
    ^4.0.0 but none is installed. You must install peer dependencies yourself.
    npm WARN tsickle@0.25.5 requires a peer of typescript@&gt;=2.4.2 &lt;2.6 but none 
    is installed. You must install peer dependencies yourself.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 
    (node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
    fsevents@1.1.3: wanted {&quot;os&quot;:&quot;darwin&quot;,&quot;arch&quot;:&quot;any&quot;} (current: 
    {&quot;os&quot;:&quot;win32&quot;,&quot;arch&quot;:&quot;x64&quot;})

I know I must be doing something wrong, but I&#39;m new to Angular.




How do I deal with installing peer dependencies in Angular CLI?

I updgraded from react 16.2 -&gt; 16.3-alpha-1 and react-native 0.52-&gt;0.54 and I get the warning above in the simulator.

Warning : Failed child context type: Invalid child context &#39;virtualizedCell.cellKey&#39; of type &#39;number&#39; supplied to &#39;CellRenderer&#39;, expected &#39;string&#39;

<p>I updgraded from react 16.2 -> 16.3-alpha-1 and react-native 0.52->0.54 and I get the warning above in the simulator.</p>


I get the above runtime message after I upgraded to Swift4.1 and Xcode 9.3. Before the upgrade I did not have this message in my console window.

&gt;Status bar could not find cached time string image. Rendering in-process.

comes up every few minutes as long as I have the App running.

It sees to me there is no negative side effect, my App is running, as usual, I have not seen any problems.

I use the standard Status Bar, have not changed to modify it in any way.

**Question 1:** Would there be a problem originating from this warning under situations i have not come across yet?

**Question 2:** Does anyone know how I can get rid of this warning? 

Status bar could not find cached time string image. Rendering in-process

In Xcode, when I try to `Product &gt; Archive &gt; Validate App` I get the error:

&gt; No accounts with iTunes Connect access have been found for the team &quot;TEAM_NAME&quot;. iTunes Connect access is required for App Store distribution.

and/or

&gt; No accounts with App Store Connect access have been found for the team &quot;TEAM_NAME&quot;. App Store Connect access is required for App Store Connect distribution.

and/or

 &gt; Unable to authenticate with App Store Connect

[![Xcode error screenshot][1]][1]

How can I fix this issue and validate my app?

  [1]: https://i.stack.imgur.com/CXWRu.png

No accounts with iTunes Connect access have been found for the team

I have defined an `enum` as follows:

    enum Type: String, Codable {
        case text = &quot;text&quot;
        case image = &quot;image&quot;
        case document = &quot;document&quot;
        case profile = &quot;profile&quot;
        case sign = &quot;sign&quot;
        case inputDate = &quot;input_date&quot;
        case inputText = &quot;input_text&quot;
        case inputNumber = &quot;input_number&quot;
        case inputOption = &quot;input_option&quot;
    
        case unknown
    }



that maps a JSON string property.
The automatic serialization and deserialization works fine, but I found that if a different string is encountered, the deserialization fails. 

Is it possible to define an `unknown` case that maps any other available case?

This can be very useful, since this data comes from a RESTFul API that, maybe, can change in the future.

Codable enum with default case in Swift 4

I recently update my Xcode to version 9.3, so is instruments. After that, time profiler won&#39;t work anymore, it usually works fine before.

I tried to run it via Xcode, and I tried to run it manually. Doesn&#39;t work.
The life cycle row stuck in initializing, and I got a bunch of warnings complain about **the data volume is too high for a recording mode of &quot;immediate&quot; and some data had to be dropped to move forward**. 

Then I switch to delay mode, still got nothing. Then I create a simple new project, which should have &quot;little data volume&quot;, still got nothing.

I checked help, I googled, seems like no one has encountered this before. Does anyone have any clue about this?

![enter image description here][1]

  [1]: https://i.stack.imgur.com/gyGGq.png

Time profiler in instruments is not working

How can I get the height of an **AppBar** in Flutter?&lt;br&gt;
I am using the MarialApp Widget (&#39;package:flutter/material.dart&#39;).&lt;br&gt;&lt;br&gt;
I have the height of my Context and would like to deduct the height of the appbar.

    final double height = MediaQuery.of(context).size.height;



How to get AppBar height in Flutter?

I&#39;m trying to hide my API Key for when I commit to github, and I&#39;ve looked through the forum for guidance, especially the following post:

https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app

I made the changes and restarted yarn. I&#39;m not sure what I&#39;m doing wrong––I added an `.env` file to the root of my project (I named it `process.env`) and in the file I just put `REACT_APP_API_KEY = &#39;my-secret-api-key&#39;`. 

I&#39;m thinking it might be the way I&#39;m adding the key to my `fetch` in App.js, and I&#39;ve tried multiple formats, including without using the template literal, but my project will still not compile.

Any help is much appreciated.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    performSearch = (query = &#39;germany&#39;) =&gt; {
        fetch(`https://api.unsplash.com/search/photos?query=${query}&amp;client_id=${REACT_APP_API_KEY}`)
        .then(response =&gt; response.json())
        .then(responseData =&gt; {
            this.setState({
                results: responseData.results,
                loading: false
            });
         })
         .catch(error =&gt; {
                console.log(&#39;Error fetching and parsing data&#39;, error);
         });
    }

&lt;!-- end snippet --&gt;





Adding an .env file to React Project

When I updated my site, run npm run build and upload the new files to the server I am still looking the old version of my site. 


Without React, I can see the new version of my site with cache-busting. I do this: 

Previous file 

    &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/styles.css&quot;&gt;

New file 

    &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/styles.css?abcde&quot;&gt;

How can I do something like this or to achieve cache busting with create react app?

There are many threads in the GitHub of create react app about this but no one has a proper/simple answer.  




  [1]: https://github.com/Alfrex92/serverlessapps

Cache busting with CRA React

It looks like `componentWillReceiveProps` is going to be completely phased out in coming releases, in favor of a new lifecycle method `getDerivedStateFromProps`:[static getDerivedStateFromProps()][1].

Upon inspection, it looks like you are now unable to make a direct comparison between `this.props` and `nextProps`, like you can in `componentWillReceiveProps`. Is there any way around this?

Also, it now returns an object. Am I correct to assume that the return value is essentially `this.setState`?

Below is an example I found online: [State derived from props/state][2].


**Before**

    class ExampleComponent extends React.Component {
      state = {
        derivedData: computeDerivedState(this.props)
      };
    
      componentWillReceiveProps(nextProps) {
        if (this.props.someValue !== nextProps.someValue) {
          this.setState({
            derivedData: computeDerivedState(nextProps)
          });
        }
      }
    }

**After**

    class ExampleComponent extends React.Component {
      // Initialize state in constructor,
      // Or with a property initializer.
      state = {};
    
      static getDerivedStateFromProps(nextProps, prevState) {
        if (prevState.someMirroredValue !== nextProps.someValue) {
          return {
            derivedData: computeDerivedState(nextProps),
            someMirroredValue: nextProps.someValue
          };
        }
    
        // Return null to indicate no change to state.
        return null;
      }
    }


  [1]: https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  [2]: https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md#state-derived-from-propsstate

How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps

I get the following warning when rendering my component:

&gt; Warning: A component is `contentEditable` and contains `children`
&gt; managed by React. It is now your responsibility to guarantee that none
&gt; of those nodes are unexpectedly modified or duplicated. This is
&gt; probably not intentional.

This is my component:

    import React, { Component } from &quot;react&quot;;
    
    export default class Editable extends Component {
      render() {
        return (
          &lt;div contentEditable={true} onBlur={this.props.handleBlur}&gt;
            {this.props.children}
          &lt;/div&gt;
        );
      }
    }

What is the potential problem with my code that React wants to warn me about? I did not quite understand from reading the documentation at https://reactjs.org/docs/dom-elements.html.

I imagine that my component should work exactly like an managed input field, without any problem:

1. `this.props.children` is initial value
2. the `onBlur` callback updates the props from `event.target.innerHTML`
3. the component is rendered with the new props

Why does React warn against an contentEditable component having children managed by React?

Being a beginner to React world, I want to understand in depth what happens when I use `{this.props.children}` and what are the situations to use the same. What is the relevance of it in below code snippet?
   

    render() {
      if (this.props.appLoaded) {
        return (
          &lt;div&gt;
            &lt;Header
              appName={this.props.appName}
              currentUser={this.props.currentUser}
            /&gt;
            {this.props.children}
          &lt;/div&gt;
        );
      }
    }

What is {this.props.children} and when you should use it?

# The Goal
Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.

# More Detail

If I have the following Navigator structure:

 - Parent Navigator
  - Nested Navigator 1
     - screen A
     - screen B
  - Nested Navigator 2
     - screen C
     - screen D

how do I go from screen D under nested navigator 2, to screen A under nested navigator 1? Right now if I try to `navigation.navigate` to screen A from screen D there will be an error that says it doesn&#39;t know about a screen A, only screen C and D.

I know this has been asked in various forms in various places on this site as well as GitHub(https://github.com/react-navigation/react-navigation/issues/983, https://github.com/react-navigation/react-navigation/issues/335#issuecomment-280686611)  but for something so basic, there is a lack of clear answers and scrolling through hundreds of GitHub comments searching for a solution isn&#39;t great. 

**Maybe this question can codify how to do this for everyone who&#39;s hitting this very common problem.**


How to navigate between different nested stacks in react navigation

&gt;What is the purpose of the ***react-native link*** command?

React Native rounded image with a border

I am just getting started with react-native. On installing this package

    npm install --save react-native-validator-form

https://github.com/NewOldMax/react-native-validator-form/issues/3

I was prompted to `npm audit` and I was shown 4 vulnerabilities (listed above)

After running the 2 helper commands, I was prompted with another 2 vulnerabilities (see link)

How can I fix the remaining issues? 

Updating the respective npm packages didn&#39;t work.

Not sure how to proceed?

Found 4 vulnerabilities on npm install

Perviously when I wanted to make some actions when screen is opened I put them inside `componentDidMount`. For example I can fetch some data.

like this.

    componentDidMount() {
      this.updateData();
    }


But with `react-navigation` **`componentDidMount`** occurs only one time when user open screen first time, and if later user open this page again it will not trigger componentDidMount.

What is proper way to detect when page(screen) is activated and do actions?

react-navigation: Detect when screen, tabbar is activated / appear / focus / blur

I am building a simple React Native app with create-react-native-app using only react-navigation and base-64(base 64 encode/decode) as dependencies. Over time starting the app became slower and now sometimes it is getting stuck(waiting for about 30min) on &quot;Starting packager...&quot; after running NPM start.

I&#39;ve tried starting it with &quot;npm start -- --reset-cache&quot; but nothing changed

Once it is up and running I don&#39;t get any error or warning in DevTools or terminal. Also there are no issues with the performance of the app

What can I do to make NPM start smooth and quickly as before? Are there any general steps I can take to troubleshoot this issue?

Here is my package.json

    {
      &quot;name&quot;: &quot;test&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;private&quot;: true,
      &quot;devDependencies&quot;: {
        &quot;jest-expo&quot;: &quot;~27.0.0&quot;,
        &quot;react-devtools&quot;: &quot;^3.2.3&quot;,
        &quot;react-native-scripts&quot;: &quot;1.14.0&quot;,
        &quot;react-test-renderer&quot;: &quot;16.3.1&quot;
      },
      &quot;main&quot;: &quot;./node_modules/react-native-scripts/build/bin/crna-entry.js&quot;,
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-native-scripts start&quot;,
        &quot;eject&quot;: &quot;react-native-scripts eject&quot;,
        &quot;android&quot;: &quot;react-native-scripts android&quot;,
        &quot;ios&quot;: &quot;react-native-scripts ios&quot;,
        &quot;test&quot;: &quot;jest&quot;
      },
      &quot;jest&quot;: {
        &quot;preset&quot;: &quot;jest-expo&quot;
      },
      &quot;dependencies&quot;: {
        &quot;base-64&quot;: &quot;^0.1.0&quot;,
        &quot;expo&quot;: &quot;^27.0.1&quot;,
        &quot;react&quot;: &quot;16.3.1&quot;,
        &quot;react-native&quot;: &quot;~0.55.2&quot;,
        &quot;react-navigation&quot;: &quot;^2.11.2&quot;
      }
    }

How can I clean (reset cache) of React Native using Expo. Not sure if it is cache issue

I&#39;ve submitted my app for review to the App Store Connect. Although the app is still under review, I&#39;ve received an email to inform me that I have to fix an error. Here is the content of the message: 

&gt; Dear Developer,
&gt; 
&gt; We identified one or more issues with a recent delivery for your  app
&gt; XXXXX. Your delivery was successful, but you  may wish to correct the
&gt; following issues in your next delivery:
&gt; 
&gt; &quot;Missing Purpose String in Info.plist File. Your app&#39;s code 
&gt; references one or more APIs that access sensitive user data. The 
&gt; app&#39;s Info.plist file should contain a 
&gt; NSLocationAlwaysUsageDescription key with a user-facing purpose 
&gt; string explaining clearly and completely why your app needs the  data.
&gt; Starting spring 2019, all apps submitted to the App Store  that access
&gt; user data will be required to include a purpose  string.If you&#39;re
&gt; using external libraries or SDKs, they may  reference APIs that
&gt; require a purpose string. While your app might  not use these APIs, a
&gt; purpose string is still required. You can  contact the developer of
&gt; the library or SDK and request they  release a version of their code
&gt; that doesn&#39;t contain the APIs. 
&gt; 
&gt; 
&gt;  After you’ve corrected the issues, you can use Xcode or   Application
&gt; Loader to upload a new binary to iTunes Connect.
&gt; 
&gt;  Best regards,
&gt; 
&gt;  The App Store Team


My app is fully built with Expo and I don&#39;t know how to access and modify the Info.plist. 

Any idea?


Error Appstore connect : Missing Purpose String in Info.plist File

When installing **&#39;react-native init AwesomeProject&#39;** I get this error when I run `react-native run-android`: 

    Could not determine java version from &#39;11.0.1&#39;.

A quick google suggests I need to update the `distributionUrl` in the Gradle-wrapper. Having done this I am faced with a new error:

    Cannot add task &#39;wrapper&#39; as a task with that name already exists.

It suggests the issue is in the file:

    /AwesomeProject/android/build.gradle&#39; line: 36

which looks like this

    task wrapper(type: Wrapper) {
        gradleVersion = &#39;4.4&#39;
        distributionUrl = distributionUrl.replace(&quot;bin&quot;, &quot;all&quot;)
    }

I&#39;ve been back and forth trying to figure out what this does. It seems odd that something wouldn&#39;t work straight out of the box. Is anybody facing a similar issue?

Cannot add task &#39;wrapper&#39; as a task with that name already exists

&gt; React Native provides two way to create Project.

**First:** 
	

    npm install -g expo-cli

**Second:**
	

    npm install -g react-native-cli
	
so what is different between them and what should be used if we create react native app?

Content Type	Original Author	Original Content on Stackoverflow
Question	dhj	View Question on Stackoverflow
Solution 1 - Ios	dhj	View Answer on Stackoverflow
Solution 2 - Ios	Aun Abbas	View Answer on Stackoverflow
Solution 3 - Ios	Mirza Hayat	View Answer on Stackoverflow

Warning : Failed child context type: Invalid child context 'virtualizedCell.cellKey' of type 'number' supplied to 'CellRenderer', expected 'string'

Ios Problem Overview

Ios Solutions

Solution 1 - Ios

Solution 2 - Ios

Solution 3 - Ios

How do I deal with installing peer dependencies in Angular CLI?

Flutter Pub: Expected a key while parsing a block mapping. path:

Attributions