CODEWITHSUNDEEP
react-native
Atharva
Atharva

Reputation: 6969

React Native: How to set height of the child view same as parent view with position=absolute?

I want to show two children views inside a parent view. Both the children have position: "absolute" in style, as I want to apply some animations on the position of the views. I want to set the height of the views to be equal to the parent view. How can I achieve this in React native?

Upvotes: 2

Views: 13593

Answers (1)

Jean Regisser
Jean Regisser

Reputation: 6716

To have your children views that use absolute positions the same height as the parent, you can set their top and bottom position to 0.

Then you can still apply a margin or transform to further change their position.

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.child1}/>
        <View style={styles.child2}/>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  child1: {
    position: 'absolute',
    backgroundColor: 'green',
    right: 0,
    top: 0,
    bottom: 0,
    width: 40,
  },
  child2: {
    position: 'absolute',
    backgroundColor: 'blue',
    left: 0,
    top: 0,
    bottom: 0,
    width: 40,
  },
});

sample

See it live: https://rnplay.org/apps/kSZnBg

Upvotes: 4

Related Questions