I have mentioned flex value to 0.5 but it is not working-CodePudding

I have written following code but my flex under 'titleContainer' is not working.

export const Focus = () => {
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <TextInput />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#43840',
  },
  titleContainer: {
    flex: 0.5,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#559974',
  },
  title: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 15,
  },
});

Please see the screen shot. The green background should cover half of the screen.

CodePudding user response：

Flex in RN only take interger value

In case you want titleContainer take 50% size of container by using flex, This is how you can achieve that.

You need another view the take the same flex value with titleContainer, so titleContainer and that dump view will take 50% size of parent view each

export const Focus = () => {
  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>What would you like to focus on?</Text>
        <TextInput />
      </View>
      <View style={{flex: 1}} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#43840',
  },
  titleContainer: {
    flex: 1,
    padding: 16,
    justifyContent: 'center',
    backgroundColor: '#559974',
  },
  title: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 15,
  },
});

CodePudding user response：

To use flex property on child tag your parent tag needs to have a display: "flex" property on it.

container: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#43840',
  },