dappros/ethora

View on GitHub
client-reactnative/src/Screens/Privacy/ProfileShare.tsx

Summary

Maintainability
C
1 day
Test Coverage
import {Text} from 'native-base';
import React, {useMemo, useState} from 'react';
import {SceneMap, TabBar, TabView} from 'react-native-tab-view';
import {widthPercentageToDP} from 'react-native-responsive-screen';
import {ProfileShareManage} from './ProfileShareManage';
import {ProfileShareAdd} from './ProfileShareAdd';
import {textStyles, commonColors} from '../../../docs/config';

export interface IProfileShare {}

const renderTabBar = (props: any) => {
  return (
    <TabBar
      renderLabel={({route, focused}) => (
        <Text
          color={focused ? 'white' : 'info.200'}
          fontSize={14}
          fontFamily={textStyles.semiBoldFont}>
          {route.title}
        </Text>
      )}
      {...props}
      indicatorStyle={{backgroundColor: 'white'}}
      style={{backgroundColor: commonColors.primaryColor}}
    />
  );
};
const routes = [
  {key: 'manage', title: 'Manage'},
  {key: 'add', title: 'Add'},
];

export const ProfileShare = () => {
  const [routeIndex, setRouteIndex] = useState(0);
  const scene = useMemo(() => {
    return SceneMap({
      manage: () => <ProfileShareManage onAddPress={setRouteIndex} />,
      add: () => <ProfileShareAdd />,
    });
  }, []);

  return (
    <TabView
      swipeEnabled={false}
      renderTabBar={renderTabBar}
      navigationState={{
        index: routeIndex,
        routes: routes,
      }}
      renderScene={scene}
      onIndexChange={setRouteIndex}
      initialLayout={{width: widthPercentageToDP('100%')}}
    />
  );
};