Need to increase ProgressViewIOS bar height

Question

I need to increase the Size(height) of the progress bar. Any suggestions would b helpful.

I am using ProgressViewIOS native component.

Tried using, height: 5, lineHeight: 50, minHeight: 10, borderRadius: 10. But not achieved the desired output. — sathish, May 25 '17 at 10:44
https://stackoverflow.com/a/27368779/4417447 Use this, if you are using native progress view control. — santak, May 25 '17 at 10:46

Axel Schenkelman · Answer 1 · 2019-05-17T03:05:35.620

8

The use of transform property is correct. Its syntax should be something like

<ProgressViewIOS style={styles.progressBar}/>

const styles = StyleSheet.create({
  progressBar: {
    width: 100,
    transform: [{ scaleX: 1.0 }, { scaleY: 2.5 }],
  }
})

edited May 17 '19 at 03:05

answered Mar 06 '18 at 16:15

Axel Schenkelman

218
2
6

score 2 · Answer 2 · answered Feb 08 '18 at 17:15

2

I was able to achieve height manipulation using the transform style property.

transform: 'scaleX(1.0) scaleY(3.0)'

changing the scaleY number will increase or decrease the height.

answered Feb 08 '18 at 17:15

stims

168
4

score 1 · Answer 3 · answered May 25 '17 at 10:47

1

For swift 3

progressView.transform = CGAffineTransform(scaleX: 1.0, y: 5.0)

answered May 25 '17 at 10:47

santak

327
1
13

This question is about React Native, not native development. ProgressViewIOS is a React Native component. – Jaybo Jan 22 '18 at 02:26

score 1 · Answer 4 · edited May 16 '18 at 03:36

This is how I fixed my issue. You need to style the transform and the height.

style={{transform: [{ scaleX: 1.0 }, { scaleY: 4}], height:12}}

Happy coding!

{( Platform.OS === 'android' )
    ?
    ( <ProgressBarAndroid progressTintColor="#4a90e2" progress = { this.state.progress } styleAttr = "Horizontal" indeterminate = { false } /> )
    :
    ( <ProgressViewIOS style={{transform: [{ scaleX: 1.0 }, { scaleY: 4}], height:12}} progressTintColor="#4a90e2" progress = { this.state.progress } /> )
 }

Need to increase ProgressViewIOS bar height

4 Answers4