react-native-chiklot

A simple React Native component that shows up from top with a smooth animation. Animations based on react-native-reanimated library.

Installation

Open a Terminal in the project root and run:

yarn add react-native-chiklot

or with npm

npm install --save react-native-chiklot

You should also install react-native-reanimated package.

Props

| name | type | required | description | | -- | -- | -- | -- | | show | Animated.Adaptable | true | It is used to toggle visibility of Chiklot component | |timingParams| TimingParams | false | Timing animation config | | onVisibilityChange | function | false | Callback function that will be called when alert visibility state changed with a boolean parameter

Example

import React from 'react'  
import { StatusBar, Text, TouchableOpacity, View } from 'react-native'  
import { Chiklot } from 'react-native-chiklot'  
import { useMemoOne } from 'use-memo-one'  
import Animated from 'react-native-reanimated'  
  
export default () => {  
    const {  
        containerStyle,  
        chiklotStyle,  
        messageText,  
        closeButton,  
        closeButtonText,  
        showChiklotButton,  
        showChiklotButtonText  
    } = styles  
    const showChiklot = useMemoOne(() => new Animated.Value(0), [])  
  
    return (  
        <View style={containerStyle}>  
  
            <StatusBar hidden/>  
  
            <Chiklot  
		show={showChiklot}  
                style={chiklotStyle}  
                timingParams={{ to: 90 }}  
                onVisibilityChange={isVisible => console.log(isVisible)}>  
  
                <Text style={messageText}>  
                    What is a cat's favorite movie? The Sound of Mewsic!  
                </Text>  
  
                <TouchableOpacity  
                    style={closeButton}  
                    onPress={() => showChiklot.setValue(0)}>  
                    <Text style={closeButtonText}>  
                        OKAY  
                    </Text>  
                </TouchableOpacity>  
  
            </Chiklot>  
  
            <TouchableOpacity  
                style={showChiklotButton}  
                onPress={() => showChiklot.setValue(1)}>  
                <Text style={showChiklotButtonText}>  
                    SHOW  
                </Text>  
            </TouchableOpacity>  
  
        </View>  
    )  
}  
  
const styles = {  
    containerStyle: {  
        width: '100%',  
        height: '100%',  
        paddingHorizontal: 20,  
        backgroundColor: '#282C34',  
        alignItems: 'center'  
  },  
    chiklotStyle: {  
        width: '90%',  
        padding: 10,  
        paddingTop: 30,  
        backgroundColor: '#DBA11C',  
        borderRadius: 10,  
        alignSelf: 'center',  
        alignItems: 'center',  
        position: 'absolute'  
  },  
    messageText: {  
        fontSize: 20,  
        fontWeight: '600',  
        color: 'white'  
  },  
    closeButton: {  
        alignSelf: 'flex-end',  
        borderWidth: 1,  
        borderColor: 'white',  
        borderRadius: 5,  
        padding: 5  
  },  
    closeButtonText: {  
        color: 'white',  
        fontSize: 20,  
        fontWeight: '600'  
  },  
    showChiklotButton: {  
        width: '90%',  
        height: 50,  
        backgroundColor: '#0094FA',  
        borderRadius: 15,  
        justifyContent: 'center',  
        alignItems: 'center',  
        position: 'absolute',  
        bottom: 40  
  },  
    showChiklotButtonText: {  
        fontSize: 16,  
        fontWeight: '600',  
        color: 'white'  
  }  
}

TODO

• [ ] Ability to run custom animations.
• [ ] Close alert with swipe up feature

Author

Fatih Tasdemir

Twitter