expo-status-bar#StatusBar TypeScript Examples

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  const [songId, setSongId] = useState<string|null>(null);

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <AppContext.Provider value={{
          songId,
          setSongId: (id: string) => setSongId(id),
        }}>
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
          <PlayerWidgets />
        </AppContext.Provider>
      </SafeAreaProvider>
    );
  }
}

export default function App() {
  let [fontsLoaded] = useFonts({
    Archivo_400Regular,
    Archivo_700Bold,
    Poppins_400Regular,
    Poppins_600SemiBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <>
        <AppStack />
        <StatusBar style="light" />
      </>
    );
  }
}

/**
 * 入口文件, 由 expo 管理
 */
export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="auto" />

      <AppMain />
    </View>
  );
}

export default function AppNavigator() {
  const { colorScheme } = useColorScheme();
  const darkMode = colorScheme === 'dark';

  return (
    <>
      <StatusBar style={darkMode ? 'light' : 'dark'} />
      <NavigationContainer theme={darkMode ? DarkTheme : DefaultTheme}>
        <RootStackNavigator />
      </NavigationContainer>
    </>
  );
}

export function ShowImageModal(props: Props) {
  const styles = useStyles();

  const { show, userImage, onPressCancel } = props;

  return (
    <Modal
      visible={show}
      presentationStyle="overFullScreen"
      transparent
      statusBarTranslucent
      onRequestClose={onPressCancel}
    >
      <View style={styles.modalContainer}>
        <StatusBar style={'light'} />
        <CachedImage
          isBackground
          source={userImage}
          style={styles.imageDetail}
          visible={show}
          setVisible={onPressCancel}
        />
      </View>
    </Modal>
  );
}

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

export default function App() {
  let [fontsLoaded] = useFonts({
    Archivo_400Regular,
    Archivo_700Bold,
    Poppins_400Regular,
    Poppins_600SemiBold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <>
        <AppStack />
        <StatusBar style="light" />
      </>
    );
  }
}

export default function App() {
  return (
    <View mt20 mx10 p4 rounded bgGreen200>
      <Text red300>Open up App.tsx to start working on your app!</Text>
      <ProfileCard />
      <StatusBar style="auto" />
    </View>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={require("./assets/adaptive-icon.png")}
        style={styles.logo}
      />
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  )
}

export default function App() {
  const [key, setKey] = useState("");
  const [errorMsg, setErrorMsg] = useState("");
  const login = async () => {
    try {
      const web3auth = new Web3Auth(WebBrowser, {
        clientId: "BA0mVyeHATikwuXVhXWCNjAxHthlw0w84mUhLuxlC4KZKjvmBsbdbmEWTizJ26YzrbKSWbOZbtGYdVDm0ESuYSg",
        network: OPENLOGIN_NETWORK.TESTNET,
      });
      const state = await web3auth.login({
        loginProvider: LOGIN_PROVIDER.GOOGLE,
        redirectUrl: resolvedRedirectUrl,
      });
      setKey(state.privKey || "no key");
    } catch (e) {
      console.error(e);
      setErrorMsg(String(e));
    }
  };
  return (
    <View style={styles.container}>
      <Text>Key: {key}</Text>
      <Text>Error: {errorMsg}</Text>
      <Text>Linking URL: {resolvedRedirectUrl}</Text>
      <Text>appOwnership: {Constants.appOwnership}</Text>
      <Text>executionEnvironment: {Constants.executionEnvironment}</Text>
      <Button title="Login with Web3Auth" onPress={login} />
      <StatusBar style="auto" />
    </View>
  );
}

export default function PostImagePreview() {
  const styles = useStyles();
  const { colors } = useTheme();

  const { navigate, goBack } = useNavigation<
    RootStackNavProp<'PostImagePreview'>
  >();

  const {
    params: { imageUri, prevScreen },
  } = useRoute<RootStackRouteProp<'PostImagePreview'>>();

  const uploading = () => {
    navigate(prevScreen, { imageUri });
  };

  return (
    <View style={styles.container}>
      <StatusBar style={'light'} />
      <SafeAreaView style={styles.fullContainer}>
        <ImageBackground
          source={{ uri: imageUri }}
          resizeMode="contain"
          style={styles.fullContainer}
        >
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <Icon
              name="Close"
              color={colors.pureWhite}
              onPress={goBack}
              style={styles.iconContainer}
            />
            <Icon
              name="Add"
              color={colors.pureWhite}
              onPress={uploading}
              style={styles.iconContainer}
            />
          </View>
        </ImageBackground>
      </SafeAreaView>
    </View>
  );
}

function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  const getRandomImage = () => {
    return 'https://scontent.fkiv3-1.fna.fbcdn.net/v/t31.0-8/s960x960/22256588_1932617800312085_5686197942193420542_o.jpg?_nc_cat=110&_nc_sid=85a577&_nc_ohc=svjjE7DUkc0AX9yjcdC&_nc_ht=scontent.fkiv3-1.fna&tp=7&oh=1df4116c73c45a32ebad070704ca3333&oe=5F6ECD77'
  }

  const saveUserToDB = async (user) => {
    console.log(user);
    await API.graphql(graphqlOperation(createUser, { input: user }))
  }

  useEffect(() => {
    const updateUser = async () => {
      // Get current authenticated user
      const userInfo = await Auth.currentAuthenticatedUser({ bypassCache: true });

      if(userInfo) {
        // Check if user already exists in database
        const userData = await API.graphql(graphqlOperation(getUser, { id: userInfo.attributes.sub }));
        console.log(userData)
        if(!userData.data.getUser) {
          const user = {
            id: userInfo.attributes.sub,
            username: userInfo.username,
            name: userInfo.username,
            email: userInfo.attributes.email,
            image: getRandomImage(),
          }
          await saveUserToDB(user);
        } else {
          console.log('User already exists');
        }
      }


      // If it doesn't, create the user in the database
    }
    updateUser();
  }, [])

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <SafeAreaProvider>
        <Navigation colorScheme={colorScheme} />
        <StatusBar />
      </SafeAreaProvider>
    );
  }
}

MainApp = () => {
  const dispatch = useAppDispatch();
  const defaultState = useAppSelector((state) => state.root.default);
  const [isAppReady, setIsAppReady] = useState<boolean>(false);

  // small helper
  const fetchAndSetCountry = async (coords: any) => {
    const country: string = await getCountry({
      long: coords.longitude,
      lat: coords.latitude,
    });
    dispatch(setCountry(country));
  };

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      let location: any = INDIA;
      if (status === "granted") {
        const locationFetched = await Location.getLastKnownPositionAsync({});
        if (locationFetched) {
          location = locationFetched;
        }
      }
      await fetchAndSetCountry(location.coords);
    })();
  }, []);

  // if mobile location set -> get covid stats
  useEffect(() => {
    if (defaultState.country !== null) {
      getCovidData(defaultState.country)
        .then((data) => {
          console.log(data);
          dispatch(updateData(data));
        })
        .finally(() => {
          setIsAppReady(true);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, [defaultState.country]);

  // use a onLayout callback to avoid flicker when transitioning from splash to rendered app
  const onLayout = useCallback(async () => {
    if (isAppReady) {
      await SplashScreen.hideAsync();
    }
  }, [isAppReady]);

  if (
    !isAppReady ||
    defaultState.country === null ||
    defaultState.data === {}
  ) {
    if (Platform.OS === "web") {
      return <SplashScreenWeb />;
    }
    return null;
  }

  return (
    <View onLayout={onLayout} style={{ flex: 1 }}>
      <StatusBar style="auto" hidden />
      <RootNavigator />
    </View>
  );
}

AppContent = connect(
  (state: {
    base: { authToken: string; currentTheme: string; locale: string };
  }) => ({
    authToken: state.base.authToken,
    currentTheme: state.base.currentTheme,
    locale: state.base.locale,
  }),
  (dispatch) => ({
    updateReduxState(payload: { base: { currentTheme: string } }): void {
      dispatch(actionUpdateReduxState(payload));
    },
  })
)(
  (props: {
    authToken: string;
    currentTheme: "dark" | "light";
    locale: string;
    updateReduxState: (state: { base: { currentTheme: string } }) => void;
  }) => {
    const { locale } = props;
    const { setLocale } = React.useContext(LocalizationContext);
    const theme = useTheme();
    if (locale && i18n) {
      i18n.locale = locale;
    }

    React.useEffect(() => {
      setLocale(locale);
    }, []);

    if (!props.authToken) {
      return <PreAuthView />;
    }
    return (
      <View style={styles.container}>
        <StatusBar style={theme.name === "dark" ? "light" : "dark"} />
        <AppNavigator />
      </View>
    );
  }
)

export function CustomHeader(props: Props) {
  const { colorScheme } = useColorScheme();
  const navigation = useNavigation();
  const styles = useStyles();
  const { colors, fontSizes, navHeader } = useTheme();

  const {
    title,
    color = 'background',
    rightTitle = '',
    rightIcon,
    onPressRight,
    noShadow = false,
    disabled = false,
    isLoading = false,
    prevScreen,
  } = props;

  const statusBarStyle: StatusBarStyle =
    colorScheme === 'light' ? 'dark' : 'light';

  const headerRight = isLoading ? (
    <ActivityIndicator style={styles.headerRight} />
  ) : (
    onPressRight && (
      <HeaderItem
        label={rightTitle}
        icon={rightIcon}
        onPressItem={onPressRight}
        disabled={disabled}
        style={styles.headerRight}
      />
    )
  );

  const routesLength = useNavigationState((state) => state.routes.length);

  const headerLeft =
    routesLength > 1 ? (
      <HeaderBackButton
        tintColor={isLoading ? colors.grey : colors.primary}
        style={isLoading && { opacity: 0.5 }}
        labelStyle={[
          {
            color: isLoading ? colors.grey : colors.primary,
            fontSize: fontSizes.m,
          },
        ]}
        disabled={isLoading}
        onPress={() => {
          prevScreen
            ? navigation.navigate(prevScreen, {
                backToTop: false,
              })
            : navigation.goBack();
        }}
      />
    ) : null;

  useLayoutEffect(() => {
    navigation.setOptions({
      title,
      ...navHeader,
      headerStyle: {
        backgroundColor: colors[color],
        ...(noShadow && { shadowOpacity: 0, elevation: 0 }),
      },
      headerLeft: () => headerLeft,
      headerRight: () => headerRight,
    });
  }, [
    color,
    colors,
    headerLeft,
    headerRight,
    navHeader,
    navigation,
    noShadow,
    title,
  ]);

  return <StatusBar style={statusBarStyle} />;
}

export default function ImagePreview() {
  const styles = useStyles();
  const { colors } = useTheme();

  const { navigate, goBack } = useNavigation<StackNavProp<'ImagePreview'>>();

  const { params } = useRoute<StackRouteProp<'ImagePreview'>>();
  const { topicId, imageUri, postPointer, message } = params;

  const [loading, setLoading] = useState(false);
  const [imageMessage, setImageMessage] = useState(message);
  const [cursorPosition, setCursorPosition] = useState<CursorPosition>({
    start: 0,
    end: 0,
  });
  const [showUserList, setShowUserList] = useState(false);
  const [mentionLoading, setMentionLoading] = useState(false);
  const [mentionKeyword, setMentionKeyword] = useState('');

  const messageRef = useRef<TextInputType>(null);

  const user = useStorage().getItem('user');

  const { reply } = useReplyPost({
    onCompleted: () => {
      navigate('MessageDetail', {
        id: topicId,
        postPointer: postPointer + 1,
        emptied: true,
        hyperlinkUrl: '',
        hyperlinkTitle: '',
      });
    },
    onError: (error) => {
      setLoading(false);
      errorHandlerAlert(error);
    },
  });

  const { mentionMembers } = useMention(
    mentionKeyword,
    showUserList,
    setMentionLoading,
  );

  const reactNativeFile = createReactNativeFile(imageUri);

  const postToServer = (caption: string) => {
    setLoading(true);
    reply({
      variables: {
        replyInput: {
          topicId,
          raw: caption,
        },
        file: reactNativeFile,
        userId: user?.id,
        type: UploadTypeEnum.composer,
      },
    });
  };

  const onPressCancel = () => {
    goBack();
  };

  const footer = (
    <View>
      <MentionList
        showUserList={showUserList}
        members={mentionMembers}
        mentionLoading={mentionLoading}
        rawText={imageMessage}
        textRef={messageRef}
        setRawText={setImageMessage}
        setShowUserList={setShowUserList}
        viewStyle={styles.mentionList}
        fontStyle={styles.mentionText}
      />
      <View style={styles.inputContainer}>
        <ReplyInputField
          inputRef={messageRef}
          onSelectedChange={(cursor) => {
            setCursorPosition(cursor);
          }}
          onChangeValue={(imageMessage: string) => {
            mentionHelper(
              imageMessage,
              cursorPosition,
              setShowUserList,
              setMentionLoading,
              setMentionKeyword,
            );
            setImageMessage(imageMessage);
          }}
          showButton
          inputPlaceholder={t('Write your caption here')}
          loading={loading}
          disabled={loading}
          onPressSend={postToServer}
          style={styles.inputField}
          message={imageMessage}
          setMessage={setImageMessage}
        />
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <StatusBar style={'light'} />
      <SafeAreaView style={styles.fullContainer}>
        <ImageBackground
          source={{ uri: imageUri }}
          resizeMode="contain"
          style={styles.fullContainer}
        >
          <Icon
            name="Close"
            color={colors.pureWhite}
            onPress={onPressCancel}
            disabled={loading}
            style={styles.iconContainer}
          />
        </ImageBackground>
        <KeyboardAccessoryView
          androidAdjustResize
          inSafeAreaView
          alwaysVisible
          style={styles.inputViewContainer}
        >
          {footer}
        </KeyboardAccessoryView>
      </SafeAreaView>
    </View>
  );
}

export default function App() {
  const [
    hideDone,
    setHideDone
  ] = useState(false);

  const parseQuery = useMemo(
    () => {
      const parseQuery = new Parse.Query('Todo');

      if (hideDone) {
        parseQuery.notEqualTo('done', true);
      }

      (parseQuery as any).withCount();

      return parseQuery;
    },
    [hideDone]
  );

  const {
    isLive,
    isLoading,
    isSyncing,
    results,
    count,
    error,
    reload
  } = useParseQuery(parseQuery);

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View>
        <Button
          onPress={() => setHideDone(!hideDone)}
          title={`${hideDone ? 'Unhide' : 'Hide'} done todos`}
        />
      </View>
      {isLoading && (
        <View>
          <Text>Loading...</Text>
        </View>
      )}
      {isLive && (
        <View>
          <Text>Live!</Text>
        </View>
      )}
      {isSyncing && (
        <View>
          <Text>Syncing...</Text>
        </View>
      )}
      {results && (
        <View>
          {results.map(result => (
            <View>
              <Text key={result.id}>
                {result.get('title')}
              </Text>
            </View>
          ))}
        </View>
      )}
      <View>
        <Text>{count}</Text>
      </View>
      {error && (
        <View>
          <Text>{error.message}</Text>
        </View>
      )}
      <View>
        <Button
          onPress={reload}
          title="Reload"
        />
      </View>
    </View>
  );
}

App = () => {
  const defaultPostState = { id: "", title: "", content: "", image: "" };
  // Post
  const [postState, setPostState] = useState(defaultPostState);
  const [posts, setPosts] = useState([]);
  // Create post section
  const [createSectionState, setCreateSectionState] = useState(true);
  // Update post section
  const [updateSectionState, setUpdateSectionState] = useState(false);
  //image upload
  const [img, setImg] = useState("");

  useEffect(() => {
    fetchPosts();
  }, []);

  const urlToBlob = async (url:string) => {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.onerror = reject;
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                resolve(xhr.response);
            }
        };
        xhr.open('GET', url);
        xhr.responseType = 'blob';
        xhr.send();
    })
  }

  const onImageUploadChange = async () => {
    try {
      let imageFile = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 0.1,
      });
      
      if (!imageFile.cancelled) {
        const file: any = imageFile.uri;
        const fileName: any = file.replace(/^.*[\\\/]/, "");
        const contentType: any = fileName.split(".").pop().toLowerCase();
        setInput("image", fileName);
        const response = await urlToBlob(file);
        Storage.put(fileName, response, {
          contentType: "image/" + contentType,
        })
          .then(async (result: any) => {
            console.log("result.key", result.key);
            setImg((await Storage.get(result.key)) as string);
            console.log("onImageUploadChange result:", result);
          })
          .catch((err) => console.error(err));
      }
      console.log("onImageUploadChange imageFile:", imageFile);
    } catch (err) {
      console.error("onImageUploadChange err:", err);
    }
  };

  const fetchPosts = async (): Promise<any> => {
    try {
      console.log("fetching posts");
      const postData: any = await API.graphql(
        graphqlOperation(queries.listPosts)
      );
      const posts: any = postData.data.listPosts.items;
      setPosts(posts);
    } catch (err) {
      console.log("error fetching posts: ", err);
    }
  };

  const createSubscription: any = API.graphql(
    graphqlOperation(subscriptions.onCreatePost)
  );
  
  createSubscription.subscribe({
    next: (postData: any) => {
      console.log("onCreatePost", postData);
      fetchPosts();
    },
  });

  const updateSubscription: any = API.graphql(
    graphqlOperation(subscriptions.onUpdatePost)
  );
  updateSubscription.subscribe({
    next: (postData: any) => {
      console.log("onUpdatePost", postData);
      fetchPosts();
    },
  });
  const deleteSubscription: any = API.graphql(
    graphqlOperation(subscriptions.onDeletePost)
  );
  deleteSubscription.subscribe({
    next: (postData: any) => {
      console.log("onDeletePost", postData);
      fetchPosts();
    },
  });

  const setInput = (key: any, value: any): any => {
    setPostState({ ...postState, [key]: value });
  };

  const createPost = async (): Promise<any> => {
    try {
      if (!postState.title || !postState.content) return;
      const post = { ...postState };
      console.log("creating post", post);
      const result = await API.graphql(
        graphqlOperation(mutations.createPost, {
          input: {
            title: post.title,
            content: post.content,
            image: post.image,
          },
        })
      );
      setPosts([...posts, post] as SetStateAction<never[]>);
      setPostState(defaultPostState);
      console.log("created post", result);
    } catch (err) {
      console.log("error creating post:", err);
    }
  };

  const updatePost = async (): Promise<any> => {
    try {
      if (!postState.title || !postState.content) return;
      const post = { ...postState };
      console.log("updating post", post);
      const result = await API.graphql(
        graphqlOperation(mutations.updatePost, {
          input: {
            id: post.id,
            title: post.title,
            content: post.content,
          },
        })
      );
      setUpdateSectionState(false);
      setCreateSectionState(true);
      console.log("updated post", result);
      setPostState(defaultPostState);
    } catch (err) {
      console.log("error updating post:", err);
    }
  };

  const deletePost = async (postID: string): Promise<any> => {
    try {
      if (!postID) return;
      console.log("deleting post", postID);
      const result = await API.graphql(
        graphqlOperation(mutations.deletePost, {
          input: {
            id: postID,
          },
        })
      );
      console.log("deleted post", result);
    } catch (err) {
      console.log("error deleting post:", err);
    }
  };

  const findPosts = async (title: string): Promise<any> => {
    try {
      console.log("finding posts:", title);
      const postData: any = await API.graphql(
        graphqlOperation(queries.listPosts, {
          filter: {
            title: {
              contains: title,
            },
          },
        })
      );
      console.log("found posts:");
      const posts: any = postData.data.listPosts.items;
      setPosts(posts);
    } catch (err) {
      console.log("error finding posts ", err);
    }
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <TextInput
          onChangeText={(val) => findPosts(val)}
          style={styles.input}
          placeholder="Search"
        />
        {createSectionState ? (
          <View>
            <Text style={styles.title}>Create Post</Text>
            <View>
              <Text
                style={styles.button}
                onPress={() => {
                  onImageUploadChange();
                }}
              >
                Pick an image from camera roll
              </Text>
              {img ? (
                <Image
                  source={{ uri: img }}
                  style={{ width: 320, height: 200 }}
                />
              ) : null}
            </View>
            <TextInput
              onChangeText={(val) => setInput("title", val)}
              style={styles.input}
              value={postState.title}
              placeholder="Title"
            />
            <TextInput
              onChangeText={(val) => setInput("content", val)}
              style={styles.textArea}
              value={postState.content}
              placeholder="Content"
            />
            <Text style={styles.button} onPress={createPost}>
              Create Post
            </Text>
          </View>
        ) : null}

        {updateSectionState ? (
          <View>
            <Text style={styles.title}>Update Post</Text>
            <TextInput
              onChangeText={(val) => setInput("title", val)}
              style={styles.input}
              value={postState.title}
              placeholder="Title"
            />
            <TextInput
              onChangeText={(val) => setInput("content", val)}
              style={styles.textArea}
              value={postState.content}
              placeholder="Content"
            />
            <Text style={styles.button} onPress={updatePost}>
              Update Post
            </Text>
          </View>
        ) : null}

        <ScrollView style={styles.scrollView}>
          
          {posts.map((post: any, index: any) => (
            <View key={post.id ? post.id : index} style={styles.post}>
              <S3Image style={styles.postImage} level="public" imgKey={post.image} />
              <Text style={styles.postTitle}>
                {post.title}
              </Text>
              <Text style={styles.postContent}>{post.content}</Text>
              <View style={{ flexDirection: "row" }}>
                <Text
                  style={styles.postUpdate}
                  onPress={() => {
                    setPostState(post);
                    setUpdateSectionState(true);
                    setCreateSectionState(false);
                  }}
                >
                  Update
                </Text>
                <Text
                  style={styles.postDelete}
                  onPress={() => {
                    deletePost(post.id);
                  }}
                >
                  Delete
                </Text>
              </View>
            </View>
          ))}
        </ScrollView>
        <StatusBar style="auto" />
      </View>
    </SafeAreaView>
  );
}