In a Header component, I have a View that takes fixed width, and the text inside it is cut so I want to make this text to be like multiline,

I can't delete fixed width because it's dependent on another scrolling stuff.

const TAB_WIDTH = normalizeWidth(150);
<FlatList
            data={myRoutes}
            ref={headerRef}
            contentContainerStyle={{
              flexGrow: 1,
            }}
            keyExtractor={(item, index) => index.toString()}
            horizontal
            showsHorizontalScrollIndicator={false}
            renderItem={({item, index}) => (
              <View
                style={{
                  width: TAB_WIDTH,
                }}>
                <TouchableOpacity
                  onPress={() => scrollToActiveIndex(index)}
                  style={styles.headerItem}>
                  <Text
                    style={[
                      styles.labelStyle,
                      {
                        color:
                          activeIndex === index
                            ? buttonBgColor
                            : COLORS.menuText,
                      },
                    ]}>
                    {item.title}anas
                  </Text>
                </TouchableOpacity>
                {activeIndex === index && (
                  <View
                    style={[styles.headerBar, {backgroundColor: buttonBgColor}]}
                  />
                )}
              </View>
            )}
          />