react-native#Switch JavaScript Examples
The following examples show how to use
react-native#Switch.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AddAssets.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<View style={itemStyles.wrap}>
<FastImage style={itemStyles.icon} source={{ uri: this.coin.icon }} />
<View style={itemStyles.container}>
<View style={itemStyles.row}>
<View style={itemStyles.balanceWrap}>
<View style={itemStyles.nameWrap}>
<Text style={itemStyles.name}>{this.coin.name}</Text>
{this.icon && <Image source={this.icon} />}
</View>
<Text style={itemStyles.balance}>
{i18n.t("wallet-coin-balance")}：
{toFixedLocaleString(this.coin.balance, this.coin instanceof BTCCoin ? 8 : 4)}
</Text>
</View>
<Switch onValueChange={this._onValueChange} value={this.coin.display} />
</View>
</View>
</View>
);
}
Example #2
| Source File: TypeFilterRow.js From discovery-mobile-ui with MIT License | 6 votes |
|
TypeFilterRow = ({
resourceType, label, typeIsEnabled, toggleResourceTypeFilterAction, disabled,
}) => (
<View style={styles.row}>
<Text style={styles.label}>{label}</Text>
<Switch
trackColor={{
false: Colors.mediumgrey,
true: Platform.OS === 'ios' ? Colors.primary : Colors.primaryLight,
}}
thumbColor={(Platform.OS === 'ios') ? 'white' : Colors[(typeIsEnabled ? 'primary' : 'primaryLight')]}
onValueChange={() => toggleResourceTypeFilterAction(resourceType)}
value={typeIsEnabled}
disabled={disabled}
/>
</View>
)
Example #3
| Source File: forms.js From actual with MIT License | 6 votes |
|
export function BooleanField({ value, onUpdate, style }) {
return (
<Switch
value={value}
onValueChange={onUpdate}
style={[
{
marginHorizontal: EDITING_PADDING
},
style
]}
/>
);
}
Example #4
| Source File: FocusableSwitch.js From react-native-tv-demo with MIT License | 6 votes |
|
FocusableSwitch = forwardRef((props, ref) => {
const [focused, setFocused] = useState(false);
let color = props.color;
if (focused && props.colorFocused) {
color = props.colorFocused;
}
return (
<Switch
{...props}
ref={ref}
onKeyDown={(event) => {
console.log(event.key);
if (event.key && event.key === 'Enter') {
if (props.onValueChange) {
props.onValueChange();
}
}
}}
onFocus={(event) => {
console.log('focus: ' + props.nativeID);
setFocused(true);
if (props.onFocus) {
props.onFocus(event);
}
}}
onBlur={(event) => {
setFocused(false);
if (props.onBlur) {
props.onBlur(event);
}
}}
trackColor={{true: color, false: color}}
thumbColor={color}
/>
);
})
Example #5
| Source File: ListItem.js From juken with MIT License | 6 votes |
|
ListItemComponent = props => {
const colorScheme = useColorScheme();
return (
<ListItem
{...props}
onPress={() => {
if (typeof props?.onPress === 'function') props?.onPress();
if (typeof props?.switch?.onValueChange === 'function') props?.switch?.onValueChange();
}}
>
{props.leftIcon && <View style={[styles.icon, colorScheme === 'light' ? null : styles.icon_dark]}>{props.leftIcon}</View>}
<ListItem.Content style={colorScheme === 'light' ? null : styles.container_dark}>
<ListItem.Title style={colorScheme === 'light' ? styles.title : styles.title_dark}>{props.title}</ListItem.Title>
{props.subtitle && (
<Text style={[styles.subtitle, colorScheme === 'light' ? null : styles.subtitle_dark]}>{props.subtitle}</Text>
)}
</ListItem.Content>
{props.rightIcon && <View style={[styles.icon, colorScheme === 'light' ? null : styles.icon_dark]}>{props.rightIcon}</View>}
{!isWeb() && props.switch && <Switch {...props.switch} />}
{isWeb() && props.switch && <View><Text>{props?.switch?.value ? "On" : "Off"}</Text></View>}
{props.picker && <RNPickerSelect style={pickerStyles} {...props.picker} />}
</ListItem>
)
}
Example #6
| Source File: theme-switcher.js From polaris with Apache License 2.0 | 6 votes |
|
ThemeSwitcher = () => {
const { toggleTheme } = React.useContext(ThemeActionsContext);
const theme = useTheme();
return (
<Container>
<Text>Switch theme</Text>
<Switch onValueChange={toggleTheme} value={theme.name !== 'light'} testID="theme-switch" />
</Container>
);
}
Example #7
| Source File: index.web.jsx From polaris with Apache License 2.0 | 6 votes |
|
export default function Header() {
const { t } = useTranslation()
const { toggleTheme } = useContext(ThemeActionsContext)
const theme = useTheme()
return (
<Wrapper>
<Left>
<Link title={t('home:title')} path={'/'} />
</Left>
<Center>
<ThemeText>{t('nav:topCenter')}</ThemeText>
</Center>
<Right>
<Link title={t('home:settingsButton')} path={'/settings'} />
<Switch
onValueChange={toggleTheme}
value={theme.name !== 'light'}
testID="theme-switch"
/>
</Right>
</Wrapper>
)
}
Example #8
| Source File: MineScreen.js From RRWallet with MIT License | 5 votes |
|
renderCommonSection() {
const biometric = i18n.select({
zh:
(DeviceSecurity.HDSecurityType === "FaceID" ? i18n.t("mine-item-faceid") : i18n.t("mine-item-touchid")) +
i18n.t("mine-item-unlock"),
en: "Biometric Verification",
});
return [
<SectionHeader title={i18n.t("mine-section-common")} />,
<Cell
title={i18n.t("mine-item-lockpwd")}
detail={DeviceSecurity.lockScreenPwdEnable ? i18n.t("common-status-open") : i18n.t("common-status-close")}
onPress={this.onLockScreenPwdValueChange}
source={require("@img/mine/mine_lock.png")}
containerStyle={styles.cellContainer}
titleStyle={styles.cellText}
/>,
<Separator />,
DeviceSecurity.HDSecurityCapability ? (
<Cell
title={biometric}
hideRightArrow={true}
source={require("@img/mine/mine_faceid.png")}
containerStyle={styles.cellContainer}
titleStyle={styles.cellText}
rightNode={<Switch value={DeviceSecurity.HDSecurityEnable} onValueChange={this.onHDSecurityValueChange} />}
/>
) : null,
DeviceSecurity.HDSecurityCapability ? <Separator /> : null,
<Cell
title={i18n.t("mine-item-currency")}
detail={CoinStore.currency === CURRENCY_TYPE_CNY ? i18n.t("mine-currency-rmb") : i18n.t("mine-currency-usd")}
onPress={this.goCurrency}
source={require("@img/mine/mine_currency.png")}
containerStyle={styles.cellContainer}
titleStyle={styles.cellText}
/>,
<Separator />,
<Cell
title={i18n.t("mine-item-contact")}
onPress={this.goConcatList}
source={require("@img/mine/mine_contact.png")}
containerStyle={styles.cellContainer}
titleStyle={styles.cellText}
/>,
<Separator />,
<Cell
title={i18n.t("mine-item-language")}
detail={i18n.select({ zh: "简体中文", en: "English" })}
onPress={this.goLanguage}
source={require("@img/mine/mine_language.png")}
containerStyle={styles.cellContainer}
titleStyle={styles.cellText}
/>,
<Separator />,
<Cell
title={i18n.t("mine-item-about")}
onPress={this.goAbout}
source={require("@img/mine/mine_about.png")}
containerStyle={styles.cellContainer}
titleStyle={styles.cellText}
rightNode={!!AppInfo.hasNewerVersion && <View style={styles.redDot} />}
/>,
];
}
Example #9
| Source File: Theme.js From RRWallet with MIT License | 5 votes |
|
Switch.defaultProps.trackColor = theme.borderColor;
Example #10
| Source File: Theme.js From RRWallet with MIT License | 5 votes |
|
Switch.defaultProps.style = Platform.select({
ios: {
transform: [{ scaleX: 0.9 }, { scaleY: 0.9 }],
},
});
Example #11
| Source File: SettingsScreen.js From pineapple-reactNative with MIT License | 5 votes |
|
SettingsScreen = () => {
// const { navigation } = props;
const [
badgingEnabled,
setBadgingEnabled,
] = useState(false);
const [
cameraEnabled,
setCameraEnabled,
] = useState(true);
const [
cameraRollEnabled,
setCameraRollEnabled,
] = useState(true);
const badgingSwitch = () => setBadgingEnabled((previousState) => !previousState);
const cameraSwitch = () => setCameraEnabled((previousState) => !previousState);
const cameraRollSwitch = () => setCameraRollEnabled((previousState) => !previousState);
return (
<View style={styles.container}>
<View style={styles.header} />
<View style={styles.body}>
<View style={styles.settingsList}>
<Text style={styles.settingSectionHeader}>APP BADGING</Text>
<View
style={styles.settingBackground}
>
<Text style={styles.settingText}>Enable App Badging</Text>
<Switch
trackColor={{ false: '#C4C4C4', true: '#4CB098' }}
thumbColor={badgingEnabled ? '#fff' : '#fff'}
ios_backgroundColor="#fff"
onValueChange={badgingSwitch}
style={{ marginRight: 15, }}
value={badgingEnabled}
/>
</View>
<Text style={styles.settingSectionHeader}>CAMERA</Text>
<View
style={styles.settingBackground}
>
<Text style={styles.settingText}>Allow Camera Access</Text>
<Switch
trackColor={{ false: '#C4C4C4', true: '#4CB098' }}
thumbColor={cameraEnabled ? '#fff' : '#fff'}
ios_backgroundColor="#fff"
onValueChange={cameraSwitch}
style={{ marginRight: 15, }}
value={cameraEnabled}
/>
</View>
<View
style={styles.settingBackground}
>
<Text style={styles.settingText}>Allow Camera Roll Access</Text>
<Switch
trackColor={{ false: '#C4C4C4', true: '#4CB098' }}
thumbColor={cameraRollEnabled ? '#fff' : '#fff'}
ios_backgroundColor="#fff"
onValueChange={cameraRollSwitch}
style={{ marginRight: 15, }}
value={cameraRollEnabled}
/>
</View>
<Text style={styles.cameraMessage}>
Camera roll is diabled on this device.
It can be enabled by sliding the toggle above to on.
</Text>
</View>
</View>
</View>
);
}
Example #12
| Source File: App.js From react-native-credit-card-input-plus with MIT License | 5 votes |
|
render() {
return (
<View style={s.container}>
<Switch
style={s.switch}
onValueChange={this._setUseLiteCreditCardInput}
value={this.state.useLiteCreditCardInput} />
{ this.state.useLiteCreditCardInput ?
(
<LiteCreditCardInput
autoFocus
inputStyle={s.input}
validColor={"black"}
invalidColor={"red"}
placeholderColor={"darkgray"}
onFocus={this._onFocus}
onChange={this._onChange} />
) : (
<CreditCardInput
autoFocus
requiresName
requiresCVC
requiresPostalCode
labelStyle={s.label}
inputStyle={s.input}
validColor={"black"}
invalidColor={"red"}
placeholderColor={"darkgray"}
onFocus={this._onFocus}
onChange={this._onChange} />
)
}
</View>
);
}
Example #13
| Source File: Setting.js From rn-webrtc-arkit-integration with MIT License | 4 votes |
|
export default function Settings(props) {
const modal = useRef(null)
const { onChange } = props
const [roomId, setRoomId] = useState('')
const [debug, setDebug] = useState(__DEV__)
const [arEnabled, setAREnabled] = useState(true)
const [faceTracking, setFaceTracking] = useState(false)
useEffect(() => {
AsyncStorage.getItem('roomId').then(setRoomId)
}, [])
useEffect(() => {
AsyncStorage.setItem('roomId', roomId || '').then(() => {
onChange('roomId', roomId)
})
}, [onChange, roomId])
useEffect(() => {
onChange('debug', debug)
}, [onChange, debug])
useEffect(() => {
onChange('arEnabled', arEnabled)
}, [onChange, arEnabled])
useEffect(() => {
onChange('faceTracking', faceTracking)
}, [onChange, faceTracking])
const handleRoomIdChange = useMemo(
() =>
debounce(id => {
if (roomId !== id) {
setRoomId(id)
}
}, 2e3),
[roomId, setRoomId],
)
return (
<>
<SafeAreaView style={styles.bottomWrap}>
<TouchableOpacity
style={styles.button}
onPress={() => {
if (modal.current) {
modal.current.open()
}
}}
>
<Text style={styles.buttonText}>Settings</Text>
</TouchableOpacity>
</SafeAreaView>
<Modalize ref={modal} modalStyle={styles.modal}>
<Text style={styles.title}>Settings</Text>
<View style={styles.roomId}>
<Text style={styles.field}>Room ID (WebRTC)</Text>
<TextInput
style={styles.fieldInput}
onChangeText={handleRoomIdChange}
defaultValue={roomId}
/>
</View>
{isARWorldTrackingSupported() && (
<TouchableOpacity
style={styles.switch}
onPress={() => setAREnabled(val => !val)}
>
<Text style={styles.field}>Enable AR scene</Text>
<Switch value={arEnabled} onValueChange={setAREnabled} />
</TouchableOpacity>
)}
{isARWorldTrackingSupported() && (
<TouchableOpacity
style={styles.switch}
onPress={() => setDebug(val => !val)}
>
<Text style={styles.field}>Debug AR scene</Text>
<Switch value={debug} onValueChange={setDebug} />
</TouchableOpacity>
)}
{isARFaceTrackingSupported() && (
<TouchableOpacity
style={styles.switch}
onPress={() => setFaceTracking(val => !val)}
>
<Text style={styles.field}>Face Tracking Example</Text>
<Switch value={faceTracking} onValueChange={setFaceTracking} />
</TouchableOpacity>
)}
<View style={styles.textContainer}>
<Text style={styles.text}>Visit</Text>
<TouchableOpacity onPress={() => Linking.openURL(readme)}>
<Text style={styles.link}> this website </Text>
</TouchableOpacity>
<Text style={styles.text}>for more information.</Text>
</View>
</Modalize>
</>
)
}
Example #14
| Source File: BottomSheetMe.js From pandoa with GNU General Public License v3.0 | 4 votes |
|
function BottomSheetMe(props) {
const bottomSheetRef = useRef();
const [trackingStatus, setTrackingStatus] = useState(false);
const toggleSwitch = e => {
if (e === true) {
startLocationTracking();
setTrackingStatus(true);
} else {
stopLocationTracking();
setTrackingStatus(false);
}
console.log("toggleSwitch", e);
};
const { contentPosition, filteredWarnings, navigation } = props;
const renderInnerDetails = () => {
return (
<View style={styles.panelInner}>
<View style={styles.buttonWrapper}>
<LargeButton>
<View style={styles.switchTracking}>
<View style={styles.description}>
<Text>Enable tracking</Text>
<Text style={styles.subText}>
This will record your movement every 5 min
</Text>
</View>
<Switch onValueChange={toggleSwitch} value={trackingStatus} />
</View>
</LargeButton>
</View>
<View style={styles.buttonWrapper}>
<LargeButton>
<MaterialCommunityIcons
name="file-import"
size={33}
color={commonColor.brandPrimary}
/>
<Text>Import </Text>
</LargeButton>
<Share>
<LargeButton>
<MaterialCommunityIcons
name="database-export"
size={33}
color={commonColor.brandSuccess}
/>
<Text>Export</Text>
</LargeButton>
</Share>
</View>
<View style={styles.buttonWrapper}>
<LargeButton>
<View style={styles.switchTracking}>
<View style={styles.description}>
<Text>Remove points</Text>
<Text style={styles.subText}>
Remove points from your route
</Text>
</View>
<MaterialCommunityIcons
name="chevron-right"
size={33}
color={commonColor.textColorLight}
/>
</View>
</LargeButton>
</View>
</View>
);
};
const renderInnerHeader = () => {
return (
<>
<View style={styles.headerShadow} />
<View style={styles.headerInner}>
<View style={styles.panelHeader}>
<View style={styles.panelHandle} />
</View>
<View style={styles.panelTitleWrapper}>
<Text style={styles.panelTitle}>My tracks</Text>
</View>
</View>
</>
);
};
return (
<BottomSheet
ref={bottomSheetRef}
contentPosition={contentPosition}
snapPoints={[60, 338]}
renderContent={renderInnerDetails}
renderHeader={renderInnerHeader}
/>
);
}
Example #15
| Source File: CollectionInputScreen.js From discovery-mobile-ui with MIT License | 4 votes |
|
CollectionInputScreen = ({
collection,
createCollectionAction,
selectCollectionAction,
editCollectionDetailsAction,
creatingCollection,
collectionsLabels,
collections,
renameCollectionAction,
}) => {
const navigation = useNavigation();
const [title, onChangeTitle] = useState(creatingCollection ? DEFAULT_COLLECTION_NAME : collection.label); // eslint-disable-line max-len
const [purpose, onChangePurpose] = useState(creatingCollection ? '' : collection?.purpose);
const [current, currentSelection] = useState(creatingCollection ? false : collection?.current);
const [urgent, urgentSelection] = useState(creatingCollection ? false : collection?.urgent);
const [newCollectionID, setCollectionID] = useState('');
const [isAddingCollection, setIsAddingCollection] = useState(false);
const [collectionsDialogText, setCollectionsDialogText] = useState(null);
const [open, setOpen] = useState(false);
const [hasTextValue, setHasTextValue] = useState(false);
const [sameName, setSameName] = useState(false);
const [moveToCatalog, setMoveToCatalog] = useState(false);
const itemsList = [
];
const itemNames = [];
const collectionNames = [];
if (Object.keys(collections).length > 0) {
Object.keys(collections).forEach((key) => {
if (collections[key] != null) {
collectionNames.push(collections[key].label);
for (let j = 0; j < collections[key].tags.length; j += 1) {
if (!itemNames.includes(collections[key].tags[j])) {
itemNames.push(collections[key].tags[j]);
}
}
}
});
}
for (let i = 0; i < itemNames.length; i += 1) {
itemsList.push({ label: itemNames[i], value: itemNames[i] });
}
const [items, setItems] = useState(itemsList);
const [value, setValue] = useState(creatingCollection ? [] : collection.tags);
const discardInputAlert = () => {
Alert.alert(
'Discard Edits',
'Are you sure you want to discard edits to this collection?',
[
{
text: 'Cancel',
onPress: () => {},
style: 'cancel',
},
{
text: 'Discard',
onPress: () => handleCloseInput(),
style: 'destructive',
},
],
);
};
const handleCloseInput = ({ alert }) => {
if (alert) {
discardInputAlert();
}
};
const handleSave = () => {
if (creatingCollection) {
if (!collectionNames.includes(title)) {
if (hasTextValue) {
if (hasInputErrors({ text: title, isRename: false, label: title })) {
return;
}
createCollectionAction(title);
setIsAddingCollection(true);
}
}
} else {
if (hasInputErrors({ text: title, isRename: true, label: title })) {
return;
}
renameCollectionAction(newCollectionID, title);
editCollectionDetailsAction(purpose, value, (current || urgent), urgent);
}
};
const saveCollection = () => {
handleSave();
navigation.navigate('CollectionsList');
};
const saveAndContinue = () => {
if (creatingCollection) {
if (!collectionNames.includes(title)) {
if (hasTextValue) {
if (hasInputErrors({ text: title, isRename: false, label: title })) {
return;
}
createCollectionAction(title);
setIsAddingCollection(true);
}
}
} else {
if (hasInputErrors({ text: title, isRename: true, label: title })) {
return;
}
renameCollectionAction(newCollectionID, title);
editCollectionDetailsAction(purpose, value, (current || urgent), urgent);
}
setMoveToCatalog(true);
//
};
const discardChanges = () => {
setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DISCARD]);
};
const discardChangesCreate = () => {
setCollectionsDialogText(CollectionsDialogText[COLLECTIONS_DIALOG_ACTIONS.DISCARD_CREATE]);
};
// selectCollectionAction(title);
// console.log(collection)
// collection.label = title
// collection.tags = tags
useEffect(() => {
if (Object.keys(collections).length > 0) {
setCollectionID(Object.keys(collections)[Object.keys(collections).length - 1]);
if (isAddingCollection) {
selectCollectionAction(Object.keys(collections)[Object.keys(collections).length - 1]);
editCollectionDetailsAction(purpose, value, (current || urgent), urgent);
setIsAddingCollection(false);
}
}
if (moveToCatalog) {
navigation.navigate('Catalog');
}
// if (useState(collections )!== collections) {
// }
}, [collections, isAddingCollection, moveToCatalog]);
useEffect(() => {
setSameName(false);
if (title.length > 0) {
setHasTextValue(true);
}
if (creatingCollection) {
for (let i = 0; i < collectionNames.length; i += 1) {
if (collectionNames[i].toLowerCase() === title.toLowerCase()) {
setHasTextValue(false);
setSameName(true);
}
}
}
}, [title]);
const saveButtonTextStyle = hasTextValue ? styles.saveButtonText : styles.disabledSaveButtonText;
// PLACEHOLDERS
const placeholderTitle = creatingCollection ? '' : collection.label;
const isUniqueName = ({ text, isRename, label }) => {
// if action is rename, new label can be same as old label
if (isRename && (text.toLowerCase() === label.toLowerCase())) {
return true;
}
return !((collectionsLabels).includes(text.toLowerCase()));
};
const hasMinLength = (text) => text.length > 0;
const hasInputErrors = ({ text, isRename, label }) => {
if (!hasMinLength(text)) {
return true;
}
if (!isUniqueName({ text, isRename, label })) {
return true;
}
return false;
};
const reduceInputs = () => {
Keyboard.dismiss();
setOpen(false);
};
return (
<SafeAreaView style={styles.root}>
<Header style={styles.header}>
<Left>
<TouchableOpacity onPress={() => navigation.goBack()}>
<Entypo name="chevron-thin-left" size={20} color="black" />
</TouchableOpacity>
</Left>
<TouchableWithoutFeedback onPress={reduceInputs}>
<View style={styles.headerTitleContainer}>
<Title style={styles.headerText}><Text>{title}</Text></Title>
</View>
</TouchableWithoutFeedback>
<Right>
<TouchableWithoutFeedback style={styles.empty_toucable} onPress={reduceInputs}>
<View style={styles.headerTitleContainer}>
<Text style={styles.header_empty_text}> </Text>
</View>
</TouchableWithoutFeedback>
</Right>
</Header>
<View style={styles.inputField}>
<KeyboardAvoidingView behavior="padding">
<TouchableWithoutFeedback onPress={reduceInputs}>
<View style={styles.textInputDiv}>
<Text variant="title" style={styles.formHeader}>Title</Text>
</View>
</TouchableWithoutFeedback>
<View style={styles.titleTextInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={onChangeTitle}
placeholder={placeholderTitle}
value={title}
onTouchStart={() => setOpen(false)}
multiline={false}
autoFocus
/>
</View>
<View style={styles.titleFooter}>
{sameName
&& (
<View style={styles.sameNameAlertContainer}>
<Text style={{ color: Colors.destructive }}>Collection name must be unique</Text>
</View>
)}
</View>
</KeyboardAvoidingView>
<KeyboardAvoidingView behavior="padding">
<TouchableWithoutFeedback onPress={reduceInputs}>
<View style={styles.textInputDiv}>
<TouchableOpacity style={styles.textInputHeader} disabled>
<Text variant="title" style={styles.formHeader}>Purpose</Text>
</TouchableOpacity>
</View>
</TouchableWithoutFeedback>
<View style={styles.purposeTextInputContainer}>
<TextInput
style={styles.textInput}
onChangeText={onChangePurpose}
placeholder="add purpose"
onSubmitEditing={Keyboard.dismiss}
value={purpose}
onTouchStart={() => setOpen(false)}
multiline={false}
autoFocus
/>
</View>
</KeyboardAvoidingView>
<View style={styles.tagTextHeader}>
<TouchableWithoutFeedback disabled onPress={reduceInputs}>
<Text variant="title" style={styles.formHeader}>Collection Tags</Text>
</TouchableWithoutFeedback>
</View>
<View style={{ zIndex: 100, backgroundColor: '#fff' }}>
<Picker
multiple
min={0}
max={5}
open={open}
value={value}
setOpen={setOpen}
setValue={setValue}
items={items}
setItems={setItems}
searchable
placeholder="add new or existing tags "
/>
</View>
<View style={styles.switchTextHeader}>
<TouchableWithoutFeedback disabled onPress={reduceInputs}>
<Text variant="title" style={styles.formHeader}>Priority</Text>
</TouchableWithoutFeedback>
</View>
<View style={styles.switchRow}>
<View style={styles.currentTextField}>
<Feather name="watch" size={18} color={Colors.currentCollectionColor} />
<Text style={styles.switchText}>Current</Text>
</View>
<Switch
trackColor={{
false: Colors.mediumgrey,
true: Platform.OS === 'ios' ? Colors.primary : Colors.primaryLight,
}}
thumbColor={(Platform.OS === 'ios') ? 'white' : Colors[(current ? 'primary' : 'primaryLight')]}
onValueChange={() => currentSelection(!current)}
value={current || urgent}
disabled={urgent}
/>
<View style={styles.leftRightPadding}>
<Feather name="alert-triangle" size={18} color={Colors.destructive} />
<Text variant="title" style={styles.switchText}>Urgent</Text>
</View>
<Switch
trackColor={{
false: Colors.mediumgrey,
true: Platform.OS === 'ios' ? Colors.primary : Colors.primaryLight,
}}
thumbColor={(Platform.OS === 'ios') ? 'white' : Colors[(urgent ? 'primary' : 'primaryLight')]}
onValueChange={() => urgentSelection(!urgent)}
value={urgent}
/>
</View>
</View>
<KeyboardAvoidingView style={styles.textRow}>
<TouchableOpacity
style={styles.saveButton}
onPress={() => {
if (creatingCollection) {
discardChangesCreate();
} else {
discardChanges();
}
}}
>
<BaseText variant="title" style={styles.discardButtonText}>Discard</BaseText>
</TouchableOpacity>
{collectionsDialogText && (
<CollectionsDialog
collectionsDialogText={collectionsDialogText}
setCollectionsDialogText={setCollectionsDialogText}
/>
)}
<View style={styles.saveCol}>
<TouchableOpacity
style={styles.saveButton}
onPress={saveCollection}
disabled={!hasTextValue}
>
<BaseText variant="title" style={saveButtonTextStyle}>Save</BaseText>
</TouchableOpacity>
<TouchableOpacity
style={styles.saveButton}
onPress={saveAndContinue}
disabled={!hasTextValue}
>
<BaseText variant="title" style={saveButtonTextStyle}>Save and Continue</BaseText>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
Example #16
| Source File: DisclaimerScreen.js From hugin-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { t } = this.props;
return(
<View style={{
backgroundColor: this.props.screenProps.theme.backgroundColour,
flex: 1,
}}>
<View style={{
alignItems: 'flex-start',
justifyContent: 'flex-start',
flex: 1,
marginTop: 60,
backgroundColor: this.props.screenProps.theme.backgroundColour
}}>
<Text style={{
color: this.props.screenProps.theme.primaryColour,
fontSize: 25,
marginBottom: 40,
marginLeft: 30,
marginRight: 20,
fontFamily: "Montserrat-SemiBold",
}}>
{t('disclaimer')}
</Text>
{Config.devFeePercentage > 0 && <View style={{ flexDirection: 'row', marginRight: 20, marginLeft: 25, marginBottom: 20 }}>
<Switch
value={this.state.feeAccepted}
onValueChange={(value) => {
this.setState({
feeAccepted: value
});
}}
style={{ marginRight: 15 }}
/>
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 15,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
}}>
I understand that the fee for sending transactions is {Config.devFeePercentage}%.
</Text>
</View>
</View>}
<View style={{ flexDirection: 'row', marginRight: 20, marginLeft: 25, marginBottom: 20 }}>
<Switch
value={this.state.keyOwnershipAccepted}
onValueChange={(value) => {
this.setState({
keyOwnershipAccepted: value
});
}}
style={{ marginRight: 15 }}
/>
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 15,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: "Montserrat-Regular",
}}>
{t('privateKeyWarning')}
</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginRight: 20, marginLeft: 25, marginBottom: 20 }}>
<Switch
value={this.state.warrantyAccepted}
onValueChange={(value) => {
this.setState({
warrantyAccepted: value
});
}}
style={{ marginRight: 15 }}
/>
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 15,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: "Montserrat-Regular",
}}>
{t('warrantyWarning')}
</Text>
</View>
</View>
<BottomButton
title={t('continue')}
onPress={() => {
this.props.navigation.navigate('ChooseAuthMethod', { nextRoute: this.props.navigation.state.params.nextRoute })
}}
disabled={!this.state.feeAccepted || !this.state.keyOwnershipAccepted || !this.state.warrantyAccepted}
{...this.props}
/>
</View>
</View>
);
}
Example #17
| Source File: Authenticate.js From hugin-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { t } = this.props;
return(
<View style={{ flex: 1, backgroundColor: this.props.screenProps.theme.backgroundColour }}>
<View style={{
alignItems: 'flex-start',
justifyContent: 'flex-start',
flex: 1,
marginTop: 60,
backgroundColor: this.props.screenProps.theme.backgroundColour
}}>
<Text style={{
color: this.props.screenProps.theme.primaryColour,
fontSize: 25,
marginBottom: 40,
marginLeft: 30,
marginRight: 20,
fontFamily: "Montserrat-SemiBold",
}}>
{t('authenticateHow')}
</Text>
<View style={{ flexDirection: 'row', marginRight: 20, marginLeft: 25, marginBottom: 20 }}>
<Switch
value={this.state.hardwareAuth}
onValueChange={(value) => {
this.setState({
hardwareAuth: value,
pinCode: value ? false : this.state.pinCode,
noAuth: value ? false : this.state.noAuth,
});
}}
style={{ marginRight: 15 }}
/>
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 15,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: "Montserrat-Regular",
}}>
{t('useHardware')}
</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginRight: 20, marginLeft: 25, marginBottom: 20 }}>
<Switch
value={this.state.pinCode}
onValueChange={(value) => {
this.setState({
hardwareAuth: value ? false : this.state.hardwareAuth,
pinCode: value,
noAuth: value ? false : this.state.noAuth,
});
}}
style={{ marginRight: 15 }}
/>
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 15,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: "Montserrat-Regular",
}}>
{t('usePinCode')}
</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginRight: 20, marginLeft: 25, marginBottom: 20 }}>
<Switch
value={this.state.noAuth}
onValueChange={(value) => {
this.setState({
hardwareAuth: value ? false : this.state.hardwareAuth,
pinCode: value ? false : this.state.pinCode,
noAuth: value
});
}}
style={{ marginRight: 15 }}
/>
<View style={{ flex: 1 }}>
<Text style={{
fontSize: 15,
color: this.props.screenProps.theme.slightlyMoreVisibleColour,
fontFamily: "Montserrat-Regular",
}}>
{t('noAuth')}
</Text>
</View>
</View>
<BottomButton
title={t('continue')}
onPress={() => {
(async() => {
let method = 'none';
if (this.state.hardwareAuth) {
method = 'hardware-auth';
} else if (this.state.pinCode) {
method = 'pincode';
}
Globals.preferences.authenticationMethod = method;
savePreferencesToDatabase(Globals.preferences);
const havePincode = await hasUserSetPinCode();
if (method === 'none' || havePincode) {
this.props.navigation.navigate(this.props.navigation.state.params.nextRoute);
} else {
this.props.navigation.navigate('SetPin', {
nextRoute: this.props.navigation.state.params.nextRoute
});
}
})();
}}
disabled={!(this.state.noAuth || this.state.pinCode || this.state.hardwareAuth)}
{...this.props}
/>
</View>
</View>
);
}
Example #18
| Source File: CameraUploadScreen.js From filen-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
CameraUploadScreen = memo(({ navigation, route }) => {
const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
const [lang, setLang] = useMMKVString("lang", storage)
const [userId, setUserId] = useMMKVNumber("userId", storage)
const [cameraUploadEnabled, setCameraUploadEnabled] = useMMKVBoolean("cameraUploadEnabled:" + userId, storage)
const [cameraUploadIncludeImages, setCameraUploadIncludeImages] = useMMKVBoolean("cameraUploadIncludeImages:" + userId, storage)
const [cameraUploadIncludeVideos, setCameraUploadIncludeVideos] = useMMKVBoolean("cameraUploadIncludeVideos:" + userId, storage)
const [cameraUploadFolderUUID, setCameraUploadFolderUUID] = useMMKVString("cameraUploadFolderUUID:" + userId, storage)
const [cameraUploadFolderName, setCameraUploadFolderName] = useMMKVString("cameraUploadFolderName:" + userId, storage)
const [hasPermissions, setHasPermissions] = useState(false)
const chooseFolder = useCallback(() => {
navigationAnimation({ enable: true }).then(() => {
showToast({ type: "cameraUploadChooseFolder", message: i18n(lang, "cameraUploadChooseFolder"), navigation })
navigation.dispatch(StackActions.push("MainScreen", {
parent: storage.getBoolean("defaultDriveOnly:" + userId) ? storage.getString("defaultDriveUUID:" + userId) : "base"
}))
})
})
useEffect(() => {
hasStoragePermissions().then(() => {
hasPhotoLibraryPermissions().then(() => {
setHasPermissions(true)
}).catch((err) => {
setHasPermissions(false)
console.log(err)
})
}).catch((err) => {
setHasPermissions(false)
console.log(err)
})
}, [])
return (
<>
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
backgroundColor: darkMode ? "black" : "white"
}}>
<TouchableOpacity style={{
marginTop: Platform.OS == "ios" ? 17 : 4,
marginLeft: 15,
}} onPress={() => navigation.goBack()}>
<Ionicon name="chevron-back" size={24} color={darkMode ? "white" : "black"}></Ionicon>
</TouchableOpacity>
<Text style={{
color: darkMode ? "white" : "black",
fontWeight: "bold",
fontSize: 24,
marginLeft: 10,
marginTop: Platform.OS == "ios" ? 15 : 0
}}>
{i18n(lang, "cameraUpload")}
</Text>
</View>
<ScrollView style={{
height: "100%",
width: "100%",
backgroundColor: darkMode ? "black" : "white"
}}>
<SettingsGroup>
<SettingsButton title={i18n(lang, "enabled")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={cameraUploadEnabled ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
disabled={!hasPermissions}
onValueChange={() => {
const newValue = !cameraUploadEnabled
if(newValue){
if(typeof cameraUploadFolderUUID !== "string"){
setCameraUploadEnabled(false)
chooseFolder()
return false
}
}
if(newValue){
setCameraUploadIncludeImages(true)
}
setCameraUploadEnabled(newValue)
}}
value={cameraUploadEnabled}
/>
} />
</SettingsGroup>
{
!hasPermissions && (
<Text style={{
color: "gray",
fontSize: 11,
paddingLeft: 17,
paddingTop: 5,
paddingRight: 17
}}>
{i18n(lang, "pleaseGrantPermission")}
</Text>
)
}
<SettingsGroup>
{
cameraUploadEnabled ? (
<SettingsButton title={i18n(lang, "cameraUploadFolder")} rightComponent={
<Text style={{
color: "gray",
paddingTop: 3,
paddingRight: 10,
fontSize: 13
}}>
{cameraUploadFolderName}
</Text>
} />
) : (
<SettingsButtonLinkHighlight rightText={typeof cameraUploadFolderUUID == "string" && cameraUploadFolderUUID.length > 16 ? cameraUploadFolderName : i18n(lang, "cameraUploadChooseFolder")} onPress={() => {
chooseFolder()
}} title={i18n(lang, "cameraUploadFolder")} />
)
}
<SettingsButton title={i18n(lang, "cameraUploadIncludeImages")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={cameraUploadIncludeImages ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setCameraUploadIncludeImages(!cameraUploadIncludeImages)}
value={cameraUploadIncludeImages}
/>
} />
<SettingsButton title={i18n(lang, "cameraUploadIncludeVideos")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={cameraUploadIncludeVideos ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setCameraUploadIncludeVideos(!cameraUploadIncludeVideos)}
value={cameraUploadIncludeVideos}
/>
} />
</SettingsGroup>
<SettingsGroup>
<SettingsButtonLinkHighlight title={i18n(lang, "cameraUploadReset")} onPress={() => {
Alert.alert(i18n(lang, "cameraUploadReset"), i18n(lang, "cameraUploadResetInfo"), [
{
text: i18n(lang, "cancel"),
onPress: () => {
return false
},
style: "cancel"
},
{
text: i18n(lang, "ok"),
onPress: () => {
Alert.alert(i18n(lang, "cameraUploadReset"), i18n(lang, "areYouReallySure"), [
{
text: i18n(lang, "cancel"),
onPress: () => {
return false
},
style: "cancel"
},
{
text: i18n(lang, "ok"),
onPress: () => {
try{
storage.delete("cameraUploadUploadedIds:" + userId)
}
catch(e){
console.log(e)
}
return true
},
style: "default"
}
], {
cancelable: true
})
},
style: "default"
}
], {
cancelable: true
})
}} />
</SettingsGroup>
<View style={{ height: 25 }}></View>
</ScrollView>
</>
)
})
Example #19
| Source File: Settings.js From Turbo-Browser with MIT License | 4 votes |
|
Settings = ({ navigation, route }) => {
const styleTypes = ['default','dark-content', 'light-content'];
const [styleStatusBar, setStyleStatusBar] = useState(styleTypes[1]);
const [rippleOverflow, setRippleOverflow] = useState(false);
const [searchEngineAlert, setSearchEngineAlert] = useState(false);
const [selectedSelection, setSelectedSelection] = useState("Google");
const [defaultBrowserNum, setDefaultBrowserNum] = useState(1);
const appInfo = useSelector((state) => state.appInfo);
const dispatch = useDispatch();
const [isAnimationEnabled, setIsAnimationEnabled] = useState(true);
const [isAnimationDirEnabled, setIsAnimationDirEnabled] = useState(true);
const [isCookiesDisabled, setIsCookiesDisabled] = useState(false);
const [isJSDisabled, setIsJSDisabled] = useState(false);
useEffect(() => {
setSelectedSelection(appInfo.searchEngine);
setIsAnimationEnabled(appInfo.animations);
setIsAnimationDirEnabled(appInfo.animationDirection);
setIsCookiesDisabled(appInfo.disableCookies);
setIsJSDisabled(appInfo.disableJS);
if(appInfo.searchEngine == "Google") {
setDefaultBrowserNum(1);
} else if(appInfo.searchEngine == "DuckDuckGo") {
setDefaultBrowserNum(2);
} else if(appInfo.searchEngine == "Bing") {
setDefaultBrowserNum(3);
}
else if(appInfo.searchEngine == "Yahoo!"){
setDefaultBrowserNum(4);
} else {
setDefaultBrowserNum(1);
}
}, [appInfo]);
const data = [
{
label: "Google"
},
{
label: "DuckDuckGo"
},
{
label: "Bing"
},
{
label: "Yahoo!"
}
];
const onShare = async () => {
try {
const result = await Share.share({
message:
"Try Turbo Browser. I've been using it and it's really amazing.\n\nGet it here - https://play.google.com/store/apps/details?id=com.turbo_infinitus",
});
} catch (error) {
// error
}
}
const clearAll = async () => {
try {
await AsyncStorage.clear();
dispatch({type: "CHANGE_APPINFO", value: {
searchEngine: "Google",
animations: true,
animationDirection: true,
disableCookies: false,
disableJS: false
}});
setDefaultBrowserNum(1);
setSelectedSelection("Google");
setIsAnimationEnabled(true);
setIsAnimationDirEnabled(true);
setIsCookiesDisabled(false);
setIsJSDisabled(false);
} catch(error) {
// error
}
}
const closeSearchEngine = () => {
setSearchEngineAlert(false);
}
const saveSearchEngine = async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, searchEngine: selectedSelection}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, searchEngine: selectedSelection}});
setSelectedSelection(selectedSelection);
closeSearchEngine();
} catch (error) {
// error
}
}
return (
<SafeAreaView>
<StatusBar backgroundColor="#ffffff" barStyle={styleStatusBar}/>
<Modal
isOpen={searchEngineAlert}
onClosed={saveSearchEngine}
style={[styles.modal, styles.modal4]}
position={"center"}
backdropPressToClose={true}
swipeToClose={false}
backdropOpacity={0.2}
backButtonClose={true}
coverScreen={true}
animationDuration={200}
>
<View style={styles.modal4__1A}>
<View style={{
display: "flex",
flexDirection: "row",
marginTop: 20,
marginBottom: 5,
}}>
<Text style={{
fontSize: 16,
color: "#6C7377FE",
fontFamily: "Helvetica",
marginLeft: 20,
marginTop: 4,
marginRight: 10,
paddingBottom: 4,
flexGrow: 1,
}}>
Search Engine
</Text>
<TouchableOpacity onPress={closeSearchEngine}>
<View>
<IonicIcon name="chevron-down" style={{
fontSize: 20,
color: "#6C7377FE",
marginRight: 20,
marginTop: 4,
}}/>
</View>
</TouchableOpacity>
</View>
<View>
<View style={{
marginLeft: 10,
marginBottom: 30,
}}>
<RadioButtonRN
data={data}
box={false}
initial={defaultBrowserNum}
selectedBtn={(e) => {setSelectedSelection(e.label)}}
animationTypes={[]}
textColor="#6C7377FE"
circleSize={14}
duration={200}
textStyle={{
fontFamily: "Helvetica",
marginTop: 2,
marginBottom: 2,
fontSize: 15,
}}
icon={
<IonicIcon name="checkmark-circle-outline" style={{
fontSize: 22,
color: "#6C7377FE",
}}/>
}
/>
</View>
</View>
</View>
</Modal>
<View style={styles.history_title_1}>
<TouchableOpacity onPress={() => {navigation.goBack()}}>
<View style={styles.history1_AA}>
<IonicIcon name="arrow-back" style={styles.history_title_1A_icon}/>
</View>
</TouchableOpacity>
<View style={styles.history1_BB}>
<Text style={styles.history_title_1B_txt}>Settings</Text>
</View>
</View>
{/* <LinearGradient colors={['#EDEEEEFE', '#FFFFFFFF']} style={styles.linearGradient_1}></LinearGradient> */}
<ScrollView style={styles.settingsMainContainer} showsVerticalScrollIndicator={false} keyboardShouldPersistTaps={'handled'} scrollEventThrottle={1}>
<View>
<Text style={styles.section_1_txt}>BASICS</Text>
</View>
<View style={styles.section_1_CONT_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {setSearchEngineAlert(true)}}
>
<View>
<Text style={styles.section_1_txt_A}>
Search Engine
</Text>
<Text style={styles.section_1_txt_B}>
{selectedSelection}
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Enable Animations
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isAnimationEnabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isAnimationEnabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, animations: !isAnimationEnabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, animations: !isAnimationEnabled}});
setIsAnimationEnabled(!isAnimationEnabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Toggle Animation Direction
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isAnimationDirEnabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isAnimationDirEnabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, animationDirection: !isAnimationDirEnabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, animationDirection: !isAnimationDirEnabled}});
setIsAnimationDirEnabled(!isAnimationDirEnabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 1,
backgroundColor: "#EDEEEEFE",
marginTop: 10,
marginBottom: 10,
}}></View>
<View>
<Text style={styles.section_1_txt}>ADVANCED</Text>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
// -- x
CookieManager.clearAll()
.then((res) => {
Snackbar.show({
text: "Cookies cleared successfully",
duration: Snackbar.LENGTH_SHORT,
backgroundColor: "#282C34FF",
});
});
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Clear Cookies
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={ () =>
{
// ;-;
Snackbar.show({
text: "Cache cleared successfully",
duration: Snackbar.LENGTH_SHORT,
backgroundColor: "#282C34FF",
});
}
}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Clear Cache
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
clearAll();
Snackbar.show({
text: "App Data was cleared successfully",
duration: Snackbar.LENGTH_SHORT,
backgroundColor: "#282C34FF",
});
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Clear App Data
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Disable Cookies
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isCookiesDisabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isCookiesDisabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, disableCookies: !isCookiesDisabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, disableCookies: !isCookiesDisabled}});
setIsCookiesDisabled(!isCookiesDisabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#FFFFFF", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Disable Javascript
</Text>
<Switch
trackColor={{ false: "#EAE7E7FE", true: "#9DFEBEFE" }}
thumbColor={isJSDisabled ? "#3AE07AFE" : "#CCCED0FE"}
value={isJSDisabled}
onValueChange={async () => {
try {
await AsyncStorage.setItem("appInfo", JSON.stringify({...appInfo, disableJS: !isJSDisabled}));
dispatch({type: "CHANGE_APPINFO", value: {...appInfo, disableJS: !isJSDisabled}});
setIsJSDisabled(!isJSDisabled);
} catch(error) {
// error
}
}}
/>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 1,
backgroundColor: "#EDEEEEFE",
marginTop: 10,
marginBottom: 10,
}}></View>
<View>
<Text style={styles.section_1_txt}>APP</Text>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
navigation.navigate('Search', { name: "turbo/https://turbo-browser-policy.netlify.app/" });
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Privacy Policy
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
navigation.navigate('Search', { name: "turbo/https://turbo-browser.netlify.app/" });
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Visit Website
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
navigation.navigate('Help', { name: "Home" });
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
FAQs
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={onShare}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Share App
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
onPress={() => {
Linking.openURL("https://play.google.com/store/apps/details?id=com.turbo_infinitus");
}}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Rate App
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 1,
backgroundColor: "#EDEEEEFE",
marginTop: 10,
marginBottom: 10,
}}></View>
<View>
<Text style={styles.section_1_txt}>ABOUT</Text>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Version
</Text>
<Text style={styles.section_1_txt_A_TF2_BOLD}>
5.4.3
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={styles.section_1_CONT_SWH_1}>
<TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple("#AFB1B13D", rippleOverflow)}
>
<View style={{
display: "flex",
flexDirection: "row",
marginLeft: 12,
marginRight: 12,
}}>
<Text style={styles.section_1_txt_A_TF2}>
Version code
</Text>
<Text style={styles.section_1_txt_A_TF2_BOLD}>
54
</Text>
</View>
</TouchableNativeFeedback>
</View>
<View style={{
minHeight: 80,
}}></View>
</ScrollView>
</SafeAreaView>
);
}
Example #20
| Source File: index.js From atendimento-e-agilidade-medica-AAMed with MIT License | 4 votes |
|
export default function Setting({ navigation }) {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const switches = [
{
key: String(Math.random()),
label: 'Localização',
},
{
key: String(Math.random()),
label: 'Notificações',
},
{
key: String(Math.random()),
label: 'E-mail',
},
];
const buttons = [
{
key: String(Math.random()),
label: 'CONFIGURAR CONTA',
},
{
key: String(Math.random()),
label: 'CONFIGURAR MAPA',
},
{
key: String(Math.random()),
label: 'CONFIGURAR PRIVACIDADE',
},
];
return (
<Container>
<ScrollView>
<Header navigation={navigation} label={'CONFIGURAÇÕES'} />
<Wrapper>
<Permissions>
<PermissionsTitle>Permissões</PermissionsTitle>
<Separator />
<SwitchPermissions>
<SwitchText style={{ fontWeight: 'bold' }}>
Aceitar todas as permissões
</SwitchText>
<Switch
onValueChange={toggleSwitch}
value={isEnabled}
trackColor={{ false: '#767577', true: '#1167aa' }}
thumbColor={isEnabled ? '#004b8b' : '#f4f3f4'}
/>
</SwitchPermissions>
{switches.map(switchh => (
<View key={switchh.key}>
<SwitchSeparator />
<SwitchPermissions>
<SwitchText>{switchh.label}</SwitchText>
<Switch
onValueChange={toggleSwitch}
value={isEnabled}
trackColor={{ false: '#767577', true: '#1167aa' }}
thumbColor={isEnabled ? '#004b8b' : '#f4f3f4'}
/>
</SwitchPermissions>
</View>
))}
</Permissions>
</Wrapper>
<ConfigButtons>
{buttons.map(button => (
<ButtonView key={button.key}>
<MainButton flag={true}>
<ButtonText>{button.label}</ButtonText>
<ButtonIcon name="angle-double-right" />
</MainButton>
</ButtonView>
))}
</ConfigButtons>
</ScrollView>
</Container>
);
}
Example #21
| Source File: onboarding.js From haven with MIT License | 4 votes |
|
render() {
const {
name, country, currency, loggingIn, keyboardVisible,
} = this.state;
const { isTrackingEvent } = this.props;
return (
<KeyboardAwareScrollView
style={screenWrapper.wrapper}
contentContainerStyle={!keyboardVisible && { flex: 1 }}
keyboardShouldPersistTaps="handled"
>
<View style={onboardingStyles.header}>
<Image style={styles.img} source={onboardingImg} resizeMode="stretch" />
<View style={onboardingStyles.headerContent}>
<StatusBarSpacer />
<Image style={styles.logo} source={logoImg} resizeMode="contain" />
</View>
</View>
<Text style={styles.helloText}>HELLO!</Text>
<TouchableWithoutFeedback onPress={this.handleRestore} disabled={loggingIn}>
<View style={styles.restoreContainer}>
<Text style={styles.restore}>
Restore profile
</Text>
</View>
</TouchableWithoutFeedback>
<InputGroup noBorder noHeaderPadding noHeaderTopPadding>
<TextInput
wrapperStyle={styles.nameContainer}
title="Name"
value={name}
onChangeText={this.onChangeName}
placeholder="optional"
titleWidth={titleWidth}
vertical
/>
<SelectorModal
wrapperStyle={styles.selectorContainer}
title="Country"
value={country}
onChange={this.onChangeCountry}
options={countries}
titleWidth={titleWidth}
vertical
/>
<SelectorModal
wrapperStyle={styles.selectorContainer}
title="Currency"
value={currency}
noBorder
onChange={this.onChangeCurrency}
options={currencies}
valueKey="code"
getLabel={option => `${option.name} (${option.symbol})`}
titleWidth={titleWidth}
vertical
/>
<View style={styles.analyticsContainer}>
<View>
<Text style={styles.analyticsTitle}>Share anonymous analytics</Text>
<Text style={styles.analyticsText}>Help us improve Haven</Text>
</View>
<Switch
onValueChange={this.handleToggleAnalytics}
value={isTrackingEvent}
/>
</View>
</InputGroup>
{!keyboardVisible && <View style={{ flex: 1 }} />}
<View style={footerStyles.roundButtonContainer}>
<Button
wrapperStyle={onboardingStyles.button}
title="Next"
onPress={this.handleGetStarted}
disabled={loggingIn}
/>
</View>
</KeyboardAwareScrollView>
);
}
Example #22
| Source File: SettingsScreen.js From filen-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
SettingsScreen = memo(({ navigation, route }) => {
const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
const [lang, setLang] = useMMKVString("lang", storage)
const [userId, setUserId] = useMMKVNumber("userId", storage)
const [onlyWifiUploads, setOnlyWifiUploads] = useMMKVBoolean("onlyWifiUploads:" + userId, storage)
const [onlyWifiDownloads, setOnlyWifiDownloads] = useMMKVBoolean("onlyWifiDownloads:" + userId, storage)
const [hideThumbnails, setHideThumbnails] = useMMKVBoolean("hideThumbnails:" + userId, storage)
const [hideFileNames, setHideFileNames] = useMMKVBoolean("hideFileNames:" + userId, storage)
const [hideSizes, setHideSizes] = useMMKVBoolean("hideSizes:" + userId, storage)
const [biometricPinAuth, setBiometricPinAuth] = useMMKVBoolean("biometricPinAuth:" + userId, storage)
const netInfo = useStore(useCallback(state => state.netInfo))
const [startOnCloudScreen, setStartOnCloudScreen] = useMMKVBoolean("startOnCloudScreen:" + userId, storage)
const [userSelectedTheme, setUserSelectedTheme] = useMMKVString("userSelectedTheme", storage)
return (
<ScrollView style={{
height: "100%",
width: "100%",
backgroundColor: darkMode ? "black" : "white"
}}>
<Text style={{
color: darkMode ? "white" : "black",
fontWeight: "bold",
fontSize: 24,
marginLeft: 15,
marginTop: Platform.OS == "ios" ? 20 : 0
}}>
{i18n(lang, "settings")}
</Text>
<SettingsGroup marginTop={15}>
<SettingsHeader navigation={navigation} route={route} />
</SettingsGroup>
{
__DEV__ && (
<SettingsGroup>
<SettingsButtonLinkHighlight title={"Clear loadItemsCache"} onPress={() => {
const keys = storage.getAllKeys()
keys.forEach(key => {
if(key.indexOf("loadItemsCache:") !== -1 || key.indexOf("folderSize:") !== -1){
storage.delete(key)
}
})
showToast({ message: "Cleared" })
}} />
</SettingsGroup>
)
}
<SettingsGroup>
<SettingsButtonLinkHighlight onPress={() => {
if(!netInfo.isConnected || !netInfo.isInternetReachable){
return showToast({ message: i18n(lang, "deviceOffline") })
}
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("MainScreen", {
parent: "trash"
}))
})
}} title={i18n(lang, "trash")} />
<SettingsButtonLinkHighlight onPress={() => {
if(!netInfo.isConnected || !netInfo.isInternetReachable){
return showToast({ message: i18n(lang, "deviceOffline") })
}
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("TransfersScreen"))
})
}} title={i18n(lang, "transfers")} />
<SettingsButtonLinkHighlight onPress={() => {
if(!netInfo.isConnected || !netInfo.isInternetReachable){
return showToast({ message: i18n(lang, "deviceOffline") })
}
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("EventsScreen"))
})
}} title={i18n(lang, "events")} />
</SettingsGroup>
<SettingsGroup>
<SettingsButtonLinkHighlight onPress={() => {
if(!netInfo.isConnected || !netInfo.isInternetReachable){
return showToast({ message: i18n(lang, "deviceOffline") })
}
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("CameraUploadScreen"))
})
}} title={i18n(lang, "cameraUpload")} />
</SettingsGroup>
<SettingsGroup>
<SettingsButton title={i18n(lang, "darkMode")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={userSelectedTheme == "dark" ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={(value) => {
if(value){
setUserSelectedTheme("dark")
setDarkMode(true)
setStatusBarStyle(true)
}
else{
setUserSelectedTheme("light")
setDarkMode(false)
setStatusBarStyle(false)
}
}}
value={typeof userSelectedTheme == "string" && userSelectedTheme.length > 1 ? userSelectedTheme == "dark" : darkMode}
/>
} />
<SettingsButton title={i18n(lang, "startOnCloudScreen")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={startOnCloudScreen ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setStartOnCloudScreen(!startOnCloudScreen)}
value={startOnCloudScreen}
/>
} />
<SettingsButton title={i18n(lang, "onlyWifiUploads")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={onlyWifiUploads ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setOnlyWifiUploads(!onlyWifiUploads)}
value={onlyWifiUploads}
/>
} />
<SettingsButton title={i18n(lang, "onlyWifiDownloads")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={onlyWifiDownloads ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setOnlyWifiDownloads(!onlyWifiDownloads)}
value={onlyWifiDownloads}
/>
} />
<SettingsButton title={i18n(lang, "hideThumbnails")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={hideThumbnails ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setHideThumbnails(!hideThumbnails)}
value={hideThumbnails}
/>
} />
<SettingsButton title={i18n(lang, "hideFileNames")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={hideFileNames ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setHideFileNames(!hideFileNames)}
value={hideFileNames}
/>
} />
<SettingsButton title={i18n(lang, "hideFileFolderSize")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={hideSizes ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => setHideSizes(!hideSizes)}
value={hideSizes}
/>
} />
<SettingsButton title={i18n(lang, "biometricPinAuth")} rightComponent={
<Switch
trackColor={getColor(darkMode, "switchTrackColor")}
thumbColor={biometricPinAuth ? getColor(darkMode, "switchThumbColorEnabled") : getColor(darkMode, "switchThumbColorDisabled")}
ios_backgroundColor={getColor(darkMode, "switchIOSBackgroundColor")}
onValueChange={() => {
if(biometricPinAuth){
return Alert.alert(i18n(lang, "disableBiometricPinAuth"), i18n(lang, "disableBiometricPinAuthWarning"), [
{
text: i18n(lang, "cancel"),
onPress: () => {
setBiometricPinAuth(true)
return false
},
style: "cancel"
},
{
text: i18n(lang, "ok"),
onPress: () => {
Alert.alert(i18n(lang, "disableBiometricPinAuth"), i18n(lang, "areYouReallySure"), [
{
text: i18n(lang, "cancel"),
onPress: () => {
setBiometricPinAuth(true)
return false
},
style: "cancel"
},
{
text: i18n(lang, "ok"),
onPress: () => {
setBiometricPinAuth(false)
storage.delete("pinCode:" + userId)
},
style: "default"
}
], {
cancelable: true
})
},
style: "default"
}
], {
cancelable: true
})
}
waitForStateUpdate("biometricAuthScreenState", "setup").then(() => {
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("BiometricAuthScreen"))
})
})
}}
value={biometricPinAuth}
/>
} />
<SettingsButtonLinkHighlight onPress={() => {
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("LanguageScreen"))
})
}} title={i18n(lang, "language")} />
</SettingsGroup>
<SettingsGroup>
<SettingsButtonLinkHighlight onPress={() => {
navigationAnimation({ enable: true }).then(() => {
navigation.dispatch(StackActions.push("SettingsAdvancedScreen"))
})
}} title={i18n(lang, "advanced")} />
</SettingsGroup>
<View style={{ height: 25 }}></View>
</ScrollView>
)
})
