How to use the react-native-ui-lib.Constants.isIOS function in react-native-ui-lib

},
      title: {
        color: Colors.white,
        fontSize: Typography.text70.fontSize,
        fontFamily: Constants.isAndroid ? 'sans-serif-bold' : '.SFUIText-Heavy',
        alignment: 'center',
      },
      subtitle: {
        color: Colors.white,
        fontSize: Typography.text80.fontSize,
        fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
      },
      backButton: {
        // visible: true,
        color: Colors.white,
        showTitle: Constants.isIOS ? false : undefined,
        testID: 'pop',
      },
      leftButtonColor: Colors.white, 
      leftButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
      rightButtonColor: Colors.white, 
      rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
    },
  };
}

function createStyles({ rtl, placeholderTextColor, centered }) {
  return StyleSheet.create({
    container: {},
    innerContainer: {
      flexDirection: 'row',
      borderBottomWidth: 1,
      borderColor: Colors.dark70,
      justifyContent: centered ? 'center' : undefined,
      flexGrow: 1,
    },
    innerContainerWithoutUnderline: {
      borderBottomWidth: 0,
    },
    input: {
      flexGrow: 1,
      marginBottom: Constants.isIOS ? 10 : 5,
      padding: 0,
      // textAlign: centered ? 'center' : (rtl ? 'right' : undefined),
      // writingDirection: rtl ? 'rtl' : undefined,
      backgroundColor: 'transparent',
    },
    inputRTL: {
      textAlign: 'right',
      writingDirection: 'rtl',
    },
    inputCentered: {
      textAlign: 'center',
      writingDirection: undefined,
    },
    expandableInput: {
      flexDirection: 'row',
      alignItems: 'center',

PropTypes.array,
    ]),
    /**
     * container style
     */
    containerStyle: PropTypes.oneOfType([
      PropTypes.object,
      PropTypes.number,
      PropTypes.array,
    ]),
  };

  static defaultProps = {
    overlay: false,
    loading: true,
    color: Constants.isIOS ? Colors.dark60 : ThemeManager.primaryColor,
    caption: 'Loading...',
  };

  render() {
    const {
      overlay,
      caption,
      captionStyle,
      style,
      containerStyle,
      ...props
    } = this.props;

    if (!this.props.loading) {
      return null;
    }

renderHeader() {
    return (

{this.renderSelectableContainer()}
      
    );
  }
}

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark80
  },
  scrollContainer: {
    paddingHorizontal: Spacings.s5
  },
  image: {
    height: 250,
    marginBottom: Spacings.s3
  },
  trackingToolbarContainer: {
    position: Constants.isIOS ? 'absolute' : 'relative',
    bottom: 0,
    width: '100%',
    borderWidth: 1,
    borderColor: Colors.dark60
  },
  inputContainer: {
    paddingHorizontal: Spacings.s5,
    paddingVertical: Spacings.s2,
    backgroundColor: Colors.white
  }
});

{...buttonProps}
              onPress={this.changeProps}
              animateLayout
            />
            <button style="{{marginBottom:">

            
            {Constants.isIOS ? (
              </button><button style="{{marginBottom:" label="{'Squarish'}"> (this.button_17 = element)}
                onPress={() =&gt; this.showSnippet(this.button_17)}
              /&gt;
            ) : (
              </button><button style="{{marginBottom:" label="{'Roundish'}"> (this.button_17 = element)}
                onPress={() =&gt; this.showSnippet(this.button_17)}
              /&gt;
            )}</button>

accessibilityTraits="header"
          style={this.styles.centerItems}
        >
          {content}
        
        
      
    );

    if (Constants.isIOS && useSafeArea) {
      wrapper = ;
    }
    return wrapper;
  }
}

import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, ScrollView, Alert} from 'react-native';
import {Constants, Assets, Colors, TabBar, View, Text, Image, Button} from 'react-native-ui-lib'; //eslint-disable-line


const starIcon = require('../../assets/icons/star.png');

const fontWeightBold = Constants.isIOS ? '600' : '700';
const labelsArray = [
  ['ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'FIVE FIVE', 'SIX', 'SEVEN-ELEVEN'],
  ['ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'FIVE FIVE', 'SIX', 'SEVEN-ELEVEN'],
  ['SEVEN-ELEVEN', 'ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'FIVE FIVE', 'SIX'],
  ['SIX', 'ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'FIVE FIVE', 'SEVEN-ELEVEN'],
  ['FIVE FIVE', 'ONE TWO', 'THREE', 'THREEEEEEEE', 'FOUR', 'SIX', 'SEVEN-ELEVEN'],
];
export default class TabBarScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedIndex: 0,
      selectedIndex1: 1,
      selectedIndex2: 2,
      selectedIndex3: 3,