Display: Inline Equivalent in React Native - css

Question

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):
With this 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 (
<View style={[styles.container]}>
<Image
style={styles.bg}
source={require('./img/login_bg1_3x.png')}>
<View style={[styles.header, this.border('red')]}>
<View style={[styles.headerWrapper]} >
<Image
resizeMode={'contain'}
style={[styles.onboardMsg]}
source={require('./img/onboard_msg.png')} >
</Image>
</View>
</View>
<View style={[styles.footer, this.border('blue')]}>
<ScrollView
horizontal={false}
style={styles.footerWrapperNC}
contentContainerStyle={[styles.footerWrapper]}>
{this.renderKeywordBoxes()}
</ScrollView>
</View>
</Image>
</View>
);
},
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 <TouchableHighlight
style={styles.keywordBox}
key={i}
underlayColor={'rgb(176,224,230, 0.6)'} >
<Text style={styles.keywordText} >{keyword}</Text>
</TouchableHighlight>
});
},
//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,
},
});
But I would like to achieve this:
any ideas?
EDIT** ANSWER:
Needed to change the styling to the following:
//container style wrapper for scrollview
footerWrapper: {
flexWrap: 'wrap',
alignItems: 'flex-start',
flexDirection:'row',
},
//non-container style wrapper for scrollview
footerWrapperNC: {
flexDirection:'column',
},
So use of flexDirection in column and row for scrollView works children stay inline

Answer 1

Needed to change the styling to the following:
//container style wrapper for scrollview
footerWrapper: {
flexWrap: 'wrap',
alignItems: 'flex-start',
flexDirection:'row',
},
//non-container style wrapper for scrollview
footerWrapperNC: {
flexDirection:'column',
},

Answer 2

This works for me:
import {View, Text} from 'react-native';
<View style={styles.container}>
<Text>Hello</Text>
</View>
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignSelf: 'flex-start'
}
});