CODEWITHSUNDEEP
javascriptcssreactjsreact-native
Cannon Moyer
Cannon Moyer

Reputation: 3174

Flex Not Working As Expected In React Native

I am trying to make a standard number pad in ReactNative but I cannot get flex to behave as I would expect. Here is my code:

<View styles={styles.container}>
  <View width={'100%'} styles={styles.row}>
    <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="1" /></View>
    <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="2" /></View>
    <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="3" /></View>
  </View>
  <View width={'100%'}  styles={styles.row}>
    <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="4" /></View>
    <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="5" /></View>
    <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="6" /></View>
  </View>
  <View width={'100%'}  styles={styles.row}>
     <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="7" /></View>
     <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="8" /></View>
     <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="9" /></View>
  </View>
  <View width={'100%'} styles={styles.row}>
     <View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="0" /></View>
  </View>
</View>

Here are my styles:

const styles = StyleSheet.create({
    row: {
       flex: 1,
       flexDirection: 'row'
    },
    container: {
       flex: 1, 
       flexDirection: 'column'
    }
  });

For some reason this renders a vertical list of buttons. What do I need to change so that the buttons will render in this format:

    1 2 3
    4 5 6
    7 8 9
      0

Upvotes: 0

Views: 65

Answers (2)

Amoong
Amoong

Reputation: 171

You have a typo.

<View width={'100%'} styles={styles.row}> // Wrong!

<View width={'100%'} style={styles.row}>  // change styles -> style

Upvotes: 1

Dulaj Ariyaratne
Dulaj Ariyaratne

Reputation: 1108

You have done a small mistake. It should be style instead of styles.

 <View style={styles.container}>
    <View width={'100%'} style={styles.row}>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="1" /></View>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="2" /></View>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="3" /></View>
    </View>
    <View width={'100%'}  style={styles.row}>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="4" /></View>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="5" /></View>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="6" /></View>
    </View>
    <View width={'100%'}  style={styles.row}>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="7" /></View>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="8" /></View>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="9" /></View>
    </View>
    <View width={'100%'} style={styles.row}>
      <View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="0" /></View>
    </View>
  </View>

This would be the styles

const styles = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'row',
  
  },
  container: {
     alignItems: 'center',
     flex: 1, 
     flexDirection: 'column',
   },
  });

Upvotes: 1

Related Questions