Category: JavaScript

Categories
React Native Answers

How to use react-native-vector-icons in our React Native app?

Labrador retriever puppy walking on green grass

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
Categories
React Native Answers

How to use rgba in React Native?

Labrador retriever puppy walking on green grass

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.

Categories
React Answers

How to add routes with React?

Labrador retriever puppy walking on green grass

To add routes with React, we use React Router.

To install it, we run

npm install react-router-dom

Then we use it by writing

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

to add the Switch component with the Route components inside.

The Route components have the route components nested inside them.

The path is set to the path that users navigate to to render the component inside.

Categories
React Answers

How to use saved image with React?

Labrador retriever puppy walking on green grass

To use saved image with React, we can call require with the image path to and set the returned path as the value of the src prop of the img element.

For instance, we write

<img alt="timer" src={require('./images/timer.png')} />

to add an img element with the src prop set to the path returned by calling require with the local image path.

Categories
React Answers

How to add an SVG with React?

Labrador retriever puppy walking on green grass

To add an SVG with React, we can import it as a component and add it directly into our components.

For instance, we write

import React from "react";
import { ReactComponent as BrandIcon } from "./assets/brand-icon.svg";

export default function () {
  return (
    <div>
      <BrandIcon />
    </div>
  );
}

to import the BrandIcon SVG and put it into our component to render it.