diff --git a/biome.json b/biome.json
index 4258e45..feb8e3b 100644
--- a/biome.json
+++ b/biome.json
@@ -4,7 +4,7 @@
"enabled": true
},
"linter": {
- "ignore": ["node_modules"],
+ "ignore": ["node_modules", ".next", "*.json"],
"enabled": true,
"rules": {
"recommended": true,
@@ -22,6 +22,6 @@
},
"formatter": {
"indentStyle": "space",
- "ignore": ["test/resources", "test/snapshots"]
+ "ignore": ["test/resources", "test/snapshots", "*.json", ".next"]
}
}
diff --git a/examples/android/locales/es.xml b/examples/android/locales/es.xml
index e2200ff..984fb51 100644
--- a/examples/android/locales/es.xml
+++ b/examples/android/locales/es.xml
@@ -41,8 +41,8 @@
- %d canciones en cola
- - A %d persona le gustó tu publicación
- - A %d personas les gustó tu publicación
+ - %d persona le gustó tu publicación
+ - %d personas les gustó tu publicación
- %d logro desbloqueado
diff --git a/examples/expo/app.json b/examples/expo/app.json
index f715768..eac238a 100644
--- a/examples/expo/app.json
+++ b/examples/expo/app.json
@@ -46,4 +46,4 @@
"es": "./locales/native/es.json"
}
}
-}
\ No newline at end of file
+}
diff --git a/examples/expo/app/(tabs)/_layout.tsx b/examples/expo/app/(tabs)/_layout.tsx
index cfbc1e2..f891b8b 100644
--- a/examples/expo/app/(tabs)/_layout.tsx
+++ b/examples/expo/app/(tabs)/_layout.tsx
@@ -1,12 +1,12 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-import { Platform } from 'react-native';
+import { Tabs } from "expo-router";
+import React from "react";
+import { Platform } from "react-native";
-import { HapticTab } from '@/components/HapticTab';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import TabBarBackground from '@/components/ui/TabBarBackground';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { HapticTab } from "@/components/HapticTab";
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import TabBarBackground from "@/components/ui/TabBarBackground";
+import { Colors } from "@/constants/Colors";
+import { useColorScheme } from "@/hooks/useColorScheme";
export default function TabLayout() {
const colorScheme = useColorScheme();
@@ -14,30 +14,35 @@ export default function TabLayout() {
return (
+ }}
+ >
,
+ title: "Home",
+ tabBarIcon: ({ color }) => (
+
+ ),
}}
/>
,
+ title: "Explore",
+ tabBarIcon: ({ color }) => (
+
+ ),
}}
/>
diff --git a/examples/expo/app/(tabs)/explore.tsx b/examples/expo/app/(tabs)/explore.tsx
index 06e70c4..bae8cb6 100644
--- a/examples/expo/app/(tabs)/explore.tsx
+++ b/examples/expo/app/(tabs)/explore.tsx
@@ -1,16 +1,16 @@
-import { StyleSheet, Image, Platform } from 'react-native';
+import { StyleSheet, Image, Platform } from "react-native";
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Collapsible } from "@/components/Collapsible";
+import { ExternalLink } from "@/components/ExternalLink";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { IconSymbol } from "@/components/ui/IconSymbol";
export default function TabTwoScreen() {
return (
- }>
+ }
+ >
Explore
- This app includes example code to help you get started.
+
+ This app includes example code to help you get started.
+
- This app has two screens:{' '}
- app/(tabs)/index.tsx and{' '}
+ This app has two screens:{" "}
+ app/(tabs)/index.tsx{" "}
+ and{" "}
app/(tabs)/explore.tsx
- The layout file in app/(tabs)/_layout.tsx{' '}
+ The layout file in{" "}
+ app/(tabs)/_layout.tsx{" "}
sets up the tab navigator.
@@ -39,25 +44,31 @@ export default function TabTwoScreen() {
- You can open this project on Android, iOS, and the web. To open the web version, press{' '}
- w in the terminal running this project.
+ You can open this project on Android, iOS, and the web. To open the
+ web version, press w{" "}
+ in the terminal running this project.
- For static images, you can use the @2x and{' '}
- @3x suffixes to provide files for
- different screen densities
+ For static images, you can use the{" "}
+ @2x and{" "}
+ @3x suffixes to
+ provide files for different screen densities
-
+
Learn more
- Open app/_layout.tsx to see how to load{' '}
-
+ Open app/_layout.tsx{" "}
+ to see how to load{" "}
+
custom fonts such as this one.
@@ -67,9 +78,10 @@ export default function TabTwoScreen() {
- This template has light and dark mode support. The{' '}
- useColorScheme() hook lets you inspect
- what the user's current color scheme is, and so you can adjust UI colors accordingly.
+ This template has light and dark mode support. The{" "}
+ useColorScheme() hook
+ lets you inspect what the user's current color scheme is, and so you
+ can adjust UI colors accordingly.
Learn more
@@ -77,15 +89,23 @@ export default function TabTwoScreen() {
- This template includes an example of an animated component. The{' '}
- components/HelloWave.tsx component uses
- the powerful react-native-reanimated{' '}
+ This template includes an example of an animated component. The{" "}
+
+ components/HelloWave.tsx
+ {" "}
+ component uses the powerful{" "}
+
+ react-native-reanimated
+ {" "}
library to create a waving hand animation.
{Platform.select({
ios: (
- The components/ParallaxScrollView.tsx{' '}
+ The{" "}
+
+ components/ParallaxScrollView.tsx
+ {" "}
component provides a parallax effect for the header image.
),
@@ -97,13 +117,13 @@ export default function TabTwoScreen() {
const styles = StyleSheet.create({
headerImage: {
- color: '#808080',
+ color: "#808080",
bottom: -90,
left: -35,
- position: 'absolute',
+ position: "absolute",
},
titleContainer: {
- flexDirection: 'row',
+ flexDirection: "row",
gap: 8,
},
});
diff --git a/examples/expo/app/(tabs)/index.tsx b/examples/expo/app/(tabs)/index.tsx
index 886b079..4fab748 100644
--- a/examples/expo/app/(tabs)/index.tsx
+++ b/examples/expo/app/(tabs)/index.tsx
@@ -1,20 +1,21 @@
-import { Image, StyleSheet, Platform } from 'react-native';
+import { Image, StyleSheet, Platform } from "react-native";
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { HelloWave } from "@/components/HelloWave";
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
export default function HomeScreen() {
return (
- }>
+ }
+ >
Welcome!
@@ -22,31 +23,34 @@ export default function HomeScreen() {
Step 1: Try it
- Edit app/(tabs)/index.tsx to see changes.
- Press{' '}
+ Edit{" "}
+ app/(tabs)/index.tsx{" "}
+ to see changes. Press{" "}
{Platform.select({
- ios: 'cmd + d',
- android: 'cmd + m',
- web: 'F12'
+ ios: "cmd + d",
+ android: "cmd + m",
+ web: "F12",
})}
- {' '}
+ {" "}
to open developer tools.
Step 2: Explore
- Tap the Explore tab to learn more about what's included in this starter app.
+ Tap the Explore tab to learn more about what's included in this
+ starter app.
Step 3: Get a fresh start
- When you're ready, run{' '}
- npm run reset-project to get a fresh{' '}
- app directory. This will move the current{' '}
- app to{' '}
+ When you're ready, run{" "}
+ npm run reset-project{" "}
+ to get a fresh app{" "}
+ directory. This will move the current{" "}
+ app to{" "}
app-example.
@@ -56,8 +60,8 @@ export default function HomeScreen() {
const styles = StyleSheet.create({
titleContainer: {
- flexDirection: 'row',
- alignItems: 'center',
+ flexDirection: "row",
+ alignItems: "center",
gap: 8,
},
stepContainer: {
@@ -69,6 +73,6 @@ const styles = StyleSheet.create({
width: 290,
bottom: 0,
left: 0,
- position: 'absolute',
+ position: "absolute",
},
});
diff --git a/examples/expo/app/+not-found.tsx b/examples/expo/app/+not-found.tsx
index 963b04f..87481ad 100644
--- a/examples/expo/app/+not-found.tsx
+++ b/examples/expo/app/+not-found.tsx
@@ -1,13 +1,13 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
+import { Link, Stack } from "expo-router";
+import { StyleSheet } from "react-native";
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
export default function NotFoundScreen() {
return (
<>
-
+
This screen doesn't exist.
@@ -21,8 +21,8 @@ export default function NotFoundScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
+ alignItems: "center",
+ justifyContent: "center",
padding: 20,
},
link: {
diff --git a/examples/expo/app/_layout.tsx b/examples/expo/app/_layout.tsx
index db74578..110eec9 100644
--- a/examples/expo/app/_layout.tsx
+++ b/examples/expo/app/_layout.tsx
@@ -1,12 +1,16 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
-import { useEffect } from 'react';
-import 'react-native-reanimated';
+import {
+ DarkTheme,
+ DefaultTheme,
+ ThemeProvider,
+} from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import { StatusBar } from "expo-status-bar";
+import { useEffect } from "react";
+import "react-native-reanimated";
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { useColorScheme } from "@/hooks/useColorScheme";
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();
@@ -14,7 +18,7 @@ SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const colorScheme = useColorScheme();
const [loaded] = useFonts({
- SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+ SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
});
useEffect(() => {
@@ -28,7 +32,7 @@ export default function RootLayout() {
}
return (
-
+
diff --git a/examples/expo/components/Collapsible.tsx b/examples/expo/components/Collapsible.tsx
index 55bff2f..28a225e 100644
--- a/examples/expo/components/Collapsible.tsx
+++ b/examples/expo/components/Collapsible.tsx
@@ -1,28 +1,32 @@
-import { PropsWithChildren, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { PropsWithChildren, useState } from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import { Colors } from "@/constants/Colors";
+import { useColorScheme } from "@/hooks/useColorScheme";
-export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+export function Collapsible({
+ children,
+ title,
+}: PropsWithChildren & { title: string }) {
const [isOpen, setIsOpen] = useState(false);
- const theme = useColorScheme() ?? 'light';
+ const theme = useColorScheme() ?? "light";
return (
setIsOpen((value) => !value)}
- activeOpacity={0.8}>
+ activeOpacity={0.8}
+ >
{title}
@@ -34,8 +38,8 @@ export function Collapsible({ children, title }: PropsWithChildren & { title: st
const styles = StyleSheet.create({
heading: {
- flexDirection: 'row',
- alignItems: 'center',
+ flexDirection: "row",
+ alignItems: "center",
gap: 6,
},
content: {
diff --git a/examples/expo/components/ExternalLink.tsx b/examples/expo/components/ExternalLink.tsx
index 8f05675..f521bf2 100644
--- a/examples/expo/components/ExternalLink.tsx
+++ b/examples/expo/components/ExternalLink.tsx
@@ -1,9 +1,9 @@
-import { Link } from 'expo-router';
-import { openBrowserAsync } from 'expo-web-browser';
-import { type ComponentProps } from 'react';
-import { Platform } from 'react-native';
+import { Link } from "expo-router";
+import { openBrowserAsync } from "expo-web-browser";
+import { type ComponentProps } from "react";
+import { Platform } from "react-native";
-type Props = Omit, 'href'> & { href: string };
+type Props = Omit, "href"> & { href: string };
export function ExternalLink({ href, ...rest }: Props) {
return (
@@ -12,7 +12,7 @@ export function ExternalLink({ href, ...rest }: Props) {
{...rest}
href={href}
onPress={async (event) => {
- if (Platform.OS !== 'web') {
+ if (Platform.OS !== "web") {
// Prevent the default behavior of linking to the default browser on native.
event.preventDefault();
// Open the link in an in-app browser.
diff --git a/examples/expo/components/HapticTab.tsx b/examples/expo/components/HapticTab.tsx
index 7f3981c..a567476 100644
--- a/examples/expo/components/HapticTab.tsx
+++ b/examples/expo/components/HapticTab.tsx
@@ -1,13 +1,13 @@
-import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
-import { PlatformPressable } from '@react-navigation/elements';
-import * as Haptics from 'expo-haptics';
+import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
+import { PlatformPressable } from "@react-navigation/elements";
+import * as Haptics from "expo-haptics";
export function HapticTab(props: BottomTabBarButtonProps) {
return (
{
- if (process.env.EXPO_OS === 'ios') {
+ if (process.env.EXPO_OS === "ios") {
// Add a soft haptic feedback when pressing down on the tabs.
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
}
diff --git a/examples/expo/components/HelloWave.tsx b/examples/expo/components/HelloWave.tsx
index 9b4bc31..451fd8d 100644
--- a/examples/expo/components/HelloWave.tsx
+++ b/examples/expo/components/HelloWave.tsx
@@ -1,22 +1,25 @@
-import { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
+import { useEffect } from "react";
+import { StyleSheet } from "react-native";
import Animated, {
useSharedValue,
useAnimatedStyle,
withTiming,
withRepeat,
withSequence,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
-import { ThemedText } from '@/components/ThemedText';
+import { ThemedText } from "@/components/ThemedText";
export function HelloWave() {
const rotationAnimation = useSharedValue(0);
useEffect(() => {
rotationAnimation.value = withRepeat(
- withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
- 4 // Run the animation 4 times
+ withSequence(
+ withTiming(25, { duration: 150 }),
+ withTiming(0, { duration: 150 }),
+ ),
+ 4, // Run the animation 4 times
);
}, []);
diff --git a/examples/expo/components/ParallaxScrollView.tsx b/examples/expo/components/ParallaxScrollView.tsx
index 5df1d75..53c5141 100644
--- a/examples/expo/components/ParallaxScrollView.tsx
+++ b/examples/expo/components/ParallaxScrollView.tsx
@@ -1,15 +1,15 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
+import type { PropsWithChildren, ReactElement } from "react";
+import { StyleSheet } from "react-native";
import Animated, {
interpolate,
useAnimatedRef,
useAnimatedStyle,
useScrollViewOffset,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
-import { ThemedView } from '@/components/ThemedView';
-import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { ThemedView } from "@/components/ThemedView";
+import { useBottomTabOverflow } from "@/components/ui/TabBarBackground";
+import { useColorScheme } from "@/hooks/useColorScheme";
const HEADER_HEIGHT = 250;
@@ -23,7 +23,7 @@ export default function ParallaxScrollView({
headerImage,
headerBackgroundColor,
}: Props) {
- const colorScheme = useColorScheme() ?? 'light';
+ const colorScheme = useColorScheme() ?? "light";
const scrollRef = useAnimatedRef();
const scrollOffset = useScrollViewOffset(scrollRef);
const bottom = useBottomTabOverflow();
@@ -34,11 +34,15 @@ export default function ParallaxScrollView({
translateY: interpolate(
scrollOffset.value,
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
- [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+ [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
),
},
{
- scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+ scale: interpolate(
+ scrollOffset.value,
+ [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+ [2, 1, 1],
+ ),
},
],
};
@@ -50,13 +54,15 @@ export default function ParallaxScrollView({
ref={scrollRef}
scrollEventThrottle={16}
scrollIndicatorInsets={{ bottom }}
- contentContainerStyle={{ paddingBottom: bottom }}>
+ contentContainerStyle={{ paddingBottom: bottom }}
+ >
+ ]}
+ >
{headerImage}
{children}
@@ -71,12 +77,12 @@ const styles = StyleSheet.create({
},
header: {
height: HEADER_HEIGHT,
- overflow: 'hidden',
+ overflow: "hidden",
},
content: {
flex: 1,
padding: 32,
gap: 16,
- overflow: 'hidden',
+ overflow: "hidden",
},
});
diff --git a/examples/expo/components/ThemedText.tsx b/examples/expo/components/ThemedText.tsx
index c0e1a78..2bef93f 100644
--- a/examples/expo/components/ThemedText.tsx
+++ b/examples/expo/components/ThemedText.tsx
@@ -1,31 +1,31 @@
-import { Text, type TextProps, StyleSheet } from 'react-native';
+import { Text, type TextProps, StyleSheet } from "react-native";
-import { useThemeColor } from '@/hooks/useThemeColor';
+import { useThemeColor } from "@/hooks/useThemeColor";
export type ThemedTextProps = TextProps & {
lightColor?: string;
darkColor?: string;
- type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+ type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link";
};
export function ThemedText({
style,
lightColor,
darkColor,
- type = 'default',
+ type = "default",
...rest
}: ThemedTextProps) {
- const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+ const color = useThemeColor({ light: lightColor, dark: darkColor }, "text");
return (
;
}
diff --git a/examples/expo/components/__tests__/ThemedText-test.tsx b/examples/expo/components/__tests__/ThemedText-test.tsx
index 1ac3225..591f09e 100644
--- a/examples/expo/components/__tests__/ThemedText-test.tsx
+++ b/examples/expo/components/__tests__/ThemedText-test.tsx
@@ -1,10 +1,12 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
+import * as React from "react";
+import renderer from "react-test-renderer";
-import { ThemedText } from '../ThemedText';
+import { ThemedText } from "../ThemedText";
it(`renders correctly`, () => {
- const tree = renderer.create(Snapshot test!).toJSON();
+ const tree = renderer
+ .create(Snapshot test!)
+ .toJSON();
expect(tree).toMatchSnapshot();
});
diff --git a/examples/expo/components/ui/IconSymbol.ios.tsx b/examples/expo/components/ui/IconSymbol.ios.tsx
index 9177f4d..8e02a87 100644
--- a/examples/expo/components/ui/IconSymbol.ios.tsx
+++ b/examples/expo/components/ui/IconSymbol.ios.tsx
@@ -1,14 +1,14 @@
-import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
-import { StyleProp, ViewStyle } from 'react-native';
+import { SymbolView, SymbolViewProps, SymbolWeight } from "expo-symbols";
+import { StyleProp, ViewStyle } from "react-native";
export function IconSymbol({
name,
size = 24,
color,
style,
- weight = 'regular',
+ weight = "regular",
}: {
- name: SymbolViewProps['name'];
+ name: SymbolViewProps["name"];
size?: number;
color: string;
style?: StyleProp;
diff --git a/examples/expo/components/ui/IconSymbol.tsx b/examples/expo/components/ui/IconSymbol.tsx
index f1fabd4..7b2dd30 100644
--- a/examples/expo/components/ui/IconSymbol.tsx
+++ b/examples/expo/components/ui/IconSymbol.tsx
@@ -1,22 +1,22 @@
// This file is a fallback for using MaterialIcons on Android and web.
-import MaterialIcons from '@expo/vector-icons/MaterialIcons';
-import { SymbolWeight } from 'expo-symbols';
-import React from 'react';
-import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native';
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { SymbolWeight } from "expo-symbols";
+import React from "react";
+import { OpaqueColorValue, StyleProp, ViewStyle } from "react-native";
// Add your SFSymbol to MaterialIcons mappings here.
const MAPPING = {
// See MaterialIcons here: https://icons.expo.fyi
// See SF Symbols in the SF Symbols app on Mac.
- 'house.fill': 'home',
- 'paperplane.fill': 'send',
- 'chevron.left.forwardslash.chevron.right': 'code',
- 'chevron.right': 'chevron-right',
+ "house.fill": "home",
+ "paperplane.fill": "send",
+ "chevron.left.forwardslash.chevron.right": "code",
+ "chevron.right": "chevron-right",
} as Partial<
Record<
- import('expo-symbols').SymbolViewProps['name'],
- React.ComponentProps['name']
+ import("expo-symbols").SymbolViewProps["name"],
+ React.ComponentProps["name"]
>
>;
@@ -39,5 +39,12 @@ export function IconSymbol({
style?: StyleProp;
weight?: SymbolWeight;
}) {
- return ;
+ return (
+
+ );
}
diff --git a/examples/expo/components/ui/TabBarBackground.ios.tsx b/examples/expo/components/ui/TabBarBackground.ios.tsx
index 6668e78..a0b6f70 100644
--- a/examples/expo/components/ui/TabBarBackground.ios.tsx
+++ b/examples/expo/components/ui/TabBarBackground.ios.tsx
@@ -1,7 +1,7 @@
-import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import { BlurView } from 'expo-blur';
-import { StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { BlurView } from "expo-blur";
+import { StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function BlurTabBarBackground() {
return (
diff --git a/examples/expo/constants/Colors.ts b/examples/expo/constants/Colors.ts
index 14e6784..431f15c 100644
--- a/examples/expo/constants/Colors.ts
+++ b/examples/expo/constants/Colors.ts
@@ -3,24 +3,24 @@
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
*/
-const tintColorLight = '#0a7ea4';
-const tintColorDark = '#fff';
+const tintColorLight = "#0a7ea4";
+const tintColorDark = "#fff";
export const Colors = {
light: {
- text: '#11181C',
- background: '#fff',
+ text: "#11181C",
+ background: "#fff",
tint: tintColorLight,
- icon: '#687076',
- tabIconDefault: '#687076',
+ icon: "#687076",
+ tabIconDefault: "#687076",
tabIconSelected: tintColorLight,
},
dark: {
- text: '#ECEDEE',
- background: '#151718',
+ text: "#ECEDEE",
+ background: "#151718",
tint: tintColorDark,
- icon: '#9BA1A6',
- tabIconDefault: '#9BA1A6',
+ icon: "#9BA1A6",
+ tabIconDefault: "#9BA1A6",
tabIconSelected: tintColorDark,
},
};
diff --git a/examples/expo/hooks/useColorScheme.ts b/examples/expo/hooks/useColorScheme.ts
index 17e3c63..93a8fde 100644
--- a/examples/expo/hooks/useColorScheme.ts
+++ b/examples/expo/hooks/useColorScheme.ts
@@ -1 +1 @@
-export { useColorScheme } from 'react-native';
+export { useColorScheme } from "react-native";
diff --git a/examples/expo/hooks/useColorScheme.web.ts b/examples/expo/hooks/useColorScheme.web.ts
index 7eb1c1b..66cccac 100644
--- a/examples/expo/hooks/useColorScheme.web.ts
+++ b/examples/expo/hooks/useColorScheme.web.ts
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useColorScheme as useRNColorScheme } from 'react-native';
+import { useEffect, useState } from "react";
+import { useColorScheme as useRNColorScheme } from "react-native";
/**
* To support static rendering, this value needs to be re-calculated on the client side for web
@@ -17,5 +17,5 @@ export function useColorScheme() {
return colorScheme;
}
- return 'light';
+ return "light";
}
diff --git a/examples/expo/hooks/useThemeColor.ts b/examples/expo/hooks/useThemeColor.ts
index 0608e73..f48fac0 100644
--- a/examples/expo/hooks/useThemeColor.ts
+++ b/examples/expo/hooks/useThemeColor.ts
@@ -3,14 +3,14 @@
* https://docs.expo.dev/guides/color-schemes/
*/
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { Colors } from "@/constants/Colors";
+import { useColorScheme } from "@/hooks/useColorScheme";
export function useThemeColor(
props: { light?: string; dark?: string },
- colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+ colorName: keyof typeof Colors.light & keyof typeof Colors.dark,
) {
- const theme = useColorScheme() ?? 'light';
+ const theme = useColorScheme() ?? "light";
const colorFromProps = props[theme];
if (colorFromProps) {
diff --git a/examples/expo/locales/i18n.ts b/examples/expo/locales/i18n.ts
index c7ba1e1..6f35423 100644
--- a/examples/expo/locales/i18n.ts
+++ b/examples/expo/locales/i18n.ts
@@ -1,16 +1,16 @@
// For more information on Expo Localization and usage: https://docs.expo.dev/guides/localization
-import { getLocales } from 'expo-localization';
-import { I18n } from 'i18n-js';
+import { getLocales } from "expo-localization";
+import { I18n } from "i18n-js";
const translations = {
- en: require('./en.json'),
- es: require('./es.json')
-}
+ en: require("./en.json"),
+ es: require("./es.json"),
+};
const i18n = new I18n(translations);
-i18n.locale = getLocales().at(0)?.languageCode ?? 'en';
+i18n.locale = getLocales().at(0)?.languageCode ?? "en";
i18n.enableFallback = true;
-export default i18n;
\ No newline at end of file
+export default i18n;
diff --git a/examples/expo/scripts/reset-project.js b/examples/expo/scripts/reset-project.js
index 5f81463..546c40d 100755
--- a/examples/expo/scripts/reset-project.js
+++ b/examples/expo/scripts/reset-project.js
@@ -74,7 +74,7 @@ const moveDirectories = async () => {
console.log("\n✅ Project reset complete. Next steps:");
console.log(
- "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it."
+ "1. Run `npx expo start` to start a development server.\n2. Edit app/index.tsx to edit the main screen.\n3. Delete the /app-example directory when you're done referencing it.",
);
} catch (error) {
console.error(`Error during script execution: ${error}`);
diff --git a/examples/expo/tsconfig.json b/examples/expo/tsconfig.json
index 909e901..ce27fee 100644
--- a/examples/expo/tsconfig.json
+++ b/examples/expo/tsconfig.json
@@ -3,15 +3,8 @@
"compilerOptions": {
"strict": true,
"paths": {
- "@/*": [
- "./*"
- ]
+ "@/*": ["./*"]
}
},
- "include": [
- "**/*.ts",
- "**/*.tsx",
- ".expo/types/**/*.ts",
- "expo-env.d.ts"
- ]
+ "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}
diff --git a/examples/i18next/languine.config.ts b/examples/i18next/languine.config.ts
index ca1ec30..dd63660 100644
--- a/examples/i18next/languine.config.ts
+++ b/examples/i18next/languine.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
},
files: {
json: {
- include: ["locales"],
+ include: ["locales/[locale].json"],
},
},
llm: {
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 73300da..7893397 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "languine",
- "version": "0.6.8",
+ "version": "0.6.9",
"type": "module",
"bin": "dist/index.js",
"main": "dist/config.js",
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 7108108..a4ded3c 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -67,6 +67,8 @@ function getDefaultPattern(format: string) {
}
export async function init(preset?: string) {
+ let configType = "ts";
+
try {
execSync("git rev-parse --is-inside-work-tree", { stdio: "ignore" });
} catch (error) {
@@ -78,17 +80,19 @@ export async function init(preset?: string) {
intro("Let's set up your i18n configuration");
- const configType = (await select({
- message: "What type of config file would you like to use?",
- options: [
- { value: "ts", label: "TypeScript", hint: "recommended" },
- { value: "mjs", label: "JavaScript" },
- ],
- })) as "ts" | "mjs";
+ if (!preset) {
+ configType = (await select({
+ message: "What type of config file would you like to use?",
+ options: [
+ { value: "ts", label: "TypeScript", hint: "recommended" },
+ { value: "mjs", label: "JavaScript" },
+ ],
+ })) as "ts" | "mjs";
- // Install dependencies only if we're using TypeScript for types in config
- if (configType === "ts") {
- await installDependencies();
+ // Install dependencies only if we're using TypeScript for types in config
+ if (configType === "ts") {
+ await installDependencies();
+ }
}
const sourceLanguage = (await select({
@@ -155,6 +159,8 @@ export async function init(preset?: string) {
filesPatterns = Array.isArray(presetConfig.filesPattern)
? presetConfig.filesPattern
: [presetConfig.filesPattern];
+
+ configType = presetConfig.configType;
}
const provider = (await select({
diff --git a/packages/cli/src/presets/expo.ts b/packages/cli/src/presets/expo.ts
index 969dd4e..f49c5c4 100644
--- a/packages/cli/src/presets/expo.ts
+++ b/packages/cli/src/presets/expo.ts
@@ -107,6 +107,7 @@ export async function expo(options: PresetOptions) {
return {
fileFormat: "json",
+ configType: "ts",
filesPattern: ["locales/native/[locale].json", "locales/[locale].json"],
};
}
diff --git a/packages/cli/src/utils.ts b/packages/cli/src/utils.ts
index b38f40a..4133450 100644
--- a/packages/cli/src/utils.ts
+++ b/packages/cli/src/utils.ts
@@ -81,7 +81,7 @@ export function generateConfig({
filesPatterns: string[];
provider: string;
model: string;
- configType: "ts" | "mjs";
+ configType: string;
}) {
const formatKey = fileFormat.includes("-") ? `"${fileFormat}"` : fileFormat;
@@ -111,7 +111,7 @@ export function generateConfig({
export default defineConfig(${configBody})`;
}
-export async function configFile(configType?: "ts" | "mjs") {
+export async function configFile(configType?: string) {
const files = await fs.readdir(process.cwd());
const configFile = files.find(
(file: string) =>