Skip to content

Commit de201a4

Browse files
abdelhamid-f-nasserabdelhamid-f-nasser
committed
feat: Support masking in example components
1 parent 1a03fd4 commit de201a4

File tree

1 file changed

+169
-83
lines changed

1 file changed

+169
-83
lines changed

‎examples/default/src/screens/user-steps/BasicComponentsScreen.tsx

Lines changed: 169 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ import {
1515
} from 'react-native';
1616
import Slider from '@react-native-community/slider';
1717
import { Center, HStack, ScrollView, VStack } from 'native-base';
18+
import Instabug from 'instabug-reactnative';
1819

1920
import { Screen } from '../../components/Screen';
2021
import { Section } from '../../components/Section';
2122
import { nativeBaseTheme } from '../../theme/nativeBaseTheme';
2223
import Icon from 'react-native-vector-icons/Ionicons';
24+
import { useRef } from 'react';
2325

2426
/**
2527
* A screen that demonstrates the usage of user steps with basic React Native components.
@@ -37,100 +39,184 @@ export const BasicComponentsScreen: React.FC = () => {
3739
};
3840
};
3941

42+
function maskAllViews() {
43+
// Mask Text
44+
Instabug.addPrivateView(textRef.current!);
45+
46+
// Mask Image
47+
Instabug.addPrivateView(imageRef.current!);
48+
49+
// Mask TextInput
50+
Instabug.addPrivateView(textInputRef.current!);
51+
52+
// Mask Button
53+
Instabug.addPrivateView(buttonRef.current!);
54+
55+
// Mask Pressable
56+
Instabug.addPrivateView(pressableRef.current!);
57+
58+
// Mask TouchableOpacity
59+
Instabug.addPrivateView(touchableOpacityRef.current!);
60+
61+
// Mask MultiText touchable opacity Button
62+
Instabug.addPrivateView(multiTextTouchableOpacityRef.current!);
63+
64+
// Mask Icon Pressable Button
65+
Instabug.addPrivateView(iconPressableButtonRef.current!);
66+
67+
// Mask Icon.Button
68+
Instabug.addPrivateView(iconButtonRef.current!);
69+
70+
// Mask A four TouchableOpacity Button
71+
Instabug.addPrivateView(fourTierTouchableOpacityButtonRef.current!);
72+
73+
// Mask Switch Button
74+
Instabug.addPrivateView(switchButtonRef.current!);
75+
76+
// Mask slider
77+
Instabug.addPrivateView(sliderRef.current!);
78+
79+
// Mask slider
80+
Instabug.addPrivateView(activityIndicatorRef.current!);
81+
}
82+
83+
const textRef = useRef<View>(null);
84+
const imageRef = useRef<Image>(null);
85+
const textInputRef = useRef<TextInput>(null);
86+
const buttonRef = useRef<Button>(null);
87+
const pressableRef = useRef<View>(null);
88+
const touchableOpacityRef = useRef<TouchableOpacity>(null);
89+
const multiTextTouchableOpacityRef = useRef<TouchableOpacity>(null);
90+
const iconPressableButtonRef = useRef<View>(null);
91+
const iconButtonRef = useRef<Icon.Button>(null);
92+
const fourTierTouchableOpacityButtonRef = useRef<TouchableOpacity>(null);
93+
const switchButtonRef = useRef<Switch>(null);
94+
const sliderRef = useRef<Slider>(null);
95+
const activityIndicatorRef = useRef<ActivityIndicator>(null);
96+
4097
return (
4198
<ScrollView>
42-
<Screen>
43-
<Section title="Text">
44-
<Text style={styles.text}>
45-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias tempore inventore quas
46-
cum cupiditate ratione, iusto itaque natus maiores fugit.
47-
</Text>
48-
</Section>
49-
50-
<Section title="Image">
51-
<Center>
52-
<Image
53-
source={require('../../images/logo.png')}
54-
style={[styles.image, { width: width / 2, height: width / 6 }]}
55-
/>
56-
</Center>
57-
</Section>
58-
59-
<Section title="Text Input">
60-
<TextInput placeholder="Enter your name" style={styles.textInput} />
61-
</Section>
62-
63-
<Section title="Button">
64-
<VStack space="xs">
65-
<Button onPress={onPress('Default Button')} title="Default Button" />
66-
67-
<Pressable onPress={onPress('Icon Pressable Button')} style={styles.button}>
68-
<HStack space={2} alignItems="center" justifyContent="center">
69-
<Icon name="alert-circle-outline" color="white" />
70-
<Text style={styles.buttonText}>Icon Pressable Button</Text>
71-
</HStack>
72-
</Pressable>
73-
74-
<TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
75-
<Text style={styles.buttonText}>Touchable Button</Text>
76-
</TouchableOpacity>
77-
78-
<TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
79-
<Text style={styles.buttonText}>Touchable Button</Text>
80-
<Text style={styles.buttonText}>Multiple Texts</Text>
81-
</TouchableOpacity>
82-
83-
<Pressable onPress={onPress('Touchable Opacity Button')} style={styles.button}>
84-
<Text style={styles.buttonText}>Pressable Button</Text>
85-
<View>
99+
<View>
100+
<Screen>
101+
<Section title="Text">
102+
<Text ref={textRef} style={styles.text}>
103+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias tempore inventore quas
104+
cum cupiditate ratione, iusto itaque natus maiores fugit.
105+
</Text>
106+
</Section>
107+
108+
<Section title="Image">
109+
<Center>
110+
<Image
111+
ref={imageRef}
112+
source={require('../../images/logo.png')}
113+
style={[styles.image, { width: width / 2, height: width / 6 }]}
114+
/>
115+
</Center>
116+
</Section>
117+
118+
<Section title="Text Input">
119+
<TextInput ref={textInputRef} placeholder="Enter your name" style={styles.textInput} />
120+
</Section>
121+
122+
<Section title="Button">
123+
<VStack space="xs">
124+
<Button ref={buttonRef} onPress={onPress('Default Button')} title="Default Button" />
125+
126+
<Pressable
127+
ref={pressableRef}
128+
onPress={onPress('Icon Pressable Button')}
129+
style={styles.button}>
86130
<HStack space={2} alignItems="center" justifyContent="center">
87131
<Icon name="alert-circle-outline" color="white" />
88132
<Text style={styles.buttonText}>Icon Pressable Button</Text>
89133
</HStack>
90-
</View>
91-
</Pressable>
92-
93-
<Icon.Button
94-
style={styles.button}
95-
name="alert-circle-outline"
96-
backgroundColor="#4A99E9"
97-
size={12}
98-
onPress={onPress('Icon.Button')}>
99-
<Text style={styles.buttonText}>Icon Button</Text>
100-
</Icon.Button>
101-
102-
<TouchableOpacity onPress={onPress('Touchable Opacity Button')} style={styles.button}>
103-
<Text style={styles.buttonText}>1 Tier</Text>
104-
<View>
134+
</Pressable>
135+
136+
<TouchableOpacity
137+
ref={touchableOpacityRef}
138+
onPress={onPress('Touchable Opacity Button')}
139+
style={styles.button}>
140+
<Text style={styles.buttonText}>Touchable Button</Text>
141+
</TouchableOpacity>
142+
143+
<TouchableOpacity
144+
ref={multiTextTouchableOpacityRef}
145+
onPress={onPress('Touchable Opacity Button')}
146+
style={styles.button}>
147+
<Text style={styles.buttonText}>Touchable Button</Text>
148+
<Text style={styles.buttonText}>Multiple Texts</Text>
149+
</TouchableOpacity>
150+
151+
<Pressable
152+
ref={iconPressableButtonRef}
153+
onPress={onPress('Touchable Opacity Button')}
154+
style={styles.button}>
155+
<Text style={styles.buttonText}>Pressable Button</Text>
156+
<View>
157+
<HStack space={2} alignItems="center" justifyContent="center">
158+
<Icon name="alert-circle-outline" color="white" />
159+
<Text style={styles.buttonText}>Icon Pressable Button</Text>
160+
</HStack>
161+
</View>
162+
</Pressable>
163+
164+
<Icon.Button
165+
style={styles.button}
166+
ref={iconButtonRef}
167+
name="alert-circle-outline"
168+
backgroundColor="#4A99E9"
169+
size={12}
170+
onPress={onPress('Icon.Button')}>
171+
<Text style={styles.buttonText}>Icon Button</Text>
172+
</Icon.Button>
173+
174+
<TouchableOpacity
175+
ref={fourTierTouchableOpacityButtonRef}
176+
onPress={onPress('Touchable Opacity Button')}
177+
style={styles.button}>
178+
<Text style={styles.buttonText}>1 Tier</Text>
105179
<View>
106180
<View>
107-
<Text style={styles.buttonText}>4 Tier Nested Button</Text>
181+
<View>
182+
<Text style={styles.buttonText}>4 Tier Nested Button</Text>
183+
</View>
108184
</View>
109185
</View>
110-
</View>
111-
</TouchableOpacity>
112-
</VStack>
113-
</Section>
114-
115-
<Section title="Switch">
116-
<HStack alignItems="center" space="xs">
117-
<Switch
118-
value={isSwitchOn}
119-
onValueChange={setIsSwitchOn}
120-
accessibilityLabel="Is Switch On"
186+
</TouchableOpacity>
187+
</VStack>
188+
</Section>
189+
190+
<Section title="Switch">
191+
<HStack alignItems="center" space="xs">
192+
<Switch
193+
ref={switchButtonRef}
194+
value={isSwitchOn}
195+
onValueChange={setIsSwitchOn}
196+
accessibilityLabel="Is Switch On"
197+
/>
198+
<Text>Is Switch On</Text>
199+
</HStack>
200+
</Section>
201+
202+
<Section title="Slider">
203+
<Slider
204+
ref={sliderRef}
205+
minimumValue={0}
206+
maximumValue={100}
207+
accessibilityLabel="Progress Bar"
121208
/>
122-
<Text>Is Switch On</Text>
123-
</HStack>
124-
</Section>
125-
126-
<Section title="Slider">
127-
<Slider minimumValue={0} maximumValue={100} accessibilityLabel="Progress Bar" />
128-
</Section>
129-
130-
<Section title="Activity Indicator">
131-
<ActivityIndicator size="large" />
132-
</Section>
133-
</Screen>
209+
</Section>
210+
211+
<Section title="Activity Indicator">
212+
<ActivityIndicator ref={activityIndicatorRef} size="large" />
213+
</Section>
214+
215+
<Section title="Private Views">
216+
<Button title="add Private Views" onPress={() => maskAllViews()} />
217+
</Section>
218+
</Screen>
219+
</View>
134220
</ScrollView>
135221
);
136222
};

0 commit comments

Comments
 (0)