Styled-tools not working
denull0 opened this issue · 4 comments
denull0 commented
I am trying to use switchProp but for some reason values are empty. http://jmp.sh/mEP6Wtm
PopupButton.defaultProps = {
titleAlign: 'left',
}
const Container = styled.View`
flex: 1;
`
const Button = styled.TouchableHighlight`
flex:1;
justify-content:center;
align-items: ${switchProp('titleAlign', {
center: 'center',
left: 'flex-start',
})};
padding-top: ${palette.SXL};
padding-bottom: ${palette.SXL};
`
Any idea where the problem might be?
diegohaz commented
What's PopupButton
? Does that work if you put defaultProps on Button
?
Button.defaultProps = {
titleAlign: 'left',
}
dimoFeeld commented
@diegohaz Hey Diego, so styled-tools are working on this component:
/* @flow */
import React, { Component } from 'react';
import styled, { css } from 'styled-components/native';
import { View, Text } from 'react-native';
import * as palette from './../styles/style-vars.js';
import { prop, switchProp } from 'styled-tools'
import Icon from './icon';
const Button = (props) => {
return (
<ButtonContainer
bgcolor={props.bgcolor}
size={props.size}
enableIcon={props.enableIcon}
>
{props.icon ? (<Icon
icon={props.icon}
size={props.iconSize}
color={props.iconColor}
/>) : null }
{props.Title ? (<ButtonTitle>{props.Title}</ButtonTitle>) : null }
</ButtonContainer>
);
};
Button.defaultProps = {
bgcolor: 'primary',
size: 'medium',
}
const ButtonContainer = styled.View`
flex-direction: row;
justify-content:center;
align-items: center;
padding-left: 16;
padding-right: 16;
height: 48;
width: ${switchProp('size', {
small: '48',
medium: '96',
auto: 'auto'
})};
border-radius: 24;
background-color: ${switchProp('bgcolor', {
primary: '#F5F5F5',
secondary: '#F5F5F5',
accent: '#FC4600'
})};
`
const ButtonTitle = styled.Text`
font-size: ${palette.FS};
background-color: transparent;
margin-left: 0;
`
export default Button ;
But they are breaking on this one:
/* @flow */
import React, { Component } from 'react';
import styled, { css } from 'styled-components/native';
import { View, TouchableOpacity } from 'react-native';
import { Text } from './../styles'
import * as palette from './../styles/style-vars.js';
import { prop, ifProp, switchProp } from 'styled-tools'
import Icon from './icon';
const PopupButton = (props) => {
return (
<Container>
<Button
onPress={props.onPress}
underlayColor={props.underlayColor}
>
<Text l cream>{props.title}</Text>
</Button>
</Container>
);
};
PopupButton.defaultProps = {
titleAlign: 'left',
}
const Container = styled.View`
flex: 1;
`
const Button = styled.TouchableHighlight`
flex:1;
justify-content: center;
align-items: ${switchProp('titleAlign', {
center: 'center',
left: 'flex-start',
})};
padding-top: ${palette.SXL};
padding-bottom: ${palette.SXL};
`
export default PopupButton ;
I've tried uninstalling and clearing cache but still the same results. Property cannot pass.
Thank you for you time!
P.S. I am just a designer curious about react native and I find styled-tools a super comfortable way of styling my app. Keep up the good work!
diegohaz commented
You should pass props.titleAlign
to Button
inside PopupButton
as well as you do with props.bgcolor
and props.size
inside Button
.