CODEWITHSUNDEEP
reactjsreact-native
Casey L
Casey L

Reputation: 707

React native: how to generate blank whitespace that has the same size as a component which will later be rendered?

This is from a Udacity flashcard project. Say I have this screen:

enter image description here

A "Next card" button appears conditionally upon the user hitting "Correct" or "Incorrect" (a value gets set in component state and the button is rendered conditional on that value being true):

enter image description here

All of this content is inside a <View> with alignItems: 'center' and justifyContent: 'center', so when the button appears, everything shifts slightly along the vertical axis.

I'd like to create some kind of "blank" placeholder that will have the exact same size as the "Next card" button and have it "render" before the Correct/Incorrect button is hit, so that this shift does not occur.

I recognize I could set a hard height/width on the button and make some kind of placeholder item with the same size, but this is a general question and I'd like to leave appearance to device defaults as much as possible.

Is this possible, and/or a sensible approach? If not, why not, and what would you suggest instead?

Thank you!

Upvotes: 0

Views: 132

Answers (1)

Mertcan Seğmen
Mertcan Seğmen

Reputation: 933

I assume you're doing something like this to render the Next Card button.

{this.state.answerSubmitted && (
    <TouchableOpacity>
        <Text>Next Card</Text>
    </TouchableOpacity>
)}

Instead, you could do something like this, your button will be there, just not visible and clickable.

<TouchableOpacity 
    disabled={!this.state.answerSubmitted}
    style={{opacity: this.state.answerSubmitted ? 1 : 0}}
>
    <Text>Next Card</Text>
</TouchableOpacity>

If you already have a style for the button, you can use the array notation.

style={[styles.yourStyle, {opacity: this.state.answerSubmitted ? 1 : 0}]}

Upvotes: 1

Related Questions