View с зависящей от контента шириной

Question

Есть такой элемент:

Его код:

<Text>
   <View style={{styles.wrapper}}>
      <Text style={styles.text}>{text}</Text>
      <IconButton period={period} onPress={onPress} />
   </View>
 </Text>

После нажатия на иконку, выбрали период. И получаем такое:

На андроиде на крестик нажать не получается. Если перерендерить экран, становится нормально.

После нажатия на крестик получаем такое:

Почему-то ширина блока "пляшет".

Кто знает, как победить это?

Answer 1

Сам спросил, сам ответил. В общем, если кто столкнется с таким, то решение такое:

<View>
  <View style={...styles.wrapper, alignSelf: "flex-start"}>
    <Text style={styles.text}>{text}</Text>
    <IconButton period={period} onPress={onPress} />
  </View>
</View>

В Text лучше не оборачивать ничего, кроме Text. Ну и добавляем alignSelf, отличный от stretch

БЛОГ НА HUSL

View с зависящей от контента шириной

Ответы (1 шт):