CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Ritesh Kadmawala
Ritesh Kadmawala

Reputation: 743

React Native some style causes view to not render

Hi i am a newbie in React Native, and trying to create an android app using the same. If i change the style of my view -> (backgroundColor or borrderBottom) it just doesn't render. There is no error anywhere, but on reloading the js bundle, the view and all its children fail to render. More than solving this particular issue, i am more interested in understanding why is this happening or whether i am missing something. My component in its entirety is below

import React from 'react';
import { StyleSheet, View, Text, PixelRatio, TextInput } from 'react-native';

const styles = {
  container: {
    paddingTop: 70,
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#fff',
  },
  form: {
    flex: 1,
    flexDirection: 'column'
  },
  rowContainer: {
    //backgroundColor: '#000',
  },
  row: {
    flexDirection: 'row',
    height: 44,
    alignItems: 'center',
  },
  inputLabel: {
    fontSize: 15,
    paddingLeft: 15,
    color: '#333'
  },
  textInputStyle: {
    fontSize: 15,
    flex: 1,
    paddingLeft: 15
  }
};

export default function TestComponent(props) {
  return (
    <View style={styles.container}>
      <Text> Inside Container </Text>
      <View style={styles.form}>
        <Text> Inside Form </Text>
        <View style={styles.rowContainer} >
          <Text> Inside Row Container </Text>
          <View style={styles.row}>
            <Text numberOfLines={1} style={styles.inputLabel}> Bid On </Text>
            <TextInput />
          </View>
        </View>
      </View>
    </View>
  );
}

The above code works perfectly and all the components are rendered, however if i change the rowContainer style and uncomment backgroundColor, rowContainer and all its children are not rendered. I have no clue why this is happening. I also tried other styles inside rowContainer like 

rowContainer: {

   flex: 1,
   flexDirection: 'column',
   backgroundColor: '#000'
   borderBottomWidth: 1,
   borderColor: '#c8c7cc'
  }

As long as rowContainer style is empty it works, if i add anything inside it, the view simply doesn't render.

Upvotes: 0

Views: 662

Answers (1)

agenthunt
agenthunt

Reputation: 8678

The default Text color is black and the rowContainers backgroundColor is set to '#000'. So it appears as not being rendered.

Upvotes: 1

Related Questions