Giter Site home page Giter Site logo

React native support? about react HOT 6 CLOSED

rishabh876 avatar rishabh876 commented on March 29, 2024 5
React native support?

from react.

Comments (6)

duongdev avatar duongdev commented on March 29, 2024 9

I've just released https://github.com/duongdev/phosphor-react-native. Same API to this lib. Try it guys.

Contribution is welcomed.

from react.

italomlp avatar italomlp commented on March 29, 2024 4

While Phosphor is not officially supported in react-native, you can just add the Phosphor.ttf file as an asset to react-native, like you do with any other custom font, and use the custom font option of vector-icons. Specifically, you should use the IcoMoon custom font option. The Phosphor.json file is the IcoMoon config, and you can use it like this:

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import phosphorConfig from '_assets/icons/Phosphor.json';
const VectorIcon = createIconSetFromIcoMoon(
  phosphorConfig,
  'Phosphor',
  'Phosphor.ttf'
);

function PhosphorIcon({ name, size, color, ...props }) {
  return <VectorIcon size={size} name={name} color={color} {...props} />;
}

PhosphorIcon.propTypes = {
  name: PropTypes.string.isRequired,
  size: PropTypes.number,
  color: PropTypes.string,
};

PhosphorIcon.defaultProps = {
  size: 24,
  color: '#fff',
};

export default PhosphorIcon

The Phosphor.ttf and Phosphor.json files are present in the zip available in the download option of the Phosphor website homepage.

Edit: By using this way, the Duotone icons do not work. To use them, you should use react-native-svg as @rektdeckard said before. All the others variations are available as a dash-separated name (AKA kebab-case) + variant name (or nothing if you are using the regular one). E.g.: HouseLine = house-line, NumberSquareTwo (bold variant) = number-square-two-bold

from react.

italomlp avatar italomlp commented on March 29, 2024 1

@rektdeckard of course, you should use the best option to provide all features from Phosphor, I totally agree! But for now, for those who want to use the basic, react-native-vector-icons with custom fonts is a great option. We are still talking about it here in the job. If we will use svg, maybe we could make a PR to contribute to Phosphor too. I'll come back if it's the case.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024

The icons are implemented as react svg elements, which aren't directly supported in React Native. A library like react-native-svg could get us there pretty easily, but it would call for its own repo. We'll look into supporting in the near future.

If you care to do any work toward it, I can stub out a repo in this org which you can contribute to.

from react.

rektdeckard avatar rektdeckard commented on March 29, 2024

@italomlp this is essentially what we do in phosphor-flutter, with the main drawbacks of not having duotone, no tree-shaking (font files and json are pretty big), and the inherent limitations of using fonts. If we were to provide our own react-native implementation, I'd want it to be SVG.

from react.

Choyeongdeok avatar Choyeongdeok commented on March 29, 2024

@italomlp I tried it, but got an error Unrecognized font family 'Phosphor'

I added phosphor.ttf in ios/Fonts, Phosper.json in assets/

and added

< key > UIAppFonts </ key >
< array >
< string >Phosphor.ttf</ string >
</ array >
in info.plist and did pod install

Did I miss anything?

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.