react-native-icon-action-sheet

This is custom ActionSheetIOS, whith a possibility to add icons, change menu itens colors and text alignment

Getting started

npm install react-native-icon-action-sheet --save

or

yarn add react-native-icon-action-sheet

Dependencies

npm install react-native-vector-icons --save

or

yarn add react-native-vector-icons

Mostly automatic installation

react-native link react-native-icon-action-sheet
 
react-native link react-native-vector-icons

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-icon-action-sheet and add RNIconActionSheet.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNIconActionSheet.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import br.com.dx.RNIconActionSheetPackage; to the imports at the top of the file
• Add new RNIconActionSheetPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

   include ':react-native-icon-action-sheet'
   project(':react-native-icon-action-sheet').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-icon-action-sheet/android')
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-icon-action-sheet')
   

Usage

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import Icon from "react-native-vector-icons";
import IconActionSheet from 'react-native-icon-action-sheet'
 
const settings = require('./assets/icons/32/settings.png')
const whatsapp = <Icon name={"whatsapp"} size={32} family={"FontAwesome"} />;
 
export default class App extends Component {
    openIconActionSheet() {
        IconActionSheet.showActionSheetWithOptions(
            {
                cancelButtonIndex: 3,
                tintColor: '#007aff',
                options: [
                    {
                        title: 'User',
                        icon: 'user',
                        titleTextAlignment: 0,
                        titleTextColor: '#fc6c85'
                    },
                    {
                        title: 'Whatsapp',
                        icon: whatsapp,
                        titleTextAlignment: 0,
                        titleTextColor: '#fc6c85'
                    },
                    {
                        title: 'Settings',
                        icon: settings,
                        titleTextAlignment: 0
                    },
                    {
                        title: 'Cancel'
                    }
                ]
            }, (buttonIndex) => console.log('Chegou Aqui', buttonIndex))
    }
    render() {
        return (
            <View style={styles.container}>
                <Button title='Call IconActionSheet' onPress={() => this.openIconActionSheet()} />
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    }
});

License

MIT© danielxaraujo