Write Once, Align Anywhere: A Universal Function for Vertical & Horizontal Views in React Native 🚀

Photo by Markus Spiske on Unsplash

In this article we will make a common function to show the views Vertically and Horizontally in React Native.

Align Items Vertically 🚀

import { StyleSheet, Text, View } from "react-native"

const ShowItemScreen = ()=>{
    return <View style={styles.container}> 
        <Text>{'Vertical Items 1'}</Text>
        <Text>{'Vertical Items 2'}</Text>
    </View>
}

const styles = StyleSheet.create({
    container:{
        flexDirection  : 'column' // by default 
    }
})

If want to show items vertically then we called View from the ReactNative and pass the child views there.

By default flexDirection of View is column , that’s why it shows the items vertically.

Align Items Horizontally 🚀

import {StyleSheet, Text, View} from 'react-native';

const ShowItemScreen = () => {
  return (
    <View style={styles.container}>
      <Text>{'Horizontal Items 1'}</Text>
      <Text>{'Horizontal Items 2'}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
});

In the same way if we pass row to flexDirection , it will show the items horizontally.