Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sk-azraf-sami/react-native-vs-me

It covers the hurdles faced when I first started with React Native, focusing on cross-platform tasks like setting up emulators, managing fonts, and integrating vector icons.
https://github.com/sk-azraf-sami/react-native-vs-me

cross-platform emulator mern-stack react-native react-native-app

Last synced: 1 day ago
JSON representation

It covers the hurdles faced when I first started with React Native, focusing on cross-platform tasks like setting up emulators, managing fonts, and integrating vector icons.

Awesome Lists containing this project

README 

        
# React-Native-VS-Me



### Use own device as 'Emulator' via connected Wifi




1. Create a `local.properties` file in the `android` folder. Then type this line and save it!

   
 This is the directory of `SDK` 

   


   

   ```

   sdk.dir = /home/sami/Android/Sdk

   ```

   


2. Creating a `debug.apk` file 

   


   

   ```

   cd android

   ```

   

   ```

   ./gradlew assembleDebug 

   ```

   Now wait for building the apk. If the apk build successfully, you will get `build success` message

   


3. Now copy the apk file to the android device via usb cable from this location of project folder. 

   ```

   /home/sami/Documents/testNative/client/android/app/build/outputs/apk/debug

   ```

   Here, `client` is my project folder. 


4. Make sure that your computer and android device are connected to the same wifi network

   
 Then find `IP` address of your cmputer.

   
 As a `Ubuntu` user, simply type this in the terminal

   ```

   hostname -I

   ```

5. Now install this app the android device.

   
 Shake the device

   
 Go to the settings and type the `IP address`



6. Now run this command to the project directory

   ```

   npx react-native start

   ```


 

Video Tutorial: https://youtu.be/ulLllM9WQco?si=TYQR6YgfjqywEgYD



### Using custom font 

1. Download font from google font

2. Then extract zip file and create a `/assets/Font` folder.

   
 Copy the all font to this folder.

   
 `link` command is not support to the updated version of react-native because now it supports auto-linking

   
 Now create a file in the project directory `react-native.config.js`

   
 Now copy these line in this file

   

```js

   module.exports = {

    project: {

        ios: {},

        android: {}

    },

    assets: ['./assets/Font'],

};

```

Be careful about the font path (assets: ['./assets/Font'])




3. Now run this command to the project directory. 

```

npx react-native-asset

```

You will get the message of successful link. 




4. But if you want to see the result, you need to build the app again that means to follow all steps of `Use own device as 'Emulator' via connected Wifi`



### Use Native-Stack component



Error: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app



Solution: (https://stackoverflow.com/questions/69043806/requirenativecomponent-rnsscreenstackheaderconfig-was-not-found-in-the-uimana)



Solution have in documentation of [reactnavigation doc](https://reactnavigation.org/docs/getting-started)



After install @react-navigation/native you have to install two dependency:

```

npm install react-native-screens react-native-safe-area-context

```

it's mention library.



NB: react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in

```

android/app/src/main/java//MainActivity.java.

```

Add the following code to the body of MainActivity class:

```java

@Override

protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(null);

}

```

and make sure to add an import statement at the top of this file:

```java

import android.os.Bundle;

```



### React native vector icons won't show in android device

Link : 

- https://www.npmjs.com/package/react-native-vector-icons

- https://oblador.github.io/react-native-vector-icons/

- [Solution](https://stackoverflow.com/questions/38878852/react-native-vector-icons-wont-show-in-android-device)

  

Open android/app/build.gradle and add the following:



```gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

```

You can follow the instructions to properly install the module on Android: react-native-vector-icons#install-android