Notes
React Native tips
small React Native tips, swapping tab icons and colors on focus, iOS shadow vs Android elevation with Platform.select, and Expo WebBrowser links
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}
Opening links in Browser
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>