react-native#ImageBackground JavaScript Examples
The following examples show how to use
react-native#ImageBackground.
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: OnboardingCScreen.js From spree-react-native with MIT License | 6 votes |
|
OnboardingCScreen = ({ navigation }) => {
return (
<View style={globalStyles.containerFluid}>
<ImageBackground
source={require('../../../assets/images/onboarding/onboarding-img-3/onboarding-img-3.png')}
style={{flex: 1, justifyContent: 'flex-end', paddingVertical: 48, paddingHorizontal: '10%',}}
>
<View>
<Text style={styles.title}>You got it</Text>
<Text style={styles.description}> Save product for later or buy in three easy steps.</Text>
<View style={styles.dotsContainer}>
<View style={styles.inactive}/>
<View style={styles.inactive}/>
<View style={styles.active}/>
</View>
<View style={styles.footerActions}>
<Button
title="Go Shopping"
type="solid"
buttonStyle={globalStyles.roundedButton}
titleStyle={styles.footerActionText}
onPress={() => navigation.navigate('SignIn')}
/>
<TouchableOpacity style={styles.footerAction}
onPress={() => navigation.navigate('SignIn')}
>
<Text style={styles.footerActionText}> Login </Text>
<ArrowLongRight size={24} style={styles.footerIcon} />
</TouchableOpacity>
</View>
</View>
</ImageBackground>
</View>
)
}
Example #2
| Source File: HomePage.js From UltimateApp with MIT License | 6 votes |
|
Theory = (props) => {
return (
<View style={styles.mainContainer}>
<TouchableHighlight onPress={() => props.navigation.navigate('DictionaryPage')} style={styles.menuItem}>
<ImageBackground source={dictionary} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.dictionary')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight
onPress={() => props.navigation.navigate('EssentialPage', { type: DrillTypes.FRISBEE })}
style={styles.menuItem}
>
<ImageBackground source={essential} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.essential')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight onPress={() => props.navigation.navigate('TacticsPage')} style={styles.menuItem}>
<ImageBackground source={simulator} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.tactics')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
</View>
);
}
Example #3
| Source File: Explore.js From musicont with MIT License | 6 votes |
|
Explore = ({ style = {}, imageURL, title = 'Explore', subtitle = `Listen to what's trending now`, onPress = () => {} }) => {
const [assets] = useAssets([require('../../assets/explore/default.png'), require('../../assets/icons/play.png')]);
return (
<View style={[styles.container, style]}>
<ImageBackground style={styles.card} imageStyle={styles.imageStyle} source={imageURL ? { uri: imageURL } : require('../../assets/explore/default.png')} resizeMode="cover">
<LinearGradient style={styles.overlay} colors={['rgba(0, 0, 0, 1)', 'transparent']} start={[0, 0]} end={[1, 0]} />
<View>
<Text style={styles.title}>{title}</Text>
<Text style={styles.subtitle}>{subtitle}</Text>
</View>
<TouchableOpacity style={styles.btn} onPress={onPress}>
<Image style={{ width: 40, height: 40 }} source={require('../../assets/icons/play.png')} resizeMode="contain" />
</TouchableOpacity>
</ImageBackground>
</View>
);
}
Example #4
| Source File: Playlist.js From musicont with MIT License | 6 votes |
|
Playlist = ({ style = {}, overlayStyle = {}, imageURL, title = 'Title', subtitle = `Subtitle`, onPress = () => {} }) => (
<ImageBackground
style={[styles.coverArt, style]}
imageStyle={{
borderRadius: 10,
}}
source={{ uri: imageURL }}
resizeMode="cover"
>
<LinearGradient style={[styles.overlay, overlayStyle]} colors={['rgba(0, 0, 0, 1)', 'transparent']} start={[0, 1]} end={[0, 0]} />
<TouchableOpacity style={[styles.overlay, overlayStyle]} onPress={onPress}>
<View style={styles.content}>
<Text style={styles.title} numberOfLines={1}>
{title}
</Text>
<Text style={styles.subtitle} numberOfLines={1}>
{subtitle}
</Text>
</View>
</TouchableOpacity>
</ImageBackground>
)
Example #5
| Source File: Theme.js From lx-music-mobile with Apache License 2.0 | 6 votes |
|
ThemeItem = ({ id, color, image, setTheme }) => {
const theme = useGetter('common', 'theme')
const isActive = useActive(id)
const { t } = useTranslation()
return (
<TouchableOpacity style={styles.item} activeOpacity={0.5} onPress={() => setTheme(id)}>
<View style={{ ...styles.colorContent, backgroundColor: theme.primary, borderColor: isActive ? color : 'transparent' }}>
{
image
? <ImageBackground source={image} style={styles.image} />
: <View style={{ ...styles.image, backgroundColor: color }}></View>
}
</View>
<Text style={{ ...styles.name, color: isActive ? color : theme.normal }} numberOfLines={1}>{t(`theme_${id}`)}</Text>
</TouchableOpacity>
)
}
Example #6
| Source File: WelcomeScreen.js From Done-With-It with MIT License | 6 votes |
|
function WelcomeScreen({ navigation }) {
return (
<ImageBackground
blurRadius={6}
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.logoContainer}>
<Image
style={styles.logo}
source={require("../assets/logo.png")}
/>
<Text style={styles.tagline}>Sell What You Don't Need</Text>
</View>
<View style={styles.buttonsContainer}>
<Button
title="Login"
onPress={() => navigation.navigate(routes.LOGIN)}
/>
<Button
title="Register"
color="secondary"
onPress={() => navigation.navigate(routes.REGISTER)}
/>
</View>
</ImageBackground>
);
}
Example #7
| Source File: SigninScreen.js From iitj-canteen with GNU General Public License v3.0 | 6 votes |
|
render() {
const { signIn, loading, error } = this.props;
return (
<View style={styles.container}>
<ImageBackground
source={require('../../Assets/Images/signinScreenImage.png')}
style={styles.backgroundImage}
>
<View style={styles.card}>
<Text style={styles.title}>FoodBytes</Text>
<Text style={styles.text}>
SignIn Through Your Google Account!SignIn Through Your Google Account!SignIn Through
Your Google Account!SignIn Through Your Google Account!
</Text>
</View>
<GoogleSigninButton
style={{ width: '80%', height: 60 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Light}
onPress={signIn}
disabled={loading}
/>
</ImageBackground>
</View>
);
}
Example #8
| Source File: bg.js From turkce-sozluk with MIT License | 6 votes |
|
function Bg({ children, ...props }) {
return (
<Box
as={ImageBackground}
source={bg}
style={{ width: '100%', height: '100%' }}
{...props}
>
{children}
</Box>
)
}
Example #9
| Source File: Completed.js From stayaway-app with European Union Public License 1.2 | 6 votes |
|
export default function Diagnosis (props) {
const { onPress } = props;
const { name, colors } = useTheme();
const memoizedStyle = useMemo(() => styles(colors), [name]);
return (
<TopComponent>
<ImageBackground
source={getThemedImage('diagnosis', name)}
style={memoizedStyle.imageContainer}
/>
<Layout
padding='horizontal'
style={memoizedStyle.contentContainer}
>
<View style={memoizedStyle.header}>
<View style={memoizedStyle.backgroundPanel} />
<View style={memoizedStyle.panel}>
<View style={memoizedStyle.panelContainer}>
<Text size='xlarge' weight='bold' style={memoizedStyle.title}>{i18n.translate('screens.diagnosis.completed.title')}</Text>
<Text>{i18n.translate('screens.diagnosis.completed.description')}</Text>
</View>
<View style={memoizedStyle.supportContainer}>
<SupportIcon />
</View>
</View>
</View>
<Button
title={i18n.translate('common.actions.ok')}
accessibilityLabel={i18n.translate('screens.diagnosis.completed.accessibility.label')}
accessibilityHint={i18n.translate('screens.diagnosis.completed.accessibility.hint')}
containerStyle={memoizedStyle.button}
onPress={onPress}
/>
</Layout>
</TopComponent>
);
}
Example #10
| Source File: Template.js From stayaway-app with European Union Public License 1.2 | 6 votes |
|
export default function Template (props) {
const { header, description, image, pressable, closable, onPress, onClose } = props;
const insets = useSafeAreaInsets();
const { name, colors } = useTheme();
const memoizedStyle = useMemo(() => styles(colors, insets), [name, insets]);
return (
<TopComponent>
<ImageBackground
source={image}
style={memoizedStyle.imageContainer}
>
<View style={memoizedStyle.topContainer}>
{ closable &&
<Layout style={memoizedStyle.top}>
<ButtonWrapper
onPress={onClose}
style={memoizedStyle.closeButton}
accessibilityLabel={i18n.translate('screens.how_to_use.actions.back.accessibility.hint.label')}
accessibilityHint={i18n.translate('screens.how_to_use.actions.back.accessibility.hint.hint')}
>
<Icon name='arrow' width={iconSizes.size24} height={iconSizes.size24} />
</ButtonWrapper>
</Layout>
}
</View>
<View style={memoizedStyle.bottomContainer}>
{renderContent(header, description, pressable, onPress, memoizedStyle)}
</View>
</ImageBackground>
</TopComponent>
);
}
Example #11
| Source File: index.js From react-native-expo-cached-image with MIT License | 6 votes |
|
render() {
let source = this.state.imgURI ? { uri: this.state.imgURI } : null;
if (!source && this.props.source) {
source = { ...this.props.source, cache: 'force-cache' };
}
if (this.props.isBackground) {
return (
<ImageBackground {...this.props} source={source}>
{this.props.children}
</ImageBackground>
);
} else {
return <Image {...this.props} source={source} />;
}
}
Example #12
| Source File: ProfileImages.js From haven with MIT License | 6 votes |
|
render() {
const { avatarHashes, headerHashes } = this.state;
return (
<View style={styles.wrapper}>
<ImageBackground
source={getLocalHeaderImageSource(_.get(headerHashes, 'large'))}
style={styles.headerImage}
resizeMode="cover"
>
<TouchableWithoutFeedback onPress={this.setHeader}>
<View style={styles.button}>
<Ionicons name="md-camera" size={32} color={foregroundColor} />
</View>
</TouchableWithoutFeedback>
</ImageBackground>
<View style={styles.bottomSpacer} />
<View style={styles.avatarWrapper}>
<View style={styles.avatarImgWrapper}>
<AvatarImage
style={styles.avatarImage}
thumbnail={_.get(avatarHashes, 'tiny')}
onPress={this.setAvatar}
showCamera
showLocal
/>
</View>
</View>
<ActionSheet
ref={this.setActionSheet}
onPress={this.handleActionSheet}
options={['Take photo', 'Choose from gallery', 'Cancel']}
cancelButtonIndex={2}
/>
</View>
);
}
Example #13
| Source File: Tile.js From Legacy with Mozilla Public License 2.0 | 6 votes |
|
export default function Tile({data,date,type,theme,header,extraText}) {
var {t} = useTranslation();
var types = [
{label:"R",type:"flatrob",color:"rgb(0, 148, 68)"},
{label:"M",type:"flatmatt",color:"rgb(237, 32, 36)"},
{label:"L",type:"flatlou",color:"rgb(235, 0, 139)"},
{label:"H",type:"flathammock",color:"rgb(35, 117, 245)"},
]
// {label:"QRewZee",type:"qrewzee",color:"rgb(235, 105, 42)"},
if(type=="alt") {
return <View style={{flex:1,backgroundColor:theme.page_content.bg,borderWidth:1,borderColor:'#d3d3d3',height:60,justifyContent:"center",alignItems:"center",paddingBottom:2}}>
<View style={{flexDirection:"row"}}>
<Text allowFontScaling={false} style={{color:theme.page_content.fg,...font("bold"),fontSize:12,textAlignVertical:"center"}}>{(date||1).toString()}</Text>
</View>
<View style={{flexDirection:"row"}}>
{types.map(i=>data.includes(i.label)?<Text allowFontScaling={false} style={{color:i.color,...font("bold"),fontSize:12,textAlignVertical:"center",letterSpacing:1}}>{i.label}</Text>:null)}
</View>
<View style={{flexDirection:"row"}}>
<Text allowFontScaling={false} style={{color:data.includes('Z')?"rgb(235, 105, 42)":"rgb(150, 150, 150)",...font("bold"),fontSize:10,textAlignVertical:"center"}}>{data.includes('Z')?"QRewZee":t('calendar:off')}</Text>
</View>
</View>
}
return <View style={{flex:1,backgroundColor:"black",borderWidth:1,borderColor:'#d3d3d3',height:header?56:40}}>
<ImageBackground source={u(data.includes('R')?'R':null)} style={{flex:1}}>
<ImageBackground source={u(data.includes('M')?'M':null)} style={{flex:1}}>
<ImageBackground source={u(data.includes('L')?'L':null)} style={{flex:1}}>
<ImageBackground source={u(data.includes('H')?'H':null)} style={{flex:1}}>
<ImageBackground source={u(data.includes('Z')?'QRewZeeOn':'QRewZeeOff')} style={{flex:1}}>
<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
{extraText&&<Text allowFontScaling={false} style={{color:"white",...font("bold"),fontSize:16,textAlignVertical:"center"}}>{extraText}</Text>}
<Text allowFontScaling={false} style={{color:"white",...font("bold"),fontSize:16,textAlignVertical:"center"}}>{(date||"1").toString()}</Text>
</View>
</ImageBackground>
</ImageBackground>
</ImageBackground>
</ImageBackground>
</ImageBackground>
</View>
}
Example #14
| Source File: ChatRoomScreen.js From WhatsApp-Clone with MIT License | 5 votes |
|
ChatRoomScreen = ({navigation, route}) => {
console.log('ChatRoomScreen => ', route);
useEffect(() => {
getUserIdnChatItem();
});
async function getUserIdnChatItem() {
// Clear User chat uneread count across all platforms
let chatItem = getChatListModel(
route.params.item,
route.params.isNewChat,
0,
);
let userId = await getLocalData(constants.USER_ID);
chatItem.chatUnreadCount = {
userId: userId,
type: 'reset',
count: 0,
};
socket.emit(constants.CHAT_LIST, chatItem);
console.log('ChatRoomScreen NEW => ', chatItem);
}
return (
// <SafeAreaView style={DEFAULT_STYLES.container}>
<View style={DEFAULT_STYLES.container}>
{Platform.OS === 'ios' && (
<KeyboardAvoidingView
style={DEFAULT_STYLES.container}
behavior="padding"
enabled>
<ImageBackground
source={WALLPAPER1}
resizeMode="stretch"
style={{width: '100%', height: '100%'}}>
<ChatRoomHeaderView
item={route.params.item}
navigation={navigation}
isNewChat={route.params.isNewChat}
/>
<ChatRoomView
chatItem={route.params.item}
navigation={navigation}
isNewChat={route.params.isNewChat}
/>
</ImageBackground>
</KeyboardAvoidingView>
)}
{Platform.OS === 'android' && (
<ImageBackground
source={WALLPAPER1}
resizeMode="stretch"
style={{width: '100%', height: '100%'}}>
<ChatRoomHeaderView
item={route.params.item}
navigation={navigation}
isNewChat={route.params.isNewChat}
/>
<ChatRoomView
chatItem={route.params.item}
navigation={navigation}
isNewChat={route.params.isNewChat}
/>
</ImageBackground>
)}
</View>
// </SafeAreaView>
);
}
Example #15
| Source File: CardH2t.js From expo-ticket-app with MIT License | 5 votes |
|
CardH2t = ({ source, text1, text2, onPress, loading }) => (
<TouchableOpacity style={{
flex: 1,
height: 220,
padding: 10,
}} onPress={onPress} disabled={loading}>
<View style={{
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.46,
shadowRadius: 11.14,
elevation: 17,
borderRadius: 10,
}}>
<ImageBackground
source={source}
imageStyle={{ resizeMode: 'cover', borderRadius: 15 }}
style={{
width: '100%',
height: '100%',
}}>
<View style={{
flex: 1, padding: 15,
alignItems: 'center',
justifyContent: 'space-around',
}}>
<TextI18n style={{ fontSize: 23, textAlign: 'center', fontFamily: 'Montserrat_Bold' }}>
{text1}
</TextI18n>
<TextI18n style={{ fontSize: 17, textAlign: 'center' }}>{text2}</TextI18n>
<View style={{ flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start' }}>
<TextI18n style={{ fontSize: 20, textAlign: 'center', fontFamily: 'Montserrat_Bold' }}>
global.go
</TextI18n>
<Icon type="Entypo" name="chevron-right" style={{ color: 'white', fontSize: 26 }}/>
</View>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)
Example #16
| Source File: DoctorDetailScreen.js From gDoctor with MIT License | 5 votes |
|
render () {
return (
<SafeAreaView style={apply(["flex", "bg-white"])}>
<StatusBar translucent={true} backgroundColor="transparent" barStyle="dark-content" />
<ScrollView style={apply("flex")} contentContainerStyle={apply("pb-7")}>
<ImageBackground source={Images.detailDoctor} style={styles.imgHeader}>
<View style={styles.imgHeaderRow}>
<TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.goBack()}>
<IconBack width={30} height={30} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={1}>
<IconBookmark width={30} height={30} />
</TouchableOpacity>
</View>
</ImageBackground>
<View style={styles.content}>
<Text style={styles.name}>dr. Gilang Segara Bening</Text>
<View style={styles.infoWrapper}>
<Text style={styles.info}>Heart</Text>
<View style={styles.infoDot} />
<Text style={styles.info}>Persahabatan Hospital</Text>
</View>
<Text style={styles.contentText}>dr. Gilang is one of the best doctors in the Persahabatan Hospital. He has saved more than 1000 patients in the past 3 years. He has also received many awards from domestic and abroad as the best doctors. He is available on a private or schedule.</Text>
<View style={styles.spec}>
<View style={styles.specCol}>
<Text style={styles.specTitle}>Experience</Text>
<Text style={styles.specContent}>3 <Text style={styles.specHelper}>yr</Text></Text>
</View>
<View style={styles.specCol}>
<Text style={styles.specTitle}>Patient</Text>
<Text style={styles.specContent}>1221 <Text style={styles.specHelper}>ps</Text></Text>
</View>
<View style={[styles.specCol, apply("border-r-0")]}>
<Text style={styles.specTitle}>Rating</Text>
<Text style={styles.specContent}>5.0</Text>
</View>
</View>
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableNativeFeedback
onPress={() => alert("hello!")}
background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
<View style={styles.btnChat}>
<IconChat />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={() => alert("hello!")}
background={TouchableNativeFeedback.Ripple("rgba(255,255,255, 0.25)")}>
<View style={styles.btnAppointment}>
<Text style={styles.btnFooterLabel}>Make an Appointment</Text>
</View>
</TouchableNativeFeedback>
</View>
</SafeAreaView>
)
}
Example #17
| Source File: CardView.js From react-native-credit-card-input-plus with MIT License | 5 votes |
|
render() {
const { focused,
brand, name, number, expiry, cvc, customIcons,
placeholder, imageFront, imageBack, scale, fontFamily } = this.props;
const Icons = { ...defaultIcons, ...customIcons };
const isAmex = brand === "american-express";
const shouldFlip = !isAmex && focused === "cvc";
const containerSize = { ...BASE_SIZE, height: BASE_SIZE.height * scale };
const transform = { transform: [
{ scale },
{ translateY: ((BASE_SIZE.height * (scale - 1) / 2)) },
] };
return (
<View style={[s.cardContainer, containerSize]}>
<FlipCard style={{ borderWidth: 0 }}
flipHorizontal
flipVertical={false}
friction={10}
perspective={2000}
clickable={false}
flip={shouldFlip}>
<ImageBackground style={[BASE_SIZE, s.cardFace, transform]}
source={imageFront}>
<Image style={[s.icon]}
source={Icons[brand]} />
<Text style={[s.baseText, { fontFamily }, s.number, !number && s.placeholder, focused === "number" && s.focused]}>
{ !number ? placeholder.number : number }
</Text>
<Text style={[s.baseText, { fontFamily }, s.name, !name && s.placeholder, focused === "name" && s.focused]}
numberOfLines={1}>
{ !name ? placeholder.name : name.toUpperCase() }
</Text>
<Text style={[s.baseText, { fontFamily }, s.expiryLabel, s.placeholder, focused === "expiry" && s.focused]}>
MONTH/YEAR
</Text>
<Text style={[s.baseText, { fontFamily }, s.expiry, !expiry && s.placeholder, focused === "expiry" && s.focused]}>
{ !expiry ? placeholder.expiry : expiry }
</Text>
{ isAmex &&
<Text style={[s.baseText, { fontFamily }, s.amexCVC, !cvc && s.placeholder, focused === "cvc" && s.focused]}>
{ !cvc ? placeholder.cvc : cvc }
</Text> }
</ImageBackground>
<ImageBackground style={[BASE_SIZE, s.cardFace, transform]}
source={imageBack}>
<Text style={[s.baseText, s.cvc, !cvc && s.placeholder, focused === "cvc" && s.focused]}>
{ !cvc ? placeholder.cvc : cvc }
</Text>
</ImageBackground>
</FlipCard>
</View>
);
}
Example #18
| Source File: HomePage.js From UltimateApp with MIT License | 5 votes |
|
Fitness = (props) => {
return (
<View style={styles.mainContainer}>
<TouchableHighlight
onPress={() => props.navigation.navigate('DrillListPage', { type: DrillTypes.FITNESS })}
style={styles.menuItem}
>
<ImageBackground source={leanfit} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.leanTitle')}</Text>
<Text style={styles.subtitle}>{I18n.t('homePage.leanSubtitle')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight
onPress={() =>
props.navigation.navigate('ProgramListPage', {
type: DrillTypes.FITNESS,
equipmentLabel: EquipmentLabels.NONE,
})
}
style={styles.menuItem}
>
<ImageBackground source={bodyweight} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.bodyweightTitle')}</Text>
<Text style={styles.subtitle}>{I18n.t('homePage.bodyweightSubtitle')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight
onPress={() =>
props.navigation.navigate('ProgramListPage', {
type: DrillTypes.FITNESS,
equipmentLabel: EquipmentLabels.FULL,
})
}
style={styles.menuItem}
>
<ImageBackground source={gymstrong} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.gymTitle')}</Text>
<Text style={styles.subtitle}>{I18n.t('homePage.gymSubtitle')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
</View>
);
}
Example #19
| Source File: HomePage.js From UltimateApp with MIT License | 5 votes |
|
Frisbee = (props) => {
return (
<View style={styles.mainContainer}>
<TouchableHighlight
onPress={() => props.navigation.navigate('DrillListPage', { type: DrillTypes.FRISBEE })}
style={styles.menuItem}
>
<ImageBackground source={frisbeeGlove} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.drills')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<View style={styles.containerGrow}>
<TouchableHighlight
onPress={() =>
props.navigation.navigate('ProgramListPage', { type: DrillTypes.FRISBEE, ageCategory: AgeCategory.JUNIOR })
}
style={styles.menuItemSplitLeft}
>
<ImageBackground source={juniorPrograms} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.junior')}</Text>
<Text style={styles.subtitle}>{I18n.t('homePage.programs')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
<TouchableHighlight
onPress={() =>
props.navigation.navigate('ProgramListPage', { type: DrillTypes.FRISBEE, ageCategory: AgeCategory.SENIOR })
}
style={styles.menuItemSplitRight}
>
<ImageBackground source={adultPrograms} style={styles.image}>
<View style={styles.wrapperRight}>
<Text style={styles.titleRight}>{I18n.t('homePage.adult')}</Text>
<Text style={styles.subtitleRight}>{I18n.t('homePage.programs')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
</View>
<TouchableHighlight onPress={() => props.navigation.navigate('PlaybookPage')} style={styles.menuItem}>
<ImageBackground source={ourPlays} style={styles.image}>
<View style={styles.wrapper}>
<Text style={styles.title}>{I18n.t('homePage.playbook')}</Text>
</View>
</ImageBackground>
</TouchableHighlight>
</View>
);
}
Example #20
| Source File: TacticsPage.js From UltimateApp with MIT License | 5 votes |
|
TacticsPage = (props) => {
// Default is second choice so that it is clear we use a picker on iOS
const [selectedIndex, setSelectedIndex] = useState(1);
const onImagePress = (item) => props.navigation.navigate('VideoPage', { video: item });
const renderContent = ({ item }) => {
return (
<TouchableOpacity onPress={() => onImagePress(item)}>
<View style={styles.itemContainer}>
<Text style={styles.title}>{item.title}</Text>
<ImageBackground source={{ uri: item.illustration }} style={styles.image}>
<View style={styles.timer}>
<Text style={styles.textTimer}>{item.time}</Text>
</View>
</ImageBackground>
<Text style={styles.author}>{item.text}</Text>
</View>
</TouchableOpacity>
);
};
return (
<View style={styles.tacticsPage}>
<View style={styles.pickerContainer}>
<Text style={styles.topic}>{I18n.t('tacticsPage.chooseTopic')}</Text>
<Picker
selectedValue={selectedIndex}
style={styles.picker}
itemStyle={styles.pickerItemStyle}
onValueChange={(itemValue, itemIndex) => {
setSelectedIndex(itemIndex);
}}
>
{props.tactics.map((topic, index) => (
<Picker.Item key={index} label={topic.title} value={index} />
))}
</Picker>
</View>
<FlatList
style={styles.tacticsList}
data={props.tactics[selectedIndex].pages}
keyExtractor={(item, index) => index.toString()}
renderItem={renderContent}
/>
</View>
);
}
Example #21
| Source File: EssentialPage.js From UltimateApp with MIT License | 5 votes |
|
EssentialPage = (props) => {
// Default is second choice so that it is clear we use a picker on iOS
const [selectedIndex, setSelectedIndex] = useState(1);
const onImagePress = (item) => props.navigation.navigate('VideoPage', { video: item });
const renderContent = ({ item }) => {
return (
<TouchableOpacity onPress={() => onImagePress(item)}>
<View style={styles.itemContainer}>
<Text style={styles.title}>{item.title}</Text>
<ImageBackground source={{ uri: item.illustration }} style={styles.image}>
<View style={styles.timer}>
<Text style={styles.textTimer}>{item.time}</Text>
</View>
</ImageBackground>
<Text style={styles.author}>{item.text}</Text>
</View>
</TouchableOpacity>
);
};
return (
<View style={styles.esssentialsPage}>
<View style={styles.pickerContainer}>
<Text style={styles.topic}>{I18n.t('essentialsPage.chooseTopic')}</Text>
<Picker
selectedValue={selectedIndex}
style={styles.picker}
itemStyle={styles.pickerItemStyle}
onValueChange={(itemValue, itemIndex) => {
setSelectedIndex(itemIndex);
}}
>
{props.essentials.map((topic, index) => (
<Picker.Item key={index} label={topic.title} value={index} />
))}
</Picker>
</View>
<FlatList
style={styles.essentialsList}
data={props.essentials[selectedIndex].pages}
keyExtractor={(item, index) => index.toString()}
renderItem={renderContent}
/>
</View>
);
}
Example #22
| Source File: Recording.js From CoughCheckApp with MIT License | 5 votes |
|
function Recording(props) {
return (
<View style={styles.root}>
<View style={styles.bitmapStack}>
<ImageBackground
source={require('../assets/images/2773e81beda80d5a10e86877554206a85147f3a0.png')}
resizeMode="cover"
style={styles.bitmap}
imageStyle={styles.bitmap_imageStyle}
>
<Image
source={require('../assets/images/aca2b4a65bf2f5707da6534147e3c39c26cf962e.png')}
resizeMode="cover"
style={styles.bitmap2}
></Image>
</ImageBackground>
<Text style={styles.title2}>Tap to record</Text>
<Text style={styles.title1}>Recording…</Text>
<Text style={styles.subheadline}>STOP</Text>
</View>
<View style={styles.statusBar}>
<View style={styles.endWrapperFiller}></View>
<View style={styles.cellularConnectionPathRow}>
<Svg
viewBox="-0 -0 17 10.66666666666667"
style={styles.cellularConnectionPath}
>
<Path
strokeWidth={0}
fill="rgba(255,255,255,1)"
fillOpacity={1}
strokeOpacity={1}
d="M1.00 6.67 L0.00 7.67 L0.00 9.67 L1.00 10.67 L2.00 10.67 L3.00 9.67 L3.00 7.67 L2.00 6.67 Z M4.67 5.67 L4.67 9.67 L5.67 10.67 L6.67 10.67 L7.67 9.67 L7.67 5.67 L6.67 4.67 L5.67 4.67 L4.67 5.67 Z M9.33 3.33 L9.33 9.67 L10.33 10.67 L11.33 10.67 L12.33 9.67 L12.33 3.33 L11.33 2.33 L10.33 2.33 L9.33 3.33 Z M15.00 0.00 L14.00 1.00 L14.00 9.67 L15.00 10.67 L16.00 10.67 L17.00 9.67 L17.00 1.00 L16.00 0.00 Z"
></Path>
</Svg>
<Svg viewBox="-0 -0 15.3333 11" style={styles.wifiPath}>
<Path
strokeWidth={0}
fill="rgba(255,255,255,1)"
fillOpacity={1}
strokeOpacity={1}
d="M7.67 2.28 C7.67 2.28 3.30 3.14 1.69 4.67 C1.57 4.79 1.25 4.67 1.25 4.67 L0.09 3.50 C0.09 3.50 -0.00 3.35 0.00 3.27 C0.00 3.18 0.04 3.10 0.10 3.04 C4.33 -1.01 11.00 -1.01 15.24 3.04 C15.30 3.10 15.33 3.18 15.33 3.27 C15.33 3.35 15.24 3.50 15.24 3.50 L14.08 4.67 C14.08 4.67 13.77 4.79 13.64 4.67 C12.03 3.14 7.67 2.28 7.67 2.28 Z M7.67 6.09 C7.67 6.09 5.27 6.55 4.36 7.37 C4.24 7.48 3.93 7.36 3.93 7.36 L2.77 6.19 C2.77 6.19 2.67 6.05 2.67 5.96 C2.67 5.87 2.71 5.79 2.77 5.73 C5.53 3.16 9.80 3.16 12.56 5.73 C12.63 5.79 12.66 5.87 12.66 5.96 C12.66 6.04 12.57 6.19 12.57 6.19 L11.41 7.36 C11.41 7.36 11.10 7.48 10.97 7.37 C10.07 6.55 7.67 6.09 7.67 6.09 Z M7.89 10.91 C7.89 10.91 7.75 11.00 7.67 11.00 C7.58 11.00 7.44 10.91 7.44 10.91 L5.44 8.89 C5.44 8.89 5.34 8.74 5.34 8.65 C5.35 8.57 5.38 8.48 5.45 8.43 C6.73 7.34 8.60 7.34 9.89 8.43 C9.95 8.48 9.99 8.57 9.99 8.65 C9.99 8.74 9.89 8.89 9.89 8.89 L7.89 10.91 Z"
></Path>
</Svg>
<View style={styles.battery}>
<View style={styles.borderRow}>
<View style={styles.border}>
<View style={styles.capacity}></View>
</View>
<Svg viewBox="-0 -0 1.328038005608352 4" style={styles.cap}>
<Path
strokeWidth={0}
fill="rgba(255,255,255,1)"
fillOpacity={0.4}
strokeOpacity={0.4}
d="M0.00 0.00 L0.00 4.00 C0.80 3.66 1.33 2.87 1.33 2.00 C1.33 1.13 0.80 0.34 0.00 0.00 "
></Path>
</Svg>
</View>
</View>
</View>
</View>
<Text style={styles.title21}>Cough in the microphone for 10 seconds.</Text>
<Image
source={require('../assets/images/b2b75a6c0faef80bcc48c943a9046b16225a1dd3.png')}
resizeMode="cover"
style={styles.bitmap1}
></Image>
</View>
)
}
Example #23
| Source File: DrillList.js From UltimateApp with MIT License | 5 votes |
|
DrillList = (props) => {
const { navigation, drillsToDisplay } = props;
const onDrillPress = props.onDrillPress || ((item) => navigation.navigate('DrillPage', { id: item.id }));
const renderDrill = ({ item }) => {
const { id, title, type, custom, image, goals, author } = item;
const onPressDeleteButton = () => {
showSuccess(I18n.t('drills.drillList.deleteSuccess', { title }));
props.deleteDrill(id);
};
const onPressEditButton = () => {
props.navigation.navigate('DrillEditorPage', { currentDrill: item });
};
const imageMainData = type === DrillTypes.FRISBEE ? 'minimalPlayersNumber' : 'durationInMinutes';
const imageMainDataLegend = type === DrillTypes.FRISBEE ? 'players' : 'min';
const customStyle = custom ? styles.custom : undefined;
const imageSource = custom && image === undefined ? customDrillsImage : { uri: image };
return (
<TouchableOpacity style={[styles.item, customStyle, props.ItemComponentStyle]} onPress={() => onDrillPress(item)}>
<ImageBackground source={imageSource} style={styles.image} imageStyle={styles.imageOpacity}>
<Text style={{ ...styles.imageText, ...styles.imageTextMain }}>{item[imageMainData]}</Text>
<Text style={styles.imageText}>{imageMainDataLegend}</Text>
</ImageBackground>
<View style={styles.itemContentContainer}>
<Text style={styles.source}>{author}</Text>
<Text numberOfLines={1} style={styles.title}>
{title}
</Text>
<Text style={styles.numberOfPlayers}>
{goals
.map((goal) =>
I18n.t(`data.fitnessGoals.${goal}`, { defaults: [{ scope: `data.frisbeeGoals.${goal}` }] }),
)
.join(', ')}
</Text>
</View>
{custom && (
<View style={styles.toolbar}>
<TouchableOpacity onPress={onPressEditButton} style={styles.toolbarItem} testID="editButton">
<Ionicons name="pencil" color={theme.MAIN_COLOR} size={22} />
</TouchableOpacity>
<TouchableOpacity onPress={onPressDeleteButton} style={styles.toolbarItem} testID="deleteButton">
<Ionicons name="trash-outline" color={theme.MAIN_COLOR} size={22} />
</TouchableOpacity>
</View>
)}
</TouchableOpacity>
);
};
return (
<FlatList
{...props}
data={drillsToDisplay}
keyExtractor={(item, index) => index.toString()}
renderItem={renderDrill}
contentContainerStyle={styles.contentContainer}
/>
);
}
Example #24
| Source File: ImageViewerScreen.js From filen-mobile with GNU Affero General Public License v3.0 | 4 votes |
|
ImageViewerScreen = memo(({ navigation, route }) => {
const screenDimensions = Dimensions.get("screen")
const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
const [lang, setLang] = useMMKVString("lang", storage)
const [imagePreviewModalItems, setImagePreviewModalItems] = useState(route.params.items || [])
const [imagePreviewModalIndex, setImagePreviewModalIndex] = useState(route.params.index || 0)
const setCurrentActionSheetItem = useStore(useCallback(state => state.setCurrentActionSheetItem))
const [images, setImages] = useState({})
const [currentName, setCurrentName] = useState("")
const [isZooming, setIsZooming] = useState(false)
const [isSwiping, setIsSwiping] = useState(false)
const zoomLevel = useRef(minZoom)
const thumbnailListRef = useRef()
const listRef = useRef()
const [currentIndex, setCurrentIndex] = useState(imagePreviewModalIndex)
const [showControls, setShowControls] = useState(true)
const insets = useSafeAreaInsets()
const viewRefs = useRef({}).current
const isMounted = useMountedState()
const tapCount = useRef(0)
const tapTimer = useRef(undefined)
const [portrait, setPortrait] = useState(screenDimensions.height >= screenDimensions.width)
const didNavBack = useRef(false)
const currentImagePreviewDownloads = useRef({}).current
const setListScrollAgain = useRef(false)
const imageActionsContainerHeight = new Animated.Value(120)
const imageActionsVisible = useRef(false)
const loadImage = useCallback((image, index) => {
if(!isMounted()){
return false
}
zoomLevel.current = minZoom
setCurrentName(image.file.name)
setCurrentActionSheetItem(image.file)
setCurrentIndex(index)
thumbnailListRef?.current?.scrollToIndex({
animated: true,
index,
viewPosition: 0.5
})
if(setListScrollAgain.current){
setListScrollAgain.current = false
listRef?.current?.scrollToIndex({
animated: false,
index
})
}
const currentImages = {...images}
if(typeof currentImages[image.uuid] == "string"){
return false
}
if(typeof currentImagePreviewDownloads[image.uuid] !== "undefined"){
return false
}
currentImagePreviewDownloads[image.uuid] = true
downloadWholeFileFSStream({
file: image.file
}).then((path) => {
delete currentImagePreviewDownloads[image.uuid]
if(!isMounted()){
return false
}
generateItemThumbnail({
item: image.file,
skipInViewCheck: true,
callback: (err, thumbPath) => {
if(!isMounted()){
return false
}
if(!err && typeof thumbPath == "string"){
updateItemThumbnail(image.file, thumbPath)
}
return setImages(prev => ({
...prev,
[image.uuid]: path
}))
}
})
}).catch((err) => {
delete currentImagePreviewDownloads[image.uuid]
console.log(err)
return showToast({ message: err.toString() })
})
})
const onViewableItemsChangedRef = useRef(useCallback(({ viewableItems }) => {
const indexItem = viewableItems[viewableItems.length - 1]
if(typeof indexItem !== "object"){
return false
}
if(typeof indexItem.item !== "object"){
return false
}
loadImage(indexItem.item, indexItem.index)
}))
const updateItemThumbnail = useCallback((item, path) => {
if(typeof path !== "string"){
return false
}
if(path.length < 4){
return false
}
if(isMounted()){
setImagePreviewModalItems(prev => [...prev.map(mapItem => mapItem.file.uuid == item.uuid && typeof mapItem.thumbnail == "undefined" ? {...mapItem, thumbnail: item.uuid + ".jpg" } : mapItem)])
}
})
const viewabilityConfigRef = useRef({
minimumViewTime: 0,
viewAreaCoveragePercentThreshold: 95,
viewAreaCoveragePercentThreshold: 95,
waitForInteraction: false
})
useEffect(() => {
if(!isMounted()){
return false
}
setShowControls(isZooming)
}, [isZooming])
useEffect(() => {
if(imagePreviewModalItems.length == 0){
return navigation.goBack()
}
if(Platform.OS == "ios"){
setStatusBarStyle(true)
}
if(Platform.OS == "android"){
hideNavigationBar()
StatusBar.setHidden(true)
}
if(typeof imagePreviewModalItems[imagePreviewModalIndex] !== "undefined"){
setTimeout(() => {
loadImage(imagePreviewModalItems[imagePreviewModalIndex], imagePreviewModalIndex)
}, 50)
}
const dimensionsListener = Dimensions.addEventListener("change", ({ screen }) => {
if(!isMounted()){
return false
}
setPortrait(screen.height >= screen.width)
})
return () => {
dimensionsListener.remove()
if(Platform.OS == "ios"){
setStatusBarStyle(darkMode)
setTimeout(() => setStatusBarStyle(darkMode), 500)
setTimeout(() => setStatusBarStyle(darkMode), 1000)
}
if(Platform.OS == "android"){
showNavigationBar()
StatusBar.setHidden(false)
}
}
}, [])
const renderImage = useCallback((item, index) => {
const image = item
if(typeof image.thumbnail !== "string"){
return (
<View
key={image.uuid}
style={{
width: screenDimensions.width,
height: screenDimensions.height
}}
>
<ActivityIndicator size={"small"} color={"white"} style={{
margin: "auto",
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}} />
</View>
)
}
return (
<ReactNativeZoomableView
key={image.uuid}
ref={(ref) => viewRefs[image.uuid] = ref}
maxZoom={3}
minZoom={minZoom}
zoomStep={2}
initialZoom={minZoom}
bindToBorders={true}
contentWidth={screenDimensions.width}
contentHeight={screenDimensions.height}
style={{
width: screenDimensions.width,
height: screenDimensions.height
}}
onZoomBefore={(e, state, view) => {
setIsZooming(view.zoomLevel > 1)
zoomLevel.current = view.zoomLevel
}}
onZoomAfter={(e, state, view) => {
setIsZooming(view.zoomLevel > 1)
zoomLevel.current = view.zoomLevel
if(view.zoomLevel <= 1.05){
listRef?.current?.scrollToIndex({
animated: false,
index
})
thumbnailListRef?.current?.scrollToIndex({
animated: false,
index,
viewPosition: 0.5
})
}
}}
onShiftingBefore={(e, state, view) => {
setIsZooming(view.zoomLevel > 1)
zoomLevel.current = view.zoomLevel
}}
onShiftingAfter={(e, state, view) => {
setIsZooming(view.zoomLevel > 1)
if((view.distanceTop >= 50 || view.distanceBottom >= 50) && !didNavBack.current && zoomLevel.current <= 1 && !isSwiping && !isZooming){
didNavBack.current = true
navigation.goBack()
return true
}
zoomLevel.current = view.zoomLevel
}}
captureEvent={true}
>
<Pressable
onPress={() => {
if(isSwiping){
return false
}
tapCount.current += 1
if(tapCount.current >= 2){
if(zoomLevel.current >= 1.01){
viewRefs[image.uuid]?.zoomTo(1)
zoomLevel.current = 1
setIsZooming(false)
}
else{
viewRefs[image.uuid]?.zoomTo(2)
zoomLevel.current = 2
setIsZooming(true)
}
tapCount.current = 0
return clearTimeout(tapTimer.current)
}
clearTimeout(tapTimer.current)
tapTimer.current = setTimeout(() => {
if(tapCount.current >= 2){
if(zoomLevel.current >= 2){
viewRefs[image.uuid]?.zoomTo(1)
zoomLevel.current = 1
setIsZooming(false)
}
else{
viewRefs[image.uuid]?.zoomTo(2)
zoomLevel.current = 2
setIsZooming(true)
}
}
else{
setShowControls(prev => !prev)
}
tapCount.current = 0
}, 300)
}}
>
<>
<ImageBackground
source={{
uri: decodeURIComponent("file://" + THUMBNAIL_BASE_PATH + image.thumbnail)
}}
resizeMode="contain"
style={{
width: screenDimensions.width,
height: screenDimensions.height
}}
>
{
typeof images[image.uuid] == "string" && (
<Image
source={{
uri: decodeURIComponent(images[image.uuid].startsWith("file://") ? images[image.uuid] : "file://" + images[image.uuid])
}}
resizeMode="contain"
style={{
width: screenDimensions.width,
height: screenDimensions.height
}}
/>
)
}
</ImageBackground>
{
typeof images[image.uuid] !== "string" && (
<ActivityIndicator size={"small"} color={"white"} style={{
margin: "auto",
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}} />
)
}
</>
</Pressable>
</ReactNativeZoomableView>
)
})
const renderThumb = useCallback((item, index) => {
const image = item
return (
<View
style={{
width: 30,
height: 50
}}
>
<TouchableOpacity
key={image.uuid}
style={{
width: 30,
height: 50,
backgroundColor: "transparent",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center"
}}
onPress={async () => {
try{
await viewRefs[imagePreviewModalItems[currentIndex].uuid]?.zoomTo(1)
}
catch(e){
console.log(e)
}
setListScrollAgain.current = true
thumbnailListRef?.current?.scrollToIndex({
animated: false,
index,
viewPosition: 0.5
})
listRef?.current?.scrollToOffset({
animated: false,
offset: screenDimensions.width * index + 1
})
loadImage(imagePreviewModalItems[index], index)
}}
>
{
typeof image.thumbnail !== "string" ? (
<Image
source={getImageForItem(image.file)}
resizeMode="cover"
style={{
width: 25,
height: 35,
marginTop: 2.5,
marginLeft: 2.5
}}
/>
) : (
<Image
source={{
uri: decodeURIComponent("file://" + THUMBNAIL_BASE_PATH + image.thumbnail)
}}
resizeMode="cover"
style={{
width: 30,
height: 40
}}
/>
)
}
<View style={{
backgroundColor: currentIndex == index ? "gray" : "transparent",
width: 15,
height: 5,
borderRadius: 20
}}></View>
</TouchableOpacity>
</View>
)
})
return (
<View style={{
backgroundColor: "black",
height: screenDimensions.height,
width: screenDimensions.width,
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}}>
<View style={{
opacity: showControls ? 0 : 1,
flexDirection: "row",
height: "auto",
width: screenDimensions.width,
justifyContent: "space-between",
alignItems: "center",
position: "absolute",
top: 0,
zIndex: showControls ? 0 : 1000,
backgroundColor: "rgba(0, 0, 0, 0.6)",
paddingLeft: 10,
paddingRight: 15,
paddingTop: Platform.OS == "android" ? (insets.top + 5) : ((!portrait ? 10 : insets.top) + 5),
paddingBottom: 10,
marginTop: 0
}}>
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center"
}}>
<TouchableOpacity style={{
marginTop: Platform.OS == "android" ? 1 : 0,
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center"
}} hitSlop={{
top: 10,
left: 10,
bottom: 10,
right: 10
}} onPress={() => {
navigationAnimation({ enable: true }).then(() => {
navigation.goBack()
})
}}>
<Ionicon name="chevron-back" size={24} color={"white"}></Ionicon>
</TouchableOpacity>
<Text numberOfLines={1} style={{
color: "white",
width: "93%",
fontSize: 17,
paddingLeft: 10,
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
fontWeight: "bold"
}}>
{currentName}
</Text>
</View>
<View style={{
display: "none"
}}>
<TouchableOpacity style={{
marginTop: Platform.OS == "android" ? 1 : 0
}} hitSlop={{
top: 10,
left: 10,
bottom: 10,
right: 10
}} onPress={() => {
imageActionsVisible.current = !imageActionsVisible.current
Animated.timing( // Animate over time
imageActionsContainerHeight, // The animated value to drive, this would be a new Animated.Value(0) object.
{
toValue: imageActionsVisible.current ? 300 : 120, // Animate the value
duration: 100, // Make it take a while
useNativeDriver: false
}
).start()
}}>
<Ionicon name="ellipsis-horizontal-sharp" size={24} color={"white"}></Ionicon>
</TouchableOpacity>
</View>
</View>
<FlatList
style={{
position: "absolute",
width: screenDimensions.width,
height: screenDimensions.height,
zIndex: 10
}}
ref={listRef}
data={imagePreviewModalItems}
initialScrollIndex={currentIndex}
renderItem={({ item, index }) => {
return renderImage(item, index)
}}
key={portrait ? "portrait" : "landscape"}
extraData={portrait ? "portrait" : "landscape"}
keyExtractor={(item, index) => item.uuid}
windowSize={3}
initialNumToRender={1}
horizontal={true}
bounces={true}
getItemLayout={(data, index) => ({ length: screenDimensions.width, offset: screenDimensions.width * index, index })}
scrollEnabled={!isZooming}
pagingEnabled={true}
onViewableItemsChanged={onViewableItemsChangedRef?.current}
viewabilityConfig={viewabilityConfigRef?.current}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
onScrollBeginDrag={() => setIsSwiping(true)}
onScrollEndDrag={() => setIsSwiping(false)}
removeClippedSubviews={false}
/>
<Animated.View
style={{
position: "absolute",
bottom: -30,
width: screenDimensions.width,
height: imageActionsContainerHeight,
zIndex: showControls ? 0 : 10000,
backgroundColor: "rgba(0, 0, 0, 1)",
paddingTop: 1,
paddingBottom: insets.bottom + insets.top,
opacity: showControls ? 0 : 1,
paddingBottom: insets.bottom
}}
>
<FlatList
style={{
position: "absolute",
width: screenDimensions.width,
height: 120,
paddingTop: 3
}}
ref={thumbnailListRef}
data={imagePreviewModalItems}
renderItem={({ item, index }) => {
return renderThumb(item, index)
}}
getItemLayout={(data, index) => ({ length: 30, offset: 30 * index, index })}
keyExtractor={(item, index) => item.uuid}
horizontal={true}
scrollEnabled={true}
bounces={false}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
removeClippedSubviews={false}
/>
<View style={{
marginTop: 60,
borderTopColor: "gray",
borderTopWidth: 1,
opacity: 0
}}>
<View style={{
width: "100%",
height: 45,
flexDirection: "row",
justifyContent: "space-between",
borderBottomColor: "gray",
borderBottomWidth: 1,
paddingLeft: 15,
paddingRight: 15
}}>
<Text style={{
color: "white",
paddingTop: 12
}}>
{i18n(lang, "publicLinkEnabled")}
</Text>
<View style={{
paddingTop: Platform.OS == "ios" ? 6 : 8
}}>
</View>
</View>
</View>
</Animated.View>
</View>
)
})
Example #25
| Source File: HomeScreen.js From CoughCheckApp with MIT License | 4 votes |
|
function HomeScreen(props) {
return (
<View style={styles.root}>
<View style={styles.bitmapStack}>
<ImageBackground
source={require('../assets/images/2773e81beda80d5a10e86877554206a85147f3a0.png')}
resizeMode="cover"
style={styles.bitmap}
imageStyle={styles.bitmap_imageStyle}
>
<Image
source={require('../assets/images/9db888760ab15a8676051b8b1004058becfb5fac.png')}
resizeMode="cover"
style={styles.bitmap3}
></Image>
</ImageBackground>
<Text style={styles.title1}>Tap to record</Text>
</View>
<View style={styles.bitmap2Row}>
<Image
source={require('../assets/images/f2fd17b19466647755d7bdb582e866b57a90f0a0.png')}
resizeMode="cover"
style={styles.bitmap2}
></Image>
<Image
source={require('../assets/images/151dac7481162200b68d6235711730bd0cc63851.png')}
resizeMode="cover"
style={styles.bitmap1}
></Image>
</View>
<Text style={styles.title2}>Tap to record</Text>
<Text style={styles.body}>Cough, record, save lives.</Text>
<View style={styles.statusBar}>
<View style={styles.endWrapperFiller}></View>
<View style={styles.cellularConnectionPathRow}>
<Svg
viewBox="-0 -0 17 10.66666666666667"
style={styles.cellularConnectionPath}
>
<Path
strokeWidth={0}
fill="rgba(0,0,0,1)"
fillOpacity={1}
strokeOpacity={1}
d="M1.00 6.67 L0.00 7.67 L0.00 9.67 L1.00 10.67 L2.00 10.67 L3.00 9.67 L3.00 7.67 L2.00 6.67 Z M4.67 5.67 L4.67 9.67 L5.67 10.67 L6.67 10.67 L7.67 9.67 L7.67 5.67 L6.67 4.67 L5.67 4.67 L4.67 5.67 Z M9.33 3.33 L9.33 9.67 L10.33 10.67 L11.33 10.67 L12.33 9.67 L12.33 3.33 L11.33 2.33 L10.33 2.33 L9.33 3.33 Z M15.00 0.00 L14.00 1.00 L14.00 9.67 L15.00 10.67 L16.00 10.67 L17.00 9.67 L17.00 1.00 L16.00 0.00 Z"
></Path>
</Svg>
<Svg viewBox="-0 -0 15.3333 11" style={styles.wifiPath}>
<Path
strokeWidth={0}
fill="rgba(0,0,0,1)"
fillOpacity={1}
strokeOpacity={1}
d="M7.67 2.28 C7.67 2.28 3.30 3.14 1.69 4.67 C1.57 4.79 1.25 4.67 1.25 4.67 L0.09 3.50 C0.09 3.50 -0.00 3.35 0.00 3.27 C0.00 3.18 0.04 3.10 0.10 3.04 C4.33 -1.01 11.00 -1.01 15.24 3.04 C15.30 3.10 15.33 3.18 15.33 3.27 C15.33 3.35 15.24 3.50 15.24 3.50 L14.08 4.67 C14.08 4.67 13.77 4.79 13.64 4.67 C12.03 3.14 7.67 2.28 7.67 2.28 Z M7.67 6.09 C7.67 6.09 5.27 6.55 4.36 7.37 C4.24 7.48 3.93 7.36 3.93 7.36 L2.77 6.19 C2.77 6.19 2.67 6.05 2.67 5.96 C2.67 5.87 2.71 5.79 2.77 5.73 C5.53 3.16 9.80 3.16 12.56 5.73 C12.63 5.79 12.66 5.87 12.66 5.96 C12.66 6.04 12.57 6.19 12.57 6.19 L11.41 7.36 C11.41 7.36 11.10 7.48 10.97 7.37 C10.07 6.55 7.67 6.09 7.67 6.09 Z M7.89 10.91 C7.89 10.91 7.75 11.00 7.67 11.00 C7.58 11.00 7.44 10.91 7.44 10.91 L5.44 8.89 C5.44 8.89 5.34 8.74 5.34 8.65 C5.35 8.57 5.38 8.48 5.45 8.43 C6.73 7.34 8.60 7.34 9.89 8.43 C9.95 8.48 9.99 8.57 9.99 8.65 C9.99 8.74 9.89 8.89 9.89 8.89 L7.89 10.91 Z"
></Path>
</Svg>
<View style={styles.battery}>
<View style={styles.borderRow}>
<View style={styles.border}>
<View style={styles.capacity}></View>
</View>
<Svg viewBox="-0 -0 1.328038005608352 4" style={styles.cap}>
<Path
strokeWidth={0}
fill="rgba(0,0,0,1)"
fillOpacity={0.4}
strokeOpacity={0.4}
d="M0.00 0.00 L0.00 4.00 C0.80 3.66 1.33 2.87 1.33 2.00 C1.33 1.13 0.80 0.34 0.00 0.00 "
></Path>
</Svg>
</View>
</View>
</View>
</View>
<Text style={styles.headline}>People have contribuited so far</Text>
<Text style={styles.title11}>471,218</Text>
<Text style={styles.subheadline}>Help us reach 528,782 more people</Text>
<View style={styles.rectangle}>
<Text style={styles.title3}>Share</Text>
</View>
<View style={styles.line2Stack}>
<Svg viewBox="-1 -1 332 5" style={styles.line2}>
<Path
strokeWidth={2}
fill="transparent"
stroke="rgba(207,216,220,1)"
fillOpacity={1}
strokeOpacity={1}
d="M1.50 1.50 L328.50 1.50 "
></Path>
</Svg>
<Svg viewBox="-3.5 -3.5 134 15" style={styles.lineCopy}>
<Path
strokeWidth={7}
fill="transparent"
stroke="rgba(18,111,238,1)"
fillOpacity={1}
strokeOpacity={1}
d="M4.00 4.00 L123.00 4.00 "
></Path>
</Svg>
</View>
<Text style={styles.footnote}>Help us defeat COVID-19</Text>
</View>
)
}
Example #26
| Source File: TicketsListing.js From expo-ticket-app with MIT License | 4 votes |
|
TicketsListing = ({ member, loading, reFetch }) => (
<Container>
<ImageBackground
source={require('../../../images/Tickets/no-tickets.png')}
imageStyle={{
resizeMode: 'stretch',
height: 650,
}}
style={{
width: '100%',
flex: 1,
backgroundColor: commonColor.backgroundColor,
}}>
<StatusBar style="light"/>
<TextI18n style={{ fontSize: 30, margin: 50, marginBottom: 10, marginLeft: 10 }}>
tickets.title
</TextI18n>
<Content padder refreshControl={(
<RefreshControl
refreshing={loading}
onRefresh={reFetch}
title="Pull to refresh"
tintColor="#fff"
titleColor="#fff"
colors={["#000", "#fff", "#000"]}
/>
)}>
{(member && member.tickets && member.tickets.length)
? (<View>
<Spacer size={30}/>
<FlatList
data={member.tickets}
renderItem={({ item, index }) =>
(<TouchableOpacity disabled={item.scanned === true}
onPress={() => Actions.ticketView({ ticket: item })}
style={{ flex: 1, paddingBottom: 12 }}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: commonColor.backgroundColor,
borderRadius: 10,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
marginLeft: 10,
marginRight: 10,
opacity: item.scanned === true ? 0.6 : 1,
zIndex: 1,
}}>
{item.scanned === true && <View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
zIndex: 10,
}}>
<TextI18n style={{
color: '#fff',
fontSize: 25,
fontFamily: 'Montserrat_Bold',
}}>
tickets.scanned
</TextI18n>
</View>}
<View style={{
borderColor: '#FFE5EC',
borderRadius: 100,
borderWidth: 7,
backgroundColor: '#FFE5EC',
margin: 10,
marginRight: 10,
}}>
<Icon
name="ticket"
type="MaterialCommunityIcons"
style={{ color: commonColor.brandStyle, fontSize: 30 }}
/>
</View>
<View style={{ flex: 1, padding: 5, marginRight: 5 }}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<TextH2t style={{ fontSize: 15 }}>
{item.title ? (item.title.length > 22) ? ((item.title.substring(0, 22 - 3)) + '...') : item.title : ''}
</TextH2t>
<TextH2t style={{ fontSize: 13 }}>
{item.date ? item.date : ''}
</TextH2t>
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}>
<View style={{ flexDirection: 'row' }}>
<Icon type="FontAwesome5" name="music"
style={{ fontSize: 16, color: '#b3b5bb', paddingRight: 5 }}/>
<TextH2t style={{ color: '#b3b5bb', fontSize: 13 }}>Techno</TextH2t>
</View>
<TextH2t style={{ color: '#b3b5bb', fontSize: 13 }}>
{item.hour ? item.hour : ''}
</TextH2t>
</View>
</View>
</View>
</TouchableOpacity>)}
keyExtractor={(index) => {return index.uuid;}}
/>
</View>) : (
<View>
<Spacer size={100}/>
<TextI18n style={{ fontSize: 30, textAlign: 'center', fontFamily: 'Montserrat_Bold' }}>
tickets.noTickets
</TextI18n>
<TextI18n style={{ fontSize: 15, textAlign: 'center' }}>
tickets.noTicketsInfo
</TextI18n>
</View>
)}
<Spacer size={20}/>
</Content>
</ImageBackground>
</Container>
)
Example #27
| Source File: index.js From InstagramClone with MIT License | 4 votes |
|
StoryScreen = () => {
const [stories, setStories] = useState([]);
const [activeStoryIndex, setActiveStoryIndex] = useState(null);
const route = useRoute();
useEffect(() => {
fetchStories();
setActiveStoryIndex(0);
}, []);
const fetchStories = async () => {
try {
const storiesData = await API.graphql(graphqlOperation(listStorys));
console.log(storiesData);
setStories(storiesData.data.listStorys.items);
} catch (e) {
console.log('error fetching stories');
console.log(e)
}
}
const handleNextStory = () => {
if (activeStoryIndex >= stories.length - 1) {
return;
}
setActiveStoryIndex(activeStoryIndex + 1);
}
const handlePrevStory = () => {
if (activeStoryIndex <= 0) {
return;
}
setActiveStoryIndex(activeStoryIndex - 1);
}
const handlePress = (evt) => {
const x = evt.nativeEvent.locationX;
const screenWidth = Dimensions.get('window').width;
if (x < screenWidth / 2) {
handlePrevStory();
} else {
handleNextStory();
}
}
if (!stories || stories.length === 0) {
return (
<SafeAreaView>
<ActivityIndicator />
</SafeAreaView>
)
}
const activeStory = stories[activeStoryIndex];
return (
<SafeAreaView style={styles.container}>
<TouchableWithoutFeedback onPress={handlePress}>
<ImageBackground source={{uri: activeStory.image}} style={styles.image}>
<View style={styles.userInfo}>
<ProfilePicture uri={activeStory.user.image} size={50} />
<Text style={styles.userName}>{activeStory.user.name}</Text>
<Text style={styles.postedTime}>{activeStory.createdAt}</Text>
</View>
<View style={styles.bottomContainer}>
<View style={styles.cameraButton}>
<Feather name="camera" size={30} color={'#ffffff'} />
</View>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
editable
placeholder="Send message"
placeholderTextColor={"white"}
/>
</View>
<View style={styles.messageButton}>
<Ionicons name="paper-plane-outline" size={35} color={"#ffffff"}/>
</View>
</View>
</ImageBackground>
</TouchableWithoutFeedback>
</SafeAreaView>
)
}
Example #28
| Source File: Template.js From stayaway-app with European Union Public License 1.2 | 4 votes |
|
export default function Template (props) {
const {
header,
description,
image,
panelBackgroundColor,
panelTextColor,
lastSync,
onPressSettings,
onLongPressSettings,
onPressShare,
error,
infectionStatus,
} = props;
const showUpdatedAt = infectionStatus !== INFECTION_STATUS.INFECTED;
const hasUpdated = lastSync !== 0;
const insets = useSafeAreaInsets();
const { name, colors } = useTheme();
const memoizedStyle = useMemo(() => styles(colors, insets), [name, insets]);
return (
<TopComponent>
<View style={memoizedStyle.settingsButtonContainer} pointerEvents='box-none'>
<ButtonWrapper
onPress={onPressSettings}
onLongPress={onLongPressSettings}
style={memoizedStyle.settingsButton}
accessibilityLabel={i18n.translate('screens.home.actions.settings.accessibility.label')}
accessibilityHint={i18n.translate('screens.home.actions.settings.accessibility.hint')}
>
<Icon name='settings' width={iconSizes.size32} height={iconSizes.size32} />
</ButtonWrapper>
<ButtonWrapper
onPress={onPressShare}
style={memoizedStyle.shareButton}
accessibilityLabel={i18n.translate('screens.home.actions.share.accessibility.label')}
accessibilityHint={i18n.translate('screens.home.actions.share.accessibility.hint')}
>
<Icon
name='share'
width={iconSizes.size20}
height={iconSizes.size20}
/>
</ButtonWrapper>
</View>
{ error.status && renderError(error, colors, memoizedStyle) }
<View style={memoizedStyle.homeContainer}>
<ImageBackground
testID="home_image_background"
source={image}
style={memoizedStyle.imageContainer}
/>
<Layout
padding='horizontal'
style={memoizedStyle.contentContainer}
>
<View style={memoizedStyle.header}>
<View>
<View
style={{
...memoizedStyle.backgroundPanel,
backgroundColor: panelBackgroundColor,
}}
/>
<View style={memoizedStyle.panel}>
<View style={memoizedStyle.panelContainer}>
<Text size='xlarge' weight='bold' textColor={panelTextColor}>{header}</Text>
</View>
</View>
</View>
<View style={memoizedStyle.supportContainer}>
{ showUpdatedAt && hasUpdated &&
<SupportIcon
label={i18n.translate('screens.home.last_updated')}
content={lastSync.format('L')}
borderColor={panelBackgroundColor}
/>
}
{ showUpdatedAt && !hasUpdated &&
<SupportIcon
content={i18n.translate('screens.home.never_updated')}
borderColor={panelBackgroundColor}
/>
}
{ ! showUpdatedAt &&
<SupportIcon />
}
</View>
</View>
<Text style={memoizedStyle.descriptionsContent}>
{description}
</Text>
</Layout>
</View>
</TopComponent>
);
}
Example #29
| Source File: index.js From atendimento-e-agilidade-medica-AAMed with MIT License | 4 votes |
|
Login = () => {
const [showPass, setShowPass] = useState(true);
const [press, setPress] = useState(false);
const [errorMsg, setErrorMsg] = useState(false);
const navigation = useNavigation();
const [auth, { login }] = useAuth();
const formik = useFormik({
initialValues: {
cpf: '',
password: '',
},
onSubmit: async values => {
try {
const response = await api.post('/login/user', values);
login(response.data);
console.log(response.data); //debug
} catch (error) {
// Error
if (error.response) {
setErrorMsg(error.response.data.error);
console.log(error.response.data);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error', error.message);
}
// setErrorMsg(error.message); // depois vejo isso
console.log('Erro fora dos ifs ', error); // depois de 2min que vai aparecer
}
},
});
function toggleShowPass() {
if (!press) {
setShowPass(false);
setPress(true);
} else {
setShowPass(true);
setPress(false);
}
}
navigation.setOptions({
headerRight: () => (
<Button
onPress={() => navigation.navigate('SignUp')}
title="Cadastre-se"
color="#0277BD"
/>
),
headerRightContainerStyle: {
padding: 15,
},
title: 'Bem-Vindo',
});
return (
<SafeAreaView style={{ flex: 1 }}>
<ImageBackground source={screen} style={{ flex: 1 }}>
<KeyboardAvoidingView
keyboardVerticalOffset={0}
enabled={false}
behavior="padding"
style={{ flex: 1 }}
>
<ImageContainer>
<Image source={logo} resizeMode="contain" />
</ImageContainer>
{!!errorMsg && <ErrorText>{errorMsg}</ErrorText>}
<LoginBox>
<InputBox>
{/* <Icon name="user" /> */}
<Label>CPF</Label>
<InputMask
name="cpf"
type={'cpf'}
placeholder="000.000.000-00"
placeholderTextColor="#00000066"
returnKeyType="next"
selectionColor="#006bad66"
value={formik.values.cpf}
onChangeText={formik.handleChange('cpf')}
/>
</InputBox>
<InputBox>
{/* <Icon name="lock" /> */}
<Label>Senha</Label>
<Input
name="password"
secureTextEntry={showPass}
placeholder="************"
placeholderTextColor="#00000066"
returnKeyType="done"
selectionColor="#006bad66"
value={formik.values.password}
onChangeText={formik.handleChange('password')}
/>
<TouchEye onPress={toggleShowPass}>
<IconEye name={press ? 'eye-off-outline' : 'eye-outline'} />
</TouchEye>
</InputBox>
<MainButton
onPress={formik.handleSubmit}
flag={formik.isSubmitting}
label={'ENTRAR'}
>
<ActivityIndicator size="small" color="#FFF" />
</MainButton>
<Option
onPress={() => {
navigation.navigate('ForgotPassword');
}}
>
Esqueceu a senha?
</Option>
</LoginBox>
</KeyboardAvoidingView>
</ImageBackground>
</SafeAreaView>
);
}
