0

Trying to use put space-between and stretch out the buttons that appear in the overlay pop-up screen using flexbox. This is a child view of the main view of the screen. Nothing but alignItems: 'center' seems to be working to align these buttons. Any help to get the other flexbox properties to work on this child view would be much appreciated 

<View style={{ flex: 1 }}>
            <ImageBackground
              style={{ width: Dimensions.get("window").width, height: 300 }}
              source={require("../../resources/img/image.jpeg")}
            />
            <View style={{ marginTop: -20, paddingLeft: 20, paddingRight: 20 }}>
              <MainButton onPress={this.openOverlay} size={MainButtonSize.medium}>
                {this.bookButton}
              </MainButton>
            </View>

            <Overlay
              visible={this.state.modalVisible}
              onClose={this.onClose}
              closeOnTouchOutside
              animationType="zoomIn"
              containerStyle={{ backgroundColor: "rgba(255, 255, 255, 0.78)" }}
              childrenWrapperStyle={{ backgroundColor: "red" }}
              animationDuration={350}
            >
              {(hideModal, overlayState) => (
                <View style={{ alignItems: "center" }}>. <== THIS VIEW
                  <MainButton size={MainButtonSize.large} onPress={this.onStaffPress}>
                    {this.staffButton}
                  </MainButton>

                  <MainButton size={MainButtonSize.large} onPress={this.onServicesPress}>
                    {this.serviceButton}
                  </MainButton>

                  <MainButton size={MainButtonSize.small} onPress={this.onClose}>
                    {this.closeButton}
                  </MainButton>
                </View>
              )}
            </Overlay>
          </View>
James Mulcahy
  • 43
  • 1
  • 5

1 Answers1

0

Please try to set flex: 1 in the View tag

Andrei Vedovato
  • 171
  • 1
  • 6