I can't remember well, but after doing something enter image description here

my icon and description are placed like default flexDirection i cant find external component command that influence position of child component. i want to place icon and its description (written in Korean) row-direction.

Screen.js

import SettingContent from '../components/SettingContent'

export default function UserScreen() {
  
  //index: number, iconcolor,iconname,contentname,contentcolor: string, contentfunc: console.log("~~")
  return (
    <SafeAreaView style={{backgroundColor: '#0092ff',}}>
      <SafeAreaView style={userStyles.title}>
        <Text style={{
          color:'#fff',
          fontSize: 30,
          fontWeight: 'bold', 
      }}>U S E R</Text>
      </SafeAreaView>
      <View style={userStyles.contentList}>
        {contents.map(content => (
            <SettingContent
              key={content.index}
              content={content}
            />
        ))}
      </View>
    </SafeAreaView>
  )
}

const userStyles = StyleSheet.create({
  contentList: {
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5,
    backgroundColor: '#fff'
  },
  title: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 22.5,
    paddingBottom: 45,
  },
  
})

SettingContent.js

const SettingContent = ({content}) => {
    return(
        <TouchableOpacity onPress = {()=>{content.contentFunc}} style={listStyles.list}>
            <Icon name={content.iconName} size= {26.5} color={content.iconColor}/>
            <View style={listStyles.textContainer}>
                <Text style={listStyles(content.contentColor).text}>{content.contentName}</Text>
            </View>
        </TouchableOpacity>
    );
};

const listStyles = (textColor) => StyleSheet.create({
    list: {
        flexDirection:'row',
        backgroundColor:'white',
        paddingVertical: 17.5,
        paddingHorizontal: 5,
        borderColor:'#696969',
        borderBottomWidth:1,
    },
    text: {
        color:textColor,
        marginStart: 10,
        fontSize:26.5,
        fontWeight:'800',
    },
    textContainer: {
        justifyContent: 'flex-start',
    },
})
export default SettingContent;

i get stressed because of unknown, minor error first time seeing for hours.

CodePudding user response：

I think that you didn't give to display:flex list: { display: flex } 한국인이신 것 같아 말씀드리자면, listStyles.list에 display: flex를 안주셔서 그런 것 같습니다.

CodePudding user response：

even though the style of component is not affected by params of styleSheet, we must assign value to param of styleSheet. i change listStyles.anything to listStyles(content.contentColor).anything.