Skip to content

Repository files navigation

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 =newFile(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

...
importcom.lwhiteley.reacticonify.ReactIconifyPackage; // importpublicclassMainActivityextendsActivityimplementsDefaultHardwareBackBtnHandler {
privateReactInstanceManagermReactInstanceManager;
privateReactRootViewmReactRootView;
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = newReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(newMainReactPackage())
.addPackage(newReactIconifyPackage()) // 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.jsvarReact=require('react-native');var{ IconTextView }=require('react-native-android-iconify');var{ AppRegistry,StyleSheet,Text,View }=React;varAwesomeProject=React.createClass({render: function(){return(<Viewstyle={styles.container}><IconTextViewtext='{fa-facebook}'style={styles.icon}/></View>);}});varstyles=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

About

icons for react-native android using android-iconify

Resources

Stars

31 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages