Landing.js

import React from "react";
import { View, Text, Image } from "react-native";
import { Button } from "native-base";

var landingTop = require("../assets/landingTop.jpeg");
var landingBottom = require("../assets/landingBottom.jpeg");

class Landing extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={landingTop}
          style={styles.landingImage}
        />
        <View style={styles.viewStyle}>
          <Text
            style={styles.titleStyle}
          >Welcome to PokeSearch</Text>
          <Button
            block={true}
            style={styles.buttonStyle}
            onPress={() => {}}
          >
            <Text style={styles.buttonText}>Start Searching</Text>
          </Button>
        </View>
        <Image
          source={landingBottom}
          style={styles.landingImage}
        />
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    backgroundColor: 'yellow',
  },
  viewStyle: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },
  landingImage: {
    width: '100%'
  },
  titleStyle: {
    fontSize: 30,
    color: "blue",
    alignItems: "center",
  },
  buttonStyle: {
    margin: 10,
  },
  buttonText: {
    color: "#fff",
  },
};

export default Landing;