Skip to content

Commit 7c9312f

Browse files
AlemTuzlakautofix-ci[bot]
AlemTuzlak
and
autofix-ci[bot]
authored
feat: improve accuracy of console logs and go to source (#139)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent a3c7803 commit 7c9312f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+9598
-1505
lines changed

‎.changeset/dirty-years-joke.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/devtools-event-client': patch
3+
---
4+
5+
fix issue with the client not working in react native

‎.changeset/major-lamps-float.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/devtools-vite': patch
3+
---
4+
5+
improved accuracy of go to source to go to exact column and also improved accuracy of enhanced console logs to go to exact console log location

‎examples/react-native/expo-basic/.cursor/mcp.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"mcpServers": {
3+
"RadonAi": {
4+
"url": "http://127.0.0.1:63266/mcp",
5+
"type": "http",
6+
"headers": {
7+
"nonce": "7a6ba1e0-1f15-4d68-90df-3a71371f2694"
8+
}
9+
}
10+
}
11+
}

‎examples/react-native/expo-basic/.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
.kotlin/
14+
*.orig.*
15+
*.jks
16+
*.p8
17+
*.p12
18+
*.key
19+
*.mobileprovision
20+
21+
# Metro
22+
.metro-health-check*
23+
24+
# debug
25+
npm-debug.*
26+
yarn-debug.*
27+
yarn-error.*
28+
29+
# macOS
30+
.DS_Store
31+
*.pem
32+
33+
# local env files
34+
.env*.local
35+
36+
# typescript
37+
*.tsbuildinfo
38+
39+
app-example
40+
41+
# generated native folders
42+
/ios
43+
/android

‎examples/react-native/expo-basic/.vscode/extensions.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "recommendations": ["expo.vscode-expo-tools"] }

‎examples/react-native/expo-basic/.vscode/settings.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"editor.codeActionsOnSave": {
3+
"source.fixAll": "explicit",
4+
"source.organizeImports": "explicit",
5+
"source.sortMembers": "explicit"
6+
}
7+
}

‎examples/react-native/expo-basic/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Welcome to your Expo app 👋
2+
3+
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
4+
5+
## Get started
6+
7+
1. Install dependencies
8+
9+
```bash
10+
npm install
11+
```
12+
13+
2. Start the app
14+
15+
```bash
16+
npx expo start
17+
```
18+
19+
In the output, you'll find options to open the app in a
20+
21+
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22+
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23+
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24+
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25+
26+
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27+
28+
## Get a fresh project
29+
30+
When you're ready, run:
31+
32+
```bash
33+
npm run reset-project
34+
```
35+
36+
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37+
38+
## Learn more
39+
40+
To learn more about developing your project with Expo, look at the following resources:
41+
42+
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43+
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44+
45+
## Join the community
46+
47+
Join our community of developers creating universal apps.
48+
49+
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50+
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

‎examples/react-native/expo-basic/app.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"expo": {
3+
"name": "expo-basic",
4+
"slug": "expo-basic",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "expobasic",
9+
"userInterfaceStyle": "automatic",
10+
"newArchEnabled": true,
11+
"ios": {
12+
"supportsTablet": true
13+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"backgroundColor": "#E6F4FE",
17+
"foregroundImage": "./assets/images/android-icon-foreground.png",
18+
"backgroundImage": "./assets/images/android-icon-background.png",
19+
"monochromeImage": "./assets/images/android-icon-monochrome.png"
20+
},
21+
"edgeToEdgeEnabled": true,
22+
"predictiveBackGestureEnabled": false
23+
},
24+
"web": {
25+
"output": "static",
26+
"favicon": "./assets/images/favicon.png"
27+
},
28+
"plugins": [
29+
"expo-router",
30+
[
31+
"expo-splash-screen",
32+
{
33+
"image": "./assets/images/splash-icon.png",
34+
"imageWidth": 200,
35+
"resizeMode": "contain",
36+
"backgroundColor": "#ffffff",
37+
"dark": {
38+
"backgroundColor": "#000000"
39+
}
40+
}
41+
]
42+
],
43+
"experiments": {
44+
"typedRoutes": true,
45+
"reactCompiler": true
46+
}
47+
}
48+
}

‎examples/react-native/expo-basic/app/(tabs)/_layout.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Tabs } from 'expo-router'
2+
import React from 'react'
3+
4+
import { HapticTab } from '@/components/haptic-tab'
5+
import { IconSymbol } from '@/components/ui/icon-symbol'
6+
import { Colors } from '@/constants/theme'
7+
import { useColorScheme } from '@/hooks/use-color-scheme'
8+
9+
export default function TabLayout() {
10+
const colorScheme = useColorScheme()
11+
12+
return (
13+
<Tabs
14+
screenOptions={{
15+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
16+
headerShown: false,
17+
tabBarButton: HapticTab,
18+
}}
19+
>
20+
<Tabs.Screen
21+
name="index"
22+
options={{
23+
title: 'Home',
24+
tabBarIcon: ({ color }) => (
25+
<IconSymbol size={28} name="house.fill" color={color} />
26+
),
27+
}}
28+
/>
29+
<Tabs.Screen
30+
name="explore"
31+
options={{
32+
title: 'Explore',
33+
tabBarIcon: ({ color }) => (
34+
<IconSymbol size={28} name="paperplane.fill" color={color} />
35+
),
36+
}}
37+
/>
38+
</Tabs>
39+
)
40+
}

‎examples/react-native/expo-basic/app/(tabs)/explore.tsx‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import { Image } from 'expo-image'
2+
import { Platform, StyleSheet } from 'react-native'
3+
4+
import { Collapsible } from '@/components/ui/collapsible'
5+
import { ExternalLink } from '@/components/external-link'
6+
import ParallaxScrollView from '@/components/parallax-scroll-view'
7+
import { ThemedText } from '@/components/themed-text'
8+
import { ThemedView } from '@/components/themed-view'
9+
import { IconSymbol } from '@/components/ui/icon-symbol'
10+
import { Fonts } from '@/constants/theme'
11+
12+
export default function TabTwoScreen() {
13+
return (
14+
<ParallaxScrollView
15+
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
16+
headerImage={
17+
<IconSymbol
18+
size={310}
19+
color="#808080"
20+
name="chevron.left.forwardslash.chevron.right"
21+
style={styles.headerImage}
22+
/>
23+
}
24+
>
25+
<ThemedView style={styles.titleContainer}>
26+
<ThemedText
27+
type="title"
28+
style={{
29+
fontFamily: Fonts.rounded,
30+
}}
31+
>
32+
Explore
33+
</ThemedText>
34+
</ThemedView>
35+
<ThemedText>
36+
This app includes example code to help you get started.
37+
</ThemedText>
38+
<Collapsible title="File-based routing">
39+
<ThemedText>
40+
This app has two screens:{' '}
41+
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{' '}
42+
and{' '}
43+
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
44+
</ThemedText>
45+
<ThemedText>
46+
The layout file in{' '}
47+
<ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
48+
sets up the tab navigator.
49+
</ThemedText>
50+
<ExternalLink href="https://docs.expo.dev/router/introduction">
51+
<ThemedText type="link">Learn more</ThemedText>
52+
</ExternalLink>
53+
</Collapsible>
54+
<Collapsible title="Android, iOS, and web support">
55+
<ThemedText>
56+
You can open this project on Android, iOS, and the web. To open the
57+
web version, press <ThemedText type="defaultSemiBold">w</ThemedText>{' '}
58+
in the terminal running this project.
59+
</ThemedText>
60+
</Collapsible>
61+
<Collapsible title="Images">
62+
<ThemedText>
63+
For static images, you can use the{' '}
64+
<ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
65+
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to
66+
provide files for different screen densities
67+
</ThemedText>
68+
<Image
69+
source={require('@/assets/images/react-logo.png')}
70+
style={{ width: 100, height: 100, alignSelf: 'center' }}
71+
/>
72+
<ExternalLink href="https://reactnative.dev/docs/images">
73+
<ThemedText type="link">Learn more</ThemedText>
74+
</ExternalLink>
75+
</Collapsible>
76+
<Collapsible title="Light and dark mode components">
77+
<ThemedText>
78+
This template has light and dark mode support. The{' '}
79+
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook
80+
lets you inspect what the user&apos;s current color scheme is, and so
81+
you can adjust UI colors accordingly.
82+
</ThemedText>
83+
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
84+
<ThemedText type="link">Learn more</ThemedText>
85+
</ExternalLink>
86+
</Collapsible>
87+
<Collapsible title="Animations">
88+
<ThemedText>
89+
This template includes an example of an animated component. The{' '}
90+
<ThemedText type="defaultSemiBold">
91+
components/HelloWave.tsx
92+
</ThemedText>{' '}
93+
component uses the powerful{' '}
94+
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
95+
react-native-reanimated
96+
</ThemedText>{' '}
97+
library to create a waving hand animation.
98+
</ThemedText>
99+
{Platform.select({
100+
ios: (
101+
<ThemedText>
102+
The{' '}
103+
<ThemedText type="defaultSemiBold">
104+
components/ParallaxScrollView.tsx
105+
</ThemedText>{' '}
106+
component provides a parallax effect for the header image.
107+
</ThemedText>
108+
),
109+
})}
110+
</Collapsible>
111+
</ParallaxScrollView>
112+
)
113+
}
114+
115+
const styles = StyleSheet.create({
116+
headerImage: {
117+
color: '#808080',
118+
bottom: -90,
119+
left: -35,
120+
position: 'absolute',
121+
},
122+
titleContainer: {
123+
flexDirection: 'row',
124+
gap: 8,
125+
},
126+
})

0 commit comments

Comments
 (0)