Violina Zoom

gistfile1.txt

yarn add react-native-pose

index.tsx

import React, { useState, useRef } from 'react';
import { CuePointProps } from './props';
import { View, Text, StyleSheet } from 'react-native';
import { Transition, Transitioning } from 'react-native-reanimated';
import {
  Component,
  HorsePoints,
  HorseName,
  Separator,
  RiderName,
  RiderNation,
  TabHeader,
  TabHeaderImage,
  Tab,
  RightArrow,
  Name,
  TabContent,
  SeparatorContainer,
  AnimatedRightArrow,
  DURATION,
  Details,
  DetailsCategory,
  DetailsCategoryText,
} from './styles';

const data = require('../../../player_mock_data.json');

const transition = (
  <Transition.Together>
    <Transition.In type="fade" durationMs={DURATION} />
    <Transition.Change />
    <Transition.Out type="fade" durationMs={DURATION} />
  </Transition.Together>
);

const CuePoints: React.FC<CuePointProps> = (props: CuePointProps) => {
  const ref = React.useRef();
  const [selectedTab, setSelectedTab] = React.useState(null);

  const setActiveTab = React.useCallback(
    type => {
      ref.current.animateNextTransition();
      setSelectedTab(type === selectedTab ? null : type);
    },
    [selectedTab],
  );

  return (
    <Transitioning.View ref={ref} transition={transition} style={{ flex: 1, width: '100%', justifyContent: 'center' }}>
      <Component>
        <Tab onPress={() => setActiveTab('horseTab')}>
          <TabHeader>
            <TabHeaderImage source={require('./../../../assets/images/horse_icon.png')} />
            <HorsePoints>{props.horsePoints}</HorsePoints>
            <Name>{props.horseName}</Name>
            <AnimatedRightArrow
              name="ios-arrow-forward"
              size={24}
              color="white"
              pose={selectedTab === 'horseTab' ? 'active' : 'inactive'}
            />
          </TabHeader>
          {selectedTab === 'horseTab' && (
            <TabContent>
              <Details>
                <DetailsCategory>Gender:</DetailsCategory>
                <DetailsCategoryText>{data[1].content.current_cue_point.horse.gender.value}</DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>Born:</DetailsCategory>
                <DetailsCategoryText>{data[1].content.current_cue_point.horse.birth_date.year}</DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>Breed:</DetailsCategory>
                <DetailsCategoryText>{data[1].content.current_cue_point.horse.breed.name}</DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>Breeder:</DetailsCategory>
                <DetailsCategoryText>{data[1].content.current_cue_point.horse.breeder.name}</DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>S:</DetailsCategory>
                <DetailsCategoryText>
                  {data[1].content.current_cue_point.horse.horse_pedigree.father}
                </DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>DS:</DetailsCategory>
                <DetailsCategoryText>
                  {data[1].content.current_cue_point.horse.horse_pedigree.mother}
                </DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>GDS:</DetailsCategory>
                <DetailsCategoryText>
                  {data[1].content.current_cue_point.horse.horse_pedigree.mother_mother_father}
                </DetailsCategoryText>
              </Details>
            </TabContent>
          )}
        </Tab>
        <SeparatorContainer>
          <Separator />
        </SeparatorContainer>
        <Tab onPress={() => setActiveTab('riderTab')}>
          <TabHeader>
            <TabHeaderImage source={require('./../../../assets/images/rider_icon.png')} />
            <RiderNation source={{ uri: props.countryFlag }} />
            <Name>{props.riderName}</Name>
            <AnimatedRightArrow
              name="ios-arrow-forward"
              size={24}
              color="white"
              pose={selectedTab === 'riderTab' ? 'active' : 'inactive'}
            />
          </TabHeader>
          {selectedTab === 'riderTab' && (
            <TabContent>
              <Details>
                <DetailsCategory>Country:</DetailsCategory>
                <DetailsCategoryText>
                  {data[1].content.current_cue_point.rider.rider_nation.iso_code}
                </DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>Club:</DetailsCategory>
                <DetailsCategoryText>{data[1].content.current_cue_point.rider.club}</DetailsCategoryText>
              </Details>
              <Details>
                <DetailsCategory>Long Leader:</DetailsCategory>
                <DetailsCategoryText>{data[1].content.current_cue_point.long_leader.name}</DetailsCategoryText>
              </Details>
            </TabContent>
          )}
        </Tab>
      </Component>
    </Transitioning.View>
  );
};

/* const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
  cardContainer: {
    flexGrow: 1,
  },
  card: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  heading: {
    fontSize: 38,
    fontWeight: '900',
    textTransform: 'uppercase',
    letterSpacing: -2,
  },
  body: {
    fontSize: 20,
    lineHeight: 20 * 1.5,
    textAlign: 'center',
  },
  subCategoriesList: {
    marginTop: 20,
  },
}); */

export default CuePoints;

styles.ts

import styled from 'styled-components/native';
import { Ionicons } from '@expo/vector-icons';
import posed from 'react-native-pose';

export const Component = styled.View`
  flex-grow: 1;
  width: 100%;
`;

export const HorsePoints = styled.Text`
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1.5px;
`;

export const HorseName = styled.Text`
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1.5px;
  flex: 1;
  margin-left: 10px;
`;

export const SeparatorContainer = styled.View`
  background-color: #33414b;
`;
export const Separator = styled.View`
  height: 1px;
  width: 95%;
  align-self: center;
  background-color: white;
  opacity: 0.1;
`;

export const RiderNation = styled.Image`
  width: 32px;
  height: 20px;
`;

export const RiderName = styled.Text`
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1.5px;
  flex: 1;
  margin-left: 10px;
`;

export const HorseDetails = styled.View`
  /* padding: 16px;
  padding-left: 24px;
  position: absolute;
  bottom: 0; */
`;

export const RiderDetails = styled.View`
  /*   padding: 16px;
  padding-left: 24px;
  position: absolute;
  bottom: 0; */
`;

export const TabHeader = styled.View`
  background-color: #33414b;
  flex-direction: row;
  align-items: center;
  padding: 8px 14px;
`;

export const RightArrow = styled(Ionicons)`
  font-size: 34px;
`;

export const DURATION = 300;

const config = { transition: { type: 'tween', duration: DURATION } };

export const AnimatedRightArrow = posed(RightArrow)({
  active: { rotate: '90deg', ...config },
  inactive: { rotate: '0deg', ...config },
});

export const Name = styled.Text`
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1.5px;
  flex: 1;
  margin-left: 10px;
`;

export const Details = styled.View`
  flex-direction: row;
  margin: 2px 0;
`;
export const DetailsCategory = styled.Text`
  color: white;
  font-size: 16px;
  font-weight: bold;
  margin-right: 10px;
`;
export const DetailsCategoryText = styled.Text`
  color: white;
  font-size: 16px;
`;

export const TabContent = styled.View`
  padding: 10px;
`;

export const Tab = styled.TouchableOpacity``;

export const TabHeaderImage = styled.Image`
  width: 40px;
  height: 40px;
  margin-right: 10px;
`;