bad display component in diffrent orientation in react-native

Question

problem with display buttons in portrait mode

Changing the orientation works and for the landscape displaying the button worked fine.

for orientationIsLandscape? true is landscape

const renderButtons = () => {
    let layouts = buttons.map((buttonRow, rowIndex) => {
      let rowItem = buttonRow.map((buttonItem, buttonIndex) => {
        return (
          <InputNumberButton
            value={buttonItem}
            handleOnPress={() => handleInput(buttonItem)}
            key={'btn-' + buttonIndex}
          />
        );
      });
     return <View style={[styles.inputRow,orientationIsLandscape? {width: 800,height:56 }:{width: 400,height:320 }]} key={'row-' + rowIndex}>{rowItem}</View>;
    });
    return layouts;
  };

  return (
    <View style={styles.container}>
      <View style={styles.resultContainer}>
        <Text style={styles.resultText}>{state.displayValue}</Text>
      </View>
      <View style={styles.inputContainer}><Text>{renderButtons()}</Text></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  resultContainer: {
    flex: 3,
    backgroundColor: '#808080',
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingRight: 20
  },
  inputContainer: {
    flex: 8,
    backgroundColor: '#a0a0a0',
  },
  resultText: {
    color: 'white',
    fontSize: 80,
    fontWeight: 'bold',
    padding: 10
  },
  inputRow: {
    flex: 1,
    flexDirection: 'row',
    
  }
});

export default App;

Maybe I should refresh something? I tried refresh window..