-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.tsx
124 lines (113 loc) · 3.23 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import React from 'react';
import LDClient from 'launchdarkly-react-native-client-sdk';
import { Text, View, Button, TextInput, Alert, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';
type Props = {};
type State = {
ldClient?: LDClient;
flagKey: string;
flagType: string;
};
export default class App extends React.Component<Props, State> {
constructor(props: {}) {
super(props);
this.state = {
ldClient: undefined,
flagKey: 'dev-test-flag',
flagType: 'bool',
};
}
async componentDidMount() {
try {
let client = new LDClient();
let config = {
mobileKey: 'your-mobile-key',
debugMode: true,
};
let user = { kind: 'user', key: 'user key' };
await client.configure(config, user);
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({ ldClient: client });
} catch (err) {
console.error(err);
}
}
async evalFlag() {
let res;
let client = this.state.ldClient;
if (client != undefined) {
if (this.state.flagType === 'bool') {
res = await client.boolVariation(this.state.flagKey, false);
} else if (this.state.flagType === 'string') {
res = await client.stringVariation(this.state.flagKey, '');
} else if (this.state.flagType === 'int') {
res = await client.numberVariation(this.state.flagKey, 0);
} else if (this.state.flagType === 'json') {
let obj = await client.jsonVariation(this.state.flagKey, {});
res = JSON.stringify(obj);
}
Alert.alert('LD Server Response', String(res));
}
}
render() {
return (
<View style={styles.container}>
{/* eslint-disable-next-line react-native/no-inline-styles */}
<Text style={{ fontWeight: 'bold' }}>LaunchDarkly React Native Typescript Example</Text>
<View>
<Text>Feature Key:</Text>
<TextInput
autoCapitalize="none"
style={styles.input}
onChangeText={(text) => this.setState({ flagKey: text })}
value={this.state.flagKey}
/>
<Picker
selectedValue={this.state.flagType}
onValueChange={(itemValue) => this.setState({ flagType: itemValue })}
>
<Picker.Item label="Boolean" value="bool" />
<Picker.Item label="String" value="string" />
<Picker.Item label="Integer" value="int" />
<Picker.Item label="Float" value="float" />
<Picker.Item label="JSON" value="json" />
</Picker>
<View style={styles.button}>
<Button title="Evaluate Flag" onPress={() => this.evalFlag()} />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
modal: {
flex: 1,
alignItems: 'center',
padding: 100,
},
input: {
height: 35,
width: 300,
borderColor: 'gray',
borderWidth: 1,
},
closeModal: {
marginTop: 10,
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
},
button: {
padding: 10,
},
buttons: {
flexDirection: 'row',
},
});