When conditionally rendering two components that each contain an react-native-elements <Input>, activating one causes a component exception/non-render

Question

This is the parent component. I am conditionally rendering and based on an onPress that changes signInActive state true/false.

     <View>
    {signInActive ? (
      <View>
        <SignIn />
      </View>
    ) : (
      <View>
        <Registration />
      </View>
    )}
  </View>

This is the working component that is rendered for the true case above: SignIn component

 <View style={styles.inputContainer}>
    <Input
      autofocus
      placeholder="Email"
      // value={email}
      // onChangeText={(e) => setEmail(e.target.value)}
    />
    <Input
      style={styles.bottomInput}
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

This is the non-rendering component from the false conditional case Registration component...it's exactly the same.

<View style={styles.inputContainer}>
    <Input
      autofocus
      placeholder="Email"
      // value={email}
      // onChangeText={(e) => setEmail(e.target.value)}
    />
    <Input
      style={styles.bottomInput}
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

The error: Component Exception: Element type is invalid: expected a string (for built-in component) or a class/function but got: undefined. You likely forgot to export your component from the file it's define in.

The parent component renders <View, Text, TouchableOpacity, and Button components, but it won't render Input. I tried deleting the from the truthy render and the false render still has component exception.

Answer 1

Solution: The imported Input from react-native-elements was not destructured correctly on import statement. Import instead of { Import }