0

I am using React-Native version 0.60.0. The < /Text > component is not showing full long text e.g. more than 5000 characters. React native showing only limited character. I have tried many soutions but nothing work. Same issue is occuring in both Android and iOS. Please assist me to resolve this.

screenshot

full code -

class App extends Component {
  render() {

    let epiComment = "the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19, data to date suggest that 80% of infections are mild or asymptomatic, 15% are severe infections, requiring oxygen, and 5% are critical infections, requiring ventilation. these fractions of severe and critical infection would be higher than those observed for influenza infection. those most at risk of severe influenza infection are children, pregnant women, the elderly, people with underlying chronic diseases and immunocompromised individuals. for covid-19, our current understanding is that advanced age and underlying conditions increase the risk of severe infection. the people most at risk of influenza infection the rate of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19 virus is estimated to be 5-6 days, while for influenza virus the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19. in addition, transmission during the first 3-5 days of illness, or potentially presymptomatic transmission - transmission of the virus before the onset of symptoms - is an important factor in the transmission of influenza. on the other hand, although we are learning that some people may shed the covid-19 virus 24 to 48 hours before the onset of symptoms, this does not appear to be a major factor in transmission at this time.(the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.************"
    return (     
        <ScrollView >
        <Text>
          {epiComment}
        </Text>
        </ScrollView>
    );
  }
Nitish
  • 1
  • 2
  • 1
    Does this answer your question? [React native text going off my screen, refusing to wrap. What to do?](https://stackoverflow.com/questions/36284453/react-native-text-going-off-my-screen-refusing-to-wrap-what-to-do) – Sabito stands with Ukraine Nov 12 '20 at 06:53
  • Can you please share your code and your screen what you saw. – Nitish Nov 12 '20 at 07:31
  • This is my code snipplet. My long text here......xxx.....xxxx... React native not showing till last word. – Nitish Nov 12 '20 at 09:19
  • 1
    @Nitish Because we are sharing same name. So I am asking very clear. Can you share your full code and screenshot of your issue/s then only I and I think any other can help you. – Nitish Nov 12 '20 at 09:28
  • @Nitish I have updated post . You can check full code and screenshot. – Nitish Nov 13 '20 at 09:19

2 Answers2

0

Try doing this

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> Your text here...</Text>
</View>
Nooruddin Lakhani
  • 7,507
  • 2
  • 19
  • 39
0

Hi @Nitish I am able to run the same code with now issue. On scroll I can see full text. snack.expo.io/n93fqzqgG

You just need to add style and <SafeAreaView /> as parent. Below is my working code

import * as React from 'react';
import { Text, View, StyleSheet, ScrollView, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  let epiComment = "the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19, data to date suggest that 80% of infections are mild or asymptomatic, 15% are severe infections, requiring oxygen, and 5% are critical infections, requiring ventilation. these fractions of severe and critical infection would be higher than those observed for influenza infection. those most at risk of severe influenza infection are children, pregnant women, the elderly, people with underlying chronic diseases and immunocompromised individuals. for covid-19, our current understanding is that advanced age and underlying conditions increase the risk of severe infection. the people most at risk of influenza infection the rate of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.the speed of transmission is an important point of difference between the two viruses. influenza has a shorter median incubation period (the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19 virus. the serial interval for covid-19 virus is estimated to be 5-6 days, while for influenza virus the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19. in addition, transmission during the first 3-5 days of illness, or potentially presymptomatic transmission - transmission of the virus before the onset of symptoms - is an important factor in the transmission of influenza. on the other hand, although we are learning that some people may shed the covid-19 virus 24 to 48 hours before the onset of symptoms, this does not appear to be a major factor in transmission at this time.(the time between infection and onset of symptoms) and a shorter serial interval (the time between successive cases) than covid-19. the serial interval for covid-19 is estimated to be 5-6 days, while for influenza virus, the serial interval is 3 days. this means that influenza can spread more rapidly than covid-19.************"
    return (
        <SafeAreaView style={styles.container}> 
          <ScrollView >
            <Text>
              {epiComment}
            </Text>
          </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    margin: 8,
  },
});
Nitish
  • 995
  • 7
  • 17
  • which react native version you are using ? I have issue on RN 0.60.0. Same code is working fine newer versions. – Nitish Nov 13 '20 at 17:22
  • I tested on https://snack.expo.io/ which work on latest versions. – Nitish Nov 15 '20 at 07:23
  • please try to run with RN 0.60.0 version and then let me know if it works. Thanks – Nitish Nov 18 '20 at 04:50
  • Above code is not working . Same issue still appears – Nitish Nov 18 '20 at 05:02
  • What's actual issues with android and iOS can you describe and share screenshots. – Nitish Nov 18 '20 at 06:07
  • please check description . I have added ascreenshot . – Nitish Nov 20 '20 at 05:02
  • Definitely it's not the issue of this code I think you have a parent view for this code witch is not let the scroll work. If that not the condition then sorry, I can't say anything without see full code. if you don't prefer then no issue. – Nitish Nov 20 '20 at 07:08
  • I have already shared full code of parent component except top import declaration. What else do you want ? I also tried your shared above code but same result. – Nitish Nov 20 '20 at 08:41
  • Do you try with RN 0.60.0 not expo ? – Nitish Nov 20 '20 at 08:42
  • Sorry, Dud but I think It's the simplest code work any where I don't think version changes make any difference but you are facing it. So, I can't say wha't the issue. – Nitish Nov 20 '20 at 10:50
  • No problem. Thanks for your effort. – Nitish Nov 20 '20 at 17:30