npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@platformbuilders/fluid-react-native

v1.0.0

Published

Builders React Native for Fluid Design System

Downloads

106

Readme

@platformbuilders/fluid-react-native

Build Status npm MIT

Fluid React Native

A Fluid React Native é uma biblioteca de componentes UI pronta para uso, desenvolvida pela Platform Builders. Ela foi criada com o objetivo de acelerar o processo de desenvolvimento de aplicativos React Native, oferecendo uma ampla variedade de componentes prontos para serem utilizados.

Instalação

npm install @platformbuilders/fluid-react-native
//ou
yarn add @platformbuilders/fluid-react-native

Uso Após a instalação, você pode importar e utilizar os componentes da Fluid React Native em seu aplicativo. Aqui está um exemplo básico de como utilizar um botão da Fluid:

import React from 'react';
import { Button } from '@platformbuilders/fluid-react-native';

const App = () => {
  return (
    <Button title="Clique aqui" onPress={() => console.log('Botão clicado!')} />
  );
}
export default App;

Como criar um componente na Fluid

Para criar um novo componente na Fluid React Native, você pode seguir os seguintes passos:

Crie um novo arquivo para o seu componente. Por exemplo, MeuComponente.js.

    import React from 'react';
    import { Text } from 'react-native';
    const MeuComponente = () => {
        return (
	        <Text>Olá, Mundo!</Text>
	     );
    }
    export default MeuComponente;

No arquivo src/components/index.ts exporte seu novo componente:

export { default  as  MeuComponente } from  './MeuComponente';

*Não esqueça de criar testes para seu novo componente

  1. Crie um arquivo de teste para o seu componente. Por exemplo, MeuComponente.spec.js.

  2. Escreva um teste para verificar se o componente é renderizado corretamente:

     import React from 'react';
     import { render, getByText } from 'react-native-testing-library';
     import MeuComponente from './MeuComponente';
     describe('MeuComponente', () => {
       it('deve renderizar corretamente', () => {
         const { getByText } = render(<MeuComponente />);
         const textoElement = getByText('Olá, Mundo!');
         expect(textElement).toBeDefined();
       });
     });

    Neste exemplo, estamos verificando se o texto "Olá, Mundo!" é renderizado corretamente no componente MeuComponente.

  3. Execute os testes para verificar se o componente está funcionando corretamente. No seu terminal, execute o seguinte comando:

    npm test
    // ou
    yarn test

Como testar usando o Yalc

Certifique-se de ter o Yalc instalado globalmente em sua máquina. Se ainda não o tiver, você pode instalá-lo executando o seguinte comando:

npm install -g yalc

Navegue até o diretório raiz do projeto da Fluid React Native.

Execute o comando yalc publish para publicar a biblioteca localmente:

yalc publish

Isso fará com que a biblioteca Fluid React Native seja disponibilizada localmente por meio do Yalc.

No seu projeto React Native, navegue até o diretório raiz e execute o comando yalc add seguido do nome da biblioteca. Por exemplo:

yalc add @platformbuilders/fluid-react-native

Isso adicionará a biblioteca Fluid React Native ao seu projeto localmente através do Yalc.

Agora você pode importar e utilizar os componentes da Fluid React Native em seu aplicativo normalmente.

Sempre que você fizer alterações na biblioteca Fluid React Native, execute o comando yalc push no diretório raiz do projeto para atualizar o pacote no seu projeto React Native:

yalc publish --push

Isso fará com que as alterações sejam refletidas automaticamente no seu projeto React Native.