Icons
Configuring icons
Many of the components require the react-native-vector-icons library to render correctly. If you're using 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, 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:
1. An icon name
You can pass the name of an icon from MaterialCommunityIcons
. This will use the react-native-vector-icons
library to display the icon.
Example:
<Button icon="camera">
Press me
</Button>
See the list of supported icons
2. An image source
You can pass an image source, such as an object of shape { uri: 'https://path.to' }
or a local image: require('../path/to/image.png')
to use as an icon. The image might be rendered with a different color than the one provided depending on the component. If don't want this behavior, see the next example to pass an Image
element.
Remote image:
<Button icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}>
Press me
</Button>
Local image:
<Button icon={require('../assets/chameleon.jpg')}>
Press me
</Button>
3. A render function
You can pass a function which returns a react element to be used an icon. The function receives an object with size
and color
properties as it's argument. element is used as is without any modification. However, it might get clipped if the provided element's size are bigger than what the component renders. It's upto you to make sure that the size of the element is correct.
Example:
<Button
icon={({ size, color }) => (
<Image
source={require('../assets/chameleon.jpg')}
style={{ width: size, height: size, tintColor: color }}
/>
)}
>
Press me
</Button>
4. Use custom icons
If you want to use other icons than MaterialCommunityIcons
you need to import your icons and pass it to settings
prop within PaperProvider
.
Example:
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
// ...
<PaperProvider
settings={{
icon: props => <AwesomeIcon {...props} />,
}}
theme={this.state.theme}
>
// ...
</PaperProvider>
RTL support
If you want your icon to behave properly in a RTL environment, you can pass an object to the icon
prop with shape: { source: { uri: 'https://path.to' }, direction : 'rtl' }
. source
can be any of the values that the icon
prop accepts in option 1 and option 2. For direction
you have few options:
auto
- uses the device language to determine if icon should be displayed from rtl. Uses theI18nManager
module to get this info.rtl
- flips the icon so that it is rtl, this is regardless of the device language.ltr
- displays from ltr, even if in an rtl environment.
Example for using an image source:
<Button icon={{ source: { uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }, direction: 'rtl' }}>
Press me
</Button>
Example for using an icon name:
<Button icon={{ source: "add-a-photo", direction: 'rtl' }}>
Press me
</Button>
You can also use a render function. Along with size
and color
, you have access to direction
which will either be 'rtl'
or 'ltr'
. You can then decide how to render your icon component accordingly.
Example of using a render function:
<Button
icon={({ size, color, direction }) => (
<Image
source={require('../assets/chameleon.jpg')}
style={[
{
transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
},
{
width: size,
height: size,
tintColor: color
}
]}
/>
)}
>
Press me
</Button>