Стратегия разрыва слов в исходном тексте для строк с тире

Не нашел для этого никакого CSS-трюка. Но вы можете использовать regx для ярлыка. просто добавьте новую строку перед любыми словами, написанными через дефис. это не идеальное решение, но, по крайней мере, для такой ситуации это сработает

        export default class App extends Component {
        constructor(props) {
        super(props);

         this.processString = this.processString.bind(this);
        }

         processString() {
         const regex = /((\w+\-(.*?)\w+)\s)/gm;
         const str = `This is a sample of text-with-dash incorrectly word breaking`;
         const subst = `\n$1`;
         const result = str.replace(regex, subst);
         return result;
        }

         render() {
             return (
                  <View style = {styles.container}>
          <TouchableOpacity style = {{ width: 250, backgroundColor: 
        "skyblue" 
         }}>
          <Text style = {styles.welcome}>{this.processString()}</Text>
           </TouchableOpacity>
          </View>
          );
           }
         }

Теперь вы можете использовать textbreakstrategy в качестве опоры Текст.

По умолчанию используется стратегия разрыва текста «высокое качество», которая разбивает слова и добавляет к ним знак «-».

Используйте «просто» в стратегии разбиения текста, чтобы избежать «-» при разрыве слов.

Например:

<Text textBreakStrategy = {'simple'}>
This is a sample of text-with-dash incorrectly word breaking
</Text>

Дополнительная ссылка: https://developer.android.com/reference/android/text/Layout.html#BREAK_STRATEGY_SIMPLE

Используйте Unicode \u2011 из неразрывный дефис в строке. Итак, для вашего примера это будет выглядеть так:

<TouchableOpacity style = {{ width: 250, backgroundColor: 'skyblue' }}>
    <Text style = {styles.welcome}>{`This is a sample of text\u2011with\u2011dash incorrectly word breaking`}</Text>
</TouchableOpacity>