Task #3566, Stage #1

Let’s practice replacing the text on the buttons for switching tabs with icons
The App component must return a navigation container with a tab navigator.
There should two screens in the navigator.
First screen should be named Github, second - Gitlab.
First screen should display screens/GitHubScreen component, second - screens/GitLabScreen.

This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.

App.js

import React from 'react';

export default function App() {
  return null;
}

app.json

{
  "expo": {
    "name": "1",
    "slug": "1",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

components/TabBarIcon/index.js

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import github from '../../assets/github.png';
import gitlab from '../../assets/gitlab.png';

export default function TabBarIcon({ routeName, focused }) {
  return (
    <View style={[styles.container, { backgroundColor: focused ? '#D6DBD2' : '#F2F5EA' }]}>
      <Image style={styles.icon} source={routeName === 'Github' ? github : gitlab} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 30,
    height: 30,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    width: 24,
    height: 24,
  },
});

screens/GitHubScreen/index.js

import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';

export default function GitHubScreen({ route: { params } }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>
        GitHub, Inc. is a provider of Internet hosting for software development and version control
        using Git. It offers the distributed version control and source code management (SCM)
        functionality of Git, plus its own features. It provides access control and several
        collaboration features such as bug tracking, feature requests, task management, continuous
        integration and wikis for every project.[3] Headquartered in California, it has been a
        subsidiary of Microsoft since 2018.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 8,
    color: '#4730EB',
    marginBottom: 8,
    fontSize: 14,
  },
});

screens/GitLabScreen/index.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function GitLabScreen({ route: { params } }) {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>
        GitLab is a web-based DevOps lifecycle tool that provides a Git-repository manager providing
        wiki, issue-tracking and continuous integration and deployment pipeline features, using an
        open-source license, developed by GitLab Inc. The software was created by Ukrainian
        developers Dmitriy Zaporozhets and Valery Sizov.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 20,
    paddingHorizontal: 30,
  },
  header: {
    backgroundColor: 'white',
    padding: 16,
    borderRadius: 8,
    color: '#4730EB',
    marginBottom: 8,
    fontSize: 14,
  },
});