<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" da

How to style selected children about react-native-tabs HOT 2 CLOSED

aksonov commented on August 17, 2024 1

How to style selected children

from react-native-tabs.

Comments (2)

pcofilada commented on August 17, 2024 2

You can do this by moving <View name="plan" style={styles.tabButtons}><Icon size={25} name="dot-circle-o"/><Text>Plan</Text></View> to a new component, maybe you could call it as TabBarItem then use it like <TabBarItem name='plan' selectedStyle={{ color: 'red' }} />. After that, on your TabBarItem component you can get the selectedStyle on your props.

Here is my sample code:

import React from 'React'
import { View, Text } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';

const TabBarItem = ({ name, selectedItem, selectedStyle, text, icon }) => {
  const {
    iconTextWrapperStyle,
    iconStyle,
    textStyle
  } = styles

  return (
    <View style={iconTextWrapperStyle}>
      <Icon name={icon} style={[iconStyle, selectedItem === name ? selectedStyle : {}]}/>
      <Text style={[textStyle, selectedItem === name ? selectedStyle : {}]}>{text}</Text>
    </View>
  )
}

const styles = {
  iconTextWrapperStyle: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  iconStyle: {
    fontSize: 25,
    color: 'grey'
  },
  textStyle: {
    fontSize: 10,
    color: 'grey'
  }
}

export default TabBarItem

from react-native-tabs.