SegmentTab.js

/* eslint-disable react-native/no-inline-styles */
import React, {useState, useEffect, useRef} from 'react';
import {
  View,
  Animated,
  TouchableOpacity,
  StyleSheet,
  Text,
  Dimensions,
} from 'react-native';
import {Theme} from '../../utils/colors';
import HeaderAppointments from '../../components/SVG/HeaderAppointments';
import OpenedAppointments from './OpenedAppointments';
import ClosedAppointments from './ClosedAppointments';

const {width, height} = Dimensions.get('window');
const Tabs = [
  {
    name: 'opened',
  },
  {
    name: 'closed',
  },
];
const AppointmentScreen = () => {
  const scrollRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  return (
    <View style={styles.container}>
      <View style={styles.headerContainer}>
        <View style={styles.boxHeaderContainer}>
          <Text style={styles.headerText}>
            نتمنى لك المزيد من{'\n'}
            الخدمات المميزة
          </Text>
        </View>
        <View style={styles.boxHeaderContainer}>
          <HeaderAppointments />
        </View>
      </View>
      <View style={styles.appointmentsTabs}>
        {Tabs.map(({name}, tabIndex) => (
          <TouchableOpacity
            key={tabIndex}
            onPress={() => {
              // Works well for Android!
              if (tabIndex === currentIndex) {
                return;
              }
              if (scrollRef.current) {
                scrollRef.current.scrollTo({
                  x: tabIndex === 0 ? width : width * (tabIndex - 1),
                  y: 0,
                  animated: true,
                });
                setCurrentIndex(currentIndex === 1 ? 0 : 1);
              }
            
            }}
            delayPressIn={0}
            style={[
              styles.appointmentsBox,
              {
                backgroundColor: tabIndex === currentIndex ? '#000' : '#fff',
              },
            ]}>
            <Text
              style={[
                styles.appointmentText,
                {
                  color: tabIndex === currentIndex ? '#fff' : '#000',
                },
              ]}>
              {name}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View
        style={{
          height,
        }}>
        <Animated.ScrollView
          ref={scrollRef}
          showsHorizontalScrollIndicator={false}
          bounces={false}
          decelerationRate="fast"
          snapToInterval={width}
          onScrollEndDrag={() => {
            if (scrollRef.current) {
              setCurrentIndex((prevState) => {
                console.log('prevState: ', prevState);
                console.log('currentIndex: ', currentIndex);
                return prevState === 0 ? 1 : 0;
              });
            }
          }}
          horizontal>
          <OpenedAppointments />
          <ClosedAppointments />
        </Animated.ScrollView>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Theme.BackgroundColor,
    marginHorizontal: 20,
  },
  headerContainer: {
    height: 110,
    backgroundColor: '#000',
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderRadius: 20,
  },
  boxHeaderContainer: {
    marginHorizontal: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 20,
    color: '#FFFFFF',
    textAlign: 'center',
  },
  appointmentsTabs: {
    marginTop: 10,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    justifyContent: 'space-around',
    borderRadius: 15,
    marginBottom: 15,
  },
  appointmentsBox: {
    width: '48%',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 15,
    height: 61,
    backgroundColor: '#fff',
  },
  appointmentText: {
    color: '#fff',
    fontSize: 18,
  },
  appointmentsData: {
    flexGrow: 1,
    backgroundColor: '#ffcc0f',
  },
});
export default AppointmentScreen;