Search code examples
cssreact-nativereact-native-stylesheet

How do you add Margin to an Element with the flex-end property?

I am trying to position a View in the top right corner of the screen in my react native app and have done so using: alignSelf: 'flex-end' with position: absolute. This works, however I now want to add a margin around the box with margin: 15 but this doesn't work. The View has margin on the top but not on the right, presumably because my usage of flex-end places the View as far left as possible. How do I override this and add margin all around the View?

Solution

  • Just don't use alignSelf: 'flex-end', since you have already position: 'absolute', use top: 15 and right: 15 to have it at top right with 15 pixels distance:

    <View style={{
  flex: 0,
  position: 'absolute',
  top: 15,
  right: 15
}}>...</View>