App.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, Image, ImageBackground } from 'react-native';

const remote = 'https://i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg';

export default class App extends React.Component {
  render() {
      return (
	  
	      <ImageBackground source=
	      { {uri: 'https://i.pinimg.com/736x/80/29/a9/8029a9bf324c79b4803e1e5a2aba25f3--costume-makeup-iphone-wallpaper.jpg' } }
	  style={styles.container}
	      >
	      <Text style={styles.headerText}>My Favourite Things</Text>        
	      
	      <TextInput 
	  placeholder="Add your favourite things" 
	  style={styles.inputbox}
	      />
	      <Button
	  title="Add"
	  style={styles.addButton}
	      />
	      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: 'black',
    opacity: 0.5,
      paddingTop: 30,
      height: '100%'
  },
  header: {
    padding: 10,
  },
  headerText: {
    fontSize: 30,
    color: '#003cb3',
  },
  inputbox: {
    borderWidth: 1,
    height: 40,
    width: "70%",
    backgroundColor: 'white',
    },
  addButton: {
    width: "30%"
  },
  input: {
    flexDirection: "row",
    width: '100%',
    justifyContent: "space-evenly",
    alignItems: "center",
  }
});