CODEWITHSUNDEEP
react-native
pstanton
pstanton

Reputation: 36640

react native flex - button doesn't respect "alignSelf"

"alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS (default: auto)."

The default "alignItems" is "stretch", therefore by default elements within the view should attempt to stretch to the full width. setting "alignSelf" to "flex-start" should in theory cause the item to not stretch, and appear in the far left.

This works as expected for <Text> elements, why doesn't it work for <Button>?

Starting with an example of the basic premise:

<View style={{ flex: 1, flexDirection: "column", backgroundColor: "red" }}>
    <Text style={{ backgroundColor: "blue" }}>Hello</Text>
</View>

^ the blue text element is the full width of the screen

<View style={{ flex: 1, flexDirection: "column", backgroundColor: "red" }}>
    <Button style={{ backgroundColor: "blue", alignSelf: "flex-start" }}>Hello</Text>
</View>

^ The blue text element is in the far left and only the width of its text

<View style={{ flex: 1, flexDirection: "column", backgroundColor: "red" }}>
    <Button style={{ }} title="here" />
</View>

^ the button element is the full width of the screen

<View style={{ flex: 1, flexDirection: "column", backgroundColor: "red" }}>
    <Button style={{ alignSelf: "flex-start" }} title="here" />
</View>

^ the button element is STILL the full width of the screen

I need to override the View's alignItems of stretch (default) because I have many elements also in the view that I would like to stretch. Therefore it will be much more convenient to have the default behaviour "stretch".

This demo shows how Button has Zero respect for "alignSelf":

        <View>
            <View style={{ flex: 1, flexDirection: "column", alignItems: "stretch", backgroundColor: "red" }}>
                <Text style={{ alignSelf: "flex-start", backgroundColor: "green" }}>don''t stretch me</Text>
                <Text style={{ backgroundColor: "green" }}>stretch me</Text>
                <Button style={{ alignSelf: "flex-start" }} title="don't stretch me" />
                <Button style={{}} title="stretch me" />
            </View>

            <View style={{ flex: 1, flexDirection: "column", alignItems: "flex-start", backgroundColor: "red" }}>
                <Text style={{ backgroundColor: "green" }}>don''t stretch me</Text>
                <Text style={{ alignSelf: "stretch", backgroundColor: "green" }}>stretch me</Text>
                <Button style={{}} title="don't stretch me" />
                <Button style={{ alignSelf: "stretch" }} title="stretch me" />
            </View>
        </View>

renders:

| don't stretch me |
| stretch me                                   |
[                 DON'T STRETCH ME             ]
[                     STRETCH ME               ]
| don't stretch me |
| stretch me                                   |
[ DON'T STRETCH ME ]
[ STRETCH ME ]

Upvotes: 1

Views: 4320

Answers (2)

Sathish Sundharam
Sathish Sundharam

Reputation: 1120

Now I wrap a Button inside a View. It will work perfectly 

<View style = {styles.container}>
    <View style={{ flex: 1, flexDirection: "column", alignItems: "stretch", backgroundColor: "red" }}>
        <Text style={{ alignSelf: "flex-start", backgroundColor: "green" }}>don''t stretch me</Text>
        <Text style={{ backgroundColor: "green" }}>stretch me</Text>
        <View style = {{alignSelf:'flex-start'}}>
        <Button style={{ alignSelf: "flex-start" }} title="don't stretch me" />
        </View>
        <Button style={{}} title="stretch me" />
    </View>

    <View style={{ flex: 1, flexDirection: "column", alignItems: "flex-start", backgroundColor: "red" }}>
        <Text style={{ backgroundColor: "green" }}>don''t stretch me</Text>
        <Text style={{ alignSelf: "stretch", backgroundColor: "green" }}>stretch me</Text>
        <View style = {{alignSelf:'flex-start'}}>
        <Button style={{ alignSelf: "flex-start" }} title="don't stretch me" />
        </View>
        <View style = {{alignSelf:'stretch'}}>
        <Button  title="stretch me" />
        </View>
    </View>
</View>

Upvotes: 1

Lakshitha Ruwan
Lakshitha Ruwan

Reputation: 959

It doesn't matter what styles you put in 'Button' It just doesn't support the 'style' prop.

you will have to use a container ('View') styling to make changes of the positions.

Upvotes: 1

Related Questions