title: Trying to create two columns in react-native
body: <p>I am trying to create a two column grid using flex. One column will be used to display a word or phrase and the second column will be used to translate the first column. Here is a link: <a href="https://imgur.com/nZGo8pb" rel="nofollow noreferrer">http://imgur.com/nZGo8pb</a> to give you a visual idea on what I am trying to achieve.</p>
  
  <p>I am unable to get two columns side by side. I am only able to have my words appear on top of each other. This is best attempt. A huge failure.<a href="http://imgur.com/a/ICApr" rel="nofollow noreferrer">http://imgur.com/a/ICApr</a></p>
  
  <p>My code is:</p>
  
  <pre><code>nent} from 'react';
  import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';
  
  class AddWords extends Component{
  
      state = {words:['iku','konkai','kaikan'],
               word:'',
               EnglishWords:['go','this time','next time']    
              }
  
      renderList(tasks){
        return(
          tasks.map((task) =&gt;{
           return(
              &lt;View key={task} style={styles.item}&gt;
               &lt;Text&gt;
               {task}
               &lt;/Text&gt;
                &lt;Text&gt;
               &lt;/Text&gt; 
              &lt;/View&gt;
              )   
  
          })
  
        )
      }
      renderEnglishWords(english){
        return(
          english.map((english) =&gt;{
           return(
              &lt;View key={english} style={styles.item2}&gt;
               &lt;Text&gt;
               {english}
               &lt;/Text&gt;
                &lt;Text&gt;
               &lt;/Text&gt; 
              &lt;/View&gt;
              )   
  
          })
  
        )
      }
      addWord(){
          let words = this.state.words.concat([this.state.word]);
          this.setState({words})
  
  
      }
      render(){
          return(
           &lt;View style={styles.container}&gt;
            &lt;TextInput
              style={styles.input}
              onChangeText={(word) =&gt; {
                  this.setState({word})
              }}
              onEndEditing={()=&gt;this.addWord()}
             /&gt;
           &lt;View style={styles.wordContainer}&gt;     
            {this.renderList(this.state.words)}
            {this.renderEnglishWords(this.state.EnglishWords)}
            &lt;View style={styles.item2}&gt;
  
            &lt;/View&gt;
            &lt;/View&gt;
           &lt;/View&gt;
  
          )
      }
  
  }
  
  const styles = StyleSheet.create({
      container:{
          flex:1,
          borderWidth:3,
          borderColor:'green',
          flexDirection:'column',
          paddingTop:10
  
      },
      wordContainer:{
  
      flexDirection: 'column',
      borderColor:'blue',
       borderWidth:2  
  
  
      },
      input:{
        height:60,
        borderWidth:1,
        borderRadius:5,
        borderColor:'black',
        textAlign:'center',
        margin:10,
        paddingTop:20,
        paddingBottom:10
  
      },
      item:{
      borderColor:'red',
       borderWidth:2   
  
  
      },
      item2:{
       borderColor:'black',
       borderWidth:2,
       flexDirection:'column',
      }
  })
  export default AddWords; 
  </code></pre>
  
  <p>Any help will be greatly appreciated. </p>
  
  <p>Thanks.</p>