Button width mysterious when extending shoutem.ui.Button
JulianKingman opened this issue · 1 comments
JulianKingman commented
So I'm extending the default shoutem theme, the relevant part is pasted below. It looks more or less good, but the buttons are mysteriously appearing wider than they should. It's as if they had the full-width
styleName applied, or flex: 1
, but they don't... Any ideas about what's happening here? Am I extending the theme wrong? I can't find a width or flex definition anywhere in the component structure (when inspecting with react-devtools).
The only reference to width anywhere is the layout
state in the AnimatedComponent.
import { getTheme, defaultThemeVariables } from "@shoutem/ui";
const defaultTheme = getTheme({
...defaultThemeVariables,
backgroundColor: colors.white
});
const Theme = {
...defaultTheme,
"shoutem.ui.Button": {
...defaultTheme["shoutem.ui.Button"],
backgroundColor: colors.primaryRed,
paddingHorizontal: 30,
paddingVertical: 2.5,
borderRadius: 5,
borderWidth: 2.5,
borderColor: "transparent",
".secondary": {
...defaultTheme["shoutem.ui.Button"][".secondary"],
borderColor: colors.primaryRed,
borderWidth: 2.5,
backgroundColor: 'transparent',
"shoutem.ui.Text": {
// ...defaultTheme["shoutem.ui.Button"][".secondary"]["shoutem.ui.Text"],
color: defaultTheme["shoutem.ui.Text"].color
}
},
"shoutem.ui.Text": {
...defaultTheme["shoutem.ui.Button"]["shoutem.ui.Text"],
color: colors.white,
fontSize: 17
}
}
};
export default Theme;
JulianKingman commented
Nevermind, it looks like the containing View had alignItems: stretch