Skip to content

Commit

Permalink
Fix duplicate splash screen warning from Play console (#15)
Browse files Browse the repository at this point in the history 
* fix all tsserver diagnostics in project

* move dots into their own component; undo metro config change

* fix duplicate splash screen warning in play console
  • Loading branch information
@tmgrask
tmgrask authored Oct 7, 2024
1 parent 03551e4 commit 3cf932f
Show file tree
Hide file tree
Showing 9 changed files with 125 additions and 97 deletions.
4 changes: 3 additions & 1 deletion android/app/src/main/res/values/styles.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,7 @@
</style>
<style name="Theme.App.SplashScreen" parent="AppTheme">
<item name="android:windowBackground">@drawable/splashscreen</item>
<!-- fixes the duplicate splash screen warning https://github.com/expo/expo/issues/20244 -->
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>
</resources>
2 changes: 1 addition & 1 deletion babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module.exports = function (api) {
export default function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
Expand Down
181 changes: 102 additions & 79 deletions src/app/(app)/onboarding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
GestureHandlerRootView,
} from "react-native-gesture-handler";
import Animated, {
SharedValue,
runOnJS,
useDerivedValue,
useSharedValue,
Expand Down Expand Up @@ -216,19 +217,6 @@ export default function OnboardingScreen() {
.build();
});

const dot0Fill = useDerivedValue(() => {
return currentView.value >= 0 ? palette.blueTint2 : palette.transparent;
});
const dot1Fill = useDerivedValue(() => {
return currentView.value >= 1 ? palette.blueTint2 : palette.transparent;
});
const dot2Fill = useDerivedValue(() => {
return currentView.value >= 2 ? palette.blueTint2 : palette.transparent;
});
const dot3Fill = useDerivedValue(() => {
return currentView.value >= 3 ? palette.blueTint2 : palette.transparent;
});

const buttonP = useDerivedValue(() => {
buttonTextChanged.value;
if (!fontMgr) {
Expand Down Expand Up @@ -258,10 +246,12 @@ export default function OnboardingScreen() {
const backListener = BackHandler.addEventListener(
"hardwareBackPress",
() => {
// when this callback returns false, the hardware back is
// actuated, when it returns true the hardware back is ignored.
if (currentView.value === 0) {
return false; // allow hardware back from first view only
} else {
return true; // disable hardware back, we'll handle the gesture
return true;
}
},
);
Expand All @@ -271,30 +261,32 @@ export default function OnboardingScreen() {
};
}, []);

function replaceOrGoBack() {
// this will be called in an animation callback using runOnJS, need to
// encapsulate so we can consume the output of a synchronous function.
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(app)/");
}
}

async function goToNext() {
if (currentView.value < views.length - 1) {
// continue onboarding
const beforeNext = views[currentView.value].beforeNext;
if (beforeNext) {
await beforeNext();
}
currentView.value += 1;
} else {
runOnJS(goToMainApp)();
}
}
function replaceOrGoBack() {
if (router.canGoBack()) {
router.back();
} else {
router.replace("/(app)/");
// onboarding done, record completion and fade to main view
await AsyncStorage.setItem("hasOnboarded", "true");
everythingOpacity.value = withTiming(0, { duration: 500 }, () => {
runOnJS(replaceOrGoBack)();
});
}
}
async function goToMainApp() {
everythingOpacity.value = withTiming(0, { duration: 500 }, () => {
runOnJS(replaceOrGoBack)();
});
await AsyncStorage.setItem("hasOnboarded", "true");
}

const buttonGesture = Gesture.Tap().onEnd(goToNext).runOnJS(true);

Expand Down Expand Up @@ -397,57 +389,9 @@ export default function OnboardingScreen() {
/>
</Group>
<Group transform={dotsTransform}>
<Circle
c={vec(dotWidth * 0, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 0, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot0Fill}
/>
<Circle
c={vec(dotWidth * 1, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 1, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot1Fill}
/>
<Circle
c={vec(dotWidth * 2, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 2, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot2Fill}
/>
<Circle
c={vec(dotWidth * 3, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 3, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot3Fill}
<ProgressDots
dotWidth={dotWidth}
currentView={currentView}
/>
</Group>
<Group transform={buttonTransform}>
Expand Down Expand Up @@ -503,3 +447,82 @@ export default function OnboardingScreen() {
</SafeAreaView>
);
}

function ProgressDots({
dotWidth,
currentView,
}: {
dotWidth: number;
currentView: SharedValue<number>;
}) {
// Couldn't figure out a way to avoid hardcoding these
const dot0Fill = useDerivedValue(() => {
return currentView.value >= 0 ? palette.blueTint2 : palette.transparent;
});
const dot1Fill = useDerivedValue(() => {
return currentView.value >= 1 ? palette.blueTint2 : palette.transparent;
});
const dot2Fill = useDerivedValue(() => {
return currentView.value >= 2 ? palette.blueTint2 : palette.transparent;
});
const dot3Fill = useDerivedValue(() => {
return currentView.value >= 3 ? palette.blueTint2 : palette.transparent;
});

return (
<Group>
<Circle
c={vec(dotWidth * 0, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 0, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot0Fill}
/>
<Circle
c={vec(dotWidth * 1, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 1, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot1Fill}
/>
<Circle
c={vec(dotWidth * 2, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 2, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot2Fill}
/>
<Circle
c={vec(dotWidth * 3, 0)}
r={dotWidth / 4}
style={"stroke"}
strokeWidth={1}
color={palette.blueTint2}
/>
<Circle
c={vec(dotWidth * 3, 0)}
r={dotWidth / 4}
style={"fill"}
color={dot3Fill}
/>
</Group>
);
}
6 changes: 5 additions & 1 deletion src/app/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import AsyncStorage from "@react-native-async-storage/async-storage";
import { Canvas } from "@shopify/react-native-skia";
import { router } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import React from "react";
import { View, useWindowDimensions } from "react-native";
import { runOnJS, useSharedValue, withTiming } from "react-native-reanimated";
Expand All @@ -9,7 +11,8 @@ import { timedLog } from "@/src/common/utils";
import { SafeAreaView } from "@/src/components/SafeAreaView";
import { PsiphonConduitLoading } from "@/src/components/canvas/PsiphonConduitLoading";
import { sharedStyles as ss } from "@/src/styles";
import AsyncStorage from "@react-native-async-storage/async-storage";

SplashScreen.preventAutoHideAsync();

export default function Index() {
const { signIn } = useAuthContext();
Expand All @@ -20,6 +23,7 @@ export default function Index() {
const opacity = useSharedValue(0);

async function doSignIn() {
await SplashScreen.hideAsync();
timedLog("Starting signIn");
const signInResult = await signIn();
if (signInResult instanceof Error) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/GitHash.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function GitHash() {
ss.bodyFont,
]}
>
v.{GIT_HASH.substr(0, 12)}
v.{GIT_HASH.substring(0, 12)}
</Animated.Text>
</View>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/canvas/Phone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ import {
import React from "react";
import {
Easing,
SharedValue,
cancelAnimation,
useAnimatedReaction,
useSharedValue,
withDelay,
withRepeat,
withTiming,
} from "react-native-reanimated";
import { SharedValue } from "react-native-reanimated/lib/typescript/Animated";

import { ConduitConnectionLight } from "@/src/components/canvas/ConduitConnectionLight";

Expand Down
4 changes: 2 additions & 2 deletions src/i18n/fake-translation.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use strict";

const fs = require("fs").promises;
import { promises as fs } from "fs";
const path = require("path");
const pseudo = require("./pseudo").PSEUDO;

Expand All @@ -14,7 +14,7 @@ let englishLines,
async function getEnglishLines() {
const data = await fs.readFile(
path.resolve(__dirname, "locales/en/translation.json"),
(err, data) => {
(err, _) => {
if (err) throw err;
},
);
Expand Down
3 changes: 1 addition & 2 deletions src/i18n/i18n.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import * as fs from "fs";
import i18n from "i18next";
import path from "path";
import { findBestLanguageTag } from "react-native-localize";

import i18nService from "./i18n";

const path = require("path");

jest.mock("react-native-localize", () => ({
findBestLanguageTag: jest.fn(() => ({ languageTag: "fr" })),
}));
Expand Down
18 changes: 9 additions & 9 deletions src/i18n/pseudo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,17 @@ function mapContent(fn, val) {
return modified.join("");
}

function Pseudo(id, name, charMap, modFn) {
this.id = id;
this.translate = mapContent.bind(null, function (val) {
return replaceChars(charMap, modFn(val));
});
this.name = this.translate(name);
class Pseudo {
constructor(id, name, charMap, modFn) {
this.id = id;
this.translate = mapContent.bind(null, function (val) {
return replaceChars(charMap, modFn(val));
});
this.name = this.translate(name);
}
}

var PSEUDO = {
export const PSEUDO = {
xa: new Pseudo("xa", "Packaged Accented", ACCENTED_MAP, makeLonger),
xb: new Pseudo("xb", "Packaged Mirrored", FLIPPED_MAP, makeRTL),
};

exports.PSEUDO = PSEUDO;

0 comments on commit 3cf932f

Please sign in to comment.