Author: appdeku

How to add custom fonts in React Native?

By: appdekuOn:

First of all, download the font families of your choice from the internet. Unzip it if a zipped file is downloaded. Now, copy all the TTF files you want to use and paste them inside the src > assets > fonts folder of your project.

Create react-native-config.js file in the root directory if not already present. Paste the following code inside react-native-config.js file. 

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./src/assets/fonts'],
};

Modify the assets path as per your font directory.

Now, run the following command in the terminal to link the fonts to the project.

npx react-native-asset

Now you can use the font family inside the app.

Example: 

  const styles = StyleSheet.create({
    container: {
        fontSize: 12,
        fontFamily: 'DancingScript-Bold',
        color: '#000000',    
  });

How to change the app icon in React Native android using Android Studio?

By: appdekuOn:

In order to change the app icon in Android Studio, follow the steps below:

Open the android folder of the project in Android Studio. Wait until Gradle is imported and the build is completed.

Now, right-click the app folder, click New, then select Image Assest.

You will see the interface just like the following image. Here, you can change the foreground and background layers of the app icon. Let’s start with the foreground layer. Initially foreground tab will be opened so, stay at this tab. You can choose to put an image or a clip art, or text as your app foreground layer. To do so, select the desired asset type.

If you want to put an image, select the image and put the image path in the input field. You can choose the image path by clicking on the folder icon button next to the image path. Once you navigate to the app icon image path, click on the open button.

Similarly, if you want to use clip art, choose clip art in the asset type.

Click the clip art box and choose the clip art of your choice, and click on ok button.

Change the color of your choice in the color field. You can put your own color code or choose a color.

Moreover, if you are using only text as an app icon, choose text in the asset type. Type your app name in the text. Change the text color of your choice.

You can scale your asset type if you want.

You can change the background layer too. Select the background layer tab.

You can put an image or just a color as your background. If you want to use color, then select color in the asset type. Click the color field to choose the color.

Choose a color and click on the next button.

Likewise, if you want to use image , select image in the asset type. Choose a path similar to the foreground layer. You can scale the asset type here, too.

Once you are satisfied with the app icon, click on next and then, click on the finish button.

After finish process, run app again.