CODEWITHSUNDEEP
react-nativeuser-interfacestyles
Malik Mati
Malik Mati

Reputation: 37

How can i set tag styles in react native?

This is my screen I want to show these tags in the next line but failed it moves into next line how can I set tag styles that can come under category types.

I want my category types like this

{item.category &&
      item.category.map((item, index) => (
        <View
          style={{
            padding: 5,
            width: '30%',
            backgroundColor: 'skyblue',
          }}>
          <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            style={{
              fontSize: 16,
              width: '60%',
              padding: 5,
              color: 'grey',
              // marginLeft: 5,
              borderRadius: 40,
              // alignSelf: 'center',
              backgroundColor: theme.colors.secondary,
              textAlign: 'center',
              fontFamily: Fonts.FontAwesome,
            }}>
            {item}
          </Text>
        </View>
      ))}

Upvotes: 1

Views: 1355

Answers (1)

FreakyCoder
FreakyCoder

Reputation: 869

Here is your solution:

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from "react-native";

const staticData = ["iOS", "Android", "Kotlin", "Boom", "Mobile", "Dev"];

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1 }}>
        <View
          style={{
            flex: 1,
            height: 300,
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "flex-start",
          }}
        >
          {staticData.map((item) => {
            return (
              <View
                style={{
                  width: 100,
                  margin: 12,
                  padding: 8,
                  borderRadius: 20,
                  alignItems: "center",
                  justifyContent: "center",
                  backgroundColor: "#6daf6e",
                }}
              >
                <Text
                  style={{ color: "#fdfdfd", flexShrink: 1, flexWrap: "wrap" }}
                >
                  {item}
                </Text>
              </View>
            );
          })}
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

Actually all you need to do is a main container for your tags and set the container style as:

flexWrap: "wrap",
flexDirection: "row",
justifyContent: "center",
alignItems: "flex-start",

Also, the working example repository is here as well:

https://github.com/WrathChaos/react-native-tag-wrap-overlaps-problem-solution

Upvotes: 1

Related Questions