Logo preta e headers

assets/images/playButton.svg

-<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M45.9998 7.66675C24.8398 7.66675 7.6665 24.8401 7.6665 46.0001C7.6665 67.1601 24.8398 84.3334 45.9998 84.3334C67.1598 84.3334 84.3332 67.1601 84.3332 46.0001C84.3332 24.8401 67.1598 7.66675 45.9998 7.66675ZM38.3332 63.2501V28.7501L61.3332 46.0001L38.3332 63.2501Z" fill="white"/>
-</svg>

src/components/Header/header.tsx

 import React from 'react';
-import { View, Button } from 'react-native';
-// import IconButton from '@material-ui/core/IconButton';
-// import ArrowBackIcon from '@material-ui/core';
-import './styles';
+import { Button } from 'react-native';
+import BlackLogo from '../../../assets/images/logoBlack.png';
+import { HeaderContainer, LogoImage } from './styles';
 
 export default function Header({ navigation }: any) {
   function renderMain() {
     return (
-      <View>
-        {/* <IconButton aria-label="delete">
-          <ArrowBackIcon />
-        </IconButton> */}
+      <HeaderContainer>
+        {/* <LogoImage source={BlackLogo} /> */}
         <Button
           onPress={() => {
             navigation.navigate('Info');
@@ -18,7 +15,7 @@ export default function Header({ navigation }: any) {
           title="Go to Info"
           color="#841584"
         />
-      </View>
+      </HeaderContainer>
     );
   }
 

src/components/Header/styles.tsx

+import styled from 'styled-components/native';
+
+import { SIZES } from '../../constants/theme';
+
+export const HeaderContainer = styled.View`
+  flex: 1;
+  width: ${SIZES.width};
+  /* height: headerHeight; */
+  background-color: red;
+`;
+
+export const LogoImage = styled.Image`
+  display: flex;
+  width: ${SIZES.width}; */
+  /* height: headerHeight;
+`;
+
+export default {
+  HeaderContainer,
+  LogoImage
+};