Question 33073 in React native Question posted in
The official React Native documentation can be found here.

Giving an error while I'm using import { Ionicons } from '@expo/vector-icons'; – React native

the code is not showing an error:

import { View, SafeAreaView, Image, TextInput, Button, Text, StyleSheet } from "react-native";
import { IonIcon } from '@ionic/react';
import { addOutline } from 'ionicons/icons';

export default function signIn(){
  const UI = (
    <SafeAreaView style={styels.createNewProfile}>
      <View>
        <IonIcon slot="addOutline" icon={addOutline}></IonIcon>
      </View>
    </SafeAreaView>
  );
  return UI;
};

const styels = StyleSheet.create({
  createNewProfile: {
    flex: 1
  },
  AppProfilePicture: {
    width: 100,
    height: 100
  }
});

but after I run the code for android app on windows with the command of npx react-native run-android

the error message is:

Error: [email protected]:Invalid call at line 3229: import(
/* @vite-ignore */
/* webpackInclude: /.entry.js$/ */
/* webpackExclude: /.system.entry.js$/ */
/* webpackMode: "lazy" */
"./" + bundleId + ".entry.js" + (require("@stencil/core/internal/app-data").BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''))
    at transformJS (D:react-native-practiceapp1node_modulesmetro-transform-workersrcindex.js:237:15)
    at transformJSWithBabel (D:react-native-practiceapp1node_modulesmetro-transform-workersrcindex.js:372:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.transform (D:react-native-practiceapp1node_modulesmetro-transform-workersrcindex.js:518:12)

I just tried import Icon from 'react-native-ionicons' this library… it’s not showing any error but it’s not output any icon:

app.tsx:

import React from "react";
import { SafeAreaView, View, Text, TextInput } from "react-native";
import Icon from 'react-native-ionicons'

const IconBar = () => (
  <View>
    <Icon name="add-outline" size={10}/>
  </View>
)

export default IconBar;
Tags:

2

Answers


  1. 0

    Check your package.json, for me with "react-native-vector-icons": "^9.2.0", :

    I need to add the import at the top:

    import Ionicons from "react-native-vector-icons/Ionicons";

    Load fonts with:

    Ionicons.loadFont();

    In first line after all imports.

    Good luck for your project!

    Login or Signup to reply.
  2. 0

    you can use this way it’s working

    import React from 'react';
import Ionicons from '@expo/vector-icons/Ionicons';

export default class IconExample extends React.Component {
  render() {
    return <Ionicons name='rocket' size={32} color='green' />;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search