Expo Web is stretching the buttons on browser

I have gone through these following points

• Check latest documentation: https://docs.nativebase.io/
• Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

I am using expo sdk v34 and trying to work out an example on web. I created new project using expo init and then did yarn add native-base along with expo install expo-font. On start expo web, the web page comes up but the button that I added is stretched from left to right completely.

Where as if I clone the repo that was given by Evan Bacon (and use my simplified App.js) then it works fine. But the catch there is if I remove yarn.lock file from the repo then it also shows the same behavior.

node, npm, react-native, react and native-base version, expo version if used, xcode version

• expo: ^34.0.1
• expo-font: ~6.0.1
• native-base: ^2.13.5
• react: 16.8.3
• react-dom: ^16.8.6
• react-native: https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz
• react-native-web: ^0.11.4

Expected behaviour

Button should be of right size and not stretched from left to right.

Actual behaviour

Button comes as stretched.

Steps to reproduce

• expo init sample-project && cd sample-project
• yarn add native-base --save
• expo install expo-font
• Use below App.js

import React from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

import { Container, Header, Content, Button, Text } from 'native-base';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

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

  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Button rounded>
            <Text>Click Me!</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

Is the bug present in both iOS and Android or in any one of them?

Have not tried.

Any other additional info which would help us debug the issue quicker.

NA

[ediopia]

Same problem here. Button styles working weird with Expo.

[samkit]

Closed by mistake.