Invariant Violation - Unable to import custom component react native

Question

After read through many other similar questions I am still unable to import my custom component.

Here is main view:

import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {LOGO} from '../../assets/logo.png';
import {testingInput} from './testingInput';

function tempScreen({navigation}) {
    return (
        <View style={
            styles.container
        }>
            <View style={
                styles.topContainer
            }>
                <Image styles={
                        styles.logo
                    }
                    scoure={LOGO}
                    resizeMode={'cover'}/>
                <Text>
                    Here
                </Text>
            </View>


            <View style={
                styles.bottomContainer
            }>
                <testingInput/>
            </View>
        </View>
    )
}


const styles = StyleSheet.create({
    ...
})

export default tempScreen;

Here is tempButton File:

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

const testingInput = (prop) => {
    return (
        <TextInput style={
                styles.TextInput
            }
            placeholder="Email"
            color="#ffffff"
            placeholderTextColor="#ffffff"
            autoCapitalize="none"></TextInput>
    )
}

const styles = StyleSheet.create({
    TextInput: {

        height: 50,
        flex: 1,
        padding: 10,
        marginLeft: 20
    }
})


export default testingInput;

Im getting the error

"Invariant Violation: View config getter callback for component testingInput must be a function (received undefined). Make sure to start component names with a capital letter."

Any help would be greatly appreciated!

import TestingInput from './testingInput'; Try this and make component first latter always capital. — Govind Maheshwari

Francesco Clementi Francesco Clementi · Accepted Answer · 2021-07-07T07:48:02

When you use a default export you do not need destructuring the import.

with export default testingInput; you will import import TestInput from './testinputfile. Here the name of the import is not important

with export testingInput; you will import import {functionName} from './testinputfile. Here the name of the import need to be equal to the name of the function exported

Invariant Violation - Unable to import custom component react native

1 Answers