Button text goes out of boundary when aligning it to the left

[alessandrocapra]

Steps to reproduce

Assign textAlign: "left" to buttonTextStyle.

[AdelRedaa97]

Could you share code

[alessandrocapra]

FYI: I am using Native Base as UI library, that might be useful.

<View
              style={{
                marginTop: 8,
                flexDirection: "row",
                justifyContent: "space-between",
              }}
            >
              <SelectDropdown
                data={["Market order", "Limit order"]}
                onSelect={(selectedItem) => {
                  setOrderType(selectedItem);
                }}
                defaultButtonText={"Order type"}
                buttonTextAfterSelection={(selectedItem) => {
                  return selectedItem;
                }}
                rowTextForSelection={(item, index) => {
                  return item;
                }}
                buttonStyle={styles.selectBtn}
                buttonTextStyle={styles.selectBtnText}
                renderDropdownIcon={() => {
                  return <Icon name="caret-down-outline" />;
                }}
                dropdownIconPosition={"right"}
                rowStyle={{ backgroundColor: "#ccc" }}
              />
              <SelectDropdown
                data={["Day order", "GTC "]}
                onSelect={(selectedItem) => {
                  setOrderDuration(selectedItem);
                }}
                defaultButtonText={"Order duration"}
                buttonTextAfterSelection={(selectedItem) => {
                  return selectedItem;
                }}
                rowTextForSelection={(item, index) => {
                  return item;
                }}
                buttonStyle={styles.selectBtn}
                buttonTextStyle={styles.selectBtnText}
                renderDropdownIcon={() => {
                  return <Icon name="caret-down-outline" />;
                }}
                dropdownIconPosition={"right"}
                rowStyle={{ backgroundColor: "#ccc" }}
              />
            </View> 

and the styles are:

const styles = StyleSheet.create({
  noLeftMargin: {
    marginLeft: 0,
  },
  selectBtn: {
    flexBasis: "48%",
    height: 72,
    borderRadius: 4,
    backgroundColor: "rgba(255,255,255,0.15)",
    borderBottomWidth: 1,
    borderBottomColor: "#fff",
  },
  selectBtnText: { color: "#fff", textAlign: "center", fontSize: 17 },
});

[aryalprakash]

I got it working by setting height in buttonTextStyle.