Im currently working on a React Native tvOS app, I’ve successfully created and finished the login page using a TVFocusGuideView so navigation works correctly using the apple tv remote.

I’ve now started working on the home screen, i’ve however come across a problem using the TVFocusGuideView.

This is the code I currently have:

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TVFocusGuideView } from 'react-native';
import { Icon } from 'react-native-elements';

const ProfileDetails = ({ route, navigation }) => {
  const { profile } = route.params;

  return (
    <View style={styles.container}>
      {/* This part is for the navigation bar */}
      <TVFocusGuideView autoFocus style={styles.navContainer}>
        <View style={styles.navBar}>
          <TouchableOpacity style={styles.navItem} >
            <Icon name="film-outline" type="ionicon" color="white" size={24} />
            <Text style={styles.navText}>Movies</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem} >
            <Icon name="tv-outline" type="ionicon" color="white" size={24} />
            <Text style={styles.navText}>Series</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem} >
            <Icon name="search-outline" type="ionicon" color="white" size={24} />
            <Text style={styles.navText}>Search</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem} >
            <Icon name="videocam-outline" type="ionicon" color="white" size={24} />
            <Text style={styles.navText}>Live TV</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.navItem} >
            <Icon name="settings-outline" type="ionicon" color="white" size={24} />
            <Text style={styles.navText}>Settings</Text>
          </TouchableOpacity>
        </View>
      </TVFocusGuideView>
      
      {/* This part is for the profile details screen */}
      <TVFocusGuideView autoFocus style={styles.detailsContainerWrapper}>
        <View style={styles.detailsContainer}>
          <Text style={styles.title}>Profile Details</Text>
          <View style={styles.profileIcon}>
            <Icon name={profile.selectedIcon} type="ionicon" color="#2196f3" size={80} />
          </View>
          <Text style={styles.profileName}>Profile Name: {profile.profileName}</Text>
          <Text style={styles.profileDetail}>Domain Name: {profile.domainName}</Text>
          <Text style={styles.profileDetail}>Username: {profile.username}</Text>
          <Text style={styles.profileDetail}>Password: {profile.password}</Text>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.goBack()}
          >
            <Text style={styles.buttonText}>Back</Text>
          </TouchableOpacity>
        </View>
      </TVFocusGuideView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  navContainer: {
flex: 1,
    backgroundColor: 'grey',
    marginHorizontal: 20,
    borderRadius: 10,
    marginTop: 20,
    justifyContent: 'center',
  },
  navBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  navItem: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  navText: {
    color: 'white',
    fontSize: 18,
    marginLeft: 5,
  },
  detailsContainerWrapper: {
flex: 5,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  detailsContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    color: 'white',
    fontSize: 40,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  profileIcon: {
    backgroundColor: 'black',
    borderRadius: 80,
    padding: 30,
    borderWidth: 2,
    borderColor: 'white',
    marginBottom: 20,
  },
  profileName: {
    color: 'white',
    fontSize: 24,
    marginBottom: 10,
  },
  profileDetail: {
    color: 'white',
    fontSize: 18,
    marginBottom: 5,
  },
  button: {
    backgroundColor: '#2196f3',
    borderRadius: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
    marginTop: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default ProfileDetails;

The problem I am facing is that when I try to make the detailsContainerWrapper‘s flex any bigger, so flex: 6 for example, the navigation between the buttons inside the Navigation stop working.

What I am trying to achieve is getting the Navigation bar to become smaller in height. So the Profile Details screen is bigger. (The navigation bar is super big as of now)