import React from 'react';
import {StyleSheet, ScrollView} from 'react-native';
import Row from '../../components/Row';

class Transitions extends React.Component<any, any> {

  showCardsExample = () => {
    this.props.navigator.showModal({
      title: 'Cards',
      screen: 'example.Transitions.SharedElementTransitions.Cards',
    });
  };

  showProfileExample = () => {
    this.props.navigator.showModal({
      title: 'Profiles',
      screen: 'example.Transitions.SharedElementTransitions.Profiles',
    });
  };

  showMasonryExample = () => {
    this.props.navigator.showModal({
      title: 'Masonry',
      screen: 'example.Transitions.SharedElementTransitions.Masonry',
    });
  };

  render() {
    return (
      <ScrollView style={styles.container}>
        <Row title={'Cards'} onPress={this.showCardsExample}/>
        {/*<Row title={'Profiles'} onPress={this.showProfileExample} />*/}
        <Row title={'Masonry'} onPress={this.showMasonryExample}/>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
});

export default Transitions;