Skip to content

Commit ece4ed3

Browse files
ccschmitz-launchdarklyccschmitz-launchdarkly
authored
React native Observe plugin
1 parent 5756ec4 commit ece4ed3

Some content is hidden

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

71 files changed

+6403
-951
lines changed

‎.changeset/calm-dragons-trade.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@launchdarkly/observability-react-native': minor
3+
---
4+
5+
initial release of RN observability plugin

‎e2e/react-native-otel/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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

‎e2e/react-native-otel/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# React Native OpenTelemetry Demo
2+
3+
This is a React Native application that demonstrates the LaunchDarkly Observability React Native SDK.
4+
5+
## Getting Started
6+
7+
1. **Install dependencies**:
8+
```bash
9+
yarn install
10+
```
11+
12+
2. **Start the OTel collector**:
13+
```bash
14+
yarn otel:start
15+
```
16+
17+
3. **Configure LaunchDarkly** (optional):
18+
- Adjust OTLP endpoint and configuration as needed
19+
20+
4. **Run the app** (remember to set your SDK key):
21+
```bash
22+
export LAUNCHDARKLY_MOBILE_KEY=<your_mobile_sdk_key>
23+
24+
# Start the Metro bundler
25+
yarn start
26+
27+
# Build and run in a specific simulator
28+
yarn ios:run
29+
```
30+
31+
## Configuration
32+
33+
### LaunchDarkly Setup
34+
35+
The observability plugin is configured in `lib/launchdarkly.ts`.

‎e2e/react-native-otel/app.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = ({ config }) => {
2+
return {
3+
...config,
4+
extra: {
5+
...(config.extra ?? {}),
6+
sdkKey: process.env.LAUNCHDARKLY_MOBILE_KEY,
7+
},
8+
}
9+
}

‎e2e/react-native-otel/app.json‎

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

‎e2e/react-native-otel/app/(tabs)/_layout.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Tabs } from 'expo-router'
2+
import React from 'react'
3+
import { Platform } from 'react-native'
4+
5+
import { HapticTab } from '@/components/HapticTab'
6+
import { IconSymbol } from '@/components/ui/IconSymbol'
7+
import TabBarBackground from '@/components/ui/TabBarBackground'
8+
import { Colors } from '@/constants/Colors'
9+
import { useColorScheme } from '@/hooks/useColorScheme'
10+
11+
export default function TabLayout() {
12+
const colorScheme = useColorScheme()
13+
14+
return (
15+
<Tabs
16+
screenOptions={{
17+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
18+
headerShown: false,
19+
tabBarButton: HapticTab,
20+
tabBarBackground: TabBarBackground,
21+
tabBarStyle: Platform.select({
22+
ios: {
23+
// Use a transparent background on iOS to show the blur effect
24+
position: 'absolute',
25+
},
26+
default: {},
27+
}),
28+
}}
29+
>
30+
<Tabs.Screen
31+
name="index"
32+
options={{
33+
title: 'Home',
34+
tabBarIcon: ({ color }) => (
35+
<IconSymbol size={28} name="house.fill" color={color} />
36+
),
37+
}}
38+
/>
39+
</Tabs>
40+
)
41+
}

‎e2e/react-native-otel/app/(tabs)/explore.tsx‎

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

0 commit comments

Comments
 (0)