Display: Inline Equivalent in React Native

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 g

Answer 1

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'
   }
});

Answer 2

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',
    },