πŸŽ‰ How to Create a React Native Application with Emojis πŸ˜πŸš€

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! πŸ”ŠπŸ€©