How to vertically center item in React native

Question

Disclaimer: This is a question about a school project.

I am working on a full stack project which is using React Native for the front-end. I am having some trouble with page layout. Here is my code:

App.js:

import React, {useState} from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

import Header from "./components/Header";

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <View style={styles.screen}>
      <Header title="Web Application" />
      <Text style={styles.text}>Example Text</Text>
      <Text style={styles.text}>Not much here yet, so play with this switch</Text>
      <Switch
        style={styles.switch}
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    flex: 1,
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 24,
    backgroundColor: 'white'
  },
  switch: {
    alignSelf: 'center',
    flexDirection: 'column',
    justifyContent: 'space-between'
  }
});

Header.js

import React from "react";
import { StyleSheet, View, Text, Platform } from "react-native";

import Colors from "../constants/colors";

const Header = props => {
  return (
    <View style={{ ...styles.headerBase, ...Platform.select({ios: styles.headerIOS, android: styles.headerAndroid, web: styles.headerBase})}} >
      <Text style={styles.headerTitle}>{props.title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  headerBase: {
    width: "100%",
    height: 90,
    paddingTop: 36,
    alignItems: "center",
    justifyContent: "center",

  },
  headerIOS: {
    backgroundColor: 'black',
    borderBottomColor: '#ccc',
    borderBottomWidth: 1,
  },
  headerAndroid: {
    backgroundColor: Colors.primary,
  },
  headerTitle: {
    color: Platform.OS === 'ios' ? Colors.primary : 'black',
    fontSize: 24
  },
});

export default Header;

What I am trying to do with these is have the Header at the top, followed by the text and then, centered (vertically and horizontally) I would like to have the switch. Instead, this code currently correctly places the header and text, but the switch is placed at the very bottom. Any help/resources would be appreciated.

Answer 1

Try without flex: 1 on the text style.

import React, {useState} from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

import Header from "./components/Header";

export default function App() {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);
  return (
    <View style={styles.screen}>
      <Header title="Web Application" />
      <Text style={styles.text}>Example Text</Text>
      <Text style={styles.text}>Not much here yet, so play with this switch</Text>
      <Switch
        style={styles.switch}
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    textAlign: 'center',
    fontWeight: 'bold',
    fontSize: 24,
    backgroundColor: 'white'
  },
  switch: {
    alignSelf: 'center',
    flexDirection: 'column',
    justifyContent: 'space-between'
  }
});

Here's the documentation.