fix(exoflex): fix unable to change inner bar height #159
Conversation
nathaniaelvina
commented
Oct 29, 2019
nathaniaelvina
commented
- change some styling so it's more similar to RNP
- enable the user to change inner bar height
nathaniaelvina
added
wip
| let borderRadius = (style && style.borderRadius) || roundness; | ||
|
|
||
| let onLayout = (event: LayoutChangeEvent) => | ||
| setWidth(event.nativeEvent.layout.width); |
There was a problem hiding this comment.
Can't we just use flex: 1 or width: '100%' instead?
There was a problem hiding this comment.
Actually, I just mimic how paper implemented it. we can change back to width: '100%'
There was a problem hiding this comment.
Hmm, I think I get what Paper wants to by using onLayout. Could you please check it on a browser and resize the browser width?
There was a problem hiding this comment.
using width: '100%'
using onLayout
There was a problem hiding this comment.
I thought width: '100%' won't work well on desktop browser. But actually, it works better than onLayout.
| let height = (style && style.height) || 8; | ||
| let borderRadius = (style && style.borderRadius) || roundness; |
There was a problem hiding this comment.
I think we shouldn't access style object directly.
Either we flatten it first or use a different approach.
Quiz time! What happen if the user pass in something like style={[styles.foo, { height: 7 }]}?
There was a problem hiding this comment.
sure we can flatten it.
On that case, the height will be 7 but the radius stay the same, unless they pass the new radius
There was a problem hiding this comment.
Right, my point is in the style.borderRadius part. We're not supposed to access it directly.
On older version of RN, the style prop could be an array or an object, or even a number!
Can you guess where the number came from? 😉
There was a problem hiding this comment.
righttt, the StyleSheet.create returns number
nathaniaelvina
force-pushed
the
fix/progressbar
branch
from
a5c0a2f
to
fcfbc26
Compare
| @@ -20,7 +20,10 @@ export default function ProgressBar(props: Props) { | |||
| duration: 500, | |||
| }); | |||
|
|
|||
| let height = (style && style.height) || 8; | |||
| let flattenedStyle = StyleSheet.flatten<ViewStyle>(style); | |||
There was a problem hiding this comment.
| let flattenedStyle = StyleSheet.flatten<ViewStyle>(style); | |
| let flattenedStyle = StyleSheet.flatten<ViewStyle>(style) || {}; |
So we can drop the flattenedStyle &&
* style(exoflex): change progress bar styling * docs(exoflex): update example
