Positioning a component halfway between its top and bottom components

Question

Positioning a component halfway between its top and bottom components

Currently, I am working on creating a profile page UI where the profile data such as name and bio container should remain 50% at the bottom of its top component, which is currently the cover picture.

This is the React Native code I have so far:

<View style={styles.container}>
        <View style={styles.coverContainer}>

        </View>
        <View style={styles.profileDataContainer}>

        </View>
        <View style={styles.intrestsContainer}>

        </View>
        <View style={styles.topicsContainer}>

        </View>
      </View>

Here are the current styles being applied:

const styles = StyleSheet.create({
  container: {

  },
  coverContainer: {
      height : 200,
      backgroundColor : 'blue'
  },
  profileDataContainer: {
      marginHorizontal : 30,
      backgroundColor: 'white',
      height : 200,
      shadowColor: "#e5e5e5",
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowRadius: 2,
      shadowOpacity: 1.0,
      elevation : 4,
      marginTop : -100,
  }

});

I have set marginTop to -100 in order to achieve the desired structure.

https://i.sstatic.net/urHMV.png

After setting the marginTop to -100, this is how it looks like now. However, it's not responsive as increasing the size of the white block causes it to shift from the center position.

I need assistance on how to make it responsive :(

css reactjs react-native

Answer 1

Answer №1

To achieve this layout, consider using percentage values instead of logical pixels as demonstrated in the following code snippet:

const WindowHeight = Dimensions.get('window').height;

export default class MyApp extends Component {

  render() {
    return (
      <View style={styles.container}>
      <View style={styles.headerBackground}/>
      <View style={styles.header}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'grey',
  },
  headerBackground: {
    height: '30%',
    width: '100%',
    backgroundColor : 'blue'
  },
  header: {
    height: '30%',
    width: '80%',
    marginTop: WindowHeight * -0.15,
    backgroundColor : 'white'
  }
});

The blue background and white header are set to 30% height of the window, with a margin-top of -15%. It's important to use Dimensions since using percentages would refer to the width otherwise.

For a live demo, you can access my example on Snack:

Answer 2

To achieve this layout, consider using percentage values instead of logical pixels as demonstrated in the following code snippet:

const WindowHeight = Dimensions.get('window').height;

export default class MyApp extends Component {

  render() {
    return (
      <View style={styles.container}>
      <View style={styles.headerBackground}/>
      <View style={styles.header}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'grey',
  },
  headerBackground: {
    height: '30%',
    width: '100%',
    backgroundColor : 'blue'
  },
  header: {
    height: '30%',
    width: '80%',
    marginTop: WindowHeight * -0.15,
    backgroundColor : 'white'
  }
});

The blue background and white header are set to 30% height of the window, with a margin-top of -15%. It's important to use Dimensions since using percentages would refer to the width otherwise.

For a live demo, you can access my example on Snack:

Answer 3

Answer №2

If you want to organize your profileDataContainer within your coverContainer and position it absolutely with top 50%, you can achieve this by adapting your code for React Native...

For example:

.coverContainer{
    height: 200px;
    background-color: blue;
    position: relative;
    width: 100%;
}
.profileDataContainer {
    position: absolute;
    right: 10%;
    left: 10%;
    display: block;
    top: 50%;
    background-color: red;
    height: 200px;
}

<div class="coverContainer"><div class="profileDataContainer"></div></div>

Answer 4

If you want to organize your profileDataContainer within your coverContainer and position it absolutely with top 50%, you can achieve this by adapting your code for React Native...

For example:

.coverContainer{
    height: 200px;
    background-color: blue;
    position: relative;
    width: 100%;
}
.profileDataContainer {
    position: absolute;
    right: 10%;
    left: 10%;
    display: block;
    top: 50%;
    background-color: red;
    height: 200px;
}

<div class="coverContainer"><div class="profileDataContainer"></div></div>

Positioning a component halfway between its top and bottom components

Answer №1

Answer №2

Similar questions

Launching the date/time selection tool through code in the Material UI framework

Can you explain how to pause the .setInterval() function when hovering over it and clicking on the interior content simultaneously?

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Utilizing Bootstrap to create a list inside a <dd> element

Positioning and resizing elements based on varying screen sizes and levels of zoom

"Repetitive" elements arranged horizontally

How to pass information to a component when it is clicked in React.js

How to position JQuery UI tabs at the bottom

Function anomalies triggered by delayed setState updates with React Hooks

Nesting divs that soar within a contained div (not spanning the entire page)

When using npm start, an error related to the babel-eslint version is being displayed

React: Modifying state does not update useState array

Having trouble with the find method when trying to use it with the transform

GSAP TimelineLite is not being loaded correctly by NPM and Webpack

Unit testing in Jest using Luxon: Is there a way to mock the .setZone('local') function?

Is there a way to automatically generate additional text fields based on the user's input?

What is the best way to split a Bootstrap navbar into two separate rows?

Content sliding to the left due to modal prompt

Chrome is currently experiencing a problem with embedded fonts, causing the bottom of the customer's font to be

How can I swap a string for a symbol in JavaScript?