Building an iOS-like Brightness Slider in React Native with Expo and NativeWind

Building an iOS-like Brightness Slider in React Native with Expo and NativeWind cover

If you've ever wanted to recreate the sleek, smooth brightness slider found in iOS for your React Native app, you're in the right place. In this guide, we'll walk through building a custom brightness slider component using React Native and Expo, styled with NativeWind for a clean, modern look. By the end, you'll have a fully functional slider that mimics the iOS brightness control.

Prerequisites

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

  1. Node.js installed on your machine.
  2. Expo CLI installed (npm install -g expo-cli).
  3. A basic understanding of React Native and Expo.
  4. NativeWind configured in your Expo project. If you haven’t set it up yet, follow the NativeWind installation guide.

Step 1: Set Up Your Expo Project

If you don’t already have a project, create a new one:

npx create-expo-app@latest BrightnessSliderApp
cd BrightnessSliderApp

Choose the "blank" template when prompted. Once the project is set up, install NativeWind if you haven’t already:

npm install nativewind
npx expo install tailwindcss

Step 2: Create the Brightness Slider Component

We’ll use the @react-native-community/slider package for the slider functionality. Install it first:

npx expo install @react-native-community/slider

Now, create a new file called BrightnessSlider.js in your components folder (or wherever you prefer).

Step 3: Build the Slider UI

Here’s the code for the brightness slider component:

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Slider from '@react-native-community/slider';
import { styled } from 'nativewind';

const StyledView = styled(View);
const StyledText = styled(Text);
const StyledSlider = styled(Slider);

const BrightnessSlider = () => {
  const [brightness, setBrightness] = useState(50); // Default brightness value

  return (
    <StyledView className="flex items-center justify-center p-4">
      <StyledText className="text-lg font-semibold mb-4">
        Brightness: {brightness}%
      </StyledText>
      <StyledSlider
        style={{ width: '80%', height: 40 }}
        minimumValue={0}
        maximumValue={100}
        minimumTrackTintColor="#007AFF" // iOS-like blue
        maximumTrackTintColor="#D1D1D6" // Light gray
        thumbTintColor="#007AFF" // iOS-like blue
        value={brightness}
        onValueChange={(value) => setBrightness(Math.round(value))}
      />
    </StyledView>
  );
};

export default BrightnessSlider;

Step 4: Style with NativeWind

NativeWind makes styling a breeze. In the code above, we’ve used styled to apply Tailwind-like classes to our components. Here’s a breakdown of the styles:

  • flex items-center justify-center p-4: Centers the slider and adds padding.
  • text-lg font-semibold mb-4: Styles the brightness percentage text.
  • The Slider component is styled using inline styles for the track and thumb colors to match the iOS aesthetic.

Step 5: Use the Component in Your App

Now that the slider is ready, import and use it in your main app file (e.g., App.js):

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

const StyledSafeAreaView = styled(SafeAreaView);

export default function App() {
  return (
    <StyledSafeAreaView className="flex-1 bg-white justify-center">
      <BrightnessSlider />
    </StyledSafeAreaView>
  );
}

Step 6: Run the App

Start your Expo development server:

npx expo start

Scan the QR code with the Expo Go app or run it on an emulator/simulator. You should see a clean, iOS-like brightness slider that updates the percentage as you adjust it.

Customizations

Want to make it even more iOS-like? Here are a few ideas:

  1. Add Icons: Place a sun icon on either side of the slider to mimic the iOS design.
  2. Smooth Animations: Use Animated from React Native to add smooth transitions when the slider value changes.
  3. Haptic Feedback: Add haptic feedback using expo-haptics to make the slider feel more tactile.

Conclusion

And there you have it! A simple yet elegant iOS-like brightness slider built with React Native, Expo, and NativeWind. This component is highly customizable, so feel free to tweak it to fit your app’s design. Whether you’re building a settings screen or a custom media player, this slider will add a touch of iOS polish to your app. Happy coding! 💪🏻

Recent Guides

Hestia Kit Premium

You have to be signed in to favorite this

Share

Hestia Kit Premium

This is Hestia Kit premium component