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