shoutem/theme

Button width mysterious when extending shoutem.ui.Button

JulianKingman opened this issue · 1 comments

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;

Nevermind, it looks like the containing View had alignItems: stretch