I just did like that;

const genres = [
  "Metal",
  "Rock",
  "Jazz",
  "Blues",
  "Lo-fi",
  "Japanese",
  "Pop",
  "Classical",
  "Hip-Hop",
  "Country",
  "EDM",
  "Soul",
  "Folk",
  "Reggae",
];

export function YourFunctionName({ name }) {
  return (
     <View style={AllStyle.itemsGenreScrolls}>
        <ScrollView style={AllStyle.genreItemsParent} horizontal={false}>
          <View style={AllStyle.genreButtonParent}>
            {genres
              .filter((_, index) => index < genres.length / 2)
              .map((name, _) => {
                return <GenreButton name={name} />;
              })}
          </View>
          <View style={AllStyle.genreButtonParent}>
            {genres
              .filter((_, index) => index >= genres.length / 2)
              .map((name, _) => {
                return <GenreButton name={name} />;
              })}
          </View>
        </ScrollView>
      </View>
  );
}

GenreButton file simply like that:

import { Text, TouchableOpacity } from "react-native";
import { AllStyle } from "your style file";

export function GenreButton({ name }) {
  return (
    <TouchableOpacity style={AllStyle.genreButton}>
      <Text style={AllStyle.genreButtonText}>{name}</Text>
    </TouchableOpacity>
  );
}

this is the Style file:

import { StyleSheet } from "react-native";
export const AllStyle = StyleSheet.create({
  itemsGenreScrolls: {
    width: "100%",
    marginTop: 16,
    marginBottom: 24,
  },
  itemsHeaders: {
    fontSize: 25,
    fontWeight: "800",
    color: "#ffffff",
  },
  genreItemsParent: {
    display: "flex",
    flexDirection: "row",
  },
  genreButtonParent: {
    display: "flex",
    flexDirection: "row",
    paddingVertical: 16,
    marginLeft: 6,
  },
  genreButton: {
    marginRight: 16,
    backgroundColor: "#444444",
    width: "64",
    height: "32",
    paddingHorizontal: 18,
    paddingVertical: 9,
    borderRadius: 20,
    shadowColor: "black",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.4,
    shadowRadius: 10,
  },
  genreButtonText: {
    color: "#ffffff",
    textAlign: "center",
    fontSize: 16,
    fontWeight: "400",
  },
});