🎉 How to Create a React Native Application with Emojis 😍🚀

Ck Nitin
3w
2.2k
0
0
25
Blog

Emojis make your mobile app fun, expressive, and user-friendly. In this blog, we’ll walk step-by-step through creating a React Native app that uses emojis — from setup to display — and even adds user interactions with emoji buttons. Let’s begin! 😎

🧰 Prerequisites

Before we start, make sure you have:

Node.js (LTS version recommended)
Expo CLI or React Native CLI
A text editor (VS Code recommended)
A physical device or emulator to test the app

If you don’t have Expo yet, install it globally:

npm install -g expo-cli

🪄 Step 1: Create a New React Native App

Let’s create a fresh React Native app using Expo (simpler for beginners).

npx create-expo-app emoji-fun
cd emoji-fun
npx expo start

This command starts the Metro bundler and gives you a QR code. 📱
Scan it using the Expo Go app on your iPhone or Android — and voilà, your app runs!

💅 Step 2: Clean Up the Starter Code

Open your project in VS Code.
Go to App.js and clean it up like this:

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

export default function App() {
  const [emoji, setEmoji] = useState('😄');

  const emojis = ['😄', '🥳', '🤩', '😎', '🤖', '🐱', '🌸', '🔥', '💻', '🍕'];

  const changeEmoji = () => {
    const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
    setEmoji(randomEmoji);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Emoji Fun App 🎨</Text>
      <Text style={styles.emoji}>{emoji}</Text>
      <TouchableOpacity style={styles.button} onPress={changeEmoji}>
        <Text style={styles.buttonText}>Tap to Change Emoji 🔄</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff9f0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
  },
  emoji: {
    fontSize: 80,
    marginBottom: 30,
  },
  button: {
    backgroundColor: '#ffb84d',
    paddingVertical: 15,
    paddingHorizontal: 25,
    borderRadius: 15,
  },
  buttonText: {
    fontSize: 18,
    color: '#fff',
  },
});

🧠 Step 3: Understand How It Works

useState('😄') initializes your emoji with a smiley face.
emojis array contains all the emojis you want to rotate through.
When the user taps the button 🔘, changeEmoji() picks a random emoji.
The emoji updates instantly thanks to React’s re-rendering.

🌈 Step 4: Add More Emoji Fun (Optional)

You can make it more interactive:

Display different emoji categories (animals 🐶, food 🍔, emotions ❤️).
Animate emojis using the Animated API.
Save the selected emoji to local storage using expo-secure-store.

Example:

npx expo install expo-secure-store

Then in code:

import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('lastEmoji', emoji);

💡 Step 5: Run Your App

Now, just run:

npx expo start

Open it in Expo Go — and tap away!
Each tap changes your emoji instantly. 🎉

📦 Step 6: Build for Production (Optional)

Once you’re happy, you can create a build:

npx expo prebuild
npx expo run:android
npx expo run:ios

This packages your app for the Play Store or App Store.

🧩 Bonus — Add Emoji Picker

You can also let users pick emojis with a library like:

npm install react-native-emoji-selector

Then:

import EmojiSelector from 'react-native-emoji-selector';

<EmojiSelector
  onEmojiSelected={emoji => setEmoji(emoji)}
  showSearchBar={false}
/>

Now users can pick their favorite emoji directly! 😍

🚀 Conclusion

And there you have it! You’ve built your first React Native Emoji App 🎉
You learned:

How to create a new React Native project
How to use emojis dynamically
How to add interactivity with state
Optional: how to store or pick emojis

With just a few lines of code, you made a delightful, expressive app. ✨

❤️ Pro Tip

Combine emojis with animations (react-native-reanimated) or sound effects (expo-av) for a truly engaging emoji experience! 🔊🤩