I am having this issue on my react native app. Here is the code below. I want the logo to be displayed on the left side of my header in the middle vertically of it. (I use it for a web app) Right now with this code, the logo isn't even displayed.

And I can't understand how to use flex in order to place the logo. Can anyone help me ?

var logo = require ('../img/logo-pb-alpha.png');
function Header() {

return (
    <View style={styles.header}>
        <Image source={logo} style={{ flex: 1, resizeMode: 'contain' }}/>
         <View style={styles.nav}>   
            <Pressable style={styles.button_primary} onPress={LogIn}><Text>Se connecter</Text></Pressable>
            <Pressable style={styles.button_secondary} onPress={SignUp}><Text>S'inscrire</Text></Pressable>
        </View>
    </View>
)
}

const screen = Dimensions.get("screen");
const styles = StyleSheet.create({
header: {
    height: screen.height * 0.1,
    width: screen.width,
    backgroundColor: "#fff",
    opacity: 0.7,
    alignItems: "flex-start",
    flexWrap: "nowrap",
},

button_primary: {
    backgroundColor: "#ec5e61",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 12,
    elevation: 3,
    paddingVertical: 8,
    paddingHorizontal: 8,
    fontSize: 16,
    lineHeight: 21,
    fontWeight: "bold",
    letterSpacing: 0.25,
    borderWidth: 1,
    marginRight: 30,
},

button_secondary: {
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 12,
    elevation: 3,
    paddingVertical: 8,
    paddingHorizontal: 8,
    borderWidth: 2,
    borderColor: "#ec5e61",
    marginRight: 10,
},

nav: {
    width: screen.width * 0.93,
    flexDirection: "row",
    justifyContent: "flex-end",
    marginBottom: 17,
},
});

export default Header