@expo/vector-icons#Ionicons TypeScript Examples

export default function useCachedResources() {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);

  // Load any resources or data that we need prior to rendering the app
  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHideAsync();

        // Load fonts
        await Font.loadAsync({
          ...Ionicons.font,
          'space-mono': require('../assets/fonts/SpaceMono-Regular.ttf'),
        });
      } catch (e) {
        // We might want to provide this error information to an error reporting service
        console.warn(e);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hideAsync();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

OptionButton = ({ icon, label, onPress, isLastOption }: IOptionButtonProps) => {
  return (
    <OptionButtonContainer lastOption={isLastOption} onPress={onPress}>
      <View style={{ flexDirection: 'row' }}>
        <OptionIconContainer>
          <Ionicons name={icon} size={22} color="rgba(0,0,0,0.35)" />
        </OptionIconContainer>
        <OptionLabelContainer>
          <OptionLabel>{label}</OptionLabel>
        </OptionLabelContainer>
      </View>
    </OptionButtonContainer>
  );
}

Discover: React.FC = () => {
  const [search, setSearch] = useState('');
  return (
    <Container>
      <Header>
        <Search>
          <AntDesign
            style={{
              paddingRight: 10,
            }}
            name="search1"
            size={18}
            color="#838383"
          />
          <Input
            placeholder="Search"
            value={search}
            returnKeyType="search"
            onChangeText={text => setSearch(text)}
          />
        </Search>
        <Ionicons name="md-qr-scanner" size={25} color="black" />
      </Header>
    </Container>
  );
}

export function useCachedResources() {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);

  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHideAsync();

        await Font.loadAsync({
          ...Ionicons.font,
          "space-mono": require("@/assets/fonts/SpaceMono-Regular.ttf"),
          antoutline: require("../../../node_modules/@ant-design/icons-react-native/fonts/antoutline.ttf"),
        });
      } catch (e) {
        // tslint:disable-next-line
        console.error(`failed to loadResourcesAsync: ${e}`);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hideAsync();
      }
    }

    loadResourcesAndDataAsync();
  }, []);

  return isLoadingComplete;
}

export function TabBarIcon(props: Props): JSX.Element {
  const { focused, name } = props;
  const theme = useTheme().colorTheme;
  const color = focused ? theme.tabIconSelected : theme.tabIconDefault;
  return (
    <Ionicons
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      name={name}
      size={26}
      style={{ marginBottom: -3 }}
      color={color}
    />
  );
}

// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: string; color: string }) {
  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
}

function HomeNavigator() {

  const [user, setUser] = useState(null);

  useEffect(() => {
    // get the current user
    const fetchUser = async () => {
      const userInfo = await Auth.currentAuthenticatedUser({ bypassCache: true });
      if (!userInfo) {
        return;
      }

      try {
        const userData = await API.graphql(graphqlOperation(getUser, { id: userInfo.attributes.sub }))
        if (userData) {
          setUser(userData.data.getUser);
        }
      } catch (e) {
        console.log(e);
      }
    }
    fetchUser();
  }, [])

  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="HomeScreen"
        component={HomeScreen}
        options={{
          headerRightContainerStyle: {
            marginRight: 15,
          },
          headerLeftContainerStyle: {
            marginLeft: 15,
          },
          headerTitle: () => (
            <Ionicons name={"logo-twitter"} size={30} color={Colors.light.tint}/>
          ),
          headerRight: () => (
            <MaterialCommunityIcons name={"star-four-points-outline"} size={30} color={Colors.light.tint}/>
          ),
          headerLeft: () => (
            <ProfilePicture size={40} image={user?.image} />
          )
        }}
      />
    </TabOneStack.Navigator>
  );
}

function StudyTabs() {
  return (
    <Navigator
      tabBarOptions={{
        style: {
          elevation: 0,
          shadowOpacity: 0,
          height: 64,
        },
        tabStyle: {
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        },
        iconStyle: {
          flex: 0,
          width: 20,
          height: 20,
        },
        labelStyle: {
          fontFamily: "Archivo_700Bold",
          fontSize: 13,
          marginLeft: 16,
        },
        inactiveBackgroundColor: "#fafafc",
        activeBackgroundColor: "#ebebf5",
        inactiveTintColor: "#c1bccc",
        activeTintColor: "#32264d",
      }}
    >
      <Screen
        name="TeacherList"
        component={TeacherList}
        options={{
          tabBarLabel: "Proffys",
          tabBarIcon: ({ color, size, focused }) => {
            return <Ionicons name="ios-easel" size={size} color={focused ? '#8257e5' : color} />;
          },
        }}
      />
      <Screen
        name="Favorites"
        component={Favorites}
        options={{
          tabBarLabel: "Favoritos",
          tabBarIcon: ({ color, size, focused }) => {
            return <Ionicons name="ios-heart" size={size} color={focused ? '#8257e5' : color} />;
          },
        }}
      />
    </Navigator>
  );
}

export default function Menu(props: Props): React.ReactElement {
  const { navigation } = props
  const [open, setOpen] = React.useState(false)

  return (
    <TouchableOpacity
      accessibilityRole="button"
      style={styles.button}
      onPress={(): void => setOpen(true)}
    >
      <MaterialIcons name="more-vert" color="black" size={24} />
      <Modal
        isVisible={open}
        onBackdropPress={(): void => setOpen(false)}
        animationIn="fadeIn"
        animationOut="fadeOut"
        backdropColor="transparent"
        testID="modal"
      >
        <View style={styles.modal}>
          <TouchableOpacity
            accessibilityRole="button"
            style={styles.item}
            onPress={(): void => {
              setOpen(false)
              navigation.navigate('Share')
            }}
          >
            {Platform.OS === 'ios' ? (
              <Ionicons name="ios-share-outline" color="black" size={24} />
            ) : (
              <MaterialIcons name="share" color="black" size={24} />
            )}
            <Text style={styles.text}>Share</Text>
          </TouchableOpacity>
          <TouchableOpacity
            accessibilityRole="button"
            style={styles.item}
            onPress={(): void => {
              setOpen(false)
              navigation.navigate('Match')
            }}
          >
            <MaterialIcons name="menu" color="black" size={24} />
            <Text style={styles.text}>Matches</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </TouchableOpacity>
  )
}

// Initially shown while waiting for users to join party
// But can also be accessed through Menu for additional
// users to join after party has started
export default function Share(props: Props): React.ReactElement {
  const [loading, setLoading] = React.useState(false)
  const { party, ws } = props
  const headerHeight = useHeaderHeight()
  const viewHeight = env.ADS ? height - headerHeight - 50 : height - headerHeight

  const handlePress = (): void => {
    Alert.alert(
      '',
      'No matches will be shown until another user joins your party',
      [
        {
          text: 'OK',
          onPress: (): void => {
            if (ws) {
              ws.send(JSON.stringify({ type: 'start-swiping' }))
              setLoading(true)
            }
          },
        },
      ],
      { cancelable: true },
    )
  }

  if (loading) {
    return (
      <View
        style={{
          ...styles.container,
          height: viewHeight,
        }}
      >
        <ActivityIndicator size="large" />
      </View>
    )
  }

  return (
    <View
      style={{
        ...styles.container,
        height: viewHeight,
      }}
    >
      <Text style={styles.text}>Share this code with friends to have them join your party.</Text>
      <Text style={styles.code}>{party.id}</Text>
      <QRCode
        size={200}
        // value={`http://192.168.178.76:8003/party/${party.id}`}
        value={`https://letsfork.app/party/${party.id}`}
      />
      {
        party.status === 'waiting'
        && <Button color="purple" size="lg" onPress={(): void => handlePress()}>START SWIPING</Button>
      }
      <TouchableOpacity
        accessibilityRole="button"
        onPress={(): Promise<ShareAction> => RNShare.share(
          { message: `Join my party on Let's Fork by clicking this link:\nhttps://letsfork.app/party/${party.id}\n\nor by opening the app and entering the code ${party.id}` },
        )}
      >
        {Platform.OS === 'ios' ? (
          <Ionicons name="ios-share-outline" size={32} />
        ) : (
          <MaterialIcons name="share" size={32} />
        )}
      </TouchableOpacity>
    </View>
  )
}

HorizontalFlatListExample: React.FC<Props> = ({ navigation }) => {
  const bottomSheetRef = React.useRef<ScrollBottomSheet<any> | null>(null);

  const animatedPosition = React.useRef(new Value(0));
  const opacity = interpolate(animatedPosition.current, {
    inputRange: [0, 1],
    outputRange: [0, 0.75],
    extrapolate: Extrapolate.CLAMP,
  });

  const renderRow = React.useCallback(
    ({ index }) => <Carousel index={index} />,
    []
  );

  return (
    <View style={styles.container}>
      <MapView
        style={StyleSheet.absoluteFillObject}
        initialRegion={initialRegion}
      />
      <Animated.View
        pointerEvents="box-none"
        style={[
          StyleSheet.absoluteFillObject,
          { backgroundColor: 'black', opacity },
        ]}
      />
      <View style={StyleSheet.absoluteFillObject} pointerEvents="box-none">
        <TouchableRipple
          style={[styles.iconContainer, { right: 16 }]}
          onPress={() => {
            bottomSheetRef.current?.snapTo(2);
          }}
          borderless
        >
          <MaterialCommunityIcons
            name="close"
            size={32}
            color="white"
            style={styles.icon}
          />
        </TouchableRipple>
        {Platform.OS === 'ios' && (
          <TouchableRipple
            style={[styles.iconContainer, { left: 16 }]}
            onPress={() => {
              navigation.goBack();
            }}
            borderless
          >
            <Ionicons
              name="ios-arrow-back"
              size={32}
              color="white"
              style={styles.icon}
            />
          </TouchableRipple>
        )}
      </View>
      <ScrollBottomSheet<string>
        ref={bottomSheetRef}
        componentType="FlatList"
        topInset={24}
        animatedPosition={animatedPosition.current}
        snapPoints={snapPointsFromTop}
        initialSnapIndex={2}
        renderHandle={() => <Handle />}
        keyExtractor={i => `row-${i}`}
        initialNumToRender={5}
        contentContainerStyle={styles.contentContainerStyle}
        data={Array.from({ length: 100 }).map((_, i) => String(i))}
        renderItem={renderRow}
      />
    </View>
  );
}

function StudyTabs() {
  return (
    <Navigator
      tabBarOptions={{
        style: {
          elevation: 0,
          shadowOpacity: 0,
          height: 64,
        },
        tabStyle: {
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center'
        },
        iconStyle: {
          flex: 0,
          width: 20,
          height: 20,
        },
        labelStyle: {
          fontFamily: 'Archivo_700Bold',
          fontSize: 13,
          marginLeft: 16,
        },
        inactiveBackgroundColor: '#fafafc',
        activeBackgroundColor: '#ebebf5',
        inactiveTintColor: '#c1bccc',
        activeTintColor: '#32264d'
      }}
    >
      <Screen 
        name="TeacherList" 
        component={TeacherList}
        options={{
          tabBarLabel: 'Proffys',
          tabBarIcon: ({ color, size, focused }) => {
            return (
              <Ionicons name="ios-easel" size={size} color={focused ? '#8257e5' : color} />
            );
          }
        }}
      />

      <Screen 
        name="Favorites" 
        component={Favorites}
        options={{
          tabBarLabel: 'Favoritos',
          tabBarIcon: ({ color, size, focused }) => {
            return (
              <Ionicons name="ios-heart" size={size} color={focused ? '#8257e5' : color} />
            );
          }
        }}
      />
    </Navigator>
  );
}

NavigationBar = connect((state: AppState) => ({
  currentTheme: state.base.currentTheme,
}))(function NavigationBarInner(props: Props): JSX.Element {
  const { title, showBack, navigation, rightText, onRightClick } = props;
  const theme = useTheme().colorTheme;
  return (
    <View
      style={{
        height: navigationBarHeight,
        backgroundColor: theme.navBg,
      }}
    >
      <View
        style={{
          marginTop: statusBarHeight,
          justifyContent: "center",
          alignItems: "center",
          height: navigationBarHeight - statusBarHeight,
          borderBottomWidth: onePx,
          borderBottomColor: theme.black80,
        }}
      >
        {showBack && (
          <TouchableOpacity
            activeOpacity={0.9}
            style={{
              position: "absolute",
              paddingHorizontal: 10,
              paddingVertical: 6,
              left: 0,
            }}
            onPress={() => navigation && navigation.pop()}
          >
            <Ionicons
              name="ios-arrow-back"
              size={29}
              color={theme.navText}
              style={{ paddingHorizontal: 10 }}
            />
          </TouchableOpacity>
        )}
        <Text
          style={{
            color: theme.navText,
            fontSize: 20,
            fontWeight: "bold",
          }}
        >
          {title}
        </Text>

        {rightText && (
          <TouchableOpacity
            activeOpacity={0.9}
            style={{
              position: "absolute",
              paddingHorizontal: 10,
              paddingVertical: 6,
              right: 0,
            }}
            onPress={() => onRightClick && onRightClick()}
          >
            <Text
              style={{
                color: theme.primary,
                fontSize: 18,
                fontWeight: "bold",
              }}
            >
              {rightText}
            </Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
})

LedgerScreen = connect((state: AppState) => {
  return { authToken: state.base.authToken };
})(function BbsScreenInner(props: Props): JSX.Element {
  let webViewRef: WebView | null;
  const theme = useTheme().colorTheme;
  const styles = getStyles(theme);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    async function init() {
      await analytics.track("page_view_ledger", {});
    }
    init();
  }, []);

  const onRefresh = async () => {
    await analytics.track("tap_refresh", {});
    if (webViewRef) {
      webViewRef.reload();
    }
  };

  const { authToken } = props;
  const [uri, setUri] = useState(getEndpoint("ledger/editor/"));
  return (
    <View style={styles.container}>
      <View style={{ height: statusBarHeight, backgroundColor: theme.white }} />
      <ProgressBar progress={progress} />
      <WebView
        ref={(webView) => {
          webViewRef = webView;
        }}
        onLoadProgress={({ nativeEvent }) => setProgress(nativeEvent.progress)}
        source={{
          uri,
          headers: { Authorization: `Bearer ${authToken}`, ...headers },
        }}
        onLoadStart={(navState) => {
          setUri(navState.nativeEvent.url);
        }}
      />
      <Button style={styles.refreshButton} onPress={onRefresh}>
        <Ionicons name="md-refresh" size={24} color={theme.white} />
      </Button>
    </View>
  );
})

Icon = ({ color, name, size, style }: IconT) => (
  <Ionicons name={name} size={size} color={color} style={style} />
)

SectionListExample: React.FC<Props> = () => {
  const snapPointsFromTop = [96, '45%', windowHeight - 264];
  const animatedPosition = React.useRef(new Value(0.5));
  const handleLeftRotate = concat(
    interpolate(animatedPosition.current, {
      inputRange: [0, 0.4, 1],
      outputRange: [25, 0, 0],
      extrapolate: Extrapolate.CLAMP,
    }),
    'deg'
  );
  const handleRightRotate = concat(
    interpolate(animatedPosition.current, {
      inputRange: [0, 0.4, 1],
      outputRange: [-25, 0, 0],
      extrapolate: Extrapolate.CLAMP,
    }),
    'deg'
  );
  const cardScale = interpolate(animatedPosition.current, {
    inputRange: [0, 0.6, 1],
    outputRange: [1, 1, 0.9],
    extrapolate: Extrapolate.CLAMP,
  });

  const renderSectionHeader = React.useCallback(
    ({ section }) => (
      <View style={styles.section}>
        <Text>{section.title}</Text>
      </View>
    ),
    []
  );

  const renderItem = React.useCallback(
    ({ item }) => <Transaction {...item} />,
    []
  );

  return (
    <View style={styles.container}>
      <View style={styles.balanceContainer}>
        <Text style={styles.poundSign}>£</Text>
        <Text style={styles.balance}>4,345</Text>
      </View>
      <ProgressBar
        style={styles.progressBar}
        progress={0.8}
        color={Colors.green600}
      />
      <Animated.Image
        source={require('../assets/card-front.png')}
        style={[styles.card, { transform: [{ scale: cardScale }] }]}
      />
      <View style={styles.row}>
        <View>
          <View style={styles.action}>
            <FontAwesome5 name="credit-card" size={24} color="black" />
          </View>
          <Text style={{ textAlign: 'center' }}>Account</Text>
        </View>
        <View>
          <View style={styles.action}>
            <FontAwesome5 name="eye" size={24} color="black" />
          </View>
          <Text style={{ textAlign: 'center' }}>Pin</Text>
        </View>
        <View>
          <View style={styles.action}>
            <Ionicons name="md-snow" size={24} color="black" />
          </View>
          <Text style={{ textAlign: 'center' }}>Freeze</Text>
        </View>
        <View>
          <View style={styles.action}>
            <FontAwesome5 name="plus" size={24} color="black" />
          </View>
          <Text style={{ textAlign: 'center' }}>Top up</Text>
        </View>
      </View>
      <ScrollBottomSheet<ListItemData>
        enableOverScroll
        removeClippedSubviews={Platform.OS === 'android' && sections.length > 0}
        componentType="SectionList"
        topInset={statusBarHeight + navBarHeight}
        animatedPosition={animatedPosition.current}
        snapPoints={snapPointsFromTop}
        initialSnapIndex={1}
        animationConfig={{
          easing: Easing.inOut(Easing.linear),
        }}
        renderHandle={() => (
          <Handle style={{ paddingVertical: 20, backgroundColor: '#F3F4F9' }}>
            <Animated.View
              style={[
                styles.handle,
                {
                  left: windowWidth / 2 - 20,
                  transform: [{ rotate: handleLeftRotate }],
                },
              ]}
            />
            <Animated.View
              style={[
                styles.handle,
                {
                  right: windowWidth / 2 - 20,
                  transform: [{ rotate: handleRightRotate }],
                },
              ]}
            />
          </Handle>
        )}
        contentContainerStyle={styles.contentContainerStyle}
        stickySectionHeadersEnabled
        sections={sections}
        keyExtractor={i => i.id}
        renderSectionHeader={renderSectionHeader}
        renderItem={renderItem}
      />
    </View>
  );
}