[TestScreen]: add Test.tsx, override ScrollableTab bg color

src/libs/native-base/components/ScrollableTab.ts

@@ -0,0 +1,7 @@
+import variable from '../variables/platform';
+
+export default (variables = variable) => {
+  return {
+    backgroundColor: variables.brandPrimary,
+  };
+};

src/libs/native-base/components/index.ts

@@ -42,6 +42,7 @@ import listItemTheme from './ListItem';
 import formTheme from './Form';
 import separatorTheme from './Separator';
 import pickerTheme from './Picker';
+import scrollableTabTheme from './ScrollableTab';
 import variable from '../variables/platform';
 
 export const createTheme = (variables /* : * */ = variable) => {
@@ -212,6 +213,9 @@ export const createTheme = (variables /* : * */ = variable) => {
     'NativeBase.Thumbnail': {
       ...thumbnailTheme(),
     },
+    'NativeBase.ScrollableTab': {
+      ...scrollableTabTheme(),
+    },
   };
 
   const cssifyTheme = (

src/libs/native-base/variables/platform.ts

@@ -193,7 +193,9 @@ export default {
   activeTab: platform === OS.IOS ? '#007aff' : '#fff',
   sTabBarActiveTextColor: '#007aff',
   tabBarActiveTextColor: platform === OS.IOS ? '#007aff' : '#fff',
-  tabActiveBgColor: platform === OS.IOS ? '#cde1f9' : '#3F51B5',
+  get tabActiveBgColor() {
+    return platform === OS.IOS ? '#cde1f9' : this.brandPrimary;
+  },
 
   // Header
   toolbarBtnColor: platform === OS.IOS ? '#007aff' : '#fff',
@@ -206,7 +208,9 @@ export default {
   searchBarHeight: platform === OS.IOS ? 30 : 40,
   searchBarInputHeight: platform === OS.IOS ? 30 : 50,
   toolbarBtnTextColor: platform === OS.IOS ? '#007aff' : '#fff',
-  toolbarDefaultBorder: platform === OS.IOS ? '#a7a6ab' : '#3F51B5',
+  get toolbarDefaultBorder() {
+    return platform === OS.IOS ? '#a7a6ab' : this.brandPrimary;
+  },
   iosStatusbar: platform === OS.IOS ? 'dark-content' : 'light-content',
   get statusBarColor() {
     return color(this.toolbarDefaultBg).darken(0.2).hex();
@@ -239,7 +243,9 @@ export default {
   lineHeightH2: 27,
   lineHeightH3: 25,
   lineHeight: platform === OS.IOS ? 20 : 24,
-  listItemSelected: platform === OS.IOS ? '#007aff' : '#3F51B5',
+  get listItemSelected() {
+    return platform === OS.IOS ? '#007aff' : this.brandPrimary;
+  },
 
   // List
   listBg: 'transparent',
@@ -256,7 +262,9 @@ export default {
 
   // Radio Button
   radioBtnSize: platform === OS.IOS ? 25 : 23,
-  radioSelectedColorAndroid: '#3F51B5',
+  get radioSelectedColorAndroid() {
+    return this.brandPrimary;
+  },
   radioBtnLineHeight: platform === OS.IOS ? 29 : 24,
   get radioColor() {
     return this.brandPrimary;
@@ -268,9 +276,13 @@ export default {
   },
   segmentActiveBackgroundColor: platform === OS.IOS ? '#007aff' : '#fff',
   segmentTextColor: platform === OS.IOS ? '#007aff' : '#fff',
-  segmentActiveTextColor: platform === OS.IOS ? '#fff' : '#3F51B5',
+  get segmentActiveTextColor() {
+    return platform === OS.IOS ? '#fff' : this.brandPrimary;
+  },
   segmentBorderColor: platform === OS.IOS ? '#007aff' : '#fff',
-  segmentBorderColorMain: platform === OS.IOS ? '#a7a6ab' : '#3F51B5',
+  get segmentBorderColorMain() {
+    return platform === OS.IOS ? '#a7a6ab' : this.brandPrimary;
+  },
 
   // Spinner
   defaultSpinnerColor: '#45D56E',
@@ -278,7 +290,9 @@ export default {
 
   // Tab
   tabBarDisabledTextColor: '#BDBDBD',
-  tabDefaultBg: platform === OS.IOS ? '#F8F8F8' : '#3F51B5',
+  get tabDefaultBg() {
+    return platform === OS.IOS ? '#F8F8F8' : this.brandPrimary;
+  },
   topTabBarTextColor: platform === OS.IOS ? '#6b6b6b' : '#b3c7f9',
   topTabBarActiveTextColor: platform === OS.IOS ? '#007aff' : '#fff',
   topTabBarBorderColor: platform === OS.IOS ? '#a7a6ab' : '#fff',

src/screens/TestScreen/TestScreen.tsx

@@ -7,11 +7,12 @@ import { Query, Scalars } from 'libs/graphql';
 import { AppStackParamList, Screen } from 'config/routing';
 import { QUERY_GENERATE_TEST_SIMILAR_QUALIFICATIONS_QUALIFICATION } from './queries';
 
-import { StyleSheet } from 'react-native';
-import { Container, Content, Spinner, View } from 'native-base';
+import { Container, Spinner } from 'native-base';
 import QualificationNotFound from './components/QualificationNotFound/QualificationNotFound';
 import Header from './components/Header/Header';
 import Suggestions from './components/Suggestions/Suggestions';
+import Test from './components/Test/Test';
+import Content from './components/Content/Content';
 
 export interface TestScreenProps {
   route: RouteProp<AppStackParamList, Screen.Test>;
@@ -48,25 +49,23 @@ const TestScreen = ({ route }: TestScreenProps) => {
           route.params.limit,
         )}`}
       />
-      <Content padder contentContainerStyle={styles.contentContainer}>
-        {loading || networkStatus === NetworkStatus.refetch ? (
+      {loading || networkStatus === NetworkStatus.refetch ? (
+        <Content>
           <Spinner color={variables.brandPrimary} />
-        ) : data?.qualification ? (
+        </Content>
+      ) : data?.qualification ? (
+        data?.generateTest?.length ? (
+          <Test questions={data.generateTest} />
+        ) : (
           <Suggestions
             qualifications={data?.similarQualifications.items ?? []}
           />
-        ) : (
-          <QualificationNotFound />
-        )}
-      </Content>
+        )
+      ) : (
+        <QualificationNotFound />
+      )}
     </Container>
   );
 };
 
-const styles = StyleSheet.create({
-  contentContainer: {
-    flexGrow: 1,
-  },
-});
-
 export default TestScreen;

src/screens/TestScreen/components/Content/Content.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Content as ContentNB } from 'native-base';
+
+export interface ContentProps {
+  children?: React.ReactNode;
+}
+
+const Content = ({ children }: ContentProps) => {
+  return (
+    <ContentNB padder contentContainerStyle={styles.contentContainer}>
+      {children}
+    </ContentNB>
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    flexGrow: 1,
+  },
+});
+
+export default Content;

src/screens/TestScreen/components/QualificationNotFound/QualificationNotFound.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import { StyleSheet } from 'react-native';
-import { H1, View } from 'native-base';
+import { H1 } from 'native-base';
+import Content from '../Content/Content';
 
 const QualificationNotFound = () => {
   return (
-    <View style={styles.wrapper}>
+    <Content>
       <H1 style={styles.heading}>Kwalifikacja nie została znaleziona</H1>
-    </View>
+    </Content>
   );
 };
 

src/screens/TestScreen/components/Suggestions/Suggestions.tsx

@@ -7,6 +7,7 @@ import { Screen } from 'config/routing';
 
 import { StyleSheet } from 'react-native';
 import { H1, View, H3, Card, CardItem, Text, Button, Body } from 'native-base';
+import Content from '../Content/Content';
 
 export interface SuggestionsProps {
   qualifications: Qualification[];
@@ -16,7 +17,7 @@ const Suggestions = ({ qualifications }: SuggestionsProps) => {
   const navigation = useNavigation();
 
   return (
-    <View style={styles.container}>
+    <Content>
       <H1
         style={[
           styles.textCenter,
@@ -75,7 +76,7 @@ const Suggestions = ({ qualifications }: SuggestionsProps) => {
           })}
         </View>
       )}
-    </View>
+    </Content>
   );
 };
 

src/screens/TestScreen/components/Test/Test.tsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react';
+import { Question } from 'libs/graphql';
+import { ScrollableTab, Tab, Tabs, Text } from 'native-base';
+
+export interface TestProps {
+  questions: Question[];
+}
+
+const Test = ({ questions }: TestProps) => {
+  const startedAt = useRef(new Date()).current;
+
+  return (
+    <Tabs
+      renderTabBar={(props: any) => {
+        props.tabStyle = Object.create(props.tabStyle);
+        return <ScrollableTab {...props} />;
+      }}
+    >
+      {questions.map((question, index) => {
+        return (
+          <Tab key={question.id} heading={`Pytanie ${index + 1}`}>
+            <Text>Pytanie</Text>
+          </Tab>
+        );
+      })}
+    </Tabs>
+  );
+};
+
+export default Test;