1.1.6 • Published 2 years ago
rn-emoji-picker v1.1.6
React ⚛️ Native ☎️ Emoji 😊 Picker ⛏️
Super light weight 🪶
6.45 kB if using an asset loader for the emoji json (recommended)
Zer0 dependencies 🚫 👶
Aside from React Native peer obvs
Dark/light mode 🌙☀️
To be or not to be, that is the question
Un-opinionated 🤔
- Use any storage framework (e.g. Async Storage vs. new JSI Mmkv Stoage)
- Load emoji json any way you please (e.g. import from package, Expo Assets, over network)
Install 🛠️
npm i rn-emoji-picker
or yarn rn-emoji-picker
you know what to do!
Example usage 👨💻
import {StyleSheet, View} from 'react-native'
import EmojiPicker, {emojiFromUtf16} from "rn-emoji-picker"
import {emojis} from "rn-emoji-picker/dist/data"
// recommend using an asset loader for emojis
// or fetching over network for decreased bundle size
import {useState} from "react"
import {StatusBar} from 'expo-status-bar'
console.log(emojiFromUtf16('1F9E8')) // "🧨" helper to decode unified
export default function App() {
const [recent, setRecent] = useState([])
// replace w/ your preferred device storage library
return ( // try in a navigation modal!
<View style={styles.container}>
<EmojiPicker
emojis={emojis} // emojis data source see data/emojis
recent={recent} // store of recently used emojis
autoFocus={true} // autofocus search input
loading={false} // spinner for if your emoji data or recent store is async
darkMode={true} // to be or not to be, that is the question
perLine={7} // # of emoji's per line
onSelect={console.log} // callback when user selects emoji - returns emoji obj
onChangeRecent={setRecent} // callback to update recent storage - arr of emoji objs
// backgroundColor={'#000'} // optional custom bg color
// enabledCategories={[ // optional list of enabled category keys
// 'recent',
// 'emotion',
// 'emojis',
// 'activities',
// 'flags',
// 'food',
// 'places',
// 'nature'
// ]}
// defaultCategory={'food'} // optional default category key
/>
<StatusBar style="light"/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000',
paddingTop: 50
},
})
Data structure 📈
Example emoji obj 😊
{
"category":"smileys & emotion",
"keywords":[
"happy",
"smile",
"smiley",
"smiley face",
"so happy",
"that’s great",
"so great",
"yay",
"hooray",
"hurrah",
"cheerful",
"delighted",
"joyful",
"pleased",
"grinning face",
"face",
"joy",
":d",
"grin",
"grinning"
],
"name":"grinning face",
"order":1,
"unified":"1F600",
"emoji":"😀"
}
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.32
2 years ago
1.0.31
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago