duongdev / phosphor-react-native Goto Github PK

I'm experiencing a conflict between the library's gesture detection and the "Drawer Navigator" in my app. When I drag an icon in my app, it triggers the "Drawer Navigator" to open even though the edge width is set to a minimum. This is causing a usability issue for my app.

I've tried adjusting the edge width of the "Drawer Navigator" to make the drag gesture less sensitive, but it doesn't seem to help.

In the example, my filters has a CaretDown icon, which triggers the swipe gesture when pressed.

My only concern is with the filters icon, but every icon in the app triggers the swipe gesture.

I would like to suggest the implementation of testID props to help tests components without relying on unsafe methods.

Hi guys, can you please add the testID to the icons? Thanks

After using phosphor-react-native, everytime I try to build a new app version with Expo EAS, I caught "JavaScript heap out of memory" (too many files).

There is no way to phosphor-react-native distribution to be smaller?

I also tried to set Node memory to 12GB.

I use import * as Icon from "phosphor-react-native"; and I need it.

ERROR Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with
a capital letter.

There are new icons for the web version. Is there any prospect of adding them to the React Native version?

Thank you for creating this Icon library, but I got a problem.
Some of these icons which have point don't show point without weight='fill'(in regular)

see this capture of Info icon below(also in Smiley)

I'm trying to install in Expo Snack, but it doesn't work. I couldn't find the error.
It always continues in Resolving

Resolving 'phosphor-react-native@*' ...Dependencies

Error on react-native-svg.

Could someone help me please?
I'm having an error running the project.

First error was react-native-svg, but I've tried to install it and I got:

Invariant Violation: requireNativeComponent: "RNSVGRect" was not found in the UIManager.

I'm trying to include Phosphor in a design system displayed in Storybook (web), but I'm getting this error whenever I include Phosphor icon:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Has anyone else gotten this working in Storybook? Is there some change I should be making to .storybook/main.js to work with phosphor-react-native?

Add support for className when icon has weight "fill" or "duotone". When you set weight to thin, light, regular or bold, the className works fine, because the "fill" prop in SVG is currentColor, but when the weight is fill or duotone, the "fill" prop in SVG is set to props.color, losing the color passed through className.

I'm using Nativewind, so when I use something like "text-zinc-800", it only works with weights that don't have background, e.g. regular.

I did some tests and I think this could be removed, since "currentColor" works for both "fill" and "duotone" as well.

Documentation Request

I'm trying to generate icons from https://github.com/phosphor-icons/phosphor-icons/ v1.4.

When copying phosphor-icons/assets into phosphor-react-native/svgs I notice that each .svg differs. Copying from phosphor-react/assets to phosphor-react-native/svgs also shows a difference in structure. So I'm wondering where are the assets in this repo's svgs directory sourced from? If this is documented in the repository then it should be easier for other users to bring this repo up to date and submit pull requests.

I'm getting this error since I upgraded from 0.4.0 to 1.1.1

This lib works with react-native-windows (app to desktop windows with RN)?

Hello everyone!
Is there any way to introduce tree-shaking?
I'm not using the import * as Icon syntax and I'm still getting the whole library in the bundle.

Im not being able to use phosphor-react-native on emulator android whilst real android & ios works perfectly fine.
emulator ios on mate's mac also fine.

using expo ~46.0.13 and Typescript 4.3.5; I've tested in API 30 up to 33, pixel & nexus phones.
Tried downgraded versions of phosphore without success

steps to reproduce:

1. npx create-expo-app . -t expo-template-blank-typescript
2. npm install --save phosphor-react-native
3. edit app.tsx with some icon
4. npx expo install react-native-svg (if not having err on ios but why? if this dependency is in the package.json of phosphor-react-native)
5. npx expo install
6. press a to android start (somethin like this shows up Opening on Android...
   › Opening exp://192.168.1.13:19001 on Galaxy_Nexus_API_33)
   and after expo bundle App.js, an error like those always appears

There's some workaround over there?
thx

Is it worth considering being able to add className="" to an icon?

We have the duotone weight that add a shadow inside the icon:

Is possible to change the shadow color?

all my tests where i'm using the icons from phosphor-react-native I'm getting this the error:

this is my component:

import { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

type AccordionItemProps = {
  children: React.ReactNode;
  title: string;
  testID?: string;
};

function AccordionItem({ children, title, testID }: AccordionItemProps) {
  const [expanded, setExpanded] = useState(false);

  function toggleItem() {
    setExpanded(!expanded);
  }

  const body = (
    <View
      testID="body"
      className="w-[88%] py-2 self-center border-r-[0.5px] border-r-shape_gray border-l-[0.5px] border-l-shape_gray border-b-[0.5px] border-b-shape_gray rounded-b-lg"
    >
      {children}
    </View>
  );

  return (
    <View className="pb-2" testID={testID}>
      <TouchableOpacity
        testID="accordion-item-button"
        activeOpacity={0.7}
        className="p-4 bg-white flex-row justify-between border-[0.5px] border-shape_gray rounded-lg w-[90%] self-center"
        onPress={() => toggleItem()}
      >
        <Text className="text-base font-rubik_medium text-shape_gray">
          {title}
        </Text>
        {expanded ? (
          <View testID="icon_up">
            <CaretUp size={20} />
          </View>
        ) : (
          <View testID="icon_down">
            <CaretDown size={20} />
          </View>
        )}
      </TouchableOpacity>
      {expanded && body}
    </View>
  );
}

export default AccordionItem;

these are my tests:

import { fireEvent, render } from '@testing-library/react-native';
import { View } from 'react-native';
import AccordionItem from '..';

describe('AccordionItem', () => {
  it('renders without crashing', () => {
    const { getByTestId } = render(
      <AccordionItem title="Test Title" testID="accordion-item">
        <View />
      </AccordionItem>,
    );
    const accordionItem = getByTestId('accordion-item');
    expect(accordionItem).toBeTruthy();
  });

  it('toggles item when the button is pressed', () => {
    const { getByTestId } = render(
      <AccordionItem title="Test Title" testID="accordion-item">
        <View />
      </AccordionItem>,
    );

    const button = getByTestId('accordion-item-button');
    fireEvent.press(button);

    const body = getByTestId('body');
    expect(body).toBeTruthy();
  });

  it('renders the up icon when expanded is true', () => {
    const { getByTestId } = render(
      <AccordionItem title="Test Title" testID="accordion-item">
        <View />
      </AccordionItem>,
    );

    const button = getByTestId('accordion-item-button');
    fireEvent.press(button);
    const upIcon = getByTestId('icon_up');
    expect(upIcon).toBeTruthy();
  });

  it('renders the down icon when expanded is false', () => {
    const { getByTestId } = render(
      <AccordionItem title="Test Title" testID="accordion-item">
        <View />
      </AccordionItem>,
    );

    const downIcon = getByTestId('icon_down');

    expect(downIcon).toBeTruthy();
  });
});

how can I fix it ? Thanks

Recently I've created a react-native app and tried to make some adjustments for the web.

The icons do work but I'm getting lots of errors and warnings when bundled:

I also tried to make an alias for the web using webpack

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

    config.resolve.alias['phosphor-react-native'] = 'phosphor-react';

  return config;
};

but getting a different error:

Is there a way to use phosphor icons for react-native-web?

Firstly I want to thank you for your work, I can't find this icon : in the package, did I miss something during the installation or does it really not exist?

When using react-native-web, my browser complaints that the svg isn't labelled correctly when the icon is diplayed. Should the generated code maybe add aria-label to each <Svg element automatically?

Hi,

congratulations on this lib.

I created a project using npx create-expo-app --template bare-minimum ProjectExample, when I run it using npx expo start it works fine, but when I run it using npx expo run:android I get the following error: Invariant Violation: requireNativeComponent: "RNSVGRect" was not found in the UIManager.

Update to the last release of Phosphor Icons to get the new icons. The last release is v2.0.0.

android APK crash when make icon weight is fill

<PhosphorIcons.BookmarksSimple color="#3A3B81" weight='fill' size={18} mirrored={false}/>

Hey Dustin, thanks for all of the work putting together this library.

This library is linked to from the phosphor icon README, so it would be helpful to better understand your willingness to maintain and host it.

If you'd like to keep hosting the repo, but are looking for help maintaining it, I'd be happy to help. If you're no longer interested in hosting the repo, I'd also volunteer to take it (and the npm releases) over.

When I install the library and try to run the app "npx expo start" using android, the app crashes and don't run again:

only works in Expo Go usind IOS mobile phone

Examples of use:

import { ArrowUpRight } from "phosphor-react-native";

import { Container } from './styles';

export const Home = () => {
  return (
    <Container>
        <ArrowUpRight size={24} color="red" />
    </Container>
  )
};

or using as a component in styled-components:

import styled from "styled-components/native";
import { ArrowUpRight } from "phosphor-react-native";

export const Container = styled.View`
  flex: 1;
  padding: 24px 24px 0 24px;
  background-color: ${({ theme }) => theme.COLORS.GRAY_7};
`;

export const GoToStatisticsIcon = styled(ArrowUpRight).attrs(({ theme }) => ({
  size: 24,
  color: theme.COLORS.GREEN_MID,
}))``;

The app only runs again when I uninstall the library.

My package.json file:

{
  "name": "dailydiet",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo-google-fonts/nunito-sans": "^0.2.3",
    "expo": "~48.0.6",
    "expo-font": "~11.1.1",
    "expo-image": "~1.0.0",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "@types/styled-components": "^5.1.26",
    "@types/styled-components-react-native": "^5.2.1",
    "typescript": "^4.9.4"
  },
  "private": true
}

Version of "phosphor-react-native" in use: 1.1.2

I'm seeing the below error in an Expo (SDK51) project:

Unable to resolve module ./icons/PushPinSimpleSlash from /Users/tom/Code/projectg/node_modules/phosphor-react-native/src/index.tsx: 

None of these files exist:
  * node_modules/phosphor-react-native/src/icons/PushPinSimpleSlash(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css)
  * node_modules/phosphor-react-native/src/icons/PushPinSimpleSlash/index(.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.mjs|.native.mjs|.mjs|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.cjs|.native.cjs|.cjs|.ios.scss|.native.scss|.scss|.ios.sass|.native.sass|.sass|.ios.css|.native.css|.css)
  923 | export { default as ProjectorScreen } from './icons/ProjectorScreen';
  924 | export { default as Pulse } from './icons/Pulse';
> 925 | export { default as PushPinSimpleSlash } from './icons/PushPinSimpleSlash';
      |                                                ^
  926 | export { default as PushPinSimple } from './icons/PushPinSimple';
  927 | export { default as PushPinSlash } from './icons/PushPinSlash';
  928 | export { default as PushPin } from './icons/PushPin';

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0
0x0

I did:

npx expo install react-native-svg -- --legacy-peer-deps
npx expo install phosphor-react-native -- --legacy-peer-deps

Here is how I am using the package:

import { View, Text, Pressable } from "@/styles";
import Rows from "phosphor-react-native/src/icons/Rows";

function NavButton(props: NavButtonProps) {
  return (
    <Pressable onPress={props.onPress}>
      <View>
        {props.icon && props.icon}
        <Text classes={["color:white", props.active && "color:red-100"]}>{props.label}</Text>
      </View>
    </Pressable>
  );
}

export function BottomNav() {
  return (<NavButton icon={<Rows />} />)
}

Hi @duongdev,

I've installed v1.1.0 and noticed that lib/typescript/index.d.ts does not include the new icons.

The official release files can be found at in the npm registry.

When running the prepare script on my fork, lib/typescript/index.d.ts does include the new icons.

It's possible that I missed something in my PR relating to the building for release, however I'm sure you know more about it. If it needs to be reopened/changed, let me know and I'll do so.

Cheers