Notes

React Native tips

Edit on GitHub

React Native & Expo

Changing navigation icon and color based on focus

1<TabBarIcon
2  focused={focused}
3  name={
4    Platform.OS === 'ios'
5      ? `ios-information-circle${focused ? '' : '-outline'}` // changing icon based on focus
6      : 'md-information-circle'
7  }
8/>

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

 1import Colors from '../constants/Colors';
 2
 3export default function TabBarIcon(props) {
 4  return (
 5    <Ionicons
 6      name={props.name}
 7      size={26}
 8      style={{ marginBottom: -3 }}
 9      color={props.focused ? 'teal' : 'salmon'}
10    />
11  );
12}

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

 1const styles = StyleSheet.create({
 2  tabBarInfoContainer: {
 3  ...Platform.select({ // Platform specific box shadow
 4    ios: {
 5      shadowColor: 'black',
 6      shadowOffset: { width: 0, height: -3 },
 7      shadowOpacity: 0.1,
 8      shadowRadius: 3,
 9    },
10    android: {
11      elevation: 20,
12    },
13  }),
14}

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

1function handleAboutPress() { 
2  WebBrowser.openBrowserAsync(
3    'https://aamnah.com'
4  );
5}
1<Text onPress={handleAboutPress}>About</Text>