How to use react native element in react js using example?

React Native Elements, renowned as a favored library for React Native, furnishes a rich assortment of customizable and pre-designed UI components, expertly tailored for mobile application development. However, here’s the intriguing scenario: What if you desire to harness the allure of these exquisite components for a web application meticulously crafted with React.js? Delve into this article, where we shall guide you systematically, accompanied by practical examples, on the seamless integration of React Native Elements into your React.js application.

Prerequisites

Before we begin, make sure you have the following set up:

1. A basic understanding of React.js.
2. A React.js project already created.
3. Node.js and npm installed on your system.

Step 1: Create a React.js Application

If you don’t already have a React.js project, create one using the following command:

npx create-react-app react-native-elements-example

Step 2: Install React Native Elements

In your React.js project directory, install React Native Elements using npm or yarn:

npm install react-native-elements
# or
yarn add react-native-elements

Step 3: Import and Use React Native Elements

Now, let’s start using React Native Elements in your React.js application.

1. Import the components you want to use from React Native Elements. For example, let’s import the Button component:

import { Button } from 'react-native-elements';

2. Use the imported component in your JSX. Here’s an example of a React.js component that uses a React Native Elements Button:

import React from 'react';
import { Button } from 'react-native-elements';

function App() {
  return (
    <div className="App">
      <Button
        title="Hello, React Native Elements!"
        onPress={() => alert('Button pressed')}
      />
    </div>
  );
}

export default App;

Step 4: Styling and Customization

React Native Elements components are highly customizable. You can apply styles and customize the appearance of these components according to your project’s design. Here’s an example of how you can customize the Button component:

import React from 'react';
import { Button } from 'react-native-elements';

function App() {
  const buttonStyle = {
    backgroundColor: 'blue',
    width: 200,
    margin: 10,
  };

  return (
    <div className="App">
      <Button
        title="Custom Button"
        buttonStyle={buttonStyle}
        titleStyle={{ color: 'white' }}
        onPress={() => alert('Button pressed')}
      />
    </div>
  );
}

export default App;

Step 5: Running Your React.js Application

You can now start your React.js application using the following command:

npm start
# or
yarn start

This will launch your application on a development server, and you can view it in your web browser.

Conclusion

Incorporating React Native Elements into your React.js application empowers you to harness the potential of this widely embraced library’s UI components for web development. With the aid of this instructional guide and the provided examples, you can effortlessly integrate exquisitely crafted elements into your React.js projects, thereby amplifying the user experience and streamlining development, thereby cutting down on time invested. Delve into the diverse assortment of components at your disposal within React Native Elements, paving the way for the creation of striking and highly responsive web applications.