個人的にとても助かったので備忘録としてまとめ。
タイトルにある通り、React Native Elements ライブラリの入力欄コンポーネント <Input />
にデフォルトで追加されている下線を消す方法についてです。
正直これができなくて、React Native の <TextInput />
コンポーネントを使ったこともあったので……。
解決手段はこちらから。
javascript – React Native Elements Line underneath FormInput Component – Stack Overflow
https://stackoverflow.com/questions/50602486/react-native-elements-line-underneath-forminput-component
こちらの記事によると、inputContainerStyle
に borderBottomWidth: 0
を追加するだけとのこと!
サンプルコードは下記のとおりです。
import { Input } from 'react-native-elements'; <Input label='メールアドレス' keyboardType='email-address' inputContainerStyle={{ borderBottomWidth: 0 }} />
こちらを追加してアプリを実行したところ、無事に下線が消えていました…!
ずっと勘違いしていて inputStyle
で何とかしようとしていましたが、inputContainerStyle
だったんですね…。
解決できてよかったです!
以上、React Native Elements の <Input />
コンポーネントの下線を消す方法についてでした。
ご参考になれば幸いです。