react-native-animated-sticker v1.0.0-beta--0.10

CHZ STICKER ANIMATED KEYBOARD FOR REACT NATIVE

Orginal https://www.npmjs.com/package/react-native-animated-stickers-chz

Animated sticker keyboard for react-native with customizable sticker's

Image show above may different from current version please refer #changelog

🥇 FIRST TIME IN REACT-NATIVE

• See here
• Change log

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

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

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

• 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

Other functions

• InitialApp

• isSticker

• getName

• setExtraCategory

• setExtraEmojis

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'
    },
  ])

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'
    }
  ])

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

Donate us

Why to donate

Support our developers to make it possible

Donate UPI/GPAY/PHONEPE/ANY PAYMENT INDIA

Donate Paypal