How to style selected children

[vongohren]

<Tabs selected={this.state.page} style={{backgroundColor:'white', flex:1}} onSelect={el=>this.setState({page:el.props.name}) }>

    <View name="plan" style={styles.tabButtons}><Icon size={25} name="dot-circle-o"/><Text>Plan</Text></View>

    <View name="depatures" style={styles.tabButtons}><Icon size={25} name="angle-double-right"/><Text name="depatures" selectedStyle={{color:'green'}}>Depatures</Text></View>

    <View name="travels" style={styles.tabButtons}><Icon size={25} name="star-o" /><Text >My travels</Text></View>

    <View name="about" style={styles.tabButtons}><Icon size={25} name="ellipsis-h"/><Text>About</Text></View>

</Tabs>

I have this view, sorry for little spacing, but just POCing. But basically I would like my depatures text to turn green when selected, but I cant get it to work. Is this because of child elements inside view or is this not possible with this framework?

[pcofilada]

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

[vongohren]

Closing for good answer