Some utilities that render a horizontal component vertically, specifically a <Slider />

HorizontalToVerticalComponent.tsx

'use strict';
import React, { PropsWithChildren, useMemo } from 'react';
import { I18nManager, StyleSheet, View } from 'react-native';

/**
 * You might want to change this value
 * */
const verticalContainerHackSize = 50;

export enum Direction {
    'auto', 'ltr', 'rtl', 'ttb', 'btt'
}

/**
 * This hack uses rotation, it might produce styling problems that will require workarounds, see {VerticalContainerHack}
 * */
const styles = StyleSheet.create({
    ttb: { transform: [{ rotate: '90deg' }] },
    btt: { transform: [{ rotate: '-90deg' }] },
    rtl: { transform: [{ scale: -1 }] },
    default: { flex: 1 },
    container: {
        flex: 1,
        justifyContent: "center",
        flexDirection: "column"
    },
    verticalContainerHack: {
        ...StyleSheet.absoluteFillObject,
        left: -verticalContainerHackSize,
        right: -verticalContainerHackSize
    }
});

/**
 * use this function to style your component
 * @param direction
 */
export function getDirectionTransformation(direction: Direction) {
    return useMemo(() => {
        switch (direction) {
            case Direction.auto: return I18nManager.isRTL && styles.rtl
            case Direction.rtl: return styles.rtl
            case Direction.ttb: return styles.ttb
            case Direction.btt: return styles.btt
            default: return null
        }
    }, [direction]);
}

export function useVerticalDirection(direction: Direction) {
    return useMemo(() => direction === Direction.btt || direction === Direction.ttb, [direction]);
}

/**
 * You might need to wrap your component with this container in order to render it nicely
 * It makes sure there's enough space to render the vertical component
 * @param props
 */
function VerticalContainerHack(props: PropsWithChildren<{ direction?: Direction }>) {
    const vertical = useVerticalDirection(props.direction);
    return (
        <View style={styles.default}>
            <View style={vertical ? styles.verticalContainerHack : styles.default}>
                {props.children}
            </View>
        </View>
    );
}

VerticalContainerHack.defaultProps = {
    direction: Direction.btt
}

export default VerticalContainerHack;