CODEWITHSUNDEEP
cssreactjsreact-native
Bucky
Bucky

Reputation: 1206

Keeping a component 50% bottom to its top component

I'm trying to make a profile page ui, Where the profile data like name and bio container will stay 50% to the bottom of its top component which is cover picture right now.

So this is my React Native code,

<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>

And current styles,

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 added marginTop : -100 to make it look like the structure I want.

Screenshot

So this is what it looks like right now after adding marginTop to -100, But that's not responsive, When I increase the size of that white block. It doesn't stay in center anymore.

Need Help on how to do that :(

Upvotes: 0

Views: 580

Answers (2)

Puschi
Puschi

Reputation: 249

You can nest your profileDataContainer in your coverContainer and place it absolute with top 50%. Hope you can convert it yourself to your React Native code...

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>

Upvotes: 1

sanjar
sanjar

Reputation: 1101

You can do it using percentage instead of logical pixels like in this example :

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

export default class App 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'
  }
});

In this example I set the height of the blue background and the white header to 30% of the window's height, and the marginTop to -15% of the window's height (I have to use Dimensions because if I use a percentage it'll be the percentage of the width...)

You can run my example on snack : https://snack.expo.io/Hyd7ChplX

Upvotes: 1

Related Questions