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

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

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
}
});

Answer 2

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 />.