CODEWITHSUNDEEP
reactjsflexboxreact-nativereact-native-flexbox
Ga3tan
Ga3tan

Reputation: 95

Button inside View with Flex dimensions has his text truncated

I'm new to react-native and mobile app development in general and I'm trying to create a header for my App with a Text and a Button inside it.

Here is my code :

    import React from 'react';
    import { StyleSheet, Text, View, Button } from 'react-native';

    export default class App extends React.Component {

      _leaveSheet() {

      }

      render() {
        return (
          <View style={styles.container}>
            <View style={styles.header}>
              <Text allowFontScaling={false} style={styles.titleText}>YATHZEE</Text>
              <Button style={styles.leaveButton} title="Quitter" onPress={this._leaveSheet}/>
            </View>
            <View style={styles.body}></View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: 'column'
      },
      header: {
        flex: 1,
        backgroundColor: '#BDBDBD',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
      },
      body: {
        flex: 10,
        backgroundColor: 'white'
      },
      titleText: {
        // fontSize: 30,
        fontWeight: 'bold',
        backgroundColor: 'yellow',
        // alignSelf: 'center',
        flex: 1
      },
      leaveButton: {
        // alignSelf: 'center',
        // width: '100'
        flex: 2
      }
    });

So I put my header with the flexDirection to row and I added inside my View my Text and my Button elements with flex: 1 and flex: 2 so I was expecting this result :

Expected result

But instead I have this : the text inside the Button is truncated and my button does not take the space he should take.

Rendering on the mobile App (OP3 phone)

I tried to play with the alignSelf property and width but nothing seems to work.

In facebook Button exemples I can see that Button can define the width of the Button but I don't know how to make it work.

Upvotes: 1

Views: 1186

Answers (1)

Val
Val

Reputation: 22797

You have to wrap Button inside a flex-ed View to make it happen.

<View style={styles.leaveButton}>
   <Button title="Quitter" onPress={this._leaveSheet} />
</View>

From react-native material design,

The button component renders a touchable button with consumes the full width of it's parent container.

Upvotes: 3

Related Questions