На expo работает нормально, но когда я собираю apk-файл, в нижней части экрана появляется лишний пробел REACT-NATIVE

Question

Я использую нативную базовую библиотеку для стиля и реагировать-нативно-маршрутизатор-поток для маршрутизации. Мой код ниже. У вас есть идеи, как я могу решить это?

На выставке

На android устройстве

На android устройстве, другой экран

маршруты. js

export default () => {
    return (
        <Router>
            <Scene type={ActionConst.RESET} key="root">
                <Scene key="home" component={HomeScreen}/>
                <Scene key="post" path={"/post/:id/"} hideNavBar component={PostScreen}/>
                <Scene key="sign_in"  hideNavBar component={SignInScreen}/>
                <Scene key="sign_up" hideNavBar component={SignUpScreen}/>
                <Scene key="forgot_password" hideNavBar component={ForgotPasswordScreen}/>
                <Scene key="notifications" component={NotificationsScreen}/>
                <Scene key="settings" component={SettingsScreen}/>
                <Scene key="profile" component={ProfileScreen}/>
                <Scene key="search" hideNavBar component={SearchNewsScreen}/>
                <Scene key="filter" navBar={FilterNavBar} component={FiltersScreen}/>
                <Scene key="markets" navBar={CustomFilterNavBar} component={MarketsScreen}/>
                <Scene key="products" navBar={CustomFilterNavBar} component={ProductsScreen}/>
                <Scene key="services" navBar={CustomFilterNavBar} component={ServicesScreen}/>


                <Scene type="reset" drawer={true} key="drawer"hideNavBar contentComponent={SideBar} drawerWidth={250}
                       drawerPosition="left" initial={true}>
                    <Scene key="home" navBar={HomeNavBar} component={HomeScreen}/>
                </Scene>
            </Scene>
        </Router>
    );
};

Приложение. js

import React, {Component} from "react";
import { ActivityIndicator } from 'react-native';
import * as Font from "expo-font";
import Routes from './src/routes';
import { Root } from "native-base";

import { Provider } from 'react-redux';
import reducer from './src/store/reducers/filter';
import { createStore } from "redux";

const store = createStore(reducer);


export default class Ssessments extends Component {
    constructor() {
        super();
        this.state = {
            isReady: false
        };
    }

    componentDidMount = async () => {
        await Font.loadAsync({
            Roboto: require('native-base/Fonts/Roboto.ttf'),
            Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
        });
        this.setState({isReady: true});
    };

    render() {
        if (!this.state.isReady) {
            return <ActivityIndicator/>;
        }

        return (
            <Provider store={store}>
                <Root>
                    <Routes />
                </Root>
            </Provider>)
    }
}

HomeScreen. js

export default class HomeScreen extends React.Component {

  render() {
    const data = {
      url: "https://production-ssapi.upconfig.com/api/v1/posts/get-custom-list/"
    };

    return (
        <NewsList data={data}/>
    )
  }
}

NewsList . js

showFooter() {
    if (this.state.token.includes(["empty_token"]) && !this.searchScreen) {
        return (
            <Footer footerDefaultBg>
                <FooterTab>
                    <Button onPress={() => Actions.sign_in()} title={'Sign in'}>
                        <Icon style={styles.footerIcon} name="create"/>
                        <Text>Sign in</Text>
                    </Button>
                    <Button onPress={() => Actions.sign_up()} title={'Sign up'}>
                        <Icon style={styles.footerIcon} name="log-in"/>
                        <Text>Sign up</Text>
                    </Button>
                </FooterTab>
            </Footer>
        )
    }
}

render() {

    if (this.props.data.searchVal === "") {
        return null;
    }

    if (this.state.dataReceived && this.state.data.length == 0) {
        return (
            <View style={styles.container}>
                <Text>No records to display</Text>
            </View>
        )
    }

    return (
        <Container style={{flex: 1, elevation: 0}}>
            <Content style={{elevation: 0}} automaticallyAdjustContentInsets={true} onScroll={({nativeEvent}) => {
                    if (this.isCloseToBottom(nativeEvent)) {
                        if (this.state.loadMoreData) {
                            this.setState({loadMoreData: false});
                            this.getData();
                        }
                    }
                }}>
                <List>
                    {
                        this.state.data.map((post, index) => {
                            return (
                                <Card key={index}>
                                    <CardItem style={{elevation: 0}}>
                                        <Body>
                                            <Image style={{alignSelf: "center"}} source={this.images[post.access]}/>

                                            <Text>{this.formatTitle(post.title)}</Text>
                                            <View style={styles.row}>
                                                <Icon name="time" style={styles.postIcon}/>
                                                <Text note>{this.formatDate(post.date_time)}</Text>
                                            </View>
                                            <View style={styles.row}>
                                                <Text style={styles.postIcon}>#</Text>
                                                <Text>{post.tags}</Text>
                                            </View>
                                        </Body>
                                    </CardItem>
                                    <Button
                                        style={{justifyContent: "center"}}
                                        onPress={() => Actions.post({itemId: post.news_id})}
                                        title={'Read more'}>
                                        <Text>Read more</Text>
                                    </Button>
                                </Card>
                            )
                        })
                    }
                </List>
                {this.showLoader()}
            </Content>
            {this.showFooter()}
        </Container>
    )
}

}

const styles = StyleSheet.create ({container: {backgroundColor: "#fff", alignItems: "center", justifyContent: " центр ",}, lo go: {resizeMode:" содержать ", ширина: 220, высота: 50,}, footerIcon: {цвет:" #ffffff ",}, postIcon: {paddingRight: 10, fontSize: 20} , row: {flexDirection: "row", alignItems: "center", paddingTop: 10},});