"The component cannot contain children " in React Native, Possible fix ?

Question

Day 1 with React-Native . Trying to load multiple images in a React-Native app. However, the app crashes with the error:

Error: The component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.

I tried solutions to these existing questions, however they failed to resolve my issue:

Also tried replacing <ImageBackground> with <Image>, however that did not resolve the issue as well.

Here's the code to my App.js :

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image
} from 'react-native';

const playIcon = require('./images/play.png');
const volumeIcon = require('./images/sound.png');
const hdIcon = require('./images/hd-sign.png');
const fullScreenIcon = require('./images/full-screen.png');
const remoteImage = { uri:'https://s3.amazonaws.com/crysfel/public/book/new-york.jpg' };

export default class App extends Component<{}> {
  render() {
    return (
      <Image source={remoteImage} style={styles.fullscreen}>
      <View style={styles.container}>
        <Image source={playIcon} style={styles.icon} />
        <Image source={volumeIcon} style={styles.icon} />
        <View style={styles.progress}>
          <View style={styles.progressBar} />
        </View>
        <Image source={hdIcon} style={styles.icon} />
        <Image source={fullScreenIcon} style={styles.icon} />
      </View>
    </Image>
    );
  }
}

const styles = StyleSheet.create({
  fullscreen: {
    flex: 1,
  },
  container: {
    position: 'absolute',
    backgroundColor: '#202020',
    borderRadius: 5,
    flexDirection: 'row',
    height: 50,
    padding: 5,
    paddingTop: 16,
    bottom: 30,
    right: 10,
    left: 10,
    borderWidth: 1,
    borderColor: '#303030',
  },
  icon: {
    tintColor: '#fff',
    height: 16,
    width: 16,
    marginLeft: 5,
    marginRight: 5,
  },
  progress: {
    backgroundColor: '#000',
    borderRadius: 7,
    flex: 1,
    height: 14,
    margin: 10,
    marginTop: 2,
  },
  progressBar: {
    backgroundColor: '#bf161c',
    borderRadius: 5,
    height: 10,
    margin: 2,
    width: 80,
  },
});

What is possibly causing this issue and how to resolve it?

score 4 · Answer 1 · answered Feb 05 '18 at 10:06

<Image> with nested content is no longer supported. Use <ImageBackground> instead.

<View style={styles}>
  <ImageBackground style={styles} source={source} resizeMode={resizeMode} >
    {children}
  </ImageBackground>
  {...}
</View>

Also you need to add a parent component (View) to wrap all your components.

score -2 · Answer 2 · edited Feb 05 '18 at 10:41

It's not work because you must wrap all your components with parent View. Image cannot be the parent view.

something like this:

render() {
  return (
    <View>
      <Image source={remoteImage} style={styles.fullscreen}>
        <View style={styles.container}>
          <Image source={playIcon} style={styles.icon} />
          <Image source={volumeIcon} style={styles.icon} />
          <View style={styles.progress}>
            <View style={styles.progressBar} />
          </View>
          <Image source={hdIcon} style={styles.icon} />
          <Image source={fullScreenIcon} style={styles.icon} />
        </View>
      </Image>
    </View>
  );
}

"The component cannot contain children " in React Native, Possible fix ?

2 Answers2