Conditional rendering in react native

Question

I just started working with React Native only recently and there was a task I couldn't accomplish. I want to make a screen with a yes/no question. Depending on which one the user chooses, I'll either render a component that I have ready, or just close the screen. Thank you in advance!

Waqas Ahmed · Accepted Answer · 2017-12-25 03:51:17Z

6

You can also use conditions in the jsx code like

render(){
    return myCondition ? <MyFirstComponent/> : <MySecondComponent/>
}

or even if their is some nesting you can write

    <View>
       {...childrens}
       { myCondition ? <MyFirstComponent/> : <MySecondComponent/>}
    </View>

or even if only some view

        <View>
           {...childrens}
           { myCondition && <View> </View>}
        </View>

answered Dec 25, 2017 at 3:51

Waqas Ahmed

1,4311 gold badge16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nating · Accepted Answer · 2017-12-24 13:25:35Z

0

To do conditional rendering in React Native, you can use if statements:

render(){
    if(myCondition){
        return(<MyFirstComponent/>);
    }
    else{
        return(<MySecondComponent/>);
    }
}

answered Dec 24, 2017 at 13:25

nating

3462 gold badges7 silver badges14 bronze badges

Collectives™ on Stack Overflow

Conditional rendering in react native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related