refactor(mention-area): migrate mention-area to styled component#553
refactor(mention-area): migrate mention-area to styled component#553andrewda merged 6 commits intogitpoint:masterfrom binkpitch:532-mention-area
Conversation
There was a problem hiding this comment.
I guess you can refactor as following. But not sure whether it is the best practice. (cc @alejandronanez)
const StyledAnimatedView = styled(Animated.View)`
${({style}) => style}
`
// in render
<StyledAnimatedView style={{...this.props.style, height: this.state.height}}></StyledAnimatedView>
|
|
||
| const DisplayNameText = styled.Text` | ||
| fontSize: ${normalize(12)}; | ||
| ${{ ...fonts.fontPrimary }}' |
There was a problem hiding this comment.
@binkpitch Can we simply write ${fonts.fontPrimary} here? Please correct me if I am wrong. 😅
There was a problem hiding this comment.
@chinesedfan I think ${{ ...fonts.fontPrimary }} can be change to ${fonts.fontPrimary}. I'll make a new commit to fix that.
|
|
||
| const UserDetailsBox = styled.View` | ||
| flex: 1; | ||
| margin-left: 5; |
There was a problem hiding this comment.
If just use margin: 5;, will it work?
There was a problem hiding this comment.
@lex111 When I use margin: 5;, I got the following error. Seperating margin into margin-left, margin-right, margin-top, and, margin-buttom works but I have no idea why.
There was a problem hiding this comment.
@lex111 It is due to styled component's shorthands properties restriction.
|
@binkpitch I haven't dealt with that case before, but what @chinesedfan sounds good to me. |
alejandronanez
left a comment
There was a problem hiding this comment.
Can you please try what @chinesedfan suggested related to Animated.View?
Thanks!
|
@alejandronanez Sorry for the late reply, I just woke up. Sure, I'll make a commit of what @chinesedfan suggested. |
|
@binkpitch no rush at all! Let us know how this goes. |
|
@alejandronanez I have changed Animated.View to StyledAnimatedView in my last commit. Does this look good to you? |
alejandronanez
left a comment
There was a problem hiding this comment.
@binkpitch it does! thanks a lot!
#532
This migrate mention area component to styled component.
Note that, I am not really sure about how to refractor this part.
<Animated.View style={[{ ...this.props.style }, { height: this.state.height }]}> ... </Animated.View>