Placing element in the top right corner in react native

Question

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 1

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
  }
});