@expressive-ui/native · Experimental

Componentes React Native (Expo) do ExpressiveUI, em Material 3 Expressive. Mesma API e mesmos tokens do @expressive-ui/react, com animações nativas e acessibilidade do RN.

Status experimental

Este pacote ainda não foi validado em execução com Expo/Metro, em simulador ou em dispositivo. A validação atual cobre compilação TypeScript; o teste de consumidor automatizado da biblioteca cobre apenas os pacotes web.

Use para avaliação e prototipação. A API e o comportamento podem mudar entre versões 0.x. Os intervalos de dependências declarados não representam uma matriz de compatibilidade testada; ainda falta validar renderização, animações, gestos e acessibilidade em iOS e Android.

Instalação

npx expo install @expressive-ui/native @expressive-ui/tokens react-native-svg

Requer React 19, React Native 0.79 ou superior e react-native-svg 15.

Uso

O React Native não tem a fonte Material Symbols por ligadura, então passe um renderIcon. Com @expo/vector-icons:

import { MaterialIcons } from '@expo/vector-icons';
import { ExpressiveCard, ExpressiveThemeProvider } from '@expressive-ui/native';

export default function App() {
  return (
    <ExpressiveThemeProvider
      mode="system"
      renderIcon={(name, { size, color }) => <MaterialIcons name={name.replace(/_/g, '-') as never} size={size} color={color} />}
    >
      <ExpressiveCard variant="tonal" eyebrow="Receita do mês" title="R$ 48.250" icon="payments" />
    </ExpressiveThemeProvider>
  );
}

O provider aceita mode, scheme, motion, locale e labels, como no pacote web. A preferência de reduzir movimento do sistema é respeitada.

Licença

MIT