Search code examples
javascriptnode.jsreactjsreact-native

How can I change to horizontal alignment when using map in React native?

I have data called hello.

If I have hello[0] data, I want to run hello.map and list the buttons. However, the Pressable component is vertically aligned, but I want to do it horizontally.

So, I am trying to change the direction by giving a View on top of the map function. If i put a View, an Unexpected Token error occurs.

How do I fix my code?

hello = [
{ originName: "growthLength 1"},
{ originName: "growthLength 2"},
]



{
hello[0] ? (
<View style={{flexDirection:'row'}}>    // << here

hello.map((v) => {
return(
<>
    <Pressable>
        <Image />
    </Pressable>
</>
)
})

</View>   
) : (null)
}
Solution

  • Change your code like this

    {hello && hello?.length > 0 ? (
    <View style={{ flexDirection: 'row' }}>
    {hello.map((v) => {
        return (
        <>
            <Pressable>
            <Image />
            </Pressable>
        </>
        );
    })}
    </View>
) : null}