react-nativetailwind-cssnativewind

NativeWind border color not working as expected in React Native app

I'm trying to style some pills using NativeWind. Here's my app:

import React, { useState, useEffect } from 'react';
import { StatusBar, View } from 'react-native';
import { Pill } from './components/Pill';

export default function App() {
  return (
    <View className="px-8 py-20">
      <Pill conditional={'ok'} />
      <Pill conditional={'windy'} />
      <Pill conditional={'foggy'} />
      <Pill conditional={'hazard'} />
      <Pill conditional={'some random thing'} />
      <Pill conditional={'issue'} />
      <StatusBar style="auto" />
    </View>
  );
}

And here's Pill.js:

import React from "react";
import { Text } from "react-native";

export function Pill({ conditional }) {
    return conditional === 'ok' ? (
        <InternalPill color="green">🟢 No issues</InternalPill>
    ) : conditional === 'hazard' ? (
        <InternalPill color="yellow">⚠️ Hazard reported</InternalPill>
    ) : conditional === 'foggy' ? (
        <InternalPill color="gray">🌫️ Fog advisory</InternalPill>
    ) : conditional === 'windy' ? (
        <InternalPill color="gray">🌬️ Wind advisory</InternalPill>
    ) : conditional === 'issue' ? (
        <InternalPill color="red">❌ Issue reported</InternalPill>
    ) :
        <InternalPill color="gray">{'🌚 ' + conditional}</InternalPill>
}

function InternalPill({ children, color }) {
    return <Text className={`
    rounded-full px-3 py-1 text-sm font-semibold mr-2 border
    ${color === "yellow"
            ? "bg-yellow-100 text-yellow-800 border-yellow-800"
            : color === "red"
                ? "bg-red-100 text-red-800 border-red-800"
                : color === "green"
                    ? "bg-green-100 text-green-800 border-green-800"
                    : "bg-gray-100 text-gray-800 border-gray-600"
        }`}>
        {children}
    </Text>
}

It looks like this:

screenshot of pills

I want the pills to look closer to this:

enter image description here

Questions:

  1. Why don't I see borders? e.g. border-green-800 seems to have no effect
  2. Why isn't there rounding? e.g. rounded-full seems to have no effect
  3. The Pill component is taking up the full width of the parent view; how can I minimize the width?
Solution

  • Question 1 and 2:

    Using nativewind v4, I can't reproduce your problem. Your code worked for me

    enter image description here

    package.json:

    ...
"dependencies": {
    "expo": "~50.0.6",
    "expo-status-bar": "~1.11.1",
    "nativewind": "^4.0.1",
    "react": "18.2.0",
    "react-native": "0.73.4",
    "react-native-reanimated": "~3.6.2",
    "tailwindcss": "^3.4.1"
  },
...

    Question 3:

    You can use flex in your wrapper component.

    <View className="px-8 py-20 flex items-start">
   <Pill conditional={'ok'} />
   <Pill conditional={'windy'} />
   <Pill conditional={'foggy'} />
   <Pill conditional={'hazard'} />
   <Pill conditional={'some random thing'} />
   <Pill conditional={'issue'} />
   <StatusBar style="auto" />
</View>

    Result:

    result