React native: Cannot add a child that doesn't have a YogaNode or parent node

Question

Just started learning react-native,

I have created one separate file flexdemo.js and created component as below:

import React, { Component } from \'react         


        

Answer 1

I was able to reproduce the issue with the code you provided. The solution is twofold:

1. In your flexdemo.js file you should remove the whitespaces from within the tags. They are considered as text, and text is only allowed inside a component. I'd recommend making your tags self closing until they have some content, to stay away from this issue in the future, like so:

   import React, { Component } from 'react';
   import { View } from 'react-native';
   
   export default class FlexibleViews extends Component {
     render() {
       return (
         
           
           
           
         
       );
     }
   }
   

   This will render your components but still be faulty, as you wont see anything on the screen.

2. To get your flexible shades of blue to appear you'll either have to add flex to the component in your App.js file or(depending on what your next steps are, I guess) remove it and render your as the root component, since it is basically a component with some children anyway.