CODEWITHSUNDEEP
react-native
Bob
Bob

Reputation: 8714

Top align elements from the bottom view

I have two Views under my main View

    <View style={styles.container}>
      <View style={styles.header}>
        <Image
          resizeMode="contain"
          source={require("../assets/logo-large.png")}
          style={styles.logo}
        />
      </View>

      <View style={styles.content}>
        <TextInput
          style={styles.input}
          onChangeText={(email) => setEmail(email)}
          defaultValue={email}
          placeholder="Your email"
          autoCompleteType="email"
          textContentType="emailAddress"
        ></TextInput>
      </View>

My code for styling looks like this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gold",
  },
  content: {
    flex: 2,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightblue",
  },
});

What I want to achieve is to have a header with logo at the top of the screen and to have the content below, but I want to have all elements in content to be top aligned. At the moment those elements are center aligned in content.

Can someone help with this?

Upvotes: 0

Views: 197

Answers (2)

Sameer Kumar Jain
Sameer Kumar Jain

Reputation: 2135

Since your main view defaults to flex-direction = column then your content style justifyContent: "center", will arrange elements from content at vertical middle and alignItems: "center" will make them horizontal center. You need to remove those to keep the content elements to start from the top.

Please update your styles to the following.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gold",
  },
  content: {
    flex: 2,
    alignItems: "center",
    backgroundColor: "lightblue",
  },
});

Good Luck

Upvotes: 1

Bob
Bob

Reputation: 8714

I have adjusted it using justifyContent on header and footer styles.

  header: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
    backgroundColor: "gold",
    paddingBottom: "10%",
  },
  content: {
    flex: 2,
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "lightblue",
  },

Upvotes: 0

Related Questions