Stophface Stophface - 1 year ago 82
Javascript Question

Place top right corner react native

The parent

component
has the following style

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFF',
alignItems: 'center',
justifyContent: 'center',
},
});


I am placing another
component
within this component. I want it in the top-right corner.

Naturally, I would go with the following style in this child
component
:

const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
top: 20,
right: 5,
},
});


However, it places it in the top left corner. The only way I can move it into the right corner is replacing
right: 5
with
left: 500
. But thats kind of not the way to go...

Answer Source

Please check the below stylesheet for child component:

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignSelf: 'flex-end',
    marginTop: -5,
    position: 'absolute', // add if dont work with above
  }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download