Skip to content

Commit 1942568

Browse files
SethY8sSethY8s
authored
Seth y8s/45 add rtk (#54)
* v2-dev added native wind * v2-dev added rnr library * v2-dev added react native reusable to repo * 45 added redux store * 45 aded redux tool kit and RTK query
1 parent ef11983 commit 1942568

33 files changed

+1089
-88
lines changed

‎app/(tabs)/_layout.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Tabs } from 'expo-router';
22
import React from 'react';
33

4-
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
5-
import { Colors } from '@/constants/Colors';
6-
import { useColorScheme } from '@/hooks/useColorScheme';
4+
import { TabBarIcon } from '~/components/navigation/TabBarIcon';
5+
import { Colors } from '~/constants/Colors';
6+
import { useColorScheme } from '~/hooks/useColorScheme';
77

88
export default function TabLayout() {
99
const colorScheme = useColorScheme();

‎app/(tabs)/explore.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import Ionicons from '@expo/vector-icons/Ionicons';
22
import { StyleSheet, Image, Platform } from 'react-native';
33

4-
import { Collapsible } from '@/components/Collapsible';
5-
import { ExternalLink } from '@/components/ExternalLink';
6-
import ParallaxScrollView from '@/components/ParallaxScrollView';
7-
import { ThemedText } from '@/components/ThemedText';
8-
import { ThemedView } from '@/components/ThemedView';
4+
import { Collapsible } from '~/components/Collapsible';
5+
import { ExternalLink } from '~/components/ExternalLink';
6+
import ParallaxScrollView from '~/components/ParallaxScrollView';
7+
import { ThemedText } from '~/components/ThemedText';
8+
import { ThemedView } from '~/components/ThemedView';
99

1010
export default function TabTwoScreen() {
1111
return (
@@ -42,7 +42,7 @@ export default function TabTwoScreen() {
4242
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
4343
different screen densities
4444
</ThemedText>
45-
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
45+
<Image source={require('~/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
4646
<ExternalLink href="https://reactnative.dev/docs/images">
4747
<ThemedText type="link">Learn more</ThemedText>
4848
</ExternalLink>

‎app/(tabs)/index.tsx

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,65 @@
1-
import { Image, StyleSheet, Platform } from 'react-native';
1+
import { Image, StyleSheet, Platform } from "react-native";
22

3-
import { HelloWave } from '@/components/HelloWave';
4-
import ParallaxScrollView from '@/components/ParallaxScrollView';
5-
import { ThemedText } from '@/components/ThemedText';
6-
import { ThemedView } from '@/components/ThemedView';
3+
import { HelloWave } from "~/components/HelloWave";
4+
import ParallaxScrollView from "~/components/ParallaxScrollView";
5+
import { ThemedText } from "~/components/ThemedText";
6+
import { ThemedView } from "~/components/ThemedView";
7+
import { MoonStar } from "~/lib/icons/MoonStar";
8+
9+
import { Button } from "~/components/ui/button";
10+
import { Text } from "~/components/ui/text";
711

812
export default function HomeScreen() {
913
return (
1014
<ParallaxScrollView
11-
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
15+
headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
1216
headerImage={
1317
<Image
14-
source={require('@/assets/images/partial-react-logo.png')}
18+
source={require("~/assets/images/partial-react-logo.png")}
1519
style={styles.reactLogo}
1620
/>
17-
}>
21+
}
22+
>
1823
<ThemedView style={styles.titleContainer}>
19-
<ThemedText type="title">Welcome!</ThemedText>
24+
<ThemedText className="color-red" type="title">
25+
Welcome!
26+
</ThemedText>
27+
<Text className="text-red-600">Testing Native Wind!</Text>
28+
{/* new button test */}
29+
<Button variant='destructive'>
30+
<Text>Default button from library</Text>
31+
</Button>
32+
{/* end of new butt test */}
33+
<MoonStar />
2034
<HelloWave />
2135
</ThemedView>
2236
<ThemedView style={styles.stepContainer}>
2337
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
2438
<ThemedText>
25-
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
26-
Press{' '}
39+
Edit{" "}
40+
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{" "}
41+
to see changes. Press{" "}
2742
<ThemedText type="defaultSemiBold">
28-
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
29-
</ThemedText>{' '}
43+
{Platform.select({ ios: "cmd + d", android: "cmd + m" })}
44+
</ThemedText>{" "}
3045
to open developer tools.
3146
</ThemedText>
3247
</ThemedView>
3348
<ThemedView style={styles.stepContainer}>
3449
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
3550
<ThemedText>
36-
Tap the Explore tab to learn more about what's included in this starter app.
51+
Tap the Explore tab to learn more about what's included in this
52+
starter app.
3753
</ThemedText>
3854
</ThemedView>
3955
<ThemedView style={styles.stepContainer}>
4056
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
4157
<ThemedText>
42-
When you're ready, run{' '}
43-
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
44-
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
45-
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
58+
When you're ready, run{" "}
59+
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText>{" "}
60+
to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{" "}
61+
directory. This will move the current{" "}
62+
<ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
4663
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
4764
</ThemedText>
4865
</ThemedView>
@@ -52,8 +69,8 @@ export default function HomeScreen() {
5269

5370
const styles = StyleSheet.create({
5471
titleContainer: {
55-
flexDirection: 'row',
56-
alignItems: 'center',
72+
flexDirection: "row",
73+
alignItems: "center",
5774
gap: 8,
5875
},
5976
stepContainer: {
@@ -65,6 +82,6 @@ const styles = StyleSheet.create({
6582
width: 290,
6683
bottom: 0,
6784
left: 0,
68-
position: 'absolute',
85+
position: "absolute",
6986
},
7087
});

‎app/(tabs)/playground.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from "react";
2+
import type { RootState } from "~/redux/store";
3+
import { useSelector, useDispatch } from "react-redux";
4+
import { decrement, increment } from "~/redux/slices/counterSlice";
5+
import { Button } from "~/components/ui/button";
6+
import { Text } from "~/components/ui/text";
7+
import { View } from "react-native";
8+
import { useGetPokemonByNameQuery } from "~/redux/services/test";
9+
10+
export default function TabThreeScreen() {
11+
const count = useSelector((state: RootState) => state.counter.value);
12+
const dispatch = useDispatch();
13+
14+
// Using a query hook automatically fetches data and returns query values
15+
const { data, error, isLoading } = useGetPokemonByNameQuery("bulbasaur");
16+
// Individual hooks are also accessible under the generated endpoints:
17+
// const { data, error, isLoading } = pokemonApi.endpoints.getPokemonByName.useQuery('bulbasaur')
18+
19+
console.log('data', data)
20+
21+
return (
22+
<View className="w-100 flex justify-between">
23+
<Button variant="destructive" onPress={() => dispatch(increment())}>
24+
<Text>Increment</Text>
25+
</Button>
26+
<View>
27+
<Text className="text-red-400">{count.toString()}</Text>
28+
</View>
29+
<Button onPress={() => dispatch(decrement())}>
30+
<Text>Decrement</Text>
31+
</Button>
32+
33+
<View>
34+
<Text>
35+
mply dummy text of the printing and typesetting industry. Lorem Ipsum
36+
has been the industry's standard dummy text ever since the 1500s, when
37+
an unknown printer took a galley of type and scrambled it to make a
38+
type specimen book. It has survived not only five centuries, but also
39+
the leap into electron
40+
</Text>
41+
</View>
42+
{isLoading ? (
43+
<View>
44+
<Text>loading...</Text>
45+
</View>
46+
) : (
47+
<View>
48+
<Text>{JSON.stringify(data)}</Text>
49+
</View>
50+
)}
51+
</View>
52+
);
53+
}

‎app/+not-found.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Link, Stack } from 'expo-router';
22
import { StyleSheet } from 'react-native';
33

4-
import { ThemedText } from '@/components/ThemedText';
5-
import { ThemedView } from '@/components/ThemedView';
4+
import { ThemedText } from '~/components/ThemedText';
5+
import { ThemedView } from '~/components/ThemedView';
66

77
export default function NotFoundScreen() {
88
return (

‎app/_layout.tsx

Lines changed: 97 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,113 @@
1-
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
2-
import { useFonts } from 'expo-font';
3-
import { Stack } from 'expo-router';
4-
import * as SplashScreen from 'expo-splash-screen';
5-
import { useEffect } from 'react';
6-
import 'react-native-reanimated';
1+
import "~/global.css";
72

8-
import { useColorScheme } from '@/hooks/useColorScheme';
3+
import AsyncStorage from "@react-native-async-storage/async-storage";
4+
import { Theme, ThemeProvider } from "@react-navigation/native";
5+
import { SplashScreen, Stack } from "expo-router";
6+
import { StatusBar } from "expo-status-bar";
7+
import * as React from "react";
8+
import { Platform } from "react-native";
9+
import { NAV_THEME } from "~/lib/constants";
10+
import { useColorScheme } from "~/lib/useColorScheme";
11+
import { useEffect } from "react";
12+
import { store } from "~/redux/store";
13+
import { Provider } from "react-redux";
914

10-
// Prevent the splash screen from auto-hiding before asset loading is complete.
15+
const LIGHT_THEME: Theme = {
16+
dark: false,
17+
colors: NAV_THEME.light,
18+
};
19+
const DARK_THEME: Theme = {
20+
dark: true,
21+
colors: NAV_THEME.dark,
22+
};
23+
24+
export {
25+
// Catch any errors thrown by the Layout component.
26+
ErrorBoundary,
27+
} from "expo-router";
28+
29+
// Prevent the splash screen from auto-hiding before getting the color scheme.
1130
SplashScreen.preventAutoHideAsync();
1231

1332
export default function RootLayout() {
14-
const colorScheme = useColorScheme();
15-
const [loaded] = useFonts({
16-
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
17-
});
33+
const { colorScheme, setColorScheme, isDarkColorScheme } = useColorScheme();
34+
const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);
1835

1936
useEffect(() => {
20-
if (loaded) {
37+
(async () => {
38+
const theme = await AsyncStorage.getItem("theme");
39+
if (Platform.OS === "web") {
40+
// Adds the background color to the html element to prevent white background on overscroll.
41+
document.documentElement.classList.add("bg-background");
42+
}
43+
if (!theme) {
44+
AsyncStorage.setItem("theme", colorScheme);
45+
setIsColorSchemeLoaded(true);
46+
return;
47+
}
48+
const colorTheme = theme === "dark" ? "dark" : "light";
49+
if (colorTheme !== colorScheme) {
50+
setColorScheme(colorTheme);
51+
52+
setIsColorSchemeLoaded(true);
53+
return;
54+
}
55+
setIsColorSchemeLoaded(true);
56+
})().finally(() => {
2157
SplashScreen.hideAsync();
22-
}
23-
}, [loaded]);
58+
});
59+
}, []);
2460

25-
if (!loaded) {
61+
if (!isColorSchemeLoaded) {
2662
return null;
2763
}
2864

2965
return (
30-
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
31-
<Stack>
32-
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
33-
<Stack.Screen name="+not-found" />
34-
</Stack>
66+
<ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
67+
<Provider store={store}>
68+
<StatusBar style={isDarkColorScheme ? "light" : "dark"} />
69+
<Stack />
70+
</Provider>
3571
</ThemeProvider>
3672
);
3773
}
74+
75+
// old layout... don't delete, need to compare it to current layout.
76+
77+
// import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
78+
// import { useFonts } from 'expo-font';
79+
// import { Stack } from 'expo-router';
80+
// import * as SplashScreen from 'expo-splash-screen';
81+
// import { useEffect } from 'react';
82+
// import 'react-native-reanimated';
83+
84+
// import { useColorScheme } from '@/hooks/useColorScheme';
85+
86+
// // Prevent the splash screen from auto-hiding before asset loading is complete.
87+
// SplashScreen.preventAutoHideAsync();
88+
89+
// export default function RootLayout() {
90+
// const colorScheme = useColorScheme();
91+
// const [loaded] = useFonts({
92+
// SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
93+
// });
94+
95+
// useEffect(() => {
96+
// if (loaded) {
97+
// SplashScreen.hideAsync();
98+
// }
99+
// }, [loaded]);
100+
101+
// if (!loaded) {
102+
// return null;
103+
// }
104+
105+
// return (
106+
// <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
107+
// <Stack>
108+
// <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
109+
// <Stack.Screen name="+not-found" />
110+
// </Stack>
111+
// </ThemeProvider>
112+
// );
113+
// }

‎babel.config.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
module.exports = function (api) {
22
api.cache(true);
33
return {
4-
presets: ['babel-preset-expo'],
4+
presets: [
5+
["babel-preset-expo", { jsxImportSource: "nativewind" }],
6+
"nativewind/babel",
7+
],
58
};
6-
};
9+
};

‎components.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"platforms": "universal",
3+
"aliases": {
4+
"components": "~/components",
5+
"lib": "~/lib"
6+
}
7+
}

‎components/Collapsible.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import Ionicons from '@expo/vector-icons/Ionicons';
22
import { PropsWithChildren, useState } from 'react';
33
import { StyleSheet, TouchableOpacity, useColorScheme } from 'react-native';
44

5-
import { ThemedText } from '@/components/ThemedText';
6-
import { ThemedView } from '@/components/ThemedView';
7-
import { Colors } from '@/constants/Colors';
5+
import { ThemedText } from '~/components/ThemedText';
6+
import { ThemedView } from '~/components/ThemedView';
7+
import { Colors } from '~/constants/Colors';
88

99
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
1010
const [isOpen, setIsOpen] = useState(false);

‎components/HelloWave.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Animated, {
77
withSequence,
88
} from 'react-native-reanimated';
99

10-
import { ThemedText } from '@/components/ThemedText';
10+
import { ThemedText } from '~/components/ThemedText';
1111

1212
export function HelloWave() {
1313
const rotationAnimation = useSharedValue(0);

‎components/ParallaxScrollView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Animated, {
77
useScrollViewOffset,
88
} from 'react-native-reanimated';
99

10-
import { ThemedView } from '@/components/ThemedView';
10+
import { ThemedView } from '~/components/ThemedView';
1111

1212
const HEADER_HEIGHT = 250;
1313

0 commit comments

Comments
 (0)