react-native-elements error: Warning: React.createElement: type is invalid

React Native elementsのバージョンが1.0〜になってからフォーム要素が変わった。なので以前のFormInput, FormLabel, FormValidationMessageを使おうとすると上記エラー。

・FormInput は Inputに改名。
・FormLabel は削除され Input のlabelプロパティに。
・FormValidationMessage は削除され Input の errorMessageプロパティに。

参考：React Native Elements Input

ナカノさんのKindle本

で学んでいる方は途中、FormInputのところで躓きます。とても良い本なのでこんな所で評価を落とすことはないのでフォローしておきます。

利用例：1.単純なフォーム（改造）

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  Input,
} from 'react-native-elements';


export default class App extends React.Component {
  constructor(){
    super();
    this.state = {
      input:""
    }
    this.onChangeInput = this.onChangeInput.bind(this);
  }

  onChangeInput(input) {
    this.setState({input})
  }

  render(){
      return (
        <View style={styles.container}>
          <Input label="Name" onChangeText={this.onChangeInput}/>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

利用例：2.エラーバリデーションを行うフォーム（改造）

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  Input,
} from 'react-native-elements';


export default class App extends React.Component {
  constructor(){
    super();
    this.state = {
      input:"",
      hasError:false
    }
    this.onChangeInput = this.onChangeInput.bind(this);
  }

  onChangeInput(input) {
    if(input.length < 10) {
      this.setState({hasError: true});
    }else {
      this.setState({hasError: false})
    }
    this.setState({input})
  }

  render(){
      return (
        <View style={styles.container}>
          {this.state.hasError ? 
          <Input label="Name" errorStyle={{ color: 'red' }} errorMessage='最低10文字必要'
          onChangeText={this.onChangeInput}/>
          :
          <Input label="Name" onChangeText={this.onChangeInput}/>          
          }
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});