react-native-elements FormInput cannot be imported

Question

Seems like I am not allowed to import FormInput from react-native-elements.

I got this error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoginForm`.

My code is below:

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { FormInput, Button } from 'react-native-elements'

export default class LoginForm extends Component {
  render() {
    return (
      <View>
          <FormInput value="" placeholder="Enter email"></FormInput>
          <FormInput valye="" placeholder="Enter password"></FormInput>
          <Button title="Login" backgroundColor="red"></Button>
      </View>
    )
  }
}

I don't see what I am doing differently from the official doc. I know FormInput is the issue because if I comment out the two lines then it renders fine.

score 1 · Accepted Answer · answered Feb 19 '19 at 01:08

FormInput only exists in 0.19.1 version of React-Native-Elements.

Make sure you have properly installed the version 0.19.1 using the code below in the terminal,

npm -i react-native-elements@0.19.1

Here is more information for 0.19.1 elements, 0.19.1 Input

However, you can also keep using the 1.0.0 version of react-native-elements. For 1.0.0, the input component is a little different. Here is the link about input elements in React-Native, 1.0.0 Input

score 0 · Answer 2 · answered Feb 19 '19 at 01:16

FormInput has been Changed to Input from v1.0.0-beta onwards

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { Input, Button } from 'react-native-elements'

export default class LoginForm extends Component {
  render() {
    return (
      <View>
          <Input value="" placeholder="Enter email"></Input>
          <Input valye="" placeholder="Enter password"></Input>
          <Button title="Login" backgroundColor="red"></Button>
      </View>
    )
  }
}

this should work.

More info here

Great answer, thanks. Fatih Aktaş answered first so I am accepting his answer — JAM, Feb 19 '19 at 01:43

react-native-elements FormInput cannot be imported

2 Answers2