Niklas Rosencrantz:

I got a mockup that I'm supposed to implement with react native. The mockup is:

My implementation is:

How can I adjust the text so that it is more similar to the mockup?

import React from 'react';
import {Button, Image, Picker, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            titleText: 'Welcome Ivanka!',
            bodyText: 'Your verification was successful.',
            bodyText2: 'Sign up as:'
        };
    }

    render() {
        return (



                        {this.state.titleText}{'\n'}{'\n'}


                        {this.state.bodyText}{'\n'}{'\n'}


                        {this.state.bodyText2}



 this.props.navigation.navigate('Details')}>
                            source={require('./translator.png')} style=
                        />

 this.props.navigation.navigate('Details')}>
                            source={require('./business-person-silhouette-wearing-tie.png')}
                            style=
                        />



 this.props.navigation.navigate('Details') }>
Translator


 this.props.navigation.navigate('Details') }>
Recruiter




        );
    }
}

class DetailsScreen extends React.Component {
    state = {user: ''}

    render() {
        return (


                    Which languages do you translate?

                    selectedValue={this.state.language}
                    onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>




                    selectedValue={this.state.language}
                    onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>




                    title="Go back"
                    onPress={() => this.props.navigation.goBack()}
                />

                    title="Next"
                    onPress={() => this.props.navigation.navigate('Details')}
                />

        );
    }
}

const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default class App extends React.Component {
    render() {
        return ;
    }
}


const styles = StyleSheet.create({
    baseText: {
        fontSize: 30,
        fontFamily: 'normal',
        color: 'skyblue',
        textAlign: 'center'
    },
    titleText: {
        fontSize: 30,
        color: 'skyblue',
        textAlign: 'center'
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        // lineHeight:75,
        // fontSize:75
    },
    buttonContainer: {
        // margin: 20
    },
    alternativeLayoutButtonContainer: {
        // margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})