Search code examples
unicodereact-nativeiconsfont-familytouchablehighlight

How to use put an image of code xf138 in react native?


I have a TouchableHighlight, inside of it, I want to put an image exactly the same as xf138 in FontAwesome which looks like an arrow: http://fontawesome.io/icon/chevron-circle-right/

I don't know how to display it, I tried to use Text inside of the TouchableHighlight, but I get "Unexpected token" error in below code:

&#xf138

And I wonder which fontFamily I should use inside myStyle, it seems there is no FontAwesome in the fontFamily of react native.


Solution

  • You can include the react-native-fontawesome module in your project and then use it as such (from https://github.com/entria/react-native-fontawesome):

    import FontAwesome, { Icons } from 'react-native-fontawesome';
    
    ...
    render() {
      return (
        <View>
          <TouchableHighlight>
            <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
              <FontAwesome>{Icons.chevronLeft}</FontAwesome>
              Text
            </Text>
          </TouchableHighlight>
        </View>
      );
    },