React Native tips

November 22, 2019

code

<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

code

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

code

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

code

function handleAboutPress() {
  WebBrowser.openBrowserAsync("https://tasiomind.com");
}

code

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

React Native tips

Changing navigation icon and color based on focus

Defining shadow if iOS and elevation if Android

Opening links in Browser

Defining `shadow` if `iOS` and `elevation` if Android