how to set react native button to full width Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of how to set react native button to full width without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have tried all of the examples out there but I can not figure it out. I am using this https://github.com/xinthink/react-native-material-kit

If I use the dimensions as the width the button width goes off screen. I would like if possible to have the logo at the very top and the form and button at the very button. this is for android only.

 const btnStyle = {
btn: {
    flex: 1,
    flexDirection: "row"
    //resizeMode: 'cover'
}
};
const ColoredRaisedButton = MKButton.coloredButton()
.withStyle(btnStyle.btn)
.build();

<ScrollView style={styles.scrollView}>
<View style={styles.container}>
    {/* Here the magic happens*/}
    <View style={styles.cardStyle}>
        <Image
            source={require("./../img/logo_login.jpg")}
            style={styles.cardImageStyle}
        />
        <View style={styles.cardContentStyle}>
            <Form
                ref="form"
                type={User}
                onChange={this.onChange.bind(this)}
                value={this.state.value}
                options={options}
            />
        </View>
        <View style={styles.cardActionStyle}>
            <ColoredRaisedButton>
                <Text pointerEvents="none" style={styles.buttonText}>
                    BUTTON
                </Text>
            </ColoredRaisedButton>
        </View>
    </View>
</View>
</ScrollView>;

const styles = {
cardStyle: {
    flex: 1,
    backgroundColor: "#ffffff",
    borderRadius: 2,
    borderColor: "#ffffff",
    borderWidth: 1,
    shadowColor: "rgba(0,0,0,.12)",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center",
    shadowOffset: {
        height: 1,
        width: 2
    }
},
cardImageStyle: {
    flex: 1,
    height: 170,
    flexDirection: "row",
    resizeMode: "cover"
},
cardContentStyle: {
    padding: 15 //,
    // bottom:0,
    // position:'absolute',
    //justifyContent: 'flex-end'
},
cardActionStyle: {
    flex: 1,
    borderStyle: "solid",
    borderTopColor: "rgba(0,0,0,.1)",
    borderTopWidth: 1,
    padding: 15,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center"
},
scrollView: {
    flex: 1
},
container: {
    flex: 1,
    alignItems: "stretch",
    backgroundColor: "#eae9e9",
    padding: 20 //,
    //position:'absolute'
},
buttonText: {
    fontSize: 14,
    fontWeight: "bold",
    color: "white"
}
};

Answer

You should remove the alignItems: 'center' from both cardStyle & cardActionStyle, then you should get a full width button.

We are here to answer your question about how to set react native button to full width - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji