title: Display: Inline Equivalent in React Native
body: <p>It seems as though I am having problems with creating a display: inline styling equivalent with flexbox. So far I have achieved the following (where the red and blue lines are governed by the border function to help with styling):</p>
  
  <p><a href="https://i.stack.imgur.com/99r6T.png"><img src="https://i.stack.imgur.com/99r6T.png" alt="current layout given code"></a></p>
  
  <p>With this code:</p>
  
  <pre><code>var React = require('react-native');
  var {
      View, 
      ScrollView, 
      Image,
      StyleSheet,
      Text, 
      TouchableHighlight,
  } = React;
  
  //additional libraries
  var Parse = require('parse/react-native'); //parse for data storage
  Icon = require('react-native-vector-icons/Ionicons'); //vector icons
  
  //dimensions
  var Dimensions = require('Dimensions');
  var window = Dimensions.get('window');
  
  //dynamic variable components
  var ImageButton = require('../common/imageButton');
  //var KeywordBox = require('./onboarding/keyword-box');
  
  module.exports = React.createClass({
      render: function() {
          return (
              &lt;View style={[styles.container]}&gt;
                  &lt;Image 
                      style={styles.bg} 
                      source={require('./img/login_bg1_3x.png')}&gt;
                      &lt;View style={[styles.header, this.border('red')]}&gt;
                          &lt;View style={[styles.headerWrapper]} &gt;
                              &lt;Image 
                                  resizeMode={'contain'}
                                  style={[styles.onboardMsg]}
                                  source={require('./img/onboard_msg.png')} &gt;
                              &lt;/Image&gt;
                          &lt;/View&gt;
                      &lt;/View&gt;
                      &lt;View style={[styles.footer, this.border('blue')]}&gt;
                          &lt;ScrollView 
                              horizontal={false}
                              style={styles.footerWrapperNC}
                              contentContainerStyle={[styles.footerWrapper]}&gt;
                              {this.renderKeywordBoxes()}
                          &lt;/ScrollView&gt;
                      &lt;/View&gt;
                  &lt;/Image&gt;
              &lt;/View&gt;
          );
      }, 
      renderKeywordBoxes: function() {
          //renders array of keywords in keyword.js
          //and maps them onto custom component keywordbox to show in the onboarding
          //component
          var Keywords = ['LGBQT', '#BlackLivesMatter', 'Arts', 'Hip-Hop', 'History', 
          'Politics', 'Comedy', 'Fashion', 'Entrepreneurship', 'Technology', 'Business', 
          'International', 'Health', 'Trending', 'Music', 'Sports', 'Entertianment'];
  
          return Keywords.map(function(keyword, i) {
              return &lt;TouchableHighlight 
                  style={styles.keywordBox} 
                  key={i}
                  underlayColor={'rgb(176,224,230, 0.6)'} &gt;
                  &lt;Text style={styles.keywordText} &gt;{keyword}&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
          });
      }, 
      //function that helps with laying out flexbox itmes 
      //takes a color argument to construct border, this is an additional 
      //style because we dont want to mess up our real styling 
       border: function(color) {
          return {
            borderColor: color, 
            borderWidth: 4,
          } 
       },
  });
  
  styles = StyleSheet.create({
      header: {
          flex: 2,
      }, 
      headerWrapper: {
          flex: 1, 
          flexDirection: 'column', 
          alignItems: 'center',
          justifyContent:'space-around',
          marginTop: window.height/35,
      },
      onboardMsg: {
          width: (window.width/1.3), 
          height: (452/1287)*((window.width/1.3)),
      },
      footer: {
          flex: 7, 
          marginTop: window.height/35,
      }, 
      //container style wrapper for scrollview
      footerWrapper: {
          flexWrap: 'wrap', 
          alignItems: 'flex-start',
      },
      //non-container style wrapper for scrollview
      footerWrapperNC: {
          flexDirection:'row',
  
      },
      container: {
          flex: 1, 
          alignItems: 'center', 
          justifyContent: 'center',
      }, 
      bg: {
          flex: 1,
          width: window.width, 
          height: window.height, 
      },
      actionButtonIcon: {
          fontSize: 20,
          height: 22,
          color: 'white',
      },
      keywordText: {
          fontFamily: 'Bebas Neue', 
          fontSize: 18, 
          padding: 6, 
          fontWeight: 'bold',
          color: 'white', 
          letterSpacing: 1.5,
          textAlign: 'center'
      }, 
      keywordBox: {
          backgroundColor: 'transparent',
          margin: 3, 
          borderColor: 'rgb(176,224,230, 0.6)', 
          borderWidth: 1,
      },
  });
  </code></pre>
  
  <p>But I would like to achieve this:</p>
  
  <p><a href="https://i.stack.imgur.com/oOl57.png"><img src="https://i.stack.imgur.com/oOl57.png" alt="Frame UI/UX"></a></p>
  
  <p>any ideas?</p>
  
  <p>EDIT** ANSWER: </p>
  
  <p>Needed to change the styling to the following:</p>
  
  <pre><code>//container style wrapper for scrollview
      footerWrapper: {
          flexWrap: 'wrap', 
          alignItems: 'flex-start',
          flexDirection:'row',
      },
      //non-container style wrapper for scrollview
      footerWrapperNC: {
          flexDirection:'column',
      },
  </code></pre>
  
  <p>So use of flexDirection in column and row for scrollView works children stay inline </p>