flex-direction: 'row' s not working in react-native

Question

I'm stuck in one issue related to flexDirection: 'row'. I'm giving every style to <View> but it is not behaving like flexDirection: 'row'.

My output https://i.sstatic.net/dNOTF.png

I want to take all size tag in row and all color tag in row but it is not working.

My code

<View key={index}>
{
  count=count+1,
  this.state.data.variants.map((variants, index) => (
    option_values = variants.option_values,
    unique_size.indexOf(option_values[count].value) == -1 ?
      <View key={index} style={{flex: 1,}}>
        {
           unique_variant.indexOf(option_values[count].name) == -1 ?    
             <View>
             {                                           
                unique_variant.push(option_values[count].name),          
                <View style={{padding: 5}}>
                   <CapitalizedText style={{fontSize: 12, fontWeight: 'bold', color: '#585858'}}>{'Select ' + option_values[count].name}
                  </CapitalizedText>
                </View>
            }
            </View>
          : null
       }
       <View style={{flexDirection: 'row', flex: 1,marginBottom: 5}}>
         {
            unique_size.push(option_values[count].value),
            <TouchableOpacity activeOpacity={0.8} style={s.select_variants} key={index}
            >
               <Text style={s.select_size_txt}>{option_values[count].value}</Text>
            </TouchableOpacity>
        }
      </View>
    </View>
     : null
   ))
}</View>

I tried to give style in each <View> but I failed.

Any help is appreciated.

Answer 1

You need to give flexDirection row to the view that wraps the content what you want to display within a row, not to the views that gonna be on the row.

<View style = {{flexDirection:'row'}}>
    <ContentDisplayedOnARow/>
</View>

 <View  key={index}>
            {
                this.state.data.variants.map((variants, index) => (
                option_values = variants.option_values,
                unique_size.indexOf(option_values[index].value) === -1 ?
                <View  style = {{flexDirection:'row'}} key={index}>
                {
                    unique_variant.indexOf(option_values[index].name) === -1 ?
                        <View>
                            {
                                unique_variant.push(option_values[count].name),
                                <View style={{padding: 5}}>
                                    <CapitalizedText style={{fontSize: 12, fontWeight: 'bold', color: '#585858'}}>
                                        {'Select ' + option_values[index].name}
                                    </CapitalizedText>
                                </View>
                            }
                        </View>
                        : null
                }
                        <View style={{marginBottom: 5}}>
                        {
                            unique_size.push(option_values[count].value),
                            <TouchableOpacity activeOpacity={0.8} style={s.select_variants} key={index}>
                                 <Text style={s.select_size_txt}>{option_values[count].value}</Text>
                            </TouchableOpacity>
                        }
                        </View>
                </View>
                : null
                ))
            }</View>