Реагировать на ненужный переход собственного текста на следующую строку ⇐ Android

[Anonymous]

Код: Выделить всё

import React from 'react';
import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
import MaskedView from '@react-native-community/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

const GradientTextTag: React.FC = () => {
return (




New Pickup Time




);
};

const App: React.FC = () => {
return (



);
};

const styles = StyleSheet.create({
appContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
borderRadius: 20,
borderWidth: 1,
borderColor: 'transparent',
padding: 4,
minWidth: 100
},
maskContainer: {
marginTop: 20,
padding: 0,
borderColor: 'black',
borderWidth: 1,
borderRadius: 26,
},
text: {
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
},
gradient: {
flex: 1,
},
});

export default App;

В приведенном выше примере я визуализирую текст внутри реагирующего собственного градиента и маскированного представления, чтобы получить эффект линейного градиента для всего компонента.
Я отображаю текст «Новые данные о местоположении», который мне нужен в одной строке. Однако по какой-то причине часть текста переходит на следующую строку.
Это исправляется, если я задаю некоторую ширину контейнеру градиента, однако я хочу, чтобы контейнер автоматически выберите ширину, используя содержимое внутри
Ссылка на выставку: https://snack.expo.dev/@vsnsit/gradient ... rm=android

Подробнее здесь: https://stackoverflow.com/questions/788 ... ecessarily