Trying to create two columns in react-native

Question

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: http://imgur.com/nZGo8pb to give you a visual idea on what I am trying to achieve.

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.http://imgur.com/a/ICApr

My code is:

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) =>{
         return(
            <View key={task} style={styles.item}>
             <Text>
             {task}
             </Text>
              <Text>
             </Text> 
            </View>
            )   

        })

      )
    }
    renderEnglishWords(english){
      return(
        english.map((english) =>{
         return(
            <View key={english} style={styles.item2}>
             <Text>
             {english}
             </Text>
              <Text>
             </Text> 
            </View>
            )   

        })

      )
    }
    addWord(){
        let words = this.state.words.concat([this.state.word]);
        this.setState({words})


    }
    render(){
        return(
         <View style={styles.container}>
          <TextInput
            style={styles.input}
            onChangeText={(word) => {
                this.setState({word})
            }}
            onEndEditing={()=>this.addWord()}
           />
         <View style={styles.wordContainer}>     
          {this.renderList(this.state.words)}
          {this.renderEnglishWords(this.state.EnglishWords)}
          <View style={styles.item2}>

          </View>
          </View>
         </View>

        )
    }

}

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; 

Any help will be greatly appreciated.

Thanks.

Answer 1

You need to wrap both inner containers in another <View> with the following style:

<View style={styles.container}>

  <TextInput
    style={styles.input}
    onChangeText={(word) => {
      this.setState({ word })
    }}
    onEndEditing={this.addWord}
  />

  <View style={{ flexDirection: 'row', flex: 1 }}>
    <View style={styles.wordContainer}>
      ...
    </View>
    <View style={styles.item2}>
      ...
    </View>
  </View>

</View>

Answer 2

It's because the flexDirection in styles.wordContainer is set to 'column', it should be set to 'row'.

Check out this link on flex-direction examples.