How to use icon in button?

💬 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**

[domlimm]

@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!

[domlimm]

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…