diff --git a/examples/default/src/components/InputField.tsx b/examples/default/src/components/InputField.tsx index 91e789f80..1a5700c27 100644 --- a/examples/default/src/components/InputField.tsx +++ b/examples/default/src/components/InputField.tsx @@ -1,26 +1,48 @@ import React, { forwardRef } from 'react'; -import { KeyboardTypeOptions, StyleSheet, TextInput } from 'react-native'; +import { KeyboardTypeOptions, StyleSheet, TextInput, View } from 'react-native'; +import { Text } from 'native-base'; interface InputFieldProps { placeholder?: string; value?: string; onChangeText?: (text: string) => void; keyboardType?: KeyboardTypeOptions; + errorText?: string; + maxLength?: number; + accessibilityLabel?: string; + flex?: number; } export const InputField = forwardRef( - ({ placeholder, value, onChangeText, keyboardType, ...restProps }, ref) => { + ( + { + placeholder, + value, + onChangeText, + accessibilityLabel, + maxLength, + keyboardType, + errorText, + ...restProps + }, + ref, + ) => { return ( - + + + {errorText ? {errorText} : null} + ); }, ); @@ -35,4 +57,7 @@ const styles = StyleSheet.create({ fontSize: 16, borderRadius: 5, }, + errorText: { + color: '#ff0000', + }, }); diff --git a/examples/default/src/navigation/RootTab.tsx b/examples/default/src/navigation/RootTab.tsx index d429cc011..f085576a9 100644 --- a/examples/default/src/navigation/RootTab.tsx +++ b/examples/default/src/navigation/RootTab.tsx @@ -8,6 +8,7 @@ import Icon from 'react-native-vector-icons/Ionicons'; import { SettingsScreen } from '../screens/SettingsScreen'; import { HomeStackNavigator } from './HomeStack'; +import { Platform } from 'react-native'; export type RootTabParamList = { HomeStack: undefined; @@ -22,7 +23,7 @@ const createTabBarIcon = (name: string): BottomTabNavigationOptions['tabBarIcon' export const RootTabNavigator: React.FC = () => { return ( - + { const [color, setColor] = useState('1D82DC'); + const [userEmail, setUserEmail] = useState(''); + const [userName, setUserName] = useState(''); + const [userID, setUserID] = useState(''); + const [userAttributeKey, setUserAttributeKey] = useState(''); + const [userAttributeValue, setUserAttributeValue] = useState(''); + const toast = useToast(); + const [userAttributesFormError, setUserAttributesFormError] = useState({}); + + const validateUserAttributeForm = () => { + const errors: any = {}; + if (userAttributeValue.length === 0) { + errors.userAttributeValue = 'Value is required'; + } + if (userAttributeKey.length === 0) { + errors.userAttributeKey = 'Key is required'; + } + setUserAttributesFormError(errors); + return Object.keys(errors).length === 0; + }; + const styles = StyleSheet.create({ + inputWrapper: { + padding: 4, + flex: 1, + }, + + formContainer: { + flexDirection: 'row', + alignItems: 'stretch', + }, + }); + + const clearUserAttributes = () => { + Instabug.clearAllUserAttributes(); + toast.show({ + description: 'User Attributes cleared successfully', + }); + }; + + const saveUserAttributes = () => { + if (validateUserAttributeForm()) { + Instabug.setUserAttribute(userAttributeKey, userAttributeValue); + toast.show({ + description: 'User Attributes added successfully', + }); + setUserAttributeKey(''); + setUserAttributeValue(''); + } + }; + + const logout = () => { + Instabug.logOut(); + toast.show({ + description: 'User logout successfully', + }); + setUserID(''); + setUserName(''); + setUserEmail(''); + }; + + const identifyUser = () => { + Instabug.identifyUser(userEmail, userName, userID); + setUserID(''); + setUserName(''); + setUserEmail(''); + toast.show({ + description: 'User identified successfully', + }); + }; return ( - - - { - setColor(value); - if (/^[0-9A-F]{6}$/i.test(value)) { - Instabug.setPrimaryColor(`#${value}`); - } + + + + - - + + + + + # + { + setColor(value); + if (/^[0-9A-F]{6}$/i.test(value)) { + Instabug.setPrimaryColor(`#${value}`); + } + }} + /> + + + + +