[standalone] Landscape Orientation Hides Footer #5033
Description
Hi. First, sorry for my english.
I got a big problem, when I’m using expo start for develop my application, my differents screens are responsive (Especially footer bar, content and header…) but when I build the App using expo build:android or expo build:ios, it’s keeping responsive but I think the App is setting fixed values. For example, if I rotate the screen from Portrait to Landscape, the footer is going to disappear and I can’t scroll the content like in the “debug” mode.
Changing orientation in debug mode :
Changing orientation after build :
Code of a screen :
`
import React from "react";
import { Text, View, StyleSheet, ScrollView, FlatList, Alert, TouchableHighlight, Image } from "react-native";
import { Container, Header, Title, Left, Icon, Right, Button, Body, Content, Card, CardItem, Footer, FooterTab, Badge } from "native-base";
import LoginScreen from "../LoginScreen/LoginScreen.js";
import {BackHandler} from 'react-native';
var ls = require('react-native-local-storage');
export default class FileScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
userGroupId: null,
loaded: false,
badgeCommande: 0
};
}
componentWillMount = async() => {
await ls.get('userGroupID').then((grpid) => {this.setState({userGroupId: grpid})}).then(async() => {
const response = await fetch('https://koustapp.com/apex/rest/mobile/notif_commande?groupid='.concat(this.state.userGroupId));
const json = await response.json().then((data) => {
ls.save('badgeCommande', data.items[0].value);
console.log(data.items[0].value);
});
}).then(async() => {
await ls.get('badgeCommande').then((data) => {
this.setState({loaded: true,
badgeCommande: data});
});
})
}
handleBackPress = () => {
this.props.navigation.goBack();
return true;
}
componentDidMount() {
this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
}
componentWillUnmount() {
this.backHandler.remove();
}
render() {
if (this.state.loaded === 'false') {
return (
<View style={{flex: 1, flexDirection: 'row',alignItems: 'center', justifyContent: 'center'}}>
<Image
source={require("./../../assets/logo_login.png")}
style={[
{
resizeMode: "contain",
width: 350,
height: 162
}
]}
/>
</View>
);
} else {
let footerBadgeCommande;
if(this.state.badgeCommande != 0){
footerBadgeCommande = <Button badge vertical onPress={() => this.props.navigation.navigate('Commandes')}>
<Badge style={{ backgroundColor: '#ff9500' }}><Text style={{ color: 'white', fontSize: 10 }}>{this.state.badgeCommande}</Text></Badge>
<Icon name="cart" style={styles.footerIcon}/>
<Text style={styles.footerText}>Commandes</Text>
</Button>;
} else {
footerBadgeCommande = <Button vertical onPress={() => this.props.navigation.navigate('Commandes')}>
<Icon name="cart" style={styles.footerIcon}/>
<Text style={styles.footerText}>Commandes</Text>
</Button>;
}
return (
<Container>
<React.Fragment>
<Header style={styles.header}>
<Left>
<Button
transparent
onPress={() => this.props.navigation.openDrawer()}>
<Icon name="menu" style={{color:'white'}}/>
</Button>
</Left>
<Body>
<View>
<Button
transparent onPress={() => this.props.navigation.navigate('Accueil')}>
<Image
style={{resizeMode: 'contain', height: 35, width: 74, alignSelf: 'center' }}
source={require('../../assets/logo_sidebar.png')}
/>
</Button>
</View>
</Body>
<Right>
<Button
transparent onPress={() => this.props.navigation.navigate('Settings')}>
<Icon name="settings" style={{color:'white'}}/>
</Button>
</Right>
</Header>
<ScrollView>
<View style={styles.scrollContainer}>
<View style={styles.orderView}>
<Icon name="paper" style={styles.titleIcon}/>
<Text style={{fontSize:20, marginTop:15, marginLeft:13}}>Mes Recettes</Text>
</View>
</View>
</ScrollView>
<Footer>
<FooterTab style={styles.footerContainer}>
<Button vertical onPress={() => this.props.navigation.navigate('Recettes')}>
<Icon name="paper" style={styles.footerIcon}/>
<Text style={styles.footerText}>Fiches Techniques</Text>
</Button>
{footerBadgeCommande}
<Button vertical>
<Icon name="apps" style={styles.footerIcon}/>
<Text style={styles.footerText}>Plus..</Text>
</Button>
</FooterTab>
</Footer>
</React.Fragment>
</Container>
);
}
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#f8f8f8',
flex:1
},
orderView: {
flex:1,
height: 60,
marginRight:30,
marginLeft:30,
margin: 5,
marginTop:10,
flexDirection: 'row',
backgroundColor: 'white',
borderBottomColor: 'black',
borderBottomWidth: 1
},
header:{
backgroundColor: '#2578cf',
},
footerText: {
fontSize: 10,
textAlign: 'center',
color: 'white'
},
footerContainer:{
backgroundColor: '#2578cf',
},
footerIcon: {
color: 'white',
},
titleIcon: {
color: '#ff9500',
fontSize:30,
marginTop:12
}
});
`
Someone got an idea from where it could come from ? Thanks!