npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

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

18

version

1.0.11

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability