icons for react-native android using android-iconify

Overview

react-native-android-iconify

icons for react native android using android-iconify

Installation and How to use

Step 1 - NPM Install

npm install --save react-native-android-iconify

Step 2 - Update Gradle Settings

// file: android/settings.gradle
...

include ':reacticonify', ':app'
project(':reacticonify').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-iconify/app')

Step 3 - Update Gradle Build

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':reacticonify')
}

Step 4 - Register React Package

...
import com.lwhiteley.reacticonify.ReactIconifyPackage; // import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new ReactIconifyPackage()) // register react iconify package here
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
        setContentView(mReactRootView);
    }
...

Step 5 - Require and use in Javascript

// file: index.android.js

var React = require('react-native');
var { IconTextView } = require('react-native-android-iconify');
var { AppRegistry,StyleSheet,Text,View } = React;

var AwesomeProject = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <IconTextView text='{fa-facebook}' style={styles.icon} />
            </View>
        );
    }
});

var styles = StyleSheet.create({
  icon: {
    width:40,
    height:40,
    fontSize:40,
    color:'#0066FF',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Credits

Notes

  • only IconTextView was implemented so far, will implement the other widgets shortly
  • all available icon modules of android-iconify were included
  • as seen above font size and color are controlled by css, all other features of android-iconify remain the same
  • Please report any issues or send patches to get fixes in
Issues
  • Feature: Add icon button widgets

    Feature: Add icon button widgets

    • [x] add react widgets
    • [ ] add events listeners
    opened by lwhiteley 0
  • undefined is not an object (evaluating PropStyles.string) line 7

    undefined is not an object (evaluating PropStyles.string) line 7

    var { requireNativeComponent, PropTypes } = require('react-native');
    
    var iface = {
        'IconTextView':{
            name: 'IconTextView',
            propTypes: {
                text: PropTypes.string, <--- i suspect this line
                scaleX: PropTypes.number,
                fontSize: PropTypes.number,
                color: PropTypes.string,
                scaleY: PropTypes.number,
                translateX: PropTypes.number,
                translateY: PropTypes.number,
                rotation: PropTypes.number,
            },
        }
    };
    
    opened by venil7 2
Quick and easy icons in React Native

WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons There's far bigger problems to so

Cory Smith 1.2k Dec 28, 2021
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.5k Jan 22, 2022
⭐Eva Icons for React Native

react-native-eva-icons ❤️ Clean and powerful Eva Icons implementation for React Native based on react-native-svg elements. Demo Installation npm i rea

Artur Yorsh 168 Dec 26, 2021
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 19 Nov 15, 2021
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 9 Jan 11, 2022
With React-Icomoon you can easily use the icons you have selected or created in icomoon.

React-IcoMoon ?? Zero Dependencies With React-Icomoon you can easily use the icons you have selected or created in icomoon. Demo Install npm install r

Aykut Kardaş 94 Jan 13, 2022
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 301 Jan 19, 2022
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Devio.org 1.1k Jan 16, 2022
A react native android module to control the android statusbar.

Status bar for React Native Android A react native android module to control the android statusbar. Setup There are five steps in the setup process in

Nishanth Shankar 145 Nov 24, 2021
React Native Android module to use Android's AlertDialog - same idea of AlertIOS

react-native-simpledialog-android React Native Android module to use Android's AlertDialog - same idea of AlertIOS Installation npm install react-nati

Lucas Ferreira 42 Mar 1, 2020
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 410 Dec 23, 2021
circle progress bar for react native android using circle-view

react-native-circle-view circle progress bar for react native android using circle-view Installation and How to use Step 1 - NPM Install npm install -

Igor Adrov 37 Dec 17, 2021
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

Talut TASGIRAN 26 May 23, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Jan 17, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 61 Nov 13, 2021
react-native-rebound-scrollview ★12 - React Native Android ReboundScrollView implementation.

React Native ReboundScrollView support android rebound ScrollView, compatible ios -- use react scrollview Usage ##Android In android/setting.gradle ..

null 14 Aug 29, 2021
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 24 Jan 21, 2022