Category: React Native Answers

To use GIFs in rReact Native, we add a line to android/app/build.gradle.

For instance, in android/app/build.gradle, we add

dependencies {
  //  ...
  implementation 'com.facebook.fresco:animated-gif:2.5.0'
  //  ...
}

so we can add GIFs into our Android React Native app.

To use react-native-vector-icons in our React Native app, we add entries into react-native.config.js

First, we add

module.exports = {
  dependencies: {
    'react-native-vector-icons': {
      platforms: {
        ios: null,
      },
    },
  },
};

in react-native.config.js to configure react-native-vector-icons.

Then we run

react-native link react-native-vector-icons 
react-native run-android
react-native start

to link react-native-vector-icons in our project with

react-native link react-native-vector-icons 

Then we run our app on Android with

react-native run-android

To use rgba in React Native, we can set it as a style value.

For instance, we write

<View style={{ backgroundColor: "rgba(0,0,0,0.5)" }} />;

to set the backgroundColor style to a rgba value.

The 4th number is a the a value or the opacity.

So the View has 0.5 opacity.

To hide the navigation navbar with React Native, we set the screenOptions.headerShown option to false.

For instance, we write

<Stack.Navigator
  screenOptions={{
    headerShown: false,
  }}
>
  ...
</Stack.Navigator>;

to set the headerShown option of the screenOptions prop object to false on the Stack.Navigator to hide the navbar.

To fix the React Native navigation paramlist never used error, we add '@typescript-eslint/parser' into .eslintrc.

For instance, in .eslintrc, we write

{
  "parser": "@typescript-eslint/parser"
}

We also need to download ‘@typescript-eslint/parser’ in your dev dependencies

To do this, we run

npm i @typescript-eslint/parser --save-dev