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:

https://i.sstatic.net/2elh1.png

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

Having a hard time finding the perfect styling solution for Material UI

Synchronizing two navigation menus on a single-page application website

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

How can I make a dropdown menu appear when I select a checkbox?

React is unable to properly utilize Mui icons in a basic Card example

Establish a table containing rows derived from an object

I am encountering a 404 error when trying to send a POST request from a React application to an

Guide on retrieving a value from a function that invokes $.getJSON

MERN stack project encountering PUT 401 Unauthorized error despite passing Bearer token

Next.js configuration: Redirecting / to the basePath

Tips for handling an incorrect date entry when a field loses focus in AngularJS

Tips for preventing repetition of code in components with varying designs:

The UI is not reflecting the updated value from the Spotify API in the component

Experiencing issues while attempting basic private key encryption with the Node crypto library

Exploring the realm of unit testing in the NestJS CQRS architecture journey

Tips for accessing all translation keys in next-i18next

Setting the parent's height to match one of its children

Navigating with Next.js Router: Dynamic URLs and the power of the back button

Utilizing AJAX to send an array of data in JSON format

Is there a way to access the Context in the _app.js file in Next.js with React?