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.
 
- emojisarray 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 - AnimatedAPI.
 
- 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! ππ€©