Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Button Layout

See original GitHub issue

Description

Explain what you did

I’m implementing a simple View with Buttons at the top

What you expected to happen

Having styled Buttons sticked to the top of the View

What actually happens

https://res.cloudinary.com/donglyhya/image/upload/v1516875715/Screenshot_20180125-110116_hk3ixr.png

“react-native-elements”: “^1.0.0-beta”,

Reproduction Steps and Sample Code

    return (
      <View style={{flex: 1, paddingTop: 20,}}>
          <Button
            text='Log out'
            loading={false}
            loadingProps={{ size: 'small', color: 'white' }}
            buttonStyle={{ height: 50, width: 230, backgroundColor: 'rgba(111, 202, 186, 1)', borderRadius: 5 }}
            textStyle={{ fontWeight: 'bold', fontSize: 23 }}
            onPress={() => console.log('hello')}
            underlayColor="transparent"
          />
          <Button
            text='Log out'
            loading={false}
            loadingProps={{ size: 'small', color: 'white' }}
            buttonStyle={{ height: 50, width: 230, backgroundColor: 'rgba(111, 202, 186, 1)', borderRadius: 5 }}
            textStyle={{ fontWeight: 'bold', fontSize: 23 }}
            containerStyle={{ marginVertical: 10 }}
            onPress={() => console.log('aye')}
            underlayColor="transparent"
          />
      </View>
    );
  }

Issue Analytics

State:
Created 6 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

3reactions

xavier-villelegiercommented, Jan 25, 2018

@iRoachie @LouisJS Actually, you can specify the version like that

import { Button } from 'react-native-elements'; // 1.0.0-beta

Have a look at this snack running the example of @LouisJS with the v1.0.0-beta

1reaction

xavier-villelegiercommented, Jan 28, 2018

@Amurmurmur This has been fixed in the next beta-2 release, please have a look at https://github.com/react-native-training/react-native-elements/issues/826#issuecomment-361087135

Top Results From Across the Web

Panel Layout - Joystick Controller - slagcoin

Having a well-organized layout for your buttons and joystick will make your performance better. The panel needs to be intuitive, accessible, and comfortable ......

Button Layout - Appian 22.4

Displays a list of buttons grouped by prominence. Use this layout in cases where prominence needs to be explicitly specified. See also: Button...

7 Basic Rules for Button Design. by Nick Babich - UX Planet

7 Basic Rules for Button Design · 1. Make buttons look like buttons · 2. Put buttons where users expect to find them...

Buttons - Material Design

A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis...

Best Warzone Button Layout for Normal Controllers - YouTube

Do you play on a normal Xbox or Playstation controller? If so, this is the best button layout to get better movement.