README
CHZ STICKER ANIMATED KEYBOARD FOR REACT NATIVE
https://www.npmjs.com/package/react-native-animated-stickers-chz
Orginal Animated sticker keyboard for react-native with customizable sticker's
IMAGE 1 | IMAGE 2 | IMAGE 2 HIGH RES |
---|---|---|
![]() |
![]() |
![]() |
#changelog
Image show above may different from current version please referπ₯ FIRST TIME IN REACT-NATIVE
β οΈWARNING : Please follow all step's for proper install! |
---|
STEP 1 - install these dependencies
npm install @react-native-async-storage/async-storage --save
npm install lottie-react-native --save
npm install lottie-ios --save
OR
yarn add @react-native-async-storage/async-storage
yarn add lottie-react-native
yarn add lottie-ios
π IOS USERS LISTEN HERE
If you are using this library for IOS then
go to ios folder by running cd ios
on terminal of your project
then run this command pod install
π Now it's time to download react-native-animated-stickers-chz
yarn add react-native-animated-stickers-chz
yarn react-native link react-native-animated-stickers-chz
OR
npm install react-native-animated-stickers-chz
npx react-native link react-native-animated-stickers-chz
To work properly please link assets by npx react-native link react-native-animated-stickers-chz
βΉοΈ INFO : Run your projects to link these dependencies else error with show! |
---|
STEP 2 - Initializing on App
Our keyboard want's to know our app name and also if we use external sticker So we need initialize the keyboard in App.js or on your initial screen
import AnimatedSticker from 'react-native-animated-stickers-chz';
const StickerInit = {
app_name: 'MY SWEET APP', //--> Your app name that can tag on copyright text and many more place....
use_external: true, //--> false if your are not using custom sticker
}
AnimatedSticker.InitialApp(StickerInit)
π Cool your app has been initialized
Let's animate your chat π€ by chz sticker keybaord
- Import Dep
- Sticker Keyboard
- onSend sticker send
- onBackPress keyboard backpress
- Sticker View
- Sticker View on Chat
- Check if it is valid sticker
- Other functions / Methods
- Intialize app
- is it a stciker method
- get Name of sticker
- add your custom catogery π
- add your custom Sticker πΌ
- Create custom sticker refernce
Import
import AnimatedSticker from 'react-native-animated-stickers-chz';
import AnimatedStickerKeyboard from 'react-native-animated-stickers-chz/AnimatedKeyBoard'
import AnimatedStickerView from 'react-native-animated-stickers-chz/AnimatedStickerView';
Sticker Keyboard
Sticker Keyboard need proper space to view so place the sticker keyboard on bottom , View chart for refernce
βββββββββββββββββββββββββββββββββββββ
β MAIN VIEW WITH FLEX 1 AND OTHER β
β STYLES β
ββββββββββββββββββ¬βββββββββββββββββββ
β
βββββββββββββββββ΄ββββββββββββββββββ
β SECOND VIEW WITH FLEX 1 AND β
β YOUR STYLE INSIDE MAIN β
ββββββββββββββββ¬βββββββββββββββββββ
β
βΌ
ββββββββββββββββββββββββββββββββββ
β KEYBOARD AFTER VIEW 2 BOTTOM β
ββββββββββββββββββββββββββββββββββ
I know that you didn't get anything π Check the code below for more!!
import React, { useState } from 'react';
import { View, BackHandler, Button } from 'react-native';
import AnimatedStickerKeyboard from 'react-native-animated-sticker-chz/AnimatedKeyBoard'
const App = () => {
const [vis, setVis] = useState(false)
const handleBackButtonClick = async () => {
if (vis) {
setVis(false)
} else {
BackHandler.exitApp()
//Other think when backPress on invisible keyboard
return true
}
}
return(
{/* MAIN VIEW */}
<View style={{ backgroundColor: 'white', flex: 1, justifyContent: 'center', alignItems: 'center', }}>
{/* SECOND VIEW */}
<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Button title='GET STICKER' onPress={() => { setVis(!vis) }} />
</View>
{/* KEYBOARD AFTER SECOND VIEW BOTTOM */}
<AnimatedStickerKeyboard
textButtonColor={'#000'}
infoText={false}
visibility={vis}
onSend={(uri) => { console.log(uri) }}
keyBoardStyle={{ backgroundColor: '#fff' }}
menuButtonStyle={{ backgroundColor: '#00000010' }}
onBackPress={() => { handleBackButtonClick() }}
textColor={'black'}
hideDes={false}
hideFooter={true}
placeHolderColor={'#00000010'}
/>
</View >
)
}
export default App;
Let me explain the whole code!
Here we placed a view with flex 1 on top of keyboard so that View ajust size on keyboard hide/show
we use state for visibility of keyboard
onBackPress
So when user press back while keyboard is shown , We want to tell keyboard what to do onBackPress
so here keyboard will hide normally , But our state is not updated it means keyboard will popup again π§
This props onBackPress
will help us Hurr! ποΈβπ¨οΈ
const handleBackButtonClick = async () => {
if (vis) {
setVis(false)
} else {
BackHandler.exitApp()
//Other think when backPress on invisible keyboard
return true
}
}
Here if(vis)
will check if keyboard is visible or not
function work like if keyboard is visible or keyboard back press then update state to flase else do other think on backPress
onSend β οΈ read carefully
When user click or swipe a stciker it need to updated in your chat or state!
so this props Γ²nSend
will help us , this is a callbackFunction More about callback function
Here is an example
<AnimatedStickerKeyboard
onSend={(uri) => { sendMessage(uri) }}
/>
here i will send message to state with arrow function
const sendMessage = (message) =>{
setMessageState([...messageState , {id : 100 , message : message}])
}
// here we got message from our call back function props onSend
<AnimatedStickerKeyboard
//Other props
onSend={(uri) => { sendMessage(uri) }}
/>
PROPS
PROPS NAME | REQUIRED / USAGE | TYPE |
---|---|---|
textButtonColor | No / For Category button color | String / color |
infoText | No / show info of Category [Deprecated] | Boolean |
visibility | Yes / show & hide of keyboard | Boolean |
onSend | Yes / get Uri and data of sticker | callback function |
keyBoardStyle | No / set style of keyboard like background color | ViewStyleProp / styles |
menuButtonStyle | No / Category menu button style | ViewStyleProp / styles |
onBackPress | Yes / What to do onBackPress | function |
textColor | No / Text color of description and Category name | string / color |
hideDes | No / Hide keyboard Category description | Boolean |
hideFooter | No / Hide footer of keyboard branding | Boolean |
placeHolderColor | No / Color of before sticker render | String / color |
textFont | No / Replace font | FontFamily |
onDo | Deprecated | Deprecated |
Sticker View
Haha we succefully send sticker and we get uri which looks like @chzapps/sticker/@render/_emoji_kiss.sticker.no.start.apps/auto/false/size=userPref,{render=true}/@data/ims
Now we need to render sticker based on uri!
Sticker View will help us ? sure β
So we need to pass uri to sticker look the refernce below
import StickerView from 'react-native-animated-stickers-chz/AnimatedStickerView'
<AnimatedStickerView
stickerHeight={150} //--> sticker height
stickerWidth={150} //--> sticker width
source={'@chzapps/sticker/@render/_emoji_kiss.sticker.no.start.apps/auto/false/size=userPref,{render=true}/@data/ims'} //--> uri that we get from keyboard
/>
check-sticker
here source props will convert uri to sticker if sticker uri is valid ... wait ! how can i check if it's valid or not π°
That's why our hero is here π¦ΈββοΈ AnimatedSticker.isSticker()
will help us!
example
const p = '@chzapps/sticker/@render/_emoji_kiss.sticker.no.start.apps/auto/false/size=userPref,{render=true}/@data/ims'
if (AnimatedSticker.isSticker(p)) {
console.log('sticker' + AnimatedSticker.getName(p))
} else {
console.log('It\'s not a sticker!!')
}
you need to import AnimatedSticker like : import AnimatedSticker from 'react-native-animated-stickers-chz'
Sticker View on chat
**Now implement sticker view on chet **
β οΈWARNING : Please Read carefully! |
---|
- You need to send message uri without any space and other char
- Check if it is a valid sticker !
Here is an simple example
I have a flatlist and my renderItem is renderItem={data => renderItem(data)}
so my code will look like
const renderItem = (data) => {
if (AnimatedSticker.isSticker(data.item.message)) {
return (<StickerView
source={data.item.message}
/>
)
} else {
return (
<View>
<Text>Not a sticker</Text>
</View>
)
}
}
This a simple example here if message is a sticker Uri then it will render sticker else your data
You can do with another method
const renderItem = (data) => {
return (
AnimatedSticker.isSticker(data.item.message) ? <StickerView source={data.item.message} />
:
<View>
<Text>Not a sticker</Text>
</View>
)
}
Here we used ternary operator which act like if else as ? :
Props for sticker view
PROPS | REQUIRED / USAGE | TYPE | EXAMPLE |
---|---|---|---|
stickerWidth | No / Default is 100 and can set max of your device width | Number | stickerWidth={150} |
stcikerHeight | No / Default is 100 and can set max of your device height | Number | stickerHeight={150} |
source | Yes / Sticker uri | chzapps type URI | source={'@chzapps/sticker/@render/_emoji_kiss.sticker.no.start.apps/auto/false/size=userPref,{render=true}/@data/ims'} |
Other functions
IntialApp 1
Let our keyboard want's to know your app name and also if you use external sticker So you need initialize the keyboard in App.js or on your initial screen
import AnimatedSticker from 'react-native-animated-stickers-chz';
const StickerInit = {
app_name: 'MY SWEET APP', //--> Your app name that can tag on copyright text and many more place....
use_external: true, //--> false if your are not using custom sticker
}
AnimatedSticker.InitialApp(StickerInit)
isSticker
Check if given uri is a valid sticker
example
const renderItem = (data) => {
if (AnimatedSticker.isSticker(data.item.message)) {
return (<StickerView
source={data.item.message}
/>
)
} else {
return (
<View>
<Text>Not a sticker</Text>
</View>
)
}
}
This a simple example here if message is a sticker Uri then it will render sticker else your data
You can do with another method
const renderItem = (data) => {
return (
AnimatedSticker.isSticker(data.item.message) ? <StickerView source={data.item.message} />
:
<View>
<Text>Not a sticker</Text>
</View>
)
}
getName
get name of sticker
example
const p = '@chzapps/sticker/@render/_emoji_kiss.sticker.no.start.apps/auto/false/size=userPref,{render=true}/@data/ims'
if (AnimatedSticker.isSticker(p)) {
console.log('sticker' + AnimatedSticker.getName(p))
} else {
console.log('It\'s not a sticker!!')
}
setExtraCategory
Cool you can create and upload your sticker
see refernce for animation size and types #ref
example
AnimatedSticker.setExtraCategory([
{
id: 101,
value: 'robot_new_word',
url: true,
file: 'https://assets10.lottiefiles.com/packages/lf20_y8fx3fts.json',
content: 'Stickers are rebuilds by Chzapps india!',
username: 'Chzapps Sticker\'s'
},
{
id: 102,
value: 'again_menu',
url: true,
file: 'https://assets7.lottiefiles.com/animated_stickers/lf_tgs_utvjcw5v.json',
content: 'Stickers are rebuilds by Chzapps india!',
username: 'Chzapps Sticker\'s'
},
])
NAME | TYPE | DES |
---|---|---|
id | number must start from 101 | is your unique id and it must start from 101,102..... |
value | String not space need to use _ instated of space | is your category name |
url | Boolean always set it to true | set it to url else file will not load π©Ή |
file | Json file see below for reference | is your json file uri that you will get from Here |
content | String / description | is your category discerption |
username | String / username - creator name | username of creator most probarly it's you π |
see refernce for animation size and types #ref
setExtraEmojis
set extra emojis
see refernce for animation size and types #ref
example :
AnimatedSticker.setExtraEmojis([
{
id: 3001,
name: "tow_lee",
cat: "robot_new_word",
url: "https://assets2.lottiefiles.com/animated_stickers/lf_tgs_RQdYhC.json",
credit: "Sticker by Towelie",
profile: 'http://github.com/chzappsinc',
social_type: 'github'
},
{
id: 3002,
name: "its_me_bull",
cat: "again_menu",
url: "https://assets10.lottiefiles.com/private_files/lf30_mdazblit.json",
credit: "Sticker by Towelie",
profile: 'https://in.linkedin.com/in/muhammed-jasim-t-k-4aaa4916a',
social_type: 'linkedin'
},
{
id: 3003,
name: "_my_robo_ohho",
dark: true,
cat: "again_menu",
url: "https://assets10.lottiefiles.com/packages/lf20_y8fx3fts.json",
credit: "Sticker by Towelie",
profile: 'http://instagram.com/chzappsinc',
social_type: 'whatsapp'
}
])
PROPS | TYPE | DES |
---|---|---|
id | number must start from 101 | is your unique id and it must start from 3001,3002,3003,3004..... |
name | String not space need to use _ instated of space | is your sticker name |
url | Boolean always set it to true | set it to url else file will not load π©Ή |
dark | Boolean | Set true if sticker have dark content , it help to make visible dark content in dark backgrounf |
cat | String / name of category | In which category sticker should show |
credit | String / username - creator name | username of creator most probarly it's you π |
profile | Url / String | url of your socail media or website |
social_type | String / instagram,whatsapp,facebook,github,twitter,linkedin | icon type of follow button |
Anim Ref
files from here
Dont use space in sticker name or category name use underscore _
make sure that file size is not more then 100KB , Resolution: >= 512x512 if its not 512x512 keyboard may crash please always check your sticker
Here take this as refernce : animation here when you scroll down you can see
![GET URI](https://raw.githubusercontent.com/chzappsinc/react-native-animated-stickers-chz/main/images/getLottieUrl.png)
In the below marked with red is resulation on animation and it's okay beacuse its 512x512 but yellow marked have good size but have 30 layer's it may take delay to render (may be)
![GET RES](https://raw.githubusercontent.com/chzappsinc/react-native-animated-stickers-chz/main/images/check_resultion.png)
Donate us
Why to donate
Support our developers to make it possible
Donate UPI/GPAY/PHONEPE/ANY PAYMENT INDIA
![Total payment](https://raw.githubusercontent.com/chzappsinc/react-native-animated-stickers-chz/main/files/Items/R/trans.png)