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.
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.