flexDirection: "row" not working react-native - reactjs

Question

I am developing a react-native application. One of the app screens contains a list of albums. I have divided each album container into components which are Card and CardSection.
A Card can contain many CardSections. The CardSection will contain an image and 2 Text titles. The problem I am facing is with the positioning of the content in the CardSection as flexDirection:'row' is not working.
Here is the CardSection.js
import React from 'react';
import {View, Text, Image} from 'react-native';
import Card from './Card';
import CardSection from "./CardSection";
const AlbumDetail = ({album}) => {
// destructing the props
const {title, artist, thumbnail_image} = album;
return (
<Card>
<CardSection>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: thumbnail_image}} />
</View>
<View style={styles.headerContentStyle} >
<Text style={styles.headerTextStyle}>{title}</Text>
<Text>{artist}</Text>
</View>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
},
headerTextStyle:{
fontSize:18
},
thumbnailStyle: {
height: 50,
width: 50
},
thumbnailContainerStyle: {
justifyContent: 'center',
alignItems: 'center',
margin: 10,
marginRight: 10
}
};
export default AlbumDetail;
Here is the CardSection.js
import React from 'react';
import {View} from 'react-native';
const CardSection = (props) => {
return (
<View styles={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: "row",
borderColor: '#ddd',
position: 'relative'
}
};
export default CardSection;
The resultant should that the Image placed towards the left and on the right side of the image there will be 2 Text titles and their flexDirection will be column

Answer 1

<View styles={styles.containerStyle}> you have typo, it is styles, the prop should be style.

Answer 2

use this
headerContentStyle: {
flexDirection: 'row',
justifyContent: 'space-around'
}
instead of
headerContentStyle: {
flexDirection: 'column',
justifyContent: 'space-around'
}

Answer 3

You have to use card containerStyle props in CardSection.js file.
there you should have to use flexDirection :'row' .
Hope it will work.

Answer 4

I had a similar problem where flexDirection: 'row' was not working in one of my components that I was importing in App.js.
What was causing this was the alignItems: 'center' in the stylesheet for the main container in my App.js file.
I hope this helps someone.

Answer 5

You can check this.
import { TouchableOpacity } from 'react-native'