How to make a text field scrollable?-CodePudding

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

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',
  },
});

CodePudding user response：

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

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