Styling

/*
 *
 *
 */

import React from "react";
import { SafeAreaView, StatusBar } from "react-native";
import styled from "styled-components";
import { AntDesign } from "@expo/vector-icons";

export default function App() {

  return(
    <Container>
      <StatusBar barStyle="light-content" />
      <RecipeBackground source={require('./assets/43660.jpg')}>
        <SafeAreaView>
          <MenuBar>
            <Back>
              <Text style={{ marginLeft:10 }}>AppTest</Text>
            </Back>
          </MenuBar>
        </SafeAreaView>
      </RecipeBackground>

    </Container>
  );

}

const Container = styled.View`
  flex: 1;
  background-color: #fff;
`
const Text = styled.Text`
  color: ${(props) => (props.dark ? "#000" : "#fff")};
  font-family: AvenirNext-Regular;
`

const RecipeBackground = styled.ImageBackground`
  width: 100%;
`
const MenuBar = styled.View`
  flex-direction: row;
  justify-content: space-between;
  padding: 16px;
`
const Back = styled.View`
  flex-direction: row;
  align-items: center;
`