CODEWITHSUNDEEP
androidreact-native
William
William

Reputation: 13

React Native - Can't increase width of Button in row

I tried both absolute and flex dimensions, the View just sets the Button at standard dimensions (approx 50px). The height is stretched, but the width can't possibly change.

class Calculator extends Component {
    constructor() {
        super();
        this.state = { "lastClicked" : "None" };
        this.buttonPress = this.buttonPress.bind(this);
    }
    createButton(id) {
        return (
            <Button
                title={id}
                onPress={() => this.buttonPress(id)}
            />
        );
    }
    buttonPress(id) {
        this.setState({ "lastClicked" : id });
    }
    render() {
        return (
            <View style={{alignContent: "stretch"}}>
                <View style={{width: 500}}>
                    <Text style={{fontSize: 30}}>This is a JavaScript Calculator</Text>
                    <Text style={{fontSize: 20}}>You clicked: {this.state.lastClicked}</Text>
                </View>
                <View style={{width: 500}}>
                    <View style={{ width: 500, height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("4")}
                        {this.createButton("5")}
                        {this.createButton("6")}
                    </View>
                    <View style={{ width: 500, height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("4")}
                        {this.createButton("5")}
                        {this.createButton("6")}
                    </View>
                    <View style={{ width: 500, height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("1")}
                        {this.createButton("2")}
                        {this.createButton("3")}
                    </View>
                </View>
            </View>
        );
    }
}

}

Can you see the issue? I am new to React-Native and the issue already consumed 3 hours of my life.

Upvotes: 1

Views: 2327

Answers (1)

RRikesh
RRikesh

Reputation: 14381

You can replace the createButton() method with something like that:

createButton(id) {
    return (
      <TouchableWithoutFeedback  onPress={() => this.buttonPress(id)}>
       <View style={{flex: 3, flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
        <Text style={{fontSize:30}}>{id}</Text>
       </View>
       </TouchableWithoutFeedback>
    );
}

I wrapped a <View> with style flex: 3 for setting the width to a third of the screen size. flexDirection:'column' and justifyContent:'center' will center the number in the middle of the View. The View is wrapped in a TouchableWithoutFeedback so that we can bind the onPress event.

For your grid of numbers, you wrapped then in <View style={{width: 500}}>. This is not always the size of the screen. It's easy to get the screen width using Dimensions.

At the start of your file, you can declare something like:

const screenWidth = Dimensions.get('window');

And then replace <View style={{width: 500}}> by <View style={{width: screenWidth}}>.

Overall, your new code should look like:

import React, { Component } from 'react';
import { Text, View, Dimensions, TouchableWithoutFeedback } from 'react-native';

const screenWidth = Dimensions.get('window');

export default class App extends Component {
 constructor() {
        super();
        this.state = { "lastClicked" : "None" };
        this.buttonPress = this.buttonPress.bind(this);
    }
    createButton(id) {
        return (
          <TouchableWithoutFeedback  onPress={() => this.buttonPress(id)}>
           <View style={{flex: 3, justifyContent:'center', alignItems:'center'}}>
            <Text style={{fontSize:30}}>{id}</Text>
           </View>
           </TouchableWithoutFeedback>
        );
    }
    buttonPress(id) {
        this.setState({ "lastClicked" : id });
    }
    render() {
        return (
            <View style={{alignContent: "stretch"}}>
                <View style={{width: screenWidth}}>
                    <Text style={{fontSize: 30}}>This is a JavaScript Calculator</Text>
                    <Text style={{fontSize: 20}}>You clicked: {this.state.lastClicked}</Text>
                </View>
                <View style={{width:screenWidth}}>
                    <View style={{height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch",}}>
                        {this.createButton("7")}
                        {this.createButton("8")}
                        {this.createButton("9")}
                    </View>
                    <View style={{height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("4")}
                        {this.createButton("5")}
                        {this.createButton("6")}
                    </View>
                    <View style={{height: 150, flexDirection : "row", alignItems: "stretch", alignContent: "stretch", alignSelf: "stretch"}}>
                        {this.createButton("1")}
                        {this.createButton("2")}
                        {this.createButton("3")}
                    </View>
                </View>
            </View>
        );
    }
}

Demo on snack.expo.io

Upvotes: 1

Related Questions