Button height is shrunk when initially mounted, but fixed when re-rendered

Current behaviour

I’m using the Button component and when the screen is initially mounted, the button is about half the height of normal. When the screen is re-rendered, the button is fixed and renders normally.

Expected behaviour

The button would render normally at full height on mount / first render.

Code sample

            <View
              style={{
                flexDirection: "row",
                width: "100%",
                justifyContent: "space-evenly",
                alignItems: "center",
              }}
            >
              <Button
                mode="contained"
                textColor={"#fff"}
                compact
                disabled={
                  newPath.name.length === 0 || newPath.map_coords.length < 2
                }
                dark={true}
                onPress={() => savePath()}
              >
                SAVE
              </Button>
              <Button
                mode="contained"
                textColor={colors.darkRed}
                compact
                labelStyle={{ fontWeight: "bold" }}
                style={{
                  backgroundColor: colors.lightGray,
                }}
                dark={true}
                onPress={() => deletePath()}
              >
                {route.params?.travelPath ? "DELETE" : "CANCEL"}
              </Button>
            </View>

Screenshots (if applicable)

on mount:

after re-render:

What have you tried

changing style props on the button components, as well as the parent elements to include flex: 1, height: “100%”, etc. Toggling compact doesn’t make any difference either.

Your Environment

software	version
ios or android	ios and android
react-native	0.69.4
react-native-paper	5.0.0-rc.4
node	v16.14.0
npm or yarn	yarn
expo sdk	6.0.1

[jjrise]

I changed to a different bottom sheet and the issue is resolved. My apologies for stirring this up, but want to follow up in case this trips up anyone else in the future.

[jjrise]

Hey @jjrise, could you please try to reproduce the issue on the snack?

Yes, I will start putting that together now. One thing that is probably worth noting, these buttons are inside a Bottom Sheet. Not sure if it’s related, but the bottom sheet has been suspect for UI issues in the past.

https://github.com/gorhom/react-native-bottom-sheet