Adding Inner Tabs in reactnative

Today I will show how to add an inner tab inside the screen using react-native-scrollable-tab-view npm package.

First, create a project

npx react-native init TabProject

and navigate to that project using cd TabProject and install react-native-scrollable-tab-view npm package using

npm i react-native-scrollable-tab-view

now open the app.js file and copy the below code

import React from 'react';
import {Text} from 'react-native';

import ScrollableTabView, {
  DefaultTabBar,
} from 'react-native-scrollable-tab-view';

export default () => {
  return (
     }>
      My
      favorite
      project
    
  );
};

Here, we can make our own component for Tab1, Tab2 and Tab3 as shown in code below.

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

import ScrollableTabView, {
  DefaultTabBar,
} from 'react-native-scrollable-tab-view';

const Tab1 = () => {
  return (
    
      Tab1
    
  );
};
const Tab2 = () => {
  return (
    
      Tab2
    
  );
};

export default () => {
  return (
     }>
      
      
    
  );
};

const styles = StyleSheet.create({
  tabContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});