feat: make vector-icons optional. fixes #303

Author: satya164

docs/pages/2.getting-started.md

@@ -17,7 +17,9 @@ yarn add react-native-vector-icons
 react-native link react-native-vector-icons
 ```
 
-If you use CRNA or Expo, you don't need this step, but you will need to make sure that your `.babelrc` includes `babel-preset-expo`:
+If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
+
+If you use CRNA or Expo, you don't need to install vector icons. But you will need to make sure that your `.babelrc` includes `babel-preset-expo`:
 
 ```json
 {

docs/pages/4.icons.md

@@ -6,6 +6,8 @@ title: Icons
 
 Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using CRNA or Expo, you don't need to do anything extra, but if it's vanilla React Native project, you need link the library as described in the getting started guide.
 
+If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop anymore. Some components may not look correct without vector icons and might need extra configuration.
+
 ## Using the `icon` prop
 
 Many components such as `Button` accept an `icon` prop which is used to display an icon. The `icon` prop supports the following type of values:

package.json

@@ -54,8 +54,7 @@
  },
  "peerDependencies": {
  "react": "*",
- "react-native": "*",
- "react-native-vector-icons": "*"
+ "react-native": "*"
  },
  "jest": {
  "preset": "react-native",

src/components/Icon.js

@@ -1,8 +1,20 @@
 /* @flow */
 
 import * as React from 'react';
-import { Image, View, StyleSheet } from 'react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Image, Text, View, StyleSheet } from 'react-native';
+
+let MaterialIcons;
+
+try {
+ // Optionally require vector-icons
+ MaterialIcons = require('react-native-vector-icons/MaterialIcons').default;
+} catch (e) {
+ MaterialIcons = ({ name, color, size, style, ...rest }) => (
+ <Text {...rest} style={[{ color, fontSize: size }, style]}>
+ □
+ </Text>
+ );
+}
 
 export type IconSource = string | { uri: string } | number | React.Node;
 
@@ -13,9 +25,17 @@ export type Props = {
  style?: any,
 };
 
-const Icon = ({ name, ...props }: Props) => {
+const Icon = ({ name, color, size, style, ...rest }: Props) => {
  if (typeof name === 'string') {
- return <MaterialIcons {...props} name={name} />;
+ return (
+ <MaterialIcons
+ {...rest}
+ name={name}
+ color={color}
+ size={size}
+ style={style}
+ />
+ );
  } else if (
  (typeof name === 'object' &&
  name !== null &&
@@ -25,29 +45,29 @@ const Icon = ({ name, ...props }: Props) => {
  ) {
  return (
  <Image
- {...props}
+ {...rest}
  source={name}
  style={[
  {
- width: props.size,
- height: props.size,
- tintColor: props.color,
+ width: size,
+ height: size,
+ tintColor: color,
  },
- props.style,
+ style,
  ]}
  />
  );
  }
  return (
  <View
- {...props}
+ {...rest}
  style={[
  {
- width: props.size,
- height: props.size,
+ width: size,
+ height: size,
  },
  styles.container,
- props.style,
+ style,
  ]}
  >
  {(name: any)}