CODEWITHSUNDEEP
javascriptreactjsreact-native
obiwankenoobi
obiwankenoobi

Reputation: 1582

RN rendering the view but show white blank screen

I have this code and when I run the program all I get is white screen. there is no errors and I can see my log so I know the program rendered and running. My guess is , that it's some issue with the <View/> style, but I cant fine the issue.

So the logic here is that I basically run a function inside the rendered view that check if there is a token in memory, and based on this information render one of two cases.

CODE: 

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center'
  })

  checkToken = () => {
    AsyncStorage.getItem('user')
    .then((res) => {
      res = JSON.parse(res)
      console.log('this is checkToken()',res.token)
      this.renderUserSection(res.token)
    })
    .catch((err) => {
      console.log(err)
    })
    .done();
  }


  renderUserSection =  (token) => {
    if(token === undefined) { 
        console.log('render UserSection')
    return (
      <View style={styles.container}>
      <TouchableHighlight onPress={this.Signup.bind(this)} style={styles.button}>
        <Text style={styles.buttonText}>SignUp</Text>
      </TouchableHighlight>

      <TouchableHighlight onPress={this.Login.bind(this)} style={styles.buttonLogin}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableHighlight>

      </View>
     )
    } else {
      if (!this.state.loading) {
        return (
          <View style={styles.container}>
            {this.state.path ? this.renderMap() : this.renderCamera()}       
          </View>
        );
      } return (
        <View style={styles.container}>
          <Loader loading={this.state.loading}/> 
        </View>
      ) 
    }
}


  render() {
   return (
    <View>{this.checkToken()}</View>
   ) 
  }

before that code I run en example that was: 

  render() {
   return this.renderUserSection()
  }

and everything worked fine. Now I write it inside some logic and It's render the program (based on log) but the view is blank.

Upvotes: 0

Views: 339

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

from React#height-and-width

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

There is no height and width provided to View.

So,even screen rendered, it is coming blank as.

assign height and width to container style object.

container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height : 200,
    width : 200
  })

Also,check with flex property.

Upvotes: 1

Related Questions