Creating Like and Dislike Component in React Native with NativeWind

React Native is a powerful framework for building cross-platform mobile applications. When combined with NativeWind, a utility-first CSS framework for React Native, you can create visually appealing and responsive UI components with ease. In this guide, we'll walk through the process of creating Like and Dislike components using React Native and NativeWind.

Prerequisites

Before we begin, ensure you have the following set up:

1. Node.js installed on your machine.
2. React Native CLI installed globally.
3. A new or existing React Native project.
4. NativeWind installed in your project.

If you haven't set up NativeWind yet, you can do so by following the official NativeWind installation guide.

Setting Up the Project

First, let's create a new React Native project if you don't already have one:

npx create-expo-app@latest DemoApp
cd DemoApp

Next, install NativeWind:

npm install nativewind
npm install --save-dev tailwindcss

Configure your tailwind.config.js and babel.config.js as per the NativeWind documentation.

Creating the Like and Dislike Components

Now that our project is set up, let's create the Like and Dislike components.

Step 1: Create the Components

Create a new file LikeDislike.js in your components directory:

// @/components/common/LikeDislike.js

import React, { useState } from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { styled } from 'nativewind';

const StyledTouchableOpacity = styled(TouchableOpacity);
const StyledText = styled(Text);
const StyledView = styled(View);

const LikeDislike = () => {
  const [likes, setLikes] = useState(0);
  const [dislikes, setDislikes] = useState(0);

  const handleLike = () => {
    setLikes(likes + 1);
  };

  const handleDislike = () => {
    setDislikes(dislikes + 1);
  };

  return (
    <StyledView className="flex flex-row items-center justify-center space-x-4">
      <StyledTouchableOpacity
        className="bg-green-500 px-4 py-2 rounded-lg"
        onPress={handleLike}
      >
        <StyledText className="text-white">Like ({likes})</StyledText>
      </StyledTouchableOpacity>

      <StyledTouchableOpacity
        className="bg-red-500 px-4 py-2 rounded-lg"
        onPress={handleDislike}
      >
        <StyledText className="text-white">Dislike ({dislikes})</StyledText>
      </StyledTouchableOpacity>
    </StyledView>
  );
};

export default LikeDislike;

Step 2: Use the Components in Your App

Now, let's use the LikeDislike component in our main App.js file:

// App.js

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import LikeDislike from './components/LikeDislike';
import { styled } from 'nativewind';

const StyledSafeAreaView = styled(SafeAreaView);

const App = () => {
  return (
    <StyledSafeAreaView className="flex-1 justify-center items-center bg-gray-100">
      <LikeDislike />
    </StyledSafeAreaView>
  );
};

export default App;

Step 3: Run Your Application

Finally, run your application to see the Like and Dislike components in action:

npx react-native run-android
# or
npx react-native run-ios

Explanation

• State Management: We use the useState hook to manage the number of likes and dislikes.
• Styled Components: NativeWind's styled function allows us to apply Tailwind CSS classes directly to React Native components.
• TouchableOpacity: We use TouchableOpacity to make the Like and Dislike buttons interactive.
• Flexbox Layout: The flex, flex-row, items-center, and justify-center classes help us center the buttons horizontally and vertically.

Customization

You can easily customize the appearance of the Like and Dislike buttons by modifying the Tailwind CSS classes. For example, you can change the background color, padding, or rounded corners:

<StyledTouchableOpacity
  className="bg-blue-500 px-6 py-3 rounded-full"
  onPress={handleLike}
>
  <StyledText className="text-white font-bold">Like ({likes})</StyledText>
</StyledTouchableOpacity>

Conclusion

In this guide, we've demonstrated how to create Like and Dislike components in React Native using NativeWind. This approach leverages the power of Tailwind CSS to create responsive and visually appealing UI components with minimal effort. You can further enhance these components by adding animations, integrating with a backend, or implementing more complex logic.

Happy coding! 🚀