React Native - "Objects are not valid as React child"

Question

Problem

I'm trying to import a functional component I created into my React class component, and I receive the following error:

"Invariant Violation: Objects are not valid as a React child (found: object with keys {width, height, backgroundColor, textAlign, fontSize, alignSelf, color, margin, padding, borderRadius}). If you meant to render a collection of children, use an array instead."

I can't figure out why. I've tried changing the child component to a class based component but this didn't help. I also commented out the stylesheet in child component but then I still receive a similar error:

"Invariant Violation: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead."

Code

Parent Component

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Linking,
  ScrollView
} from 'react-native';


import CustomTextInput from '../../Components/CustomTextInput/CustomTextInput';

export default class SignupScreen extends React.Component{
  constructor(props) {
    super();
    this.state = {
      ageConfirmed: false
    }
  }
  render(){
    return(
          <View style={styles.container}>
            <ScrollView
              contentContainerStyle={styles.scrollView}
              keyboardDismissMode={'on-drag'}
              pinchGestureEnabled={false}
            >
                <CustomTextInput>
                  autoCorrect={false}
                  autoFocus={true}
                  placeholder={'Fortnite username'}
                  placeholderTextColor={'white'}
                </CustomTextInput>
            </ScrollView>
          </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center'
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center'
  }
})

Child Component

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';
import { windowWidth, windowHeight } from '../../Constants';

export default CustomTextInput = (
  onChangeText, 
  autoCorrect,
  autoFocus,
  placeholder,
  placeholderTextColor
  ) => {
  return (
    <TextInput>
      style={styles.CustomTextInput}
      {/* onChangeText={onChangeText} */}
      autoCorrect={autoCorrect}
      autoFocus={autoFocus}
      placeholder={placeholder}
      placeholderTextColor={placeholderTextColor}
    </TextInput>
  );
}

const styles = StyleSheet.create({
  CustomTextInput: {
    width: windowWidth*0.54,
    height: windowHeight*0.036,
    backgroundColor: 'blue',
    textAlign: 'center',
    fontSize: windowHeight*0.03,
    alignSelf: 'center',
    color: 'white',
    margin: windowHeight*0.01,
    padding: 0,
    borderRadius: windowHeight*0.015 //TODO: assess if this is the right way to calc radius
  }
});

Answer 1

There is a typo in both files. You have the component properties inside the tag whereas it should be defined as attributes of the tag, like so:

<CustomTextInput
  autoCorrect={false}
  autoFocus={true}
  placeholder='Fortnite username'
  placeholderTextColor='white'
/>

Sames goes for <TextInput />.

Answer 2

child component

import React from 'react';
import { TextInput, StyleSheet } from 'react-native';
import { windowWidth, windowHeight } from '../../Constants';

export default ({
  onChangeText, 
  autoCorrect,
  autoFocus,
  placeholder,
  placeholderTextColor
  }) => {
  return (
    <TextInput
      style={styles.CustomTextInput}
      autoCorrect={autoCorrect}
      autoFocus={autoFocus}
      placeholder={placeholder}
      placeholderTextColor={placeholderTextColor}
    />
  );
}
const styles = StyleSheet.create({
  CustomTextInput: {
    width: windowWidth*0.54,
    height: windowHeight*0.036,
    backgroundColor: 'blue',
    textAlign: 'center',
    fontSize: windowHeight*0.03,
    alignSelf: 'center',
    color: 'white',
    margin: windowHeight*0.01,
    padding: 0,
    borderRadius: windowHeight*0.015 //TODO: assess if this is the right way to calc radius
  }
});