Adjust text placement

Question

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 (
            <View style={{flex: 1,}}>
                <Text style={styles.baseText}>
                    <Text style={styles.titleText} onPress={this.onPressTitle}>
                        {this.state.titleText}{'\n'}{'\n'}
                    </Text>
                    <Text numberOfLines={1}>
                        {this.state.bodyText}{'\n'}{'\n'}
                    </Text>
                    <Text numberOfLines={1}>
                        {this.state.bodyText2}
                    </Text>
                </Text>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
                        <Image
                            source={require('./translator.png')} style={{width: 125, height: 125}}
                        />
                    </TouchableHighlight>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>
                        <Image
                            source={require('./business-person-silhouette-wearing-tie.png')}
                            style={{width: 125, height: 125, flexDirection: 'row'}}
                        />
                    </TouchableHighlight>
                </View>
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
                    <TouchableHighlight onPress={ () => this.props.navigation.navigate('Details') }>
                        <Text style={styles.titleText}>Translator</Text>
                    </TouchableHighlight>

                    <TouchableHighlight onPress={ () => this.props.navigation.navigate('Details') }>
                        <Text style={styles.titleText}>Recruiter</Text>
                    </TouchableHighlight>
                </View>

            </View>
        );
    }
}

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

    render() {
        return (
            <View style={{flex: 1, justifyContent: 'center'}}>
                <Text>
                    Which languages do you translate?
                </Text>
                <Picker
                    selectedValue={this.state.language}
                    onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                    <Picker.Item label="English" value="java"/>
                    <Picker.Item label="JavaScript" value="js"/>
                </Picker>

                <Picker
                    selectedValue={this.state.language}
                    onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
                    <Picker.Item label="Arabic" value="java"/>
                    <Picker.Item label="JavaScript" value="js"/>
                </Picker>

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

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

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

export default class App extends React.Component {
    render() {
        return <RootStack/>;
    }
}


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'
    }
})

Answer 1

I suggest that first thing you should do is to separate the mock up into virtual sections and work your way down into the smallest section.

After you separate these sections, create your views one by one. This way you can design your app with relative positions and this will help you to adjust content and also will look really similar in different screen sizes.

After this example I created a simple code that you can follow which might help you to create desired look with small changes. ( Here its snack )

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.section1}>
          <Text style={[styles.text, {paddingBottom: 20}]}>{'Welcome'}</Text>
        </View>
        <View style={styles.section2}>
          <Text style={[styles.text, {paddingTop: 20}]}>{'Your verification was successful'}</Text>
        </View>
        <View style={styles.section3}>
          <Text style={styles.text}>{'Sign up as:'}</Text>
        </View>
        <View style={styles.section4}>
          <View style={styles.buttonContainer}>
            <View style={styles.button}>
              <Image source={require('./assets/stck2.png')} style={styles.image} />
              <Text style={styles.buttonText}>{'Translator'}</Text>
            </View>
            <View style={styles.button}>
              <Image source={require('./assets/stck1.png')} style={styles.image} />
              <Text style={styles.buttonText}>{'Recruiter'}</Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#fff',
  },
  section1: {
    flex: 0.17,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  section2: {
    flex: 0.30,
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  section3: {
    flex: 0.10,
    justifyContent: 'center',
    alignItems: 'center'
  },
  section4: {
    flex: 0.43
  },
  text: {
    fontSize: 24,
    color: '#53a6db',
    textAlign: 'center',
    paddingTop: 40,
    paddingBottom: 40,
    paddingLeft: 40,
    paddingRight: 40
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row'
  },
  button: {
    flex: 0.5,
    justifyContent: 'center',
    alignItems: 'center'
  },
  buttonText: {
    fontSize: 24,
    color: '#53a6db',
    textAlign: 'center',
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 5,
    paddingRight: 5
  },
  image: {
    width: 100,
    height: 100
  }
});

Here is the final look