Reaccionar texto nativo saliendo de mi pantalla, negándose a ajustar. ¿Qué hacer?

El siguiente código se puede encontrar en este ejemplo en vivo

Tengo el siguiente elemento nativo de reacción:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  <View style={styles.container}>

        <View style={styles.descriptionContainerVer}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >
              Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
            </Text>
          </View>
        </View>

        <View style={styles.descriptionContainerVer2}>
          <View style={styles.descriptionContainerHor}>
            <Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text>
          </View>
        </View>



  </View>);
  }
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);

con los siguientes estilos:

var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});

Esto da como resultado la siguiente pantalla:

¿Cómo puedo evitar que el texto salga de la pantalla y mantenerlo confinado en el medio de la pantalla con un ancho de, por ejemplo, el 80% del padre?

No creo que deba usarlo widthporque lo ejecutaré en MUCHAS pantallas móviles diferentes y quiero que sea dinámico, así que creo que debería confiar totalmente en él flexbox.

(Esa fue la razón inicial por la que tuve flex: 0.8dentro del descriptionContainerHor.

Lo que quiero lograr es algo como esto:

¡Gracias!

Encontré una solución desde el siguiente enlace.

[Texto] El texto no se ajusta # 1438

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

A continuación se muestra el enlace de usuario del perfil de Github si desea agradecerle.

Ally Rippley

Edición: mar 09 abr 2019

Como @sudoPlz mencionó en los comentarios, funciona con la flexShrink: 1actualización de esta respuesta.

Este es un error conocido . flexWrap: 'wrap'no funcionó para mí, pero esta solución parece funcionar para la mayoría de las personas

Código

<View style={styles.container}>
    <Text>Some text</Text>
</View>

Estilos

export default StyleSheet.create({
    container: {
        width: 0,
        flexGrow: 1,
        flex: 1,
    }
});

La solución a ese problema es flexShrink: 1.

<View
    style={{ flexDirection: 'row' }}
> 
   <Text style={{ flexShrink: 1 }}>
       Really really long text...
   </Text>
</View>

Dependiendo de su configuración, es posible que también deba agregar flexShrink: 1al elemento principal de <View>'para que esto funcione, así que juegue con eso y lo logrará.

La solución fue descubierta por Adam Pietrasiak en este hilo.

solo necesita tener una envoltura para su <Text>con flex como se muestra a continuación;

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

Funciona si elimina flexDirection: rowde descriptionContainerVery descriptionContainerVer2respectivamente.

ACTUALIZAR (ver comentarios)

Hice algunos cambios para lograr lo que creo que buscas. En primer lugar, eliminé el descriptionContainerHorcomponente. Luego configuré las flexDirectionvistas verticales en rowy agregué alignItems: 'center'y justifyContent: 'center'. Dado que las vistas verticales ahora están apiladas a lo largo del eje horizontal, eliminé la Verparte del nombre.

Entonces ahora tiene una vista de envoltura que debería alinear vertical y horizontalmente su contenido y apilarlo a lo largo del eje x. Luego, simplemente coloco dos Viewcomponentes invisibles en el lado izquierdo y derecho del Textcomponente para hacer el relleno.

Me gusta esto:

<View style={styles.descriptionContainer}>
  <View style={styles.padding}/>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
    </Text>
  <View style={styles.padding}/>
</View>

Y esto:

descriptionContainer:{
  flex:0.5, //height (according to its parent),
  flexDirection: 'row',
  backgroundColor: 'blue',
  alignItems: 'center',
  justifyContent: 'center',
  // alignSelf: 'center',
},
padding: {
  flex: 0.1
},
descriptionText: {
  backgroundColor: 'green',//Colors.transparentColor,
  fontSize: 16,
  flex: 0.8,
  color: 'white',
  textAlign: 'center',
  flexWrap: 'wrap'
},

Entonces obtienes lo que creo que buscabas.

FUTURAS MEJORAS

Ahora, si desea apilar varias áreas de texto dentro de las vistas azul y naranja, puede hacer algo como esto:

<View style={styles.descriptionContainer2}>
  <View style={styles.padding}/>
  <View style={styles.textWrap}>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Some other long text which you can still do nothing about.. Off the screen we go then.
    </Text>
    <Text style={styles.descriptionText} numberOfLines={5} >
      Another column of text.
    </Text>
  </View>
  <View style={styles.padding}/>
</View>

Dónde textWraptiene este estilo:

textWrap: {
  flexDirection: 'column',
  flex: 0.8
},

¡Espero que esto ayude!

Otra solución que encontré para este problema es envolver el texto dentro de una vista. También configure el estilo de la Vista para que sea flexible: 1.

Quería agregar que estaba teniendo el mismo problema y flexWrap, flex: 1 (en los componentes de texto), nada de flex funcionaba para mí.

Eventualmente, configuré el ancho del contenedor de mis componentes de texto al ancho del dispositivo y el texto comenzó a ajustarse. const win = Dimensions.get('window');

      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        width: win.width
      }}>
        <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
        <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
      </View>

<View style={{flexDirection:'row'}}> 
   <Text style={{ flex: number }}> You miss fdddddd dddddddd 
     You miss fdd
   </Text>
</View>

¡{flex: aNumber} es todo lo que necesita!

Simplemente configure 'flex' en un número que se adapte a sus necesidades. Y luego el texto se ajustará.

En la versión 0.62.2 de React Native, simplemente puse "flex-shrink: 1" en el contenedor de mi "Texto", pero recuerde la fila flex-direction: en la Vista del contenedor. Gracias chicos por la ayuda.

Mi código:

export const Product = styled.View`
  background: #fff;
  padding: 15px 10px;
  border-radius: 5px;
  margin: 5px;
  flex-direction: row;
`;

export const ProductTitleContainer = styled.View`
  font-size: 16px;
  margin-left: 5px;
  flex-shrink: 1;
`;

export const ProductTitle = styled.Text`
  font-size: 16px;
  flex-wrap: wrap;
`;
`;

mi solución a continuación:

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

estilo:

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

resultado: [

<Text style={{width: 200}} numberOfLines={1} ellipsizeMode="tail">Your text here</Text>