Phosphor + Expo: App crash on Android Emulator when trying to run after installing Phosphor icons

[SavioNicodemos]

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

[SkeBug]

Hi @SavioNicodemos , I'm facing the same problem, did you find any solution?

[Cavdy]

you can import it via the path

import ArrowUpRight from 'phosphor-react-native/src/icons/ArrowUpRight'

this works @SkeBug @SavioNicodemos

[kieis]

@SavioNicodemos, same here, I had to wipe the emulator. @Cavdy it worked for me.

"expo": "~48.0.18" "phosphor-react-native": "^1.1.2"

[andredecarli]

Issue still happening as of today

"dependencies": {
    "@expo-google-fonts/roboto": "^0.2.3",
    "expo": "~50.0.14",
    "expo-font": "~11.10.3",
    "expo-status-bar": "~1.11.1",
    "phosphor-react-native": "^2.0.0",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "styled-components": "^6.1.8",
    "react-native-svg": "14.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "babel-plugin-module-resolver": "^5.0.0",
    "typescript": "^5.1.3"
  },

[mrkpatchaa]

@andredecarli can you please try with the latest version (2.2.0) and let us know if this still happens? Thanks.

As suggested above, if the issue is with importing too many files, you can import icons like that.

you can import it via the path

import ArrowUpRight from 'phosphor-react-native/src/icons/ArrowUpRight'

this works @SkeBug @SavioNicodemos

Three shaking is not working right at the moment, I will look at it in the future.