React native tablayout with optimized performance

Almost 60fps on ios and android

Installation

npm i react-native-simple-tablayout

import React  from 'react';
import {View,Text, Dimensions, SafeAreaView} from 'react-native';
import TabLayout from 'react-native-simple-tablayout';

const {width}=Dimensions.get('window');


const Screen1=(props)=>{
  return (
    <View style={{flex : 1,alignItems:'center',width,backgroundColor:props.color,justifyContent:'center'}}>
      <Text>{props.text}</Text>
    </View>
  )
}

const Screen2=(props)=>{
  return (
    <View style={{flex : 1,alignItems:'center',width,backgroundColor:props.color,justifyContent:'center'}}>
      <Text>{props.text}</Text>
    </View>
  )
}
const Screen3=(props)=>{
  return (
    <View style={{flex : 1,alignItems:'center',width,backgroundColor:props.color,justifyContent:'center'}}>
      <Text>{props.text}</Text>
    </View>
  )
}

//(Recommendations )
// Make screens components seperately and use React.memo for better performance.

const App=()=>{

  // tab name passed as array of string
  const tabName=["Home","Trending","Account"]
  
  //tab screen passed as array of screens 
  const data=[
    <Screen1 text="Home" color="#ffb338"/>,
    <Screen2 text="Trending" color="#e307b7"/>,
    <Screen3 text="Account" color="#3ae307"/>,
  ];
  
  return (
    <SafeAreaView style={{flex : 1}}>
       <TabLayout
             screens={data}
             tabName={tabName}
             indicatorHeight={3}
             indicatorRadius={5}
             titleFontSize={18}
             titleColor="white"
             tabHeight={50}
        />
    </SafeAreaView>
  )
}
export default App;

Props | Types ------------ | ------------- screens | Array of screens (screens must passed as jsx i.e ) tabName | Array of string i.e ['home','profile','trending'] tabHeight (optional) | Integer indicatorColor (optional) | color i.e either hex value , rgb , rgba indicatorHeight (optional) | Integer indicatorRadius (optional) | Integer indicatorColor (optional) | color i.e either hex value , rgb , rgba tabPressedColor (optional) | color i.e either hex value , rgb , rgba (just after clicking the tab) tabColor (optional) | color i.e either hex value , rgb , rgba (background color of tab) titleFontSize (optional) | Integer titleFontWeight (optional) | string i.e "normal" or "italic" or "bold" titleColor (optional) | color i.e either hex value , rgb , rgba titleFontFamilyAndroid (optional) | string (any font family for android) titleFontFamilyIos (optional) | string (any font family for ios) titleFontStyle (optional) | string (any font style)