How to have a multiline button?

[EduVencovsky]

I'm trying to use the Button component with multiple lines of text, is it even possible?

I was looking at the source code and found that the Text component of the Button have a fixed prop numberOfLines={1}. Maybe it should be possible to customize the Text component passing something like textProps?

I know that multiline button goes agains material design guide lines, but... is it possible?

[raajnadar]

Did you try

<Button>
   <Text>Multiline test</Text>
   <Text>Did that work?</Text>
</Button>

[latobibor]

This would not work when you don't know the exact text or when you deal with localized text which can be either very short for one language and very long for another.

[EduVencovsky]

@raajnadar doesn't work because nested Text components are treated as only one "text" for react native

[peterchibunna]

If you want a multiline text Button, use the TouchableRipple component wrapped with the Surface component:

<Surface ...>
  <TouchableRipple ...>
     <Text numberOfLines={2}>
      ...
      </Text>
   </TouchableRipple>
</Surface>

and then apply the button theme of your app or the DefaultTheme to the Surface component.

[EduVencovsky]

apply the button theme of your app or the DefaultTheme to the Surface component

How would that be?

[peterchibunna]

Basically style the Surface as you want, because Surface has theme.colors.surface background color by default and button has theme.colors.primary as the default background color

[bcye]

If you want to keep using a Button component - use an IconButton component and set the Text as a custom button, though you will have to use a fixed width, else it will have the default icon width. You could also use the icon prop on a normal button, but it has some stylings applied to it that make the IconButton a better candidate:

<IconButton
  style={{ width: "28%", maxHeight: "100%" }}
  icon={() => (
  <Text
    style={{
      width: "100%",
      textAlign: "center",
    }}
    numberOfLines={2}
  >
    Your multiline text
  </Text>
  )}
/>

[adbs1]

Why not just make numberOfLines configurable?

The first is ugly, but unlikely to happen, still very usable, and more accessible than an ellipsis if it does happen. I need the "press 'n' hold", and it is easily supported IF the numberOfLines is configurable.