Статья подготовлена для студентов курса «ReactJS/React Native-разработчик» в образовательном проекте OTUS. Недавно возникла проблема, что у основного текста и у placeholder в дизайне разные стили: TextInput позволяет изменять стиль основного текста и задавать цвет для placeholder. Однако изменить размер или шрифт невозможно. Мы видим, что свойства «placeholderStyle» нет. В такой ситуации нам приходится брать всё в свои руки и расширять этот компонент. Алгоритм действий 1.Создадим компонент TextInputPlaceholderStyle и пробросим вниз свойства...
Сегодня мы разберём вариант кастомного placeholder. Часто бывает что в дизайн макетах обязательные поля имеют звёздочку с цветом отличным от цвета текста самой подсказки.
Что в итоге мы хотим получить: Штатными средствами браузера покрасить такие звёздочки не является возможным. Но мы можем немного схитрить и подменить placeholder на свой блок, полностью заменяя его.
Прежде чем начнём разбираться что тут и как происходит, посмотрим на пример:
https://codepen.io/JustRideK/pen/pGQYzw
Для начала разберём html разметку
1...