Nativebase: Expo Web is stretching the buttons on browser

Created on 20 Aug 2019 · 4Comments · Source: GeekyAnts/NativeBase

I have gone through these following points

[x] Check latest documentation: https://docs.nativebase.io/
[x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
[x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
[x] 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.

Issue Image

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>
    );
  }
}