react-native#ScrollView JavaScript Examples
The following examples show how to use
react-native#ScrollView.
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: index.js From bluezone-app with GNU General Public License v3.0 | 6 votes |
|
render() {
const {news} = this.state;
const {route} = this.props;
const item = (route && route.params.item) || {};
const {Language} = configuration;
//
const title =
(Language === 'vi' ? item.title : item.titleEn) ||
item.title ||
item.titleEn;
return (
<SafeAreaView style={{flex: 1, backgroundColor: '#ffffff'}}>
<Header
colorIcon={'#000000'}
styleHeader={{marginTop: 20}}
styleTitle={{paddingHorizontal: 50}}
title={title}
/>
<ScrollView>
<HTML
html={news?.data?.content}
tagsStyles={CUSTOM_STYLES}
imagesMaxWidth={Dimensions.get('window').width}
allowFontScaling={false}
/>
</ScrollView>
</SafeAreaView>
);
}
Example #2
| Source File: BlogDetail.js From Get-Placed-App with MIT License | 6 votes |
|
function JobDetail(props) {
const { id, title, snippet, author, body, post_date } = props.route.params.data;
const { width } = useWindowDimensions();
var date = new Date(`${post_date}`)
const source = {
html: `
${body}`
};
const tagsStyles = {
body: {
marginLeft: 20,
marginRight: 20,
},
};
return (
<View>
<ScrollView style={styles.Top}>
<View style={styles.headerStyle}>
<Title style={{ fontSize: 31, marginLeft: 10, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}> - ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>
</View>
<View>
<RenderHtml
tagsStyles={tagsStyles}
contentWidth={width}
source={source}
/>
</View>
</ScrollView>
</View >
)
}
Example #3
| Source File: Requirements.js From Legacy with Mozilla Public License 2.0 | 6 votes |
|
export default function ClanScreen({route,navigation}) {
var moment = useMoment();
var theme = useSelector(i=>i.themes[i.theme]);
var game_id = (route.params.year*12)+(route.params.month-1)-24158;
return (
<ScrollView style={{backgroundColor:theme.page.bg,flex: 1}} contentContainerStyle={{padding:4}}>
<View style={{ padding: 4}}>
<Dropdown mode="outlined" dense={true} selectedValue={game_id} onValueChange={(value)=>{
const reverse = config.clan.reverse_game_id_function(value);
navigation.setParams({
year: reverse.y,
month: reverse.m + 1,
})
}}>
{array.slice().reverse().map(i=><DropdownItem value={i.i} label={moment(i.l).format('MMMM YYYY')} />)}
</Dropdown>
</View>
<View style={{ padding: 4 }}>
<ClanRequirements game_id={game_id} />
</View>
<View style={{ padding: 4 }}>
<ClanRequirements list={true} game_id={game_id} />
</View>
</ScrollView>
);
}
Example #4
| Source File: notificationList.js From Baku with GNU General Public License v3.0 | 6 votes |
|
render() {
return <ScrollView refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh} />} contentContainerStyle={{
flexDirection: 'row',
justifyContent: 'space-around',
flexWrap: 'wrap'
}}>
{this.listNotifs()}
</ScrollView>;
}
Example #5
| Source File: MultiFilter.js From haven with MIT License | 6 votes |
|
render() {
const {
selected, options, title, style, hasScroll,
} = this.props;
const Wrapper = hasScroll ? ScrollView : View;
return (
<Section title={title}>
<Wrapper style={[styles.wrapper, style]}>
{options.map((val, key) => {
const idx = findIndex(selected, o => o === val.value);
const isLast = key === options.length - 1;
return (
<TouchableWithoutFeedback
key={key}
onPress={() => {
this.onChange(val.value, idx, get(val, 'exclusive', false));
}}
>
<View style={styles.itemWrapper}>
{idx >= 0 ? (
<Ionicons name="ios-checkmark" size={28} style={styles.checkmark} />
) : (
<Ionicons size={28} style={styles.checkmark} />
)}
<View style={[styles.itemTextWrapper, !isLast && styles.bottomBorder]}>
<Text style={styles.itemText}>{val.label}</Text>
</View>
</View>
</TouchableWithoutFeedback>
);
})}
</Wrapper>
</Section>
);
}
Example #6
| Source File: HDWalletComponent.js From RRWallet with MIT License | 6 votes |
|
render() {
return (
<ScrollView style={dpStyles.main} justifyContent="center" contentContainerStyle={dpStyles.container}>
<View style={dpStyles.imageWrap}>
<Image source={require("@img/wallet/hd_default_img.png")} style={dpStyles.img} />
</View>
<Text style={dpStyles.title}>{i18n.t("wallet-hdindex-default-title")}</Text>
<Text style={dpStyles.desc}>{i18n.t("wallet-hdindex-default-desc")}</Text>
<Button
containerStyle={dpStyles.buttonContainer}
buttonStyle={dpStyles.buttonStyle}
title={i18n.t("wallet-hdindex-default-create")}
onPress={this.onCreatePress}
/>
<TouchableHighlight underlayColor="transparent" onPress={this.onRecoveryPress} activeOpacity={0.7}>
<Text style={dpStyles.recoveryDesc}>
{i18n.t("wallet-hdindex-default-recovery-desc")}
<Text style={dpStyles.recovery}>{i18n.t("wallet-hdindex-default-recovery")}</Text>
</Text>
</TouchableHighlight>
</ScrollView>
);
}
Example #7
| Source File: KeyboardAvoidingViewScreen.js From monsuivipsy with Apache License 2.0 | 6 votes |
|
ScreenContainer = ({children}) => {
return (
<SafeAreaView style={{flex: 1}}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{flex: 1}}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
keyboardShouldPersistTaps="handled">
{children}
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
Example #8
| Source File: ComponentListScreen.js From adyen-react-native-online-payments with MIT License | 6 votes |
|
export function ComponentListScreen({ navigation, paymentMethods }) {
// fetch payment methods
React.useEffect(() => {
paymentMethods();
}, []);
const handleClick = (type) => () => {
navigation.navigate("Component", { type });
};
return (
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}
>
<OptionButton
icon="md-card"
label="Credit Card"
onPress={handleClick("scheme")}
/>
<OptionButton
icon="md-cash"
label="iDEAL"
onPress={handleClick("ideal")}
isLastOption
/>
</ScrollView>
);
}
Example #9
| Source File: MovieDetailScreen.js From MoviesDaily with MIT License | 6 votes |
|
render() {
const { navigation } = this.props;
return (
<View style={{ flex: 1, backgroundColor: white }}>
<ScrollView style={Styles.scrollview} contentContainerStyle={{ flexGrow: 1 }} bounces={false}>
<StatusBar translucent backgroundColor={"transparent"} />
{this.movieInfoGeneral()}
{this.movieInfoDetail()}
</ScrollView>
<BackIcon navigation={navigation} style={{ marginLeft: 5, position: "absolute", top: 40 }} color={white} />
</View>
);
}
Example #10
| Source File: index.js From bluezone-app with GNU General Public License v3.0 | 5 votes |
|
render() {
const {isVisiblePhoneRegistered} = this.state;
const {route, intl} = this.props;
const item = (route && route.params.item) || {};
const {formatMessage} = intl;
const {Language, PhoneNumber} = configuration;
const uri =
item.largeIcon && item.largeIcon.length > 0
? item.largeIcon
: require('./styles/images/corona.png');
const title =
(Language === 'vi' ? item.title : item.titleEn) ||
item.title ||
item.titleEn;
const bigText =
(Language === 'vi' ? item.bigText : item.bigTextEn) ||
item.bigText ||
item.bigTextEn;
return (
<SafeAreaView style={styles.container}>
<Header
styleHeader={styles.header}
styleTitle={styles.textHeader}
title={formatMessage(msg.announcement)}
/>
<ScrollView style={styles.wrapper}>
<View style={{flex: 1, flexDirection: 'row', alignItems: 'center'}}>
<FastImage
source={item.largeIcon && item.largeIcon.length ? {uri} : uri}
style={styles.avatar}
/>
<View style={styles.content}>
<MediumText numberOfLines={1} style={styles.titleText}>
{title}
</MediumText>
<MediumText style={styles.colorDes}>
{`${moment(Number(item.timestamp)).format(
'DD/MM/YYYY',
)} - ${moment(Number(item.timestamp)).format('HH:mm')}`}
</MediumText>
</View>
</View>
<Text style={styles.textContent}>{bigText}</Text>
{item._group === 'MOBILE' ? (
PhoneNumber ? (
<Text style={styles.textPhoneNumber}>
{formatMessage(msg.registeredPhone)}:{' '}
{this.formatNumberPhone(PhoneNumber)}
</Text>
) : (
<View style={styles.declare}>
<TouchableOpacity onPress={this.onPress} style={styles.button}>
<Text style={styles.textButton}>
{formatMessage(msg.declare)}
</Text>
</TouchableOpacity>
</View>
)
) : null}
</ScrollView>
<ModalBase
isVisibleModal={isVisiblePhoneRegistered}
title={formatMessage(msg.notification)}
description={formatMessage(msg.registeredPhone)}>
<View style={styles.modalFooter}>
<ButtonClose
text={formatMessage(message.dong)}
onPress={this.onCloseModal}
/>
</View>
</ModalBase>
</SafeAreaView>
);
}
Example #11
| Source File: JobDetail.js From Get-Placed-App with MIT License | 5 votes |
|
function JobDetail(props) {
const { id, title, snippet, author, Company_image, Job_Description, apply_link, job_type, post_date } = props.route.params.data;
const { width } = useWindowDimensions();
var date = new Date(`${post_date}`)
const source = {
html: `
${Job_Description}`
};
const tagsStyles = {
body: {
marginLeft: 20,
marginRight: 20,
},
};
return (
<View>
<ScrollView style={styles.Top}>
<View style={styles.headerStyle}>
<Title style={{ fontSize: 31, marginLeft: 20, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}> - ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>
</View>
<View>
<Image
source={{ uri: `${Company_image}` }}
style={{ width: 300, height: 230, marginLeft: 30, }}
/>
</View>
<View>
<RenderHtml
tagsStyles={tagsStyles}
contentWidth={width}
source={source}
/>
</View>
<View style={[{ width: "90%", marginTop: 5, marginBottom: 25, borderRadius: 10, alignItems: 'center' }]}>
<Button
title="Apply"
color="#002223"
style={[{ borderRadius: 100, }]}
onPress={() => Linking.openURL(apply_link)}
/>
</View>
</ScrollView>
</View >
)
}
Example #12
| Source File: Account.js From Alfredo-Mobile with MIT License | 5 votes |
|
Account = (props) => {
const guestView = () => {
return (
<ScrollView contentContainerStyle={styles.content}>
<StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
<View style={styles.helloContainer}>
<Text style={styles.helloText}>Hi!</Text>
</View>
<View style={styles.btnContainer}>
<View style={apply('flex')}>
<TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('LoginScreen')}>
<Text style={styles.btnAuthLabel}>Login</Text>
</TouchableOpacity>
</View>
<View style={apply('flex ml-5')}>
<TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('RegisterScreen')}>
<Text style={styles.btnAuthLabel}>Register</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
)
}
const userView = () => {
const { data } = props.profile
return (
<ScrollView contentContainerStyle={styles.content}>
<View style={styles.helloContainer}>
<Text style={styles.helloText}>Hi, {data?.username}!</Text>
</View>
<View style={styles.btnContainer}>
<View style={apply('flex')}>
<TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('OrderList')}>
<Text style={styles.btnAuthLabel}>Orders</Text>
</TouchableOpacity>
</View>
<View style={apply('flex ml-5')}>
<TouchableOpacity style={[styles.btnAuth, apply('bg-red-500')]} activeOpacity={0.9} onPress={() => props.doLogout()}>
<Text style={styles.btnAuthLabel}>Logout</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
)
}
return (
<SafeAreaView style={styles.container}>
{props.user ? userView() : guestView()}
</SafeAreaView>
)
}
Example #13
| Source File: Stats.js From Legacy with Mozilla Public License 2.0 | 5 votes |
|
function MainScrollView({ scroll, children, s }) {
if (scroll) return <ScrollView horizontal={true} style={{ flex: 1 }} contentContainerStyle={{ flexDirection: "row", minWidth: '100%', paddingLeft: 100 * s }}>
{children}
</ScrollView>
return <View style={{ flex: 1, flexDirection: "row", minWidth: '100%', paddingLeft: 100 * s }}>
{children}
</View>
}
Example #14
| Source File: AnnouncementDetails.js From react-native-todolist with MIT License | 5 votes |
|
render() {
console.log("Announcement Details --- " + JSON.stringify(this.state.announcement))
var item = JSON.parse(JSON.stringify(this.state.announcement))
return (
<View style={styles.announcement_details_container}>
<CardView
style={styles.announcement_header_container}
cardElevation={2}
cardMaxElevation={2}>
<Row size={12}>
<Col sm={2}>
<Ripple
onPress={() => this.props.navigation.navigate(Utils.DASHBOARD_SCREEN)}>
<Image
style={styles.announcement_back_icon}
source={require('../../../assets/icons/close.png')}
/>
</Ripple>
</Col>
<Col sm={7}>
</Col>
</Row>
</CardView>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.announcement_view}>
<Row size={16}>
<Col sm={14}>
<CardView
style={{
width: '100%',
height: 'auto',
marginLeft: 30,
margin: 10,
backgroundColor: "#fff",
}}
cardElevation={10}
cardMaxElevation={5}>
<View style={styles.announcement_list_container}>
<View style={styles.announcement_list_item_container}>
<View style={styles.announcement_title_view}>
<Text style={styles.announcement_title_txt} numberOfLines={1}>
{item.title}
</Text>
</View>
{item.image != 'no image' && item.image.length > 0 &&
<View style={styles.announcement_image_view}>
<Image source={{ uri: item.image }} style={styles.icon_style_logo} />
</View>
}
<View style={styles.announcement_detail_text_view}>
<HTMLView value={item.body} stylesheet={htmlStyles} />
</View>
<View style={styles.announcement_topic_view}>
<Row size={12}>
<Col sm={10}>
<Text style={styles.announcement_small_text_txt}>{moment(item.time).format("MMM")} {moment(item.time).format("DD")}, {moment(item.time).format("YYYY")}</Text>
</Col>
<Col sm={2}>
<View style={styles.announcement_topic_label_view}>
<Text style={styles.announcement_topic_txt}>{item.topic}</Text>
</View>
</Col>
</Row>
</View>
</View>
</View>
</CardView>
</Col>
</Row>
</View>
</ScrollView>
</View>
)
}
Example #15
| Source File: Feedback.js From timetable with MIT License | 5 votes |
|
Feedback = () => {
const navigation = useNavigation()
const { t } = useTranslation()
const { theme } = useTheme()
const sendEmailHandler = ({ name, email, message }) => {
const data = JSON.stringify({ name, email, message }).replace(/[{}'']/g, '')
fetch('https://api.sendgrid.com/v3/mail/send', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Bearer ' + process.env.API_SEND_GRID_KEY
},
body: JSON.stringify({
personalizations: [
{
to: [
{
email: process.env.SEND_GRID_EMAIL_TO
}
],
subject: 'Bus Timetable Feedback'
}
],
from: {
email: process.env.SEND_GRID_EMAIL_FROM
},
content: [
{
type: 'text/plain',
value: data
}
]
})
})
.then(() => {
Alert.alert('', t('feedback.onSuccessfulSubmit'), [
{
text: t('feedback.cancel'),
onPress: () => navigation.navigate('About')
}
])
})
.catch(() => {
Alert.alert(t('feedback.error'), t('feedback.onSubmitError'), [
{ text: t('feedback.cancel') }
])
})
}
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={styles.container}>
<Text style={[styles.info, { color: theme.text }]}>
{t('feedback.info')}
</Text>
<ScrollView style={styles.form}>
<Form
onSubmitHandler={sendEmailHandler}
namePlaceholder={t('feedback.namePlaceholder')}
emailPlaceholder={t('feedback.emailPlaceholder')}
messagePlaceholder={t('feedback.messagePlaceholder')}
submitTitle={t('feedback.submitTitle')}
schemaRequiredName={t('feedback.schemaRequiredName')}
schemaRequiredEmail={t('feedback.schemaRequiredEmail')}
schemaRequiredMessage={t('feedback.schemaRequiredMessage')}
buttonColor={theme.buttonColor}
buttonText={theme.buttonText}
/>
</ScrollView>
</View>
</TouchableWithoutFeedback>
)
}
Example #16
| Source File: GDPRScreen.js From filen-mobile with GNU Affero General Public License v3.0 | 5 votes |
|
GDPRScreen = memo(({ navigation, route }) => {
const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
const [lang, setLang] = useMMKVString("lang", storage)
const [gdpr, setGdpr] = useState("")
const [isLoading, setIsLoading] = useState(true)
const isMounted = useMountedState()
useEffect(() => {
fetchGDPRInfo().then((info) => {
if(isMounted()){
setGdpr(JSON.stringify(info, null, 2))
setIsLoading(false)
}
}).catch((err) => {
console.log(err)
showToast({ message: err.toString() })
})
}, [])
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, "showGDPR")}
</Text>
</View>
<ScrollView style={{
height: "100%",
width: "100%",
backgroundColor: darkMode ? "black" : "white"
}}>
{
isLoading ? (
<ActivityIndicator size={"small"} color={darkMode ? "white" : "black"} style={{
marginTop: "70%"
}} />
) : (
<Text style={{
color: darkMode ? "white" : "black",
padding: 22
}}>
{striptags(gdpr)}
</Text>
)
}
</ScrollView>
</>
)
})
Example #17
| Source File: signupScreen.js From Baku with GNU General Public License v3.0 | 5 votes |
|
render() {
return (
<ScrollView
style={Styles.container}
>
<Text testID='signup_sign' style={[Styles.header, Styles.text_large]}>
Welcome to Baku!
</Text>
<Fumi
label={'Full Name'}
value={this.state.name}
iconClass={FontAwesomeIcon}
iconName={'user'}
testID="register-input-fullname"
onChangeText={(name) => this.setState({ name })}
/>
<Fumi
label={'Username'}
value={this.state.username}
iconClass={FontAwesomeIcon}
iconName={'user'}
testID="register-input-username"
onChangeText={(username) => this.setState({ username })}
/>
<Fumi
label={'Email'}
value={this.state.email}
autoCapitalize="none"
iconClass={FontAwesomeIcon}
iconName={'envelope-square'}
testID="register-input-email"
onChangeText={(email) => this.setState({ email })}
/>
<Fumi
label={'Password'}
value={this.state.password}
secureTextEntry={true}
iconClass={FontAwesomeIcon}
iconName={'unlock-alt'}
testID="register-input-password"
onChangeText={(password) => this.setState({ password })}
/>
<Fumi
label={'Confirm Password'}
value={this.state.confirmPassword}
secureTextEntry={true}
iconClass={FontAwesomeIcon}
iconName={'lock'}
testID="register-input-confirm-password"
onChangeText={(confirmPassword) => this.setState({ confirmPassword })}
/>
<View style={Styles.container_content}>
<Text style={Styles.text_error}>
{this.state.error}
</Text>
</View>
<View style={Styles.container_content}>
<AwesomeButton
backgroundColor={Colors.warning}
width={200}
height={50}
onPress={() => {
this.setState({ error: '' });
this.handleSignUp();
}}
>
Submit
</AwesomeButton>
</View>
</ScrollView>
);
}
Example #18
| Source File: CouponModal.js From haven with MIT License | 5 votes |
|
render() {
const {
mode, hideModal, visible, localCurrency, localMask,
} = this.props;
const { discountMode, value } = this.state;
return (
<OBLightModal visible={visible} animationType="slide">
<Header
modal
title={mode === 'edit' ? 'Edit Coupon' : 'New Coupon'}
left={<NavCloseButton />}
onLeft={hideModal}
right={<LinkText text="Save" color={linkTextColor} fontSize={16} />}
onRight={this.onSave}
/>
<ScrollView style={styles.wrapper}>
<InputGroup>
<TextInput
title="Title"
required
value={value.title}
onChangeText={this.onChangeTitle}
placeholder="Enter a title"
/>
<TextInput
title="Code"
required
value={value.discountCode}
onChangeText={this.onChangeDiscountCode}
placeholder="Enter a coupon code"
/>
<View style={styles.discountWrapper}>
<View style={styles.textInputWrapper}>
<TextInput
noBorder
title="Discount"
required
onChangeText={this.onChangeDiscountAmount}
value={
discountMode === 'percentage'
? `${get(value, 'percentDiscount', 0)}`
: `${get(value, 'priceDiscount', 0)}`
}
placeholder={discountMode === 'percentage' ? 'e.g. 10%' : 'e.g. $10'}
mask={discountMode === 'percentage' ? '[990]{.}[99]%' : localMask}
keyboardType="decimal-pad"
/>
</View>
<TouchableWithoutFeedback onPress={this.onChangeDiscountMode}>
<View>
<LinkText
text={discountMode === 'percentage' ? 'Percent' : localCurrency}
color={linkTextColor}
fontSize={14}
/>
</View>
</TouchableWithoutFeedback>
</View>
</InputGroup>
</ScrollView>
</OBLightModal>
);
}
Example #19
| Source File: styles.js From guardioes-app with Apache License 2.0 | 5 votes |
|
ScrollViewStyled = styled(ScrollView).attrs({
contentContainerStyle: {
flexGrow: 1,
paddingVertical: percentage(8),
paddingHorizontal: percentage(7),
},
})``
Example #20
| Source File: AddressScreen.js From RRWallet with MIT License | 5 votes |
|
render() {
const { backgroundColor } = this.props;
return (
<View style={{ flex: 1 }}>
<Header
leftButtons={AddressScreen.navigatorButtons.leftButtons}
rightButtons={this.rightButtons}
renderTitleComponent={this.renderTitleComponent}
navigator={this.navigator}
style={{ backgroundColor }}
/>
<ScrollView style={[styles.main, { backgroundColor }]} keyboardShouldPersistTaps={"always"}>
<View style={[styles.card, { marginTop: 20 }]}>
<Text style={styles.desc}>{i18n.t("wallet-receive-desc")}</Text>
<View style={styles.qrWrap}>
<QRCode size={180} value={this.paymentScheme} ecl="Q" />
<FastImage style={styles.icon} source={{ uri: this.coin.icon }} />
</View>
{parseInt(this.amount) >= 0 && (
<Text style={styles.amount}>
{toFixedLocaleString(this.amount)} {this.coin.name}
</Text>
)}
{this.reason.trim().length > 0 && <Text style={styles.reason}>{this.reason}</Text>}
<Button
buttonStyle={styles.button}
titleStyle={styles.buttonText}
onPress={this.amountButtonOnPress}
title={this.settingsText}
/>
</View>
<TouchableHighlight style={styles.highlight} onPress={this.clipAddress}>
<View style={[styles.card, { marginHorizontal: 0 }]}>
<View style={styles.addressDescWrap}>
<Text style={styles.addressDesc}>{i18n.t("wallet-receive-address")}</Text>
{this.addressIcon && <Image source={this.addressIcon} />}
</View>
<View style={styles.row}>
<View style={styles.addressWrap}>
<Text style={styles.address}>{this.address}</Text>
</View>
<Image source={require("@img/wallet/wallet_copy.png")} />
</View>
</View>
</TouchableHighlight>
<ProgressHUD ref={ref => (this.hud = ref)} />
<SettingsDialog ref={ref => (this.dialog = ref)} onCompletion={this.onSettingsCompletion} coin={this.coin} />
</ScrollView>
<GuideModal coin={this.coin} account={this.account} />
<BackupDialog onConfirm={this.onBackupConfirm} onCancel={this.onBackupCancel} />
<SelectCoinScreen
ref={this.handleSelectorRef}
onDismiss={this.onSelectorDismiss}
onSelected={this.onSelectedCoin}
account={this.account}
walletID={this.wallet.id}
coinID={this.coin.id}
navigator={this.navigator}
/>
</View>
);
}
Example #21
| Source File: daily-chart.js From monsuivipsy with Apache License 2.0 | 5 votes |
|
DailyChart = ({
route: {
params: {day, categoryId, dayIndex},
},
navigation,
}) => {
const [focused, setFocused] = useState(dayIndex);
const [diaryDay, setDiaryDay] = useState(day);
const [diaryData] = useContext(DiaryDataContext);
const {firstDay} = getTodaySWeek(new Date(day));
const chartDates = getArrayOfDates({startDate: firstDay, numberOfDays: 6});
const setFocusedRequest = (index) => {
setFocused(index);
setDiaryDay(chartDates[index]);
};
const computeChartData = (categoryId) => {
return chartDates.map((date) => {
const dayData = diaryData[date];
if (!dayData) {
return null;
}
const categoryState = diaryData[date][categoryId];
if (!categoryState) {
return null;
}
if (categoryState?.value) return categoryState?.value - 1;
// -------
// the following code is for the retrocompatibility
// -------
// get the name and the suffix of the category
const [categoryName, suffix] = categoryId.split('_');
let categoryStateIntensity = null;
if (suffix && suffix === 'FREQUENCE') {
// if it's one category with the suffix 'FREQUENCE' :
// add the intensity (default level is 3 - for the frequence 'never')
categoryStateIntensity = diaryData[date][
`${categoryName}_INTENSITY`
] || {level: 3};
return categoryState.level + categoryStateIntensity.level - 2;
}
return categoryState.level - 1;
});
};
const displayTitle = () => {
const [categoryName] = categoryId.split('_');
return displayedCategories[categoryId] || categoryName;
};
return (
<SafeAreaView style={styles.safe}>
<ScrollView
style={styles.scrollView}
contentContainerStyle={styles.scrollContainer}>
<DayTitle day={diaryDay} onBackPress={navigation.goBack} />
<Chart
title={displayTitle()}
data={computeChartData(categoryId)}
withFocus
focused={focused}
onPress={setFocusedRequest}
/>
<View style={styles.spacer} />
<DiaryItem
date={diaryDay}
patientState={diaryData[diaryDay]}
navigation={navigation}
/>
</ScrollView>
</SafeAreaView>
);
}
Example #22
| Source File: App.js From react-native-gif-search with ISC License | 5 votes |
|
render() {
return (
<ScrollView style={styles.container} keyboardShouldPersistTaps={"handled"}>
<GifSearch
giphyApiKey={GIPHY_API_KEY}
provider={"all"}
gifsToLoad={10}
maxGifsToLoad={50}
style={{backgroundColor: '#9fd4ab'}}
textInputStyle={{color: 'black'}}
gifStyle={{height:160}}
loadingSpinnerColor={'black'}
placeholderTextColor={'grey'}
placeholderText={'Search Gifs from Tenor and Giphy'}
stickersPlaceholderText={'Search Stickers from Giphy'}
onGifSelected={this.onGifSelected}
onGifLongPress={this.onGifLongPress}
visible={true}
horizontal={true}
showScrollBar={false}
onError={(error) => {console.log(error)}}
noGifsFoundText={"No Gifs found :("}
noGifsFoundTextStyle={{fontWeight: 'bold'}}
textInputProps={{autoFocus: true}}
gifType={"all"}
previewGifQuality={"low"}
selectedGifQuality={"medium"}
/>
<View style={styles.gifPreview}>
{this.state.gif_url ?
(
<View>
<Text style={{textAlign:'center', fontSize: 20}}>Selected {this.state.gif_type}:</Text>
<View style={styles.gifContainer}>
<Image
style={styles.gif}
source={{ uri: this.state.gif_url}}
/>
{!DEVELOPMENT_MODE ?
(
<Image
source={this.state.gif_provider == "tenor" ? (viaTenorLogoGrey) : (poweredByGiphyLogoGrey)}
style={styles.providerLogo}
/>
)
:
(null)
}
</View>
</View>
)
:
(null)
}
</View>
</ScrollView>
);
}
Example #23
| Source File: index.js From atendimento-e-agilidade-medica-AAMed with MIT License | 5 votes |
|
export default function Help({ navigation }) {
return (
<>
<Header navigation={navigation} label={'AJUDA'} />
<Contact>
<NumberContact>Entre em contato 0800-091-002</NumberContact>
<Legend>Dúvidas, Incidentes, Manutenções</Legend>
<Search>
<MgGlass name="search" />
<SearchInput placeholder="Posso te ajudar?" />
<SearchLabel>BUSCAR</SearchLabel>
</Search>
</Contact>
<View>
<Img source={require('../../assets/hospital.png')} />
<WebSupport>
<WebSupportButton>
<WebSupportLabel>SUPORTE WEB</WebSupportLabel>
</WebSupportButton>
</WebSupport>
</View>
<ScrollView>
<Options>
<MainButton
label="SOLICITAÇÃO DE ATENDIMENTO"
onPress={() => navigation.navigate('HelpServiceRequest')}
/>
<MainButton label="LOCALIZAÇÃO ERRADA NO MAPA" />
<MainButton
label="ALTERAR MINHAS INFORMAÇÕES"
onPress={() => navigation.navigate('HelpEditInfos')}
/>
<MainButton label="DADOS OFICIAIS DO APLICATIVO" />
<MainButton label="ENTRE EM CONTATO CONOSCO" />
<MainButton label="TERMOS E POLÍTICA DE PRIVACIDADE" />
</Options>
</ScrollView>
</>
);
}
Example #24
| Source File: App.js From react-native-fastlane with MIT License | 5 votes |
|
App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
}
Example #25
| Source File: react-native-reanimated.js From actual with MIT License | 5 votes |
|
Animated = makeMockObject({
View: NoopComponent,
ScrollView,
Value: class {}
})
Example #26
| Source File: detail.js From turkce-sozluk with MIT License | 5 votes |
|
function DetailView({ route }) {
const keyword = route.params?.keyword
// const keyword = 'milliyet'
const [data, setData] = React.useState(null)
useFocusEffect(
React.useCallback(() => {
StatusBar.setBarStyle('dark-content')
}, [])
)
const getDetailData = async () => {
const response = await fetch(`https://sozluk.gov.tr/gts?ara=${keyword}`)
const data = await response.json()
setData(data[0])
}
React.useEffect(() => {
getDetailData()
}, [])
return (
<Box as={SafeAreaView} bg="softRed" flex={1}>
<Box as={ScrollView} p={16}>
<Box>
<Text fontSize={32} fontWeight="bold">
{keyword}
</Text>
{data?.telaffuz || data?.lisan ? (
<Text color="textLight" mt={6}>
{data?.telaffuz && data?.telaffuz} {data?.lisan}
</Text>
) : null}
</Box>
<Box flexDirection="row" mt={24}>
<ActionButton disabled={!data}>
<Sound width={24} height={24} color={theme.colors.textLight} />
</ActionButton>
<ActionButton disabled={!data} ml={12}>
<Favorite width={24} height={24} color={theme.colors.textLight} />
</ActionButton>
<ActionButton disabled={!data} ml="auto">
<Hand width={24} height={24} color={theme.colors.textLight} />
<ActionButtonTitle>Türk İşaret Dili</ActionButtonTitle>
</ActionButton>
</Box>
<Box mt={32}>
{data
? data.anlamlarListe.map(item => (
<DetailSummaryItem
key={item.anlam_sira}
data={item}
border={item.anlam_sira !== '1'}
/>
))
: [1, 2, 3].map(index => (
<DetailSummaryItem key={index} border={index !== 1}>
<LoaderText />
<LoaderText width={200} mt={10} />
</DetailSummaryItem>
))}
</Box>
</Box>
</Box>
)
}
