react-native-animated-item

Simple animated slide component

Usage no npm install needed!

<script type="module">
  import reactNativeAnimatedItem from 'https://cdn.skypack.dev/react-native-animated-item';
</script>

README

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