How to hide view in react native

Question

new to react native cleary. Struggling to hide a view. I'm trying to onclick of a TouchableWithoutFeedback to change the opacity of a view. I'm using this.state to try and do this but no matter what I set on state it can't be found in the gotoNext function

export default class MainView extends Component
{
  constructor(props) {
    super(props);
    this.state = {hideInfo:false,infoOpacity:0.75};
  }

  onTap(){
    console.log("tap tap");
    this.setState({hideInfo:!this.state.hideInfo});
    if(this.state.hideInfo)
    {
      this.setState({infoOpacity:0});
    }else{
      this.setState({infoOpacity:0.75});
    }
  };

  render()
  {
    var pages = []
    for (var i = 65; 90 >= i; i++) {// A-65, Z-90
      c = String.fromCharCode(i);
      var letters = []
      customData.pages.forEach(function(meow){
        if(meow.letter.toUpperCase() == c)
        {
          letters.push(meow);
        }
      });

      var ranPage = letters[Math.floor(Math.random() * letters.length)];
      const window = Dimensions.get('window');
      if(ranPage){
        pages.push(
            <View key={1}>
            <TouchableWithoutFeedback onPress={this.onTap.bind(this)}>
              <Image source={{uri: ranPage.image}} style={{width: window.width, height: window.height}} />
            </TouchableWithoutFeedback>
                <View style={[styles.meow, {opacity: this.state.infoOpacity}]}>
                  <Text style={styles.text}>{ranPage.name}</Text>
                  <Text style={styles.text}>{ranPage.phonetic}</Text>
                  <Text style={styles.text2}>{ranPage.description}</Text>
                </View>
            </View>
        )
      }else{
        console.log(c)
      }
}

    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        {pages}
      </Swiper>
    );
  }
}

A lot of issues here. I recommend to go to some guides again. Take a look on how to change a state and how to use shorthand functions. Consider using a linter please. gotoNext isn't even used. In the guides you may find that this is binded to some methods in the constructor. This is maybe also interesting for you, depending on how you use gotoNext. — Jannik S.
– Jannik S., Commented Feb 5, 2017 at 4:19
this.state.x = y will not re-render. You need to call this.setState({x:y}) — suman j
– suman j, Commented Feb 5, 2017 at 5:21
@JannikS. I cleaned it up some. it's working at the moment. I made this post last night after a few drinks and getting frustrated sorry. I will though take a look at a linter for RN. — TJ Gillis
– TJ Gillis, Commented Feb 5, 2017 at 11:26

suman j · Accepted Answer · 2017-02-05 14:43:34Z

1

this.state.x = y will not re-render. You need to call this.setState({x:y}) for render again

answered Feb 5, 2017 at 14:43

suman j

7,00012 gold badges62 silver badges118 bronze badges

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

Collectives™ on Stack Overflow

How to hide view in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related