How to use the react-native.Platform.select function in react-native

};

export const defaultStyles = {
  view: Platform.select({
    ios: {justifyContent: 'center', flexDirection: 'row', height: 50},
    android: {justifyContent: 'center', flexDirection: 'row', height: 50}
  }),
  disabledView: Platform.select({
    ios: {},
    android: {}
  }),
  text: Platform.select({
    ios: {alignSelf: 'center', fontSize: 18, color: '#007aff'},
    android: {paddingHorizontal: 3, paddingBottom: 2, color: '#212121'}
  }),
  disabledText: Platform.select({
    ios: {color: '#cdcdcd'},
    android: {color: '#cdcdcd'}
  })
  // loading: Platform.select({
  //   ios: {
  //     position: 'absolute',
  //     backgroundColor: 'black',
  //     opacity: 0.5,
  //     height: 40,
  //     width: 40,
  //     marginRight: 8,
  //     alignSelf: 'center',
  //     borderRadius: 12
  //   },
  //   android: {marginRight: 4}
  // })

import * as searchHistoryActionCreators from '../common/actions/searchHistory';
import { SEARCH_TYPES, SCREENS } from '../common/constants';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    // top: APPBAR_HEIGHT + STATUSBAR_HEIGHT,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
  },
  pills: {
    padding: 10,
    ...Platform.select({
      ios: {
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: 'rgba(0, 0, 0, .3)',
      },
      android: {
        shadowColor: 'black',
        shadowOpacity: 0.1,
        shadowRadius: StyleSheet.hairlineWidth,
        shadowOffset: {
          height: StyleSheet.hairlineWidth,
        },
        elevation: 4,
      },
    }),
  },
});

height: 85
  },
  container: {
    width: '100%',
    paddingTop: 5,
    paddingLeft: 15,
    paddingRight: 15
  },
  subContainer: {
    flexDirection: 'row',
    flex: 1
  },
  label: {
    paddingLeft: 5,
    fontSize: 16,
    color: Platform.select({
      android: '#fff',
      ios: '#000'
    })
  },
  input: {
    flex: 1,
    borderBottomWidth: StyleSheet.hairlineWidth,
    color: '#000',
    backgroundColor: '#fff'
  }
})

class ShoppingItemCreator extends React.PureComponent {
  state = {
    text: ''
  }

import { Platform } from "react-native"

/**
 * Just the font names.
 *
 * The various styles of fonts are defined in the 

import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar,
  TouchableOpacity,
  NativeModules
} from 'react-native';
import WindowGuard, {withWindowGuard} from 'react-native-window-guard';

const {UIVisibility} = NativeModules;
const GuardedView = withWindowGuard(View, WindowGuard.all);

const mainColor = '#A5DA34';
const title = Platform.select({ios: 'IOS', android: 'ANDROID'});
const subtitle = Platform.select({ios: 'Safe Area', android: 'Window Insets'});
const toggleStatusBar = 'Toggle status bar';
const toggleNavigationBar = 'Toggle navigation bar';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.container = React.createRef();

    this.statusBarHidden = false;
    this.navigationBarHidden = true;
  }

  componentDidMount() {
    WindowGuard.requestWindowInsets();

import { TextStyle, ViewStyle, Platform } from "react-native"
import { color } from "./color"
import { getStatusBarHeight } from "react-native-status-bar-height"

export const layoutParam = {
  paddingHorizontal: 22,
  paddingVertical: 22,
  footerHeight: 55,
  borderRadius: 10,
  statusBarHeight: Platform.select({ ios: 0, android: getStatusBarHeight() }),
}

export const shadowPresets = {
  large: {
    shadowColor: color.black(1),
    shadowOffset: {
      width: 0,
      height: 45,
    },
    shadowOpacity: 0.07,
    shadowRadius: 45,
  },
  float: {
    shadowColor: color.black(1),
    shadowOffset: {
      width: 0,

fontFamily: fontLight,
    lineHeight: 24,
    ...centeredText,
  },
  enableButtonWrapper: {
    marginTop: Spacing.XXL,
  },
  enableButtonText: {
    fontSize: textXS,
    fontFamily: fontMain,
    lineHeight: 20,
    color: Platform.select({
      android: Colors.pink,
      ios: Colors.nativeIosBlue,
    }),
    textDecorationLine: Platform.select({
      android: 'underline',
      ios: 'none',
    }),
    ...centeredText,
  },
})

interface Props {
  onPressEnable: () => void
}

export const NoPermissionComponent: FC = (props: Props) => {
  return (

]}
            currencyStyle={{
              color: !this.props.editable ? Colors.GRAY_500 : Colors.GRAY_600
            }}
            inputStyle={[
              styles.inputStyle,
              { color: !this.props.editable ? Colors.GRAY_600 : Colors.BLACK },
              inputStyle
            ]}
            dirtyStyle={{
              fontSize: 15,
              top: Platform.select({ ios: -14, android: -16 })
            }}
            cleanStyle={{
              fontSize: 17,
              top: Platform.select({ ios: 0, android: -2 })
            }}
            onFocusLabel={() => {
              if (!this.state.isFocused) {
                this.setState({
                  isFocused: true
                });
              }

              if (this.props.onFocusLabel) {
                this.props.onFocusLabel();
              }
            }}
            onBlurLabel={() => {
              if (this.state.isFocused) {
                this.setState({ isFocused: false });
              }

get mathString() {
        return Platform.select({
            android: `\\(${this.props.text.replace(/\\\\/g, '\\')}\\)`,
            ios: `\\(${this.props.text.replace(/\\\\/g, '\\')}\\)`
        });
    }