Почему TouchableOpacity наполовину скрыт при передаче обратно в {} в реагировать на натив?

Question

React native на iOS показывает Touchable Opacity странно.Он отображается таким образом, что кнопка наполовину скрыта в заголовке.Стиль и творчество должны быть правильными.Я следовал за учебником.Скопировал и вставил код от инструктора, но он все равно идет не так.Я обернул кнопку в другой стилизованный вид, и все было хорошо, мне интересно, почему это так.

<View>
    {function()}
</View>

function() {return <Button />}

Кнопка:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#007aff',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007aff',
    marginLeft: 5,
    marginRight: 5
  }
};

export { Button };