Changing navigation icon and color based on focus

<TabBarIcon
  focused={focused}
  name={
    Platform.OS === 'ios'
      ? `ios-information-circle${focused ? '' : '-outline'}` // changing icon based on focus
      : 'md-information-circle'
  }
/>

focused is a boolean here that is part of React Navigation’s navigationOptions

import Colors from '../constants/Colors';

export default function TabBarIcon(props) {
  return (
    <Ionicons
      name={props.name}
      size={26}
      style={{ marginBottom: -3 }}
      color={props.focused ? 'teal' : 'salmon'}
    />
  );
}

Defining shadow if iOS and elevation if Android

Android does not support box shadows while iOS does. The Android equivalent of shadow is elevation: number

const styles = StyleSheet.create({
  tabBarInfoContainer: {
  ...Platform.select({ // Platform specific box shadow
    ios: {
      shadowColor: 'black',
      shadowOffset: { width: 0, height: -3 },
      shadowOpacity: 0.1,
      shadowRadius: 3,
    },
    android: {
      elevation: 20,
    },
  }),
}

Opening links in Browser

Expo WebBrowser, also look into Expo WebView and see how that is different

function handleAboutPress() { 
  WebBrowser.openBrowserAsync(
    'https://aamnah.com'
  );
}

<Text onPress={handleAboutPress}>About</Text>