wix-incubator / react-native-action-view Goto Github PK

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Image,
    ScrollView,
    TouchableHighlight,
    Button,
    Alert,
    Text,
    View
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import { SwipeActionView } from 'react-native-action-view';
import Header from '../components/default/header';

export default class Favorites extends Component<{}> {

    // static navigationOptions = {
    //     title: 'Favorites',
    //     headerRight: <Button title="Info"
    //                          onPress={()=>Alert.alert('You tapped the button!')}
    //     />
    // };
    //
    // _onPressButton() {
    //     Alert.alert('You tapped the button!')
    // }

    render() {
        return (
            <View>
                <ScrollView>
                    <Header/>
                    <View style={styles.favTitle}>
                        <Text style={styles.favTitleText}>Favorites</Text>
                    </View>
                    {/*<TouchableHighlight  onPress={() => { Actions.secondry(); }}>*/}
                        {/*<Text>Appp!</Text>*/}
                    {/*</TouchableHighlight>*/}
                    <View>
                        <SwipeActionView rightExpansionSettings={{buttonIndex: 0}}
                                         leftExpansionSettings={{buttonIndex: 0}}
                                         rightButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}},
                                             {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}},
                                             {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]}
                                         leftButtons={[{title: 'Red', color: 'rgb(255, 0, 0)', callback: () => {alert('Red button tapped.');}},
                                             {title: 'Green', color: 'rgb(0, 255, 0)', callback: () => {alert('Green button tapped.');}},
                                             {title: 'Blue', color: 'rgb(0, 0, 255)', callback: () => {alert('Blue button tapped.');}}]}
                        >
                            <Text style={styles.actionViewText}>
                                Welcome to React Native!
                            </Text>
                            <Text style={styles.actionViewText}>
                                To get started, swipe this view.
                            </Text>
                            <Text style={styles.actionViewText}>
                                Tap on a button or swipe fully.
                            </Text>
                        </SwipeActionView>
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    favTitle:{
        backgroundColor:'#fff',
        paddingTop:15,
        paddingBottom:15,
        paddingLeft:15,
    },
    favTitleText:{
        color:'#000',
        fontSize:20,
        fontWeight:'bold',
    },
    actionViewText:{
        backgroundColor:'red',
        paddingTop:15,
        paddingBottom:15,
    }
});