React Native Temperature Badge

A cross-platform temperature badge component for React Native and web. Display temperature values in a color-coded pill/badge, with support for Celsius, Fahrenheit, and Kelvin. Built with React Native’s Pressable and Text for full accessibility and theming.

!Example app showcasing temperature badge variants: units, default and custom color scales, square and pill frames, and label styles

Features

- ➡️ Units: Celsius (°C), Fahrenheit (°F), and Kelvin (K)
- ➡️ Conversion: Imperative Temperature.convert() for converting between units
- ➡️ Color scale: Default 6-band scale (very cold → hot); override specific bands or provide a custom scale
- ➡️ Composable: TemperatureProvider, TemperatureFrame, and TemperatureLabel for flexible layout
- ➡️ Accessible: Sensible accessibilityLabel; TemperatureFrame forwards Pressable props.
- ➡️ Cross-platform: React Native (iOS, Android) and web

Installation

``sh
npm install react-native-temperature-badge
`

or with Yarn:

`sh
yarn add react-native-temperature-badge
`

$3

- react (any version)
- react-native (any version)
- react-native-web (any version) — Required for web support

$3

This library works on web using react-native-web, which provides web-compatible implementations of React Native components (Pressable, Text, etc.).

For Expo projects: Web support works out of the box. Expo automatically configures react-native-web and handles the bundler setup. Just run expo start --web or press w in the Expo CLI.

For other React Native web setups: Ensure react-native-web is installed and your bundler is configured to alias react-native to react-native-web:

`sh
npm install react-native-web


or


yarn add react-native-web
`

Webpack configuration example:
`js
resolve: {
alias: {
'react-native$': 'react-native-web',
},
}
`

Vite configuration example:
`js
resolve: {
alias: {
'react-native': 'react-native-web',
},
}
`

The library uses standard React Native APIs (Pressable, Text) that react-native-web supports, so no additional configuration is needed beyond the bundler alias.

Usage

$3

Wrap your badge in TemperatureProvider with the temperature value and display unit. Use TemperatureFrame for the colored pill and TemperatureLabel for the numeric text.

`tsx
import {
TemperatureProvider,
TemperatureFrame,
TemperatureLabel,
} from 'react-native-temperature-badge';

function WeatherBadge() {
return (





);
}
`

This renders a pill with a color from the default scale (e.g. green for ~22 °C) and the label 22.00 °C.

$3

If your data is in another unit, use Temperature.convert() before passing it to TemperatureProvider:

`tsx
import {
Temperature,
TemperatureProvider,
TemperatureFrame,
TemperatureLabel,
} from 'react-native-temperature-badge';

const tempF = 72;

value={Temperature.convert(tempF, { from: 'fahrenheit', to: 'celsius' })}
display="celsius"
>




`

Or display in the same unit as your source:

`tsx





`

$3

TemperatureFrame is a Pressable. Pass onPress and other Pressable props:

`tsx

console.log('Tapped')}>



`

$3

TemperatureFrame and TemperatureLabel accept style (and other Pressable/Text props). TemperatureFrame’s style can be an array or a function (state) => Style for Pressable’s pressed/focused/hovered state.

`tsx



`

API

$3

Convert a numeric temperature between units.

| Parameter | Type | Description |
|------------|----------------|--------------------------------------|
| value | number | Temperature in the from unit |
| options | ConvertOptions | { from: TemperatureUnit; to: TemperatureUnit } |

Returns: number — temperature in the to unit.

Example:

`ts
Temperature.convert(32, { from: 'fahrenheit', to: 'celsius' }); // 0
Temperature.convert(273.15, { from: 'kelvin', to: 'celsius' }); // 0
Temperature.convert(100, { from: 'celsius', to: 'fahrenheit' }); // 212
`

Throws RangeError if the result would be negative Kelvin.

$3

Provides the temperature value, unit, and color scale to TemperatureFrame and TemperatureLabel. Required as an ancestor of both.

| Prop | Type | Required | Description |
|-------------|--------------------------|----------|-------------|
| value | number | Yes | Temperature in the unit given by display. Use Temperature.convert() if your source is in another unit. |
| display | 'celsius' \| 'fahrenheit' \| 'kelvin' | Yes | Unit of value and the unit shown in TemperatureLabel. |
| colors | Partial> | No | Override colours for specific bands of the default scale. Ignored if colorScale is set. |
| colorScale| ColorScaleEntryInput[] | No | Full custom scale. Each entry: { celsius | fahrenheit | kelvin: number; color: string }. When set, colors is ignored. |
| children | ReactNode | Yes | Typically TemperatureFrame and TemperatureLabel. |

Default scale bands (DefaultScaleBand): 'veryCold' | 'cold' | 'cool' | 'mild' | 'warm' | 'hot'.

Override a few bands:

`tsx
value={-5}
display="celsius"
colors={{ veryCold: '#1e3a5f', hot: '#dc2626' }}
>


`

Custom scale (e.g. Celsius):

`tsx
value={35}
display="celsius"
colorScale={[
{ celsius: -20, color: '#1e3a5f' },
{ celsius: 0, color: '#7dd3fc' },
{ celsius: 15, color: '#a7f3d0' },
{ celsius: 30, color: '#fcd34d' },
{ celsius: 45, color: '#dc2626' },
]}
>


`

$3

A Pressable that renders a pill-shaped container. Background color is chosen from the TemperatureProvider’s color scale based on the current temperature. Must be used inside TemperatureProvider.

| Props | Type | Description |
|-------|------|-------------|
| children | ReactNode | Usually TemperatureLabel. |
| style | StyleProp or (state: { pressed, hovered, focused }) => StyleProp | Merged with the default pill style. |
| accessible | boolean | Default true. |
| accessibilityLabel | string | Default: e.g. "22.00 degrees Celsius". |
| …all other Pressable props | | e.g. onPress, onLongPress, disabled. |

Default pill style: paddingHorizontal: 12, paddingVertical: 6, borderRadius: 999, alignSelf: 'flex-start', and the computed backgroundColor.

$3

A Text that shows the temperature and unit (e.g. 22.00 °C). Must be used inside TemperatureProvider. Accepts all Text props except children (the label is derived from context).

| Props | Type | Description |
|-------|------|-------------|
| style | StyleProp | Merged with default fontSize: 15, fontWeight: '600'. |
| accessibilityLabel | string | Override if needed. |
| …all other Text props | | |

Format: {displayValue.toFixed(2)}{unitSymbol} (e.g. °C, °F, K).

Exported types

- TemperatureUnit — 'fahrenheit' | 'kelvin' | 'celsius'
- ConvertOptions — { from: TemperatureUnit; to: TemperatureUnit }
- DefaultScaleBand — 'veryCold' | 'cold' | 'cool' | 'mild' | 'warm' | 'hot'
- ColorScaleEntryInput — { celsius: number; color: string } | { fahrenheit: number; color: string } | { kelvin: number; color: string }

Default color scale

DEFAULT_TEMPERATURE_COLOR_SCALE is exported for reference or to base custom scales on. It is an array of { kelvin: number; color: string } with 6 steps from very cold to hot (e.g. slate/blue for cold, green for mild, yellow/red for warm/hot). TemperatureProvider uses this when neither colors nor colorScale` is provided.

Contributing

- Development workflow
- Sending a pull request
- Code of conduct

License

MIT

---

Made with create-react-native-library