Теперь время проработать компонент Word. В нем будут разворачиваться и сворачиваться детали.
Для этого добавим флаг с использованием хука useState. Начальное значение - false.
Компонент Word должен возвращать элемент View, внутри которого будет TouchableOpacity со стилями:
height - 53, flexDirection - row, justifyContent - space-between, alignItems: center, marginVertical: 7,
backgroundColor: colors.white, borderRadius: 5, paddingHorizontal: 17, borderWidth: 0, shadowOpacity: 0.4,
shadowOffset: { width: 0, height: 1 }, shadowColor: colors.black, elevation: 3, , marginHorizontal: 16, shadowRadius: 3,
При нажатии на TouchableOpacity флаг должен переключаться в противоположное значение
Первым дочерним элементом TouchableOpacity должен быть Text, выводящий свойство word.
Его стили: fontSize - 16, color - colors.blackOpacity80, fontFamily - RobotoRegular.
Вторым дочерним элементом TouchableOpacity должен быть контейнер иконок View.
Его стили: flexDirection - row, justifyContent - space-between, alignItems - center.
Группа иконок состоит из двух компонентов IconButton со свойствами size - 20, color - colors.blue and style.marginLeft - 19
При нажатии на первую флаг должен переключаться в противоположное значение
Если флаг равен true - name первой IconButton должен быть up-open-big, иначе - down-open-big
Второй IconButton должен иметь свойство name trash.
Свойство dispatchDeleteWord должно быть проброшено в onPress второй IconButton.
Мы его подключим в следующих шагах.
После TouchableOpacity надо показать View если флаг равен true.
Тут будем показывать детали слова. marginHorizontal должен равняться 33.
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.