【React Native】react-native-textinput-affectsを使ってリッチなTextInputを実装する
react-native-textinput-affects
react-native-textinput-effects
はReact Nativeアプリ上で使用できるTextInput UIコンポーネントです。
豊富な種類の入力フォームが用意されており、デモを見るだけでも楽しめます。
普通のTextInputと同様のプロパティ設定が可能なので、
今までのTextInputを置き換える形で使用することが可能です。
Usage
下の記事に従い、create-react-native-app
でプロジェクトを作成します。
$ create-react-native-app react-native-textinput-affect-app
$ cd react-native-textinput-affect-app
react-native-textinput-affects
をインストール。
$ npm install react-native-textinput-effects --save
今回はアイコン用に使うreact-native-vector-icons
もインストールします。
$ npm install --save react-native-vector-icons
これで完了です。
Source
試しにUIコンポーネントSae
を使ってみました。
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; import { Sae } from 'react-native-textinput-effects'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Sae label={'Email Address'} iconName={'pencil'} iconColor={'white'} iconClass={FontAwesomeIcon} // TextInput props autoCapitalize={'none'} autoCorrect={false} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#cc0', justifyContent: 'center', padding: 44 }, });
ちなみにreact-native-vector-icons/FontAwesome
はcreate-react-native-appプロジェクトで特にインストールしなくても使えました。
Demo
TextInputが一気に華やかになりました!
他にもたくさん種類があるみたいなので、アプリのデザインに合わせて使っていきたいですね。