react-native-animated-item

    1.0.11 • Public • Published
    Item

    react-native-animated-item

    Package version Make a pull request License npm downloads Greenkeeper badge code style: prettier

    An animated item that slides open with some options. Useful in actionable lists.

    Contents

    Install

    yarn add react-native-animated-item

    OR

    npm install react-native-animated-item

    Usage

    import React from 'react'
    import { View, Text, Image, StyleSheet } from 'react-native'
    import AnimatedItem from 'react-native-animated-item'
     
    class Example extends React.Component {
        onActionPress = () => console.log("You have clicked on the action option")
     
        render() {
            return(
                <View>
                    <AnimatedItem
                        containerStyle={styles.main}
                        actionStyle={styles.actionContainer}
                        actionPress={this.onActionPress}
                        actionItem={ActionContent}
                    >
                        <View>
                            <Text>
                                Some descriptive body
                            </Text>
                        </View>
                    </AnimatedItem>
                </View>
            )
        }
    }
     
    const ActionContent = () => {
        return(
            <View>
                <Image source={'<some icon>'}/>
                <Text>
                    Options
                </Text>
            </View>
        )
    }
     
    const styles = StyleSheet.create({
        main: {
            // some custom styling
        },
        actionContainer: {
            // some custom styling
        },
    })

    Props

    Property Description Type Default Value
    containerStyle Styles of item container Object {}
    actionStyle Styles of actionItem Object {}
    actionPress Function to execute on click of actionItem Function () => {}
    actionItem Component to display when slid open React.Component Fallback component with text

    Contribute

    Contributions are welcome!

    1. Fork it.
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    Or open up a issue.

    License

    MIT

    Install

    npm i react-native-animated-item

    DownloadsWeekly Downloads

    4

    Version

    1.0.11

    License

    MIT

    Unpacked Size

    322 kB

    Total Files

    6

    Last publish

    Collaborators

    • pedreviljoen