Created
June 4, 2018 10:36
-
-
Save jneuendorf/858c48c4646f1f8a90b28e1d47ba72bc to your computer and use it in GitHub Desktop.
Load vector icons as sourceMap in React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Define all your icons once, | |
// load them once, | |
// and use everywhere | |
import Ionicons from 'react-native-vector-icons/Ionicons'; | |
import FontAwesome from 'react-native-vector-icons/FontAwesome'; | |
// define your suffixes by yourself.. | |
// here we use active, big, small, very-big.. | |
const replaceSuffixPattern = /--(active|big|small|very-big)/g; | |
const icons = { | |
"ios-person": [30, "#bbb"], | |
"ios-person--big": [50, "#bbb"], | |
"ios-person--active": [30, "#fff"], | |
"ios-person--active--big": [50, "#fff"], | |
"ios-person--active--very-big": [100, "#fff"], | |
"ios-people": [30, "#bbb"], | |
"ios-people--active": [30, "#fff"], | |
"ios-keypad": [30, "#bbb"], | |
"ios-keypad--active": [30, "#fff"], | |
"ios-chatbubbles": [30, "#bbb"], | |
"ios-chatbubbles--active": [30, "#fff"], | |
// Use other Icon provider, see the logic at L39 | |
"facebook": [30, "#bbb", FontAwesome], | |
"facebook--active": [30, "#fff", FontAwesome], | |
} | |
const defaultIconProvider = Ionicons; | |
let iconsMap = {}; | |
let iconsLoaded = new Promise((resolve, reject) => { | |
new Promise.all( | |
Object.keys(icons).map(iconName => { | |
const Provider = icons[iconName][2] || defaultIconProvider; // Ionicons | |
return Provider.getImageSource( | |
iconName.replace(replaceSuffixPattern, ''), | |
icons[iconName][0], | |
icons[iconName][1] | |
) | |
}) | |
).then(sources => { | |
Object.keys(icons) | |
.forEach((iconName, idx) => iconsMap[iconName] = sources[idx]) | |
// Call resolve (and we are done) | |
resolve(true); | |
}) | |
}); | |
export { | |
iconsMap, | |
iconsLoaded | |
}; | |
// ---------------------------------------------------- | |
// Usage example | |
// ---------------------------------------------------- | |
import { iconsMap, iconsLoaded } from 'myproject/app-icons'; | |
iconsLoaded.then(() => { | |
startApp(); | |
}); | |
function startApp() { | |
// we can be sure, that iconsMap has the icons now | |
// iconsMap should have all the references to sources available now | |
// <Image source={iconsMap['ios-person--active--big']} /> | |
// Or use them with react-native-navigation | |
Navigation.startTabBasedApp({ | |
tabs: [ | |
{ | |
label: 'One', | |
screen: 'screenNameSpace.DealsScreen', // this is a registered name for a screen | |
icon: iconsMap['ios-person--active'], | |
title: 'Screen One' | |
}, | |
{ | |
label: 'Two', | |
icon: iconsMap['ios-people'] | |
screen: 'screenNameSpace.EventScreen', | |
title: 'Screen Two' | |
} | |
], | |
drawer: { | |
type: 'MMDrawer', | |
animationType: 'slide', | |
left: { | |
screen: 'screenNameSpace.SideMenu' | |
} | |
} | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment