Ben Borgers

How to right-align an element in React Native

February 21, 2020

Right aligning a component can be hard in React Native, especially when you don't want to just use text-align: right.

Luckily, you can use flexbox to right-align an element by setting two properties on a wrapping View.

export default () => {
  return (
    <View
      style={{
        flexDirection: "row",
        justifyContent: "flex-end"
      }}
    >
      <Button
        title="Click me"
        onPress={() => console.log("clicked")}
      />
    </View>
  )
}

More blog posts

Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iā€™m working on!

Twitter ↗ RSS feed ↗