How do I line up text in React Native?

Question

I have a React Native app that transposes music notes. You choose the keys to transpose from and too and then choose which notes you want to transpose.

The notes to choose from look like this as an example C C# D D#/Eb F F# etc. The problem is when I render the chosen notes and the new notes onscreen they are all close together and hard to read. As an example my output right now looks like this:
D#/EbF
GA
But I want it to look like this:
D#/Eb...F (this is notetoTranspose in my code)
G............A (this is newNote)
I don't want the periods, just space between the notes to make things look more readable. Here is my code below. Any help would be appreciated.

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

const PickNotesToTranspose = ({ newArr, toKeyArr }) => {

const chromaticArrChoose = ['C', 'C#', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];

// CHANGE
const [pressed, setPressed] = useState(() => chromaticArrChoose.reduce((acc, curr) => acc[curr] = false, {}));
const [noteToTranspose, setNoteToTranspose] = useState([]);
const [newNote, setNewNote] = useState([]);

const mapArrChoose = newArr.map((c, index) => {
    const handlePress = () => {
        setPressed(state => ({ ...state, [c]: !state[c] }));
        setNoteToTranspose(previous => [...previous, c]);
        setNewNote(prevNote => [...prevNote, toKeyArr[index]])

    }


    return (
        <Pressable key={index} onPress={() => handlePress()}>
            <Text style={[pressed[c] ? styles.selectedNote : styles.chromatic]}>{c}</Text>
        </Pressable>
    )
})


return (
    <View>
        <Text>{mapArrChoose}</Text>
        <Text> {noteToTranspose}</Text>
        <Text> {newNote}</Text>
    </View>

)

}

export default PickNotesToTranspose;

const styles = StyleSheet.create({
chromatic: {
    fontSize: 28,
},

btnStyle: {
    borderWidth: 1,
},

chooseKeyTxt: {
    marginTop: 50,
    fontSize: 20,
    textAlign: 'center',
},

selectedNote: {
    color: 'green',
    fontSize: 28,

},

output: {
    borderWidth: 1,
},

})