CODEWITHSUNDEEP
react-native
Rahul Seetharaman
Rahul Seetharaman

Reputation: 103

Flexbox layout react native - first view occupies entire screen

I am trying to make a simple single page react native app. Just to check if my flexbox layouts are working correctly,I decided to give background colors and check if they are aligned. As seen in the picture the first view occupies the entire space. Where I am I going wrong ? My output as shown

Output

Here is my code:

   render() {
    return (
      <View style={styles.container}>
        <View style={styles.questionview}>
          <Text>Enter a word to get meaning</Text>
          <TextInput onChangeText={(text)=> this.setState({word:text})}/>
          <Button title={"GET MEANING"} onPress={this.buttonPressed}/>
        </View>
        <View styles={styles.ansview}>
          <Text styles={styles.anstext}>{this.state.answer}</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  questionview:{
    flex:6,
    backgroundColor:'red',
    padding:30
  },
  ansview:{
    flex:3,
    backgroundColor:'green'
  }
});

Upvotes: 0

Views: 68

Answers (1)

Nikhil
Nikhil

Reputation: 86

Took me some time, but found your problem. It's a typo.

It should be just 'style' , not 'styles'. It should have been as below :

    <View style={styles.ansview}>
      <Text style={styles.anstext}>{this.state.answer}</Text>
    </View>

also styles.anstext is not present in your code.

Upvotes: 2

Related Questions