using outlines for FontAwesome icons in React Native

Question

using outlines for FontAwesome icons in React Native

I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly.

import IconFA from 'react-native-vector-icons/FontAwesome';

        <IconFA
         name="plus"
         size={moderateScale(30)}
         color="black"
         style={styles.thumbnail}
         />

  thumbnail: {
    height: 68,
    width: 68,
    position: 'relative',
  },

I have also looked into using 'stacked' font awesome icons in react native, but I couldn't figure out how to implement it.

If anyone has any insights or solutions, please let me know.

Reference: https://jsfiddle.net/1d7fvLy5/1/

Snack Expo:

I am aiming to create something similar to this design:

If there are any free icon resources or alternatives like using a <Thumbnail>, feel free to share them with me as well.

javascript css reactjs typescript react-native

Answer 1

Answer №1

The example on JSFiddle you shared demonstrates how to create a circular shape using CSS border properties and the border-radius. We can achieve a similar effect in react-native, although it's worth noting that the borderRadius in react-native requires a fixed number and doesn't support percentages when using typescript (however, percentage strings do work at runtime).

You have the flexibility to customize this code to suit your needs, but the code provided will serve its purpose effectively. You can opt to use both IconFA and CircleBorder as distinct nested components or utilize the combined component IconInCircle.

const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
  <CircleBorder
    size={circleSize}
    borderWidth={borderWidth}
    borderColor={borderColor}
  >
    <IconFA {...props} />
  </CircleBorder>
);

const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
  <View
    style={{
      width: size,
      height: size,
      borderRadius: 0.5 * size,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderColor,
      borderWidth,
    }}>
    {children}
  </View>
);

The IconInCircle component accepts three specific props related to the border: circleSize, borderWidth, and borderColor. Other props are simply passed down to the child component IconFA.

In essence, we're placing the icon within a fixed-size View with a circular border and centered content.

You can implement it like so:

      <IconInCircle
        name="plus"
        size={30}
        color="black"
        style={styles.thumbnail}
        borderWidth={1}
        circleSize={50}
      />

Expo Link

Answer 2

The example on JSFiddle you shared demonstrates how to create a circular shape using CSS border properties and the border-radius. We can achieve a similar effect in react-native, although it's worth noting that the borderRadius in react-native requires a fixed number and doesn't support percentages when using typescript (however, percentage strings do work at runtime).

You have the flexibility to customize this code to suit your needs, but the code provided will serve its purpose effectively. You can opt to use both IconFA and CircleBorder as distinct nested components or utilize the combined component IconInCircle.

const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
  <CircleBorder
    size={circleSize}
    borderWidth={borderWidth}
    borderColor={borderColor}
  >
    <IconFA {...props} />
  </CircleBorder>
);

const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
  <View
    style={{
      width: size,
      height: size,
      borderRadius: 0.5 * size,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      borderColor,
      borderWidth,
    }}>
    {children}
  </View>
);

The IconInCircle component accepts three specific props related to the border: circleSize, borderWidth, and borderColor. Other props are simply passed down to the child component IconFA.

In essence, we're placing the icon within a fixed-size View with a circular border and centered content.

You can implement it like so:

      <IconInCircle
        name="plus"
        size={30}
        color="black"
        style={styles.thumbnail}
        borderWidth={1}
        circleSize={50}
      />

Expo Link

Answer 3

Answer №2

Give this a try, make sure to customize it to fit your requirements, and remember to ensure compatibility with various browsers when using flex.

const styles = StyleSheet.create({
  profileImage: {
    height: 100,
    width: 100,
    position: 'absolute',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '1px solid #333',
    borderRadius: '50%'
  },
});

Answer 4

Give this a try, make sure to customize it to fit your requirements, and remember to ensure compatibility with various browsers when using flex.

const styles = StyleSheet.create({
  profileImage: {
    height: 100,
    width: 100,
    position: 'absolute',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    border: '1px solid #333',
    borderRadius: '50%'
  },
});

Answer 5

Answer №3

import IconFA from 'react-native-vector-icons/FontAwesome';

<View style={{
  position:'relative',
  justifyContent:'center',
  alignItems:'center',
  width:40,
  height:40,
  backgroundColor:'black'
}}>
  <IconFA name='circle-thin' size={40} color='grey'/>
  <IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />  
</View>

If you are new to ReactNative, the code provided above should work well for your needs.

Try it out on Snack Expo!

Answer 6

import IconFA from 'react-native-vector-icons/FontAwesome';

<View style={{
  position:'relative',
  justifyContent:'center',
  alignItems:'center',
  width:40,
  height:40,
  backgroundColor:'black'
}}>
  <IconFA name='circle-thin' size={40} color='grey'/>
  <IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />  
</View>

If you are new to ReactNative, the code provided above should work well for your needs.

Try it out on Snack Expo!

using outlines for FontAwesome icons in React Native

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the compatibility between Node.js, React, and deployment on Linux, comparing the use of 'serve' versus

Tips for incorporating a hyperlink within a react component

Issue with Tailwind classes not applying correctly upon refreshing the page in production settings

Instructions on including a directory in the package.json file for publication on npm

Implementing JavaScript for showcasing weights

Issue: Module 'curl' is not located at Function.Module._resolveFilename (module.js:489:15)

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

Troubleshooting issue with refreshing selectpicker in Bootstrap-select and Vue.js

apply a visible border to the item that is clicked or selected by utilizing css and vue

A foolproof guide to effortlessly incorporate an image into your banner while ensuring its perfect alignment even with varying screen widths

Unable to finalize submission of TextField using Formik

The combination of MUI CardContent and flexBox seems to have issues when used in conjunction with typography and chips

NGRX reducer avoids generating errors due to incorrect assignments

Ensure the hour field is accurate using yup validators

Issue with populating dropdown menu inside jquery modal dialog box

Activate a change or response when the input value in Javascript is altered

jQuery plugin is not effectively targeting the directive

Managing Image Quality with Unsplash API

Get the large data file in sections

Revamp the HTML page by automatically refreshing labels upon every Get request