React-native-ui-kitten: How to use icon in button?

[samapara]

💬 Question

UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 1.3.2 |
| @ui-kitten/components | 4.3.2 |

File 1: MyIcons.js

import React from 'react';
import { Icon } from '@ui-kitten/components';

export default FacebookIcon = (style) => (
  <Icon name='facebook' {...style} />
);

File 2: Login Screen

import React, {Component} from 'react';
import {AsyncStorage, ScrollView, View, StyleSheet} from 'react-native';
import {LOGIN} from "../api/endpoints";
import {Text, Button, Input, Layout, Icon} from "@ui-kitten/components";
import axiosInstance from "../api/axiosInstance";
import FacebookIcon from '../MyIcons'

export default class LoginScreen extends Component {

  render() {
        const {username, password} = this.state;
        return  (
            <Layout style={styles.container}>


                <Button
                style={styles.signUpButton}
                textStyle={styles.signUpText}
                icon={FacebookIcon} //added icon to button
                size='large'
                >Hello</Button>
                        </Layout>

        )
    }
}

This is not working. Right now I'm testing it on Android device.

The error get is:

**Error while updating property 'fill' of a view managed by: RNSVGRect

null

java.lang.Double cannot be cast to java.lang.String**

[artyorsh]

What react-native-svg version are you running?
Did you add IconRegistry?

[adamandworking]

I encounter the same problem too.
here is my code:

import React from 'react';
import { ApplicationProvider, IconRegistry, Layout, Text, Button, Icon } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { mapping, light as lightTheme } from '@eva-design/eva';

const FacebookIcon = (style) => (
  <Icon name='facebook' {...style} />
);

const LoginButton = () => (
  <Button icon={FacebookIcon}>Login with Facebook</Button>
);

const HomeScreen = () => (
  <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
    <Text catetory='h1'>HOME</Text>
    <LoginButton/>
  </Layout>
);

const App = () => (
  <React.Fragment>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider mapping={mapping} theme={lightTheme}>
      <HomeScreen />
    </ApplicationProvider>
  </React.Fragment>
);

export default App;

[artyorsh]

Can you please provide the info I requested in the previous comment?
It seems to work perfectly in a bare UI Kitten project initialized with quick start script

[samapara]

What react-native-svg version are you running?
Did you add IconRegistry?

I'm using "react-native-svg": "^11.0.1",
and yes I have already added the IconRegistry

[artyorsh]

@samapara could you please try downgrade SVG to 9.13.3?

[samapara]

Okay. I'll try that

[artyorsh]

@samapara @adamandworking I've got this runnable with RNSVG 11.0.1 (which is the latest version) on both Android and iOS without any problems and workarounds. Could you please provide more information about your app? package.json and Podfile would be appreciated

[VladimirHumeniuk]

I got the same problem

("react-native-svg": "^11.0.1")

[domsterthebot]

Hi, I just started using UI Kitten last night and faced the exact same issue as stated with the main opening post and comments above. Mine happens in the Input component. I followed exactly as per the documentation. May I ask if there's a fix? Thanks!

[artyorsh]

@domsterthebot how did you start? Using template or with manual installation? You guys report this but don't give any additional information about what packages do you use and what versions they are. I can't help you without knowing this since for me it is not reproducible with latest ui kitten packages 🤷‍♂

Please post a runnable demo somewhere so I can finally close this

[domsterthebot]

hey @artyorsh so sorry! i replied on my phone at work. yup i ran expo init [app_name], and followed the documentation by running npm i @ui-kitten/components @eva-design/eva react-native-svg --save.

i've also done the necessary amendments to App.js file to import IconRegistry, etc. all based on the docs.

What i wanted to achieve:
https://akveo.github.io/react-native-ui-kitten/docs/assets/playground-build/#/InputWithIcon

Exact codes i followed from the docs:

my package.json file (how do i format this properly? it's my first comment on the issue section on github. EDIT: I did it.):

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@eva-design/eva": "^1.4.0",
    "@react-native-community/masked-view": "0.1.5",
    "@react-navigation/drawer": "^5.0.7",
    "@react-navigation/native": "^5.0.7",
    "@react-navigation/stack": "^5.0.8",
    "@ui-kitten/components": "^4.4.1",
    "@ui-kitten/eva-icons": "^4.4.1",
    "expo": "^36.0.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-safe-area-context": "0.6.0",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-svg": "^11.0.1",
    "react-native-web": "^0.11.7",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^8.0.0",
    "@babel/core": "^7.0.0"
  },
  "private": true
}

Appreciate the help, thank you so much! P.S I'm relatively new to RN..

[artyorsh]

@domsterthebot got you, thanks for the detailed reply.

It seems that you should use react-native-svg v9 instead of 11 if you use Expo since it has no support for v11 yet. You should even have a compiler warning saying about this when running expo start.
Try running expo install react-native-svg with following restart of your app. If it still occur afterwards, try removing package.lock / yarn.lock to say package manager use exact that version and installing dependencies again.

Looks like this is a documentation issue from our side. It assumes you start with a bare react-native and not Expo.

[artyorsh]

For anyone else, please ensure you use react-native-svg v9 if you use Expo.

[domsterthebot]

Thanks for the prompt reply! Yup i saw that warning before, i tried to change it all and but it didn't work.
Just did what you suggested and i got the same error as i've gotten previously.
Googled but to no avail..

Cleared cache too with npm start --reset-cache after installing react-native-svg with expo

Unable to resolve "./elements/ForeignObject" from "node_modulesreact-native-svg\srcReactNativeSVG.ts"

Using "react-native-svg": "9.13.3"

[artyorsh]

@domsterthebot

Cleared cache too with npm start --reset-cache

This is not the right command to clear cache when you use Expo, you should use expo start -c. See docs

Use the command below to clear everything and make a fresh start.

watchman watch-del-all && rm -rf $TMPDIR/react-* ./node_modules ./package.lock && npm i && expo start -c

[domsterthebot]

@artyorsh huge thanks! works now. guess it's just the version causing the issue. i didn't use watchman. i just deleted node_modules folder and package lock then npm i and expo start -c.
Thanks for the support!

[GarrettLi77]

版本

谢谢