Center elements in a view - React-Native

Question

I'm trying to have a screen, whose components are in the center. Usually it's pretty simple but I don't understand why I can't make this components centered... I tried to include the views in a general view but it doesn't work at all. Can you give me a little help ? I know ot's usually really simple to do but here I 'm stuck I don't get why... Thanks a lot !

My code is :

export default class Coords extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
      <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          backgroundImage={require("../../assets/images/bg-header.png")}
          centerComponent={{
            text: i18n.t("settings.title"),
            style: styles.headerComponentStyle
          }}
          containerStyle={styles.headerContainerStyle}
          statusBarProps={{ barStyle: "light-content" }}
        />
          <View>
            <Text>{"\n"}</Text>
            <Text>{"\n"}</Text>
            <Autocomplete
              key={shortid.generate()}
              containerStyle={styles.CoordsContainer}
              inputStyle={styles.autocompleteCoords}
              placeholder={i18n.t("subscription.input.country") + "..."}
              placeholderColor="#FFF"
              spinnerColor="#9D794F"
              highLightColor="#9D794F"
              rightContentItemStyle={{ color: "#333" }}
              scrollToInput={(ev) => {}}
              handleSelectItem={(item, id) =>
                this.handleSelectItemAutocomplete("departure", item, id)
              }
              onDropdownClose={() => onDropdownClose()}
              onDropdownShow={() => onDropdownShow()}
              pickerStyle={styles.autocompletePicker}
              scrollStyle={styles.autocompleteScroll}
              fetchData={async (searchTerm) => {
                return await this.fetchAirportsDataAutocomplete(
                  "departure",
                  searchTerm
                );
              }}
              initialValue={0}
              minimumCharactersCount={2}
              highlightText
              valueExtractor={(item) => item.name}
              rightContent
              rightTextExtractor={(item) => item.props}
            />
          </View>
            <Text>{"\n"}</Text>
          <View>
          <Autocomplete
            key={shortid.generate()}
            containerStyle={styles.CoordsContainer}
            inputStyle={styles.autocompleteCoords}
            placeholder={i18n.t("subscription.input.city") + "..."}
            placeholderColor="#FFF"
            spinnerColor="#9D794F"
            highLightColor="#9D794F"
            rightContentItemStyle={{ color: "#333" }}
            scrollToInput={(ev) => {}}
            handleSelectItem={(item, id) =>
              this.handleSelectItemAutocomplete("departure", item, id)
            }
            onDropdownClose={() => onDropdownClose()}
            onDropdownShow={() => onDropdownShow()}
            pickerStyle={styles.autocompletePicker}
            scrollStyle={styles.autocompleteScroll}
            fetchData={async (searchTerm) => {
              return await this.fetchAirportsDataAutocomplete(
                "departure",
                searchTerm
              );
            }}
            initialValue={0}
            minimumCharactersCount={2}
            highlightText
            valueExtractor={(item) => item.name}
            rightContent
            rightTextExtractor={(item) => item.props}
          />
        </View>
          <Text>{"\n"}</Text>
        <View>
        <Autocomplete
          key={shortid.generate()}
          containerStyle={styles.CoordsContainer}
          inputStyle={styles.autocompleteCoords}
          placeholder={i18n.t("subscription.input.postalcode") + "..."}
          placeholderColor="#FFF"
          spinnerColor="#9D794F"
          highLightColor="#9D794F"
          rightContentItemStyle={{ color: "#333" }}
          scrollToInput={(ev) => {}}
          handleSelectItem={(item, id) =>
            this.handleSelectItemAutocomplete("departure", item, id)
          }
          onDropdownClose={() => onDropdownClose()}
          onDropdownShow={() => onDropdownShow()}
          pickerStyle={styles.autocompletePicker}
          scrollStyle={styles.autocompleteScroll}
          fetchData={async (searchTerm) => {
            return await this.fetchAirportsDataAutocomplete(
              "departure",
              searchTerm
            );
          }}
          initialValue={0}
          minimumCharactersCount={2}
          highlightText
          valueExtractor={(item) => item.name}
          rightContent
          rightTextExtractor={(item) => item.props}
        />
      </View>
        <Text>{"\n"}</Text>
          <Text>{"\n"}</Text>
      <TouchableOpacity
        style={styles.touchable2}
        onPress={() => this.props.navigation.navigate("Settings")}
      >
        <View style={styles.view2}>
          <Text style={styles.textimg2}>
            {i18n.t("signup.action.back")}
          </Text>
        </View>
        <Image
          source={require("../../assets/images/btn-background.png")}
          style={styles.tripsimg2}
        />
      </TouchableOpacity>
  </ImageBackground>
    );
  }
}

It gives this :

Styles :

backgroundImage: {
    flex: 1,
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
  },
autocompleteCoords: {
    width: 320,
    height: 55,
    alignItems: 'center',
    justifyContent: 'center',
    fontFamily: "FunctionLH",
    borderWidth: 0,
    borderBottomWidth: 1,
    borderColor: "#FFF",
  },
  CoordsContainer: {
    position: "relative",
    zIndex: 1,
    width: "100%",
    paddingHorizontal: 8,
  },
autocompletePicker: {
    backgroundColor: "#FFF",
    borderWidth: 0,
    zIndex: 10,
    width: "100%",
    left: 0,
    ...Platform.select({
      ios: {
        left: 20
      }
    })
  },
  autocompleteScroll: {
    backgroundColor: "#FFF",
    borderWidth: 1,
    borderColor: "#FFF",
  },
  touchable2: {
    width: "50%",
    alignItems: "center",
    justifyContent: "center",
  },

When I change the imageBckground style like this, following @yoel 's advice :

backgroundImage: {
  justifyContent:center,
  alignItems: center,

    flex: 1,
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
 },

I get :

Answer 1

add to backgroundImage style

backgroundImage: {
  justifyContent:"center",
  alignItems: "center",

    flex: 1,
    width: "100%",
    height: "100%",
    margin: 0,
    padding: 0,
 },

Answer 2

You will need to add the following into CSS/in-line style to whichever component that should be in the center. Suggest you to read more about Flexbox.

  display: flex;
  justify-content:center;
  align-items: center;