Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to make a text field scrollable?

I am trying to create a calculator, but I am facing a problem when text gets long because it turns to ellipsis, so I used ScrollView. It can be scrolled by increasing the value of numberOfLines, but when I tried scrolling up, it bounced back, and I would like it to stay where it is scrolled.

I set adjustsFontSizeToFit into true but it gets smaller too much which is not the one I want.

You can test it from here https://snack.expo.dev/_i4anOJ8v

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Here is the screenshot: https://imgur.com/a/BAYyN5e

Any help is appreciated

<View style={styles.fieldContainer}>
  <ScrollView contentContainerStyle={styles.field}>
    <Text
      // adjustsFontSizeToFit={true}
      numberOfLines={500}
      style={{
        fontSize: textFontSize,
      }}>
      {text}
    </Text>
  </ScrollView>
</View>;


const styles = StyleSheet.create({
  fieldContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
  },
  field: {
    marginTop: 'auto',
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    flexDirection: 'column',
  },
});

>Solution :

==> you need to change your style in scrollview.

 field: {
    
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
    flexDirection: "column",
  },
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading